應用結構圖

深入分析結構圖

mina的基本應用可以分為3層：
1、I/O Serivce：實際執行I/O層
2、I/OFilter chain：數據過濾和轉換層，主要是把字節轉換為需要的數據格式或者反過來處理
3、I/OHandler：業務處理層
創建Mina應用分為3部分：
1、創建I/O 2、創建過濾鏈
3、創建I/O業務處理

Dojo通過很少的代碼完成了以上的功能。（以后可能我詳細說說dojo的package system ，只需要三個js文件）。當你寫腳本時，只需要包含很少的js文件（大小）。也可以選擇的（包含）下載dojo提供的龐大的功能。Dojo provides MultiplePointsOfEntry, InterpreterIndependence, ForwardLookingAPIs, and focuses on ReducingBarriersToAdoption.
　　dojo試圖建立一種新的標簽語言DojoML。目標是，在DojoML和javascript腳本語言不變的情況下，用不同的render方式展示數據， Renderings may be made available in several rendering contexts (such as SVG, or perhaps even the desktop or Flash)。（比較美好啊）更進一步，the DojoML 剖析器可以接受html和svg為輸入，容易的建立DegradeableResponsiveApplications。

第一部分  安裝
第一個小節  怎么安裝Dojo Toolkit
 Dojo在磁盤上只是一堆文件，它不需要特殊的設置，它可以通過以下三種途徑獲得：
 1、可以從google的內容分布網絡獲得
   加載的方法可以參考http://code.google.com/intl/zh-CN/apis/ajaxlibs/documentation/index.html#dojo
 2、.在你自己的服務器上使用Dojo
  a、下載最新的dojo包，地址：http://dojotoolkit.org/downloads；目前最新的包為1.3.1
  b、解壓下載的壓縮文件
         --dojo-release-1.3.1-src
            ----dijit
            ----dojo
            ----dojox
            ----util
  c、可以通過D:\Apache-Source\dojo\1.3.1\dojo-release-1.3.1-src\dojo-release-1.3.1-src\dijit\themes\themeTester.html 這樣的路徑來查看相關的JS例子
3、每日構建代碼
   你可以通過SVN地址獲得
For instance, Dojo Core repository is:
http://svn.dojotoolkit.org/src/dojo/trunk

There are two versions of this view: anonymous and committer.

For users (readonly):
http://svn.dojotoolkit.org/src/view/anon/all/trunk

For committers (read/write):
https://svn.dojotoolkit.org/src/view/committer/all/trunk

第二部分 Ajax
第一個小節 ajax
a、ajax and Dojo
1）XHR選項
例子：

// post some data, ignore the response:
dojo.xhrPost({
form: "someFormId", // read the url: from the action="" of the <form>
timeout: 3000, // give up after 3 seconds
content: { part:"one", another:"part" } // creates ?part=one&another=part with GET, Sent as POST data when using xhrPost
});
// get some data, convert to JSON
dojo.xhrGet({
url:"data.json",
handleAs:"json",
load: function(data){
for(var i in data){
console.log("key", i, "value", data[i]);
}
}
});

2）XHR回調
有三種方法可以附加到XHR選擇對象，以確定當數據回調時該怎么做。

javax.servlet.ServletException: Component javax.faces.component.UIViewRoot@f1fad1 not expected type.  Expected: javax.faces.component.UIOutput.  Perhaps you're missing a tag?
javax.faces.webapp.FacesServlet.service(FacesServlet.java:256)

使用HTML5構建下一代的Web Form

作者 蔣博 發布于 2009年6月22日 上午4時52分

社區

Architecture,

Java

主題

編程,

語言

標簽

W3C,

標識語言

HTML5 是由 WHATWG (Web Hypertext Application Technology Working Group) 發起的，最開始的名稱叫做Web Application 1.0，而后這個標準吸納了Web Forms 2.0的標準，并一同被W3C組織所采用，合并成為下一代的HTML5標準。

前言

HTML語言作為如今編程最為廣泛的語言，具有易用、快捷、多瀏覽平臺兼容等特點，但是隨著時代的進步，HTML的標準卻停滯不前，這一次還在不斷開發中的HTML5標準的更新可以說給這門標記語言帶來了新的生命力。本文將著重討論HTML5中的Web Forms 2.0, 即表單的部分。

表單是網頁中常見的控件(集)。小到網站注冊登錄，大到一個企業的數據管理系統，都基本上有表單的身影。表單之所以如此重要，主要是因為它擔負大量的用戶和網頁后臺數據更新交互的任務。Web開發人員，對于網頁表單可以說又愛又恨，愛的是它方便的收集、組織數據的功能，恨的是它的功能很大程度上也就僅此而已。一些在最終網站用戶看起來稀松平常的功能，比如說輸入類型檢查、表單校驗、錯誤提示等等，開發人員無不需要花費大量精力利用 JavaScript和DOM編程來滿足這些天然所需的功能點，而隨著Ajax的流行，出現的一些JavaScript的工具庫，比如Dojo, YUI等都提供了方便的JavaScript Widget或者API來減輕開發人員的負擔。

HTML5的表單新特性

HTML5 Web Forms 2.0是對目前Web表單的全面提升，它在保持了簡便易用的特性的同時，增加了許多內置的控件或者控件屬性來滿足用戶的需求，并且同時減少了開發人員的編程。在我看來，HTML5 主要在以下幾個方面對目前的Web表單做了改進：

• 新的控件類型
  • 還在為類型檢查犯愁嗎，還在為那一長串看不太明白的檢驗輸入的正則表達式而苦惱嗎，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>

實例分析

我將利用HTML5新的表單系統, 做一個簡單的用戶注冊的界面，包括用戶名，密碼，出生日期，保密問題等內容，代碼如下：

<! 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>

由于目前HTML5標準仍然在開發中，不同的瀏覽器對HTML5特性的支持都相當有限。其中Opera在表單方面支持得比較好，本實例在Opera9上運行一切正常，效果圖如下：

這個實例運用了一些HTML5的新的表單元素，比如email類型的輸入框(ID)，日期類型的輸入框(出生日期)。并且使用了重復模型來引導用戶填寫保密問題，而在個性頭像的上傳中，通過限制文件類型，方便用戶選擇圖片進行合乎規范的內容上傳。而用戶選擇國籍的下拉選擇輸入框中，采用的是外聯數據源的形式，外聯數據源使用coutries.xml，內容如下：

<select xmlns="http://www.w3.org/1999/xhtml">
<option>China</option>
<option>Japan</option>
<option>Korea</option>
</select>

并且form的enctype是application/x-www-form+xml，也就是HTML5的XML提交。所以一旦form校驗通過，form的內容將會以XML的形式提交。你還會發現，在ID輸入框如果沒有值，或者輸入了非email類型的字符串時，一旦試圖提交表單，就會有提示錯誤的信息出現，而這都是瀏覽器內置的。

結語

HTML5對表單控件的更新，無疑是很振奮人心的。本文描述了一部分表單的新特性，還有一部分新特性同樣很令人期待。相信隨著標準的深入開發以及瀏覽器對HTML5支持程度的進一步提升，設計一個簡單易用的表單的工作，將變得非常輕松。

參考資料

1. W3C HTML5 規范： http://www.w3.org/TR/html5/
2. HTML5 與 HTML4的差異：http://www.w3.org/TR/html5-diff/
3. Opera dev: Improve your forms with HTML5： http://dev.opera.com/articles/view/improve-your-forms-using-html5/
4. Comparison of layout engines（HTML5）：
   http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML_5)

關于作者

蔣博，主要從事Web前端技術的開發工作，在Web開發與性能分析以及敏捷實踐等領域有較豐富的經驗。對HTML5的發展以及各種 JavaScript類庫有比較濃厚的興趣，經常關注社交型的網站發展情況，平常喜歡聽音樂，看一些歷史類書籍。（本文僅代表個人觀點，與公司立場無關。）

給InfoQ中文站投稿或者參與內容翻譯工作，請郵件至editors@cn.infoq.com。也歡迎大家加入到InfoQ中文站用戶討論組中與我們的編輯和其他讀者朋友交流。