Skip to main content

Vincent Tsao's Library tagged infoq →  View Popular

24 Jun 09

InfoQ: 使用HTML5构建下一代的Web Form

    • 新的控件类型
      • 还在为类型检查犯愁吗，还在为那一长串看不太明白的检验输入的正则表达式而苦恼吗，HTML5提供的一系列新的控件将天然的具备类型检查的功能。比如说URL输入框，Email输入框等。

        <input type="url"></input>
        <input type="email"></input>

      • 当然还有非常重要的日期输入框，要知道使用JavaScript和CSS来“手工”制作一个日期输入框还是非常花功夫的，类似Dojo，YUI这样的类库也无不在这个widget上面大做文章。

        <input type="date"></input>

      • 作为我痛苦记忆的一部分，我经常记得我们开发人员要为一个select下拉别表动态的添加非常多的选项,这些选项大多数都是来自数据库，比如说国家、省市列表等等。这个事情非常繁琐。HTML5将支持data属性，为select控件外联数据源！

        <select data="http://domain/getmyoptions"></select>

      • 改进的文件上传控件，你可以使用一个控件上传多个文件，自行规定上传文件的类型（accept），你甚至可以设定每个文件最大的大小（maxlength）。你看出它和一般操作系统提供的文件上传控件的区别了吗，反正我觉得基本一致了。在HTML5应用中，文件上传控件将变得非常强大和易用。
      • 重复（repeat）的模型，HTML5提供一套重复机制来帮助我们构建一些重复输入列表，其中包括一些诸如add、remove、move-up，move-down的按钮类型，通过这一套重复的机制，开发人员可以非常方便的实现我们经常看到的编辑列表，这是一个很常见的模式，我们可以增加一个条目、删除某个条目、或者移动某个条目等等。
      • 内建的表单校验系统，HTML5为不同类型的输入控件各自提供了新的属性，来控制这些控件的输入行为，比如我们常见的必填项required属性，以及为数字类型控件提供的max、min等。 而在你提交表单的时候，一旦校验错误，浏览器将不执行提交操作，而会显示相应的检验错误信息。
        <input type="text" required></input>
        <input type="number" min=10  max=100></input>

      • XML Submission，我们一般常见的是form的编码格式是application/x-www-form-urlencoded。开发人员都很清楚这种格式，数据送到服务器端，可以方便的存取。HTML5将提供一种新的数据格式：XML Submission，即application/x-www-form+xml。简单的举例说，服务器端将直接接收到XML形式的表单数据。

        <submission>
            <field name="name" index="0">Peter</field>
            <field name="password" index="0">password</field>
        </submission>
  • <! doctype html>
    <html>
    <head>
    <style>
    p label {
    width: 180px;
    float: left;
    text-align: right;
    padding-right: 10px
    }
    table {
    margin-left: 80px
    }
    table td {
    border-bottom: 1px solid #CCCCCC
    }
    input.submit {
    margin-left: 80px
    }
    </style>
    </head>
    <body>
    <form action='/register' enctype="application/x-www-form+xml" method="post">
    <p>
    <label for='name'>ID(请使用Email注册)</label>
    <input name='name' required type='email'></input>
    </p>
    <p>
    <label for='password'>密码</label>
    <input name='password' required type='password'></input>
    </p>
    <p>
    <label for='birthday'>出生日期</label>
    <input type='date' name='birthday' />
    </p>
    <p>
    <label for='gender'>国籍</label>
    <select name='country' data='countries.xml'></select>
    </p>
    <p>
    <label for='photo'>个性头像</label>
    <input type='file' name='photo' accept='image/*' />
    </p>
    <table>
    <thead>
    <td><button type="add" template="questionId">+</button> 保密问题</td>
    <td>答案</td>
    <td></td>
    </thead>
    <tr id="questionId" repeat="template" repeat-start="1" repeat-min="1" repeat-max="3">
    <td><input type="text" name="questions[questionId].q"></td>
    <td><input type="text" name="questions[questionId].a"></td>
    <td><button type="remove">删除</button></td>
    </tr>
    </table>
    <p>
    <input type='submit' value='send' class='submit' />
    </p>
    </form>
    </body>
    </html>
  • 3 more annotations...
09 Sep 08

InfoQ: Rails综合报道：Rails 2.2将会是线程安全的，Rails Edge支持ETags

  • 本质上，其意味着去掉每个输入的请求所添加的较为粗糙的锁，取而代之的是为需要在线程间共享的资源加上更为精细的锁。采用的方法如，日志子系统中的数据结 构要么修改成不在线程间共享，要么需要设计恰当的锁机制以保证两个线程之间不会发生交互，不会影响彼此的数据结构或发生冲突。对于一个数据库实例我们不是 分别建立其单独的数据库连接，而是使用连接池，这样使得 N 个数据库连接可以供 M 个并发请求使用。这同时意味着潜在的包含执行数据库操作的请求不需要耗费一个连接，因此活动的连接数目通常少于可以并发处理的请求个数。
04 Mar 08

InfoQ: Thin：更快的Ruby Web服务器

05 Dec 07

InfoQ: 企业开发期待的Ruby支持

  • 企业应用的开发者还有什么需要现在无法得到满足？基于这个问题让我们再来看看Ruby所能提供的价值，进而再来讨论支持复杂的企业应用所需要的架构。
  • MS作为一个API标准的出现，使得一些基于Java的解决方案产生出来，其中既有免费的也有商业的，使很多软件组件集成到企业网络中的步伐慢下来。另一个主要的问题是传统的集成技术很难使用、扩展基于消息的架构。
  • 6 more annotations...
1 - 20 of 31 Next ›
Showing 20▼ items per page

Selected Tags

Related Tags

Highlighter, Sticky notes, Tagging, Groups and Network: integrated suite dramatically boosting research productivity. Learn more »

Join Diigo