Dojo HelloWorld實現(xiàn)
本文是對dojo的helloworold的翻譯和學習原文地址（http://dojo.jot.com/WikiHome/HelloWorld）。
1.安裝Dojo
首先請創(chuàng)建工程HelloWorldTutorial，再創(chuàng)建如下的目錄
- HelloWorldTutorial/
|
|---- js/
|
---- dojo/
然后請下載dojo(http://dojotoolkit.org/download/ )并將其解壓縮到dojo目錄下，這樣在項目中引用成功了，安裝后目錄如下
- HelloWorldTutorial/
|
|-- js/
|
-- dojo/
|
-- build.txt
-- CHANGELOG
-- demos
|
-- ..
-- dojo.js
-- dojo.js.uncompressed.js
-- iframe_history.html
-- LICENSE
-- README
-- src/
|
-- ..
2.開始Dojo之旅
現(xiàn)在我們需要創(chuàng)建一個引用dojo的HelloWorld.html頁面，代碼片段如下:
|
<html>
<head>
<title>Dojo: Hello World!</title>
<!-- SECTION 1 -->
<script type="text/javascript" src="js/dojo/dojo.js"></script>
</head>
<body>
</body>
</html>
|
script腳本部分負責引用所有dojo的基礎函數(shù)。
3.創(chuàng)建一個Widget按鈕
創(chuàng)建一個“Hello World！”的widget按鈕，而且我們可以通過默認(mouseOut, mouseOver, and mouseDown)鼠標事件來改善用戶體驗。
SECTION 2的代碼片段讓dojo加載資源，dojo.require和java的import功能相似。
|
<script type="text/javascript">
// Load Dojo's code relating to widget managing functions
dojo.require("dojo.widget.*");
// Load Dojo's code relating to the Button widget
dojo.require("dojo.widget.Button");
</script>
|
前一句dojo.require代碼用來加載dojo的管理功能函數(shù)，而并加載”dojo.widget”下所有的功能。而第二句代碼僅僅是加載Button控件。（注：但是通過測試發(fā)現(xiàn)無論注釋掉那一句，頁面功能都不受影響）。
將下面代碼加入到html頁面的body元素中：
|
<button dojoType="Button" widgetId="helloButton">Hello World!</button>
|
dojoType是關鍵屬性，通過設置不同的屬性值控制dojo的處理此控制的方式，這里我們使用的是“Button”，但是我同樣可以使用input控件。只要dojoType存在，著兩種方式的效果是一樣的。使用input控件時，按鈕的text值必須通過caption屬性來設定。
注：示例中使用的widgetId屬性是可選，如果沒有設置widgetId，Dojo同樣識別id。
4.事件綁定
Dojo的事件系統(tǒng)能更有效的綁定事件。首先必須加載事件包，將上面的SECTION 2 處的代碼改成：
|
<!-- SECTION 2 -->
<script type="text/javascript">
dojo.require("dojo.event.*");
dojo.require("dojo.widget.*");
dojo.require("dojo.widget.Button");
</script>
|
寫一個簡單的函數(shù)共button事件調(diào)用，代碼如下：
|
function helloPressed() {
alert('You pressed the button');
}
|
你理所當然的會想到通過onclick屬性來綁定事件，但是這樣做卻一點效果也沒有，不用擔心，dojo當然會有自己的一套辦法。為什么要加載event包，作用就是要這里體現(xiàn)，代碼如下：
|
function init(){
var helloButton = dojo.widget.byId('helloButton');
dojo.event.connect(helloButton, 'onClick', 'helloPressed')
}
dojo.addOnLoad(init);
|
最后一句的代碼和onload的時間一樣，加上這句才不會讓你前功盡棄。
Dojo加載了init函數(shù)后，頁面才會正確的展示給大家。Dojo解析后的頁面，原本的dom模型已被修改，只有通過dojo.widget.byId才能獲取頁面元素。
5.讀取服務器端數(shù)據(jù)
通過alert彈出信息只是萬里長征的第一步，后面的風景的跟美麗。怎樣從服務器端取出數(shù)據(jù)才是我們最關心的功能，通過使用dojo.io.bind包，我們可以方便的實現(xiàn)這樣的功能(bind包詳細信息請參考http://dojotoolkit.org/docs)
回掉函數(shù)用來處理服務器端的返回的數(shù)據(jù)，代碼如下：
|
function helloCallback(type, data, evt){
if (type == 'error')
alert('Error when retrieving data from the server!');
else
alert(data);
}
|
三個參數(shù)都很重要，缺一不可! Type表示請求成功與否，成功：'load' ，失敗：'error'；data保存了服務器端返回來的數(shù)據(jù)；第三個參數(shù)保存了dojo的事件對象。下一步要設定服務端請求，修改helloPressed函數(shù)，代碼如下：
|
function helloPressed(){
dojo.io.bind({
url: 'response.txt',
handler: helloCallback
}))
}
|
上面的代碼設定了請求的url及回調(diào)函數(shù)。
最后新建 response.txt. 輸入'Welcome to the Dojo Hello World Tutorial'.執(zhí)行效果如圖
6.使用GET方法向服務端發(fā)送數(shù)據(jù)
獲取靜態(tài)數(shù)據(jù)還是相對簡單，但是現(xiàn)實生活中的做用不大。因此我們要向服務端發(fā)送點什么，才更具有說服力。在html文件的body節(jié)點中添加如下代碼：
|
<form id="myForm" method="get">
Please enter your name: <input type="text" name="name">
</form>
|
在同一目錄下新建HelloWorldResponse.jsp，代碼如下：
|
<%
response.setContentType("text/plain");
%>
Hello <%= request.getParameter("name") %> , welcome to the world of Dojo!
|
再一次修改helloPressed函數(shù)
|
function helloPressed(){
dojo.io.bind({
url: 'HelloWorldResponse.jsp',
handler: helloCallback,
content: {name: dojo.byId('name').value }
});
}
|
以上代碼中加入了新的屬性-content，content用來向服務端發(fā)送任意參數(shù)值（name：參數(shù)名稱，dojo.byId('name').value:參數(shù)值），參數(shù)名稱可以任意給定。
7.使用POST方法向服務端發(fā)送數(shù)據(jù)
真實的應用中都是通過表單來提交一組數(shù)據(jù)，這時我們就需要使用POST方法。實現(xiàn)很簡單，首先將Form中方法改成POST，再修改helloPressed方法就大功告成了，代碼如下：
|
function helloPressed(){
//綁定要請求的url及form
dojo.io.bind({
url: 'HelloWorldResponsePOST.jsp',
handler: helloCallback,
formNode: dojo.byId('myForm')
});
}
|
總結：
通過對dojo經(jīng)典案例helloworld的學習和翻譯，算是dojo初步入門。
做人簡單一點好