Dojo入門Hello World！
本文的目的是為Dojo的入門者提供一個起點。每一個步驟都是為了儘可能多的介紹Dojo，但也不可能非常詳盡，描述的太詳盡反而會把入門使用者搞糊塗了。如果需要了解本文中提到的概念，請檢視底部指向其他資源的連結。
入門要求
很明顯，第一步是你需要Dojo！你可以從 http://dojotoolkit.org/downloads 下載最新的穩定版本.第二步，你需要一個Web伺服器.無論是連網伺服器或者是離線伺服器，Linux、Windows或者是Mac ... 都沒什麼要緊的。Dojo JavaScript library 是可以可以直接在瀏覽器上執行的,但文中有一些 AJAX 案例 需要伺服器的PHP或者ASP支援.
Dojo 和 Dijit 中的程式碼,執行在客戶端瀏覽器的部分,是相容 IE 6 - 7, Firefox 2, 和 Safari的.
Dojo的設定
首先，你需要在Web伺服器上新建一個目錄. 假設為HelloWorldTutorial. 然後在裡面建立一個名稱為 dojoroot 的目錄. 最後, 使用壓縮工具解壓縮Dojo壓縮包至 /HelloWorldTutorial/dojoroot目錄. 完成後，效果如下：
開始了
一旦設定好了以上的目錄和檔案結構, 我們就要為HTMl檔案設定JavaScript標記了.看一下下面的程式碼:
Dojo: Hello World!</title>
<!-- SECTION 1 -->
<style type="text/css">
@import "dojoroot/dijit/themes/tundra/tundra.css";
@import "dojoroot/dojo/resources/dojo.css"
</style>
<script type="text/javascript" src="dojoroot/dojo/dojo.js"
djConfig="parseOnLoad: true"></script>
</head>
<body class="tundra">
</body>
</html>
正如上面看到的，這個頁面只是一個標準的HTML頁面框架，它包含了3個部分:
- 兩個CSS檔案. 標記為 Tundra 的是案例中要用到的Dijit主題風格. 當然也可以選擇其他的主題.
- 在Head部分中的script 元素標籤. 這個script 元素標籤複雜載入Dojo的核心庫，它為我們後面用到的Dojo函式提供介面支援.
- 最後,把 tundra CSS 樣式新增到 body 標籤.
建立一個按鈕
好了,我們開始這一激動人心的部分!在這個例子中，我們將會建立一個"Hello World!"的按鈕部件.對這個例子，滑鼠移出、滑鼠經過、滑鼠按下(mouseOut, mouseOver, and mouseDown) 這3種可視狀態可以在一定程度上提升使用者體驗。
第一個步驟是告知Dojo載入適合的模組.在網頁頭部，在片段1下新增一個片段2，程式碼如下:
<!-- SECTION 2 --><script type="text/javascript">
// Load Dojo's code relating to the Button widget
dojo.require("dijit.form.Button");
</script>
dojo.require 這一行程式碼通知 Dojo 載入 Button（按鈕） 部件. 如果你省略的這一行,在Dojo 載入的時候，Button（按鈕）中新增的程式碼將會失效, 返回的結果是一個普通的HTML 按鈕，而不是我們期待的.
新增以上一段程式碼後，在body片段中加入下列HTML程式碼:
<button dojoType="dijit.form.Button" id="helloButton">Hello World!</button>這一行HTML程式碼中最重要的屬性是通知Dojo ，按鈕的dojoType屬性是什麼. dojoType 屬性負責通知Dojo：在頁面載入的時候怎樣處理這個元素.在這個例子，我們使用了button這個HTMl元素，當然用 input 也是可以的 - 無論 dojoType 屬性有多長，Dojo都是可以執行的.但是使用 input 是不值得的, 我們還必須通過額外增加標題屬性，來設定button中要顯示的文字.
設定部件（Widget）的事件
按鈕已經做好了，但是當點選按鈕的時候它會做什麼呢？我們可以為button（按鈕）設定一個點選事件（ event handler）, 但是這裡有一種更高效的方法 - Dojo 事件系統!
最容易的方式是通過script標記為button附加一個事件.但這並不是隨意的 script 標籤 ... 它必須包含一個值為 dojo/method 的type屬性, 例如:
<button dojoType="dijit.form.Button" id="helloButton">Hello World!
<script type="dojo/method" event="onClick">
alert('You pressed the button');
</script>
</button>
真的很簡單，是吧？把script放置在標籤的內部，從感官上也好看得多.同時還可以在script中充分利用第2層DOM的事件. 這意味著你可以監測到 SHIFT 和 CTRL 鍵, 獲取各種各樣的事件屬性,從而使HTML目錄結構的事件處理上升到一個更高的境界. 如果你曾經使用過第二層事件,你會知道IE和 Firefox 中有不同的使用語法.在 Dojo中, 同樣的函式可以執行在任何一個支援的瀏覽器上.真是十分強大!
從伺服器讀取資料
點選按鈕彈出警告視窗不錯的方法,但如果我們想從伺服器上獲取資料呢? 又一次,Dojo用一個簡單的方法拯救了這個任務 - dojo.xhrGet. 順便提及一下,這個部分的程式碼可以在附件中下載（ 檔案HelloWorld-Section5.html 和 response.txt ）。
開始，我們需要一個回撥函式（ callback function ）來處理伺服器返回的資料.在頭部（head標籤）新增以下程式碼:
function helloCallback(data,ioArgs) {
alert(data);
}
function helloError(data, ioArgs) {
alert('Error when retrieving data from the server!');
}
</script>
函式中的兩個引數(data, and ioArgs) 是非常重要的 - 一個都不能少! 第一個引數 (data) 包含了伺服器返回的資料, 第二個引數包含了繫結的 Dojo I/O 物件. 我們現在主要看第一個引數.
第二步：將滑鼠的點選連線到發起伺服器請求. 要完成這一步, 修改以下程式碼:
<script type="dojo/method" event="onClick">alert('You pressed the button');
</script>
修改後，程式碼如下:
<script type="dojo/method" event="onClick">dojo.xhrGet({
url: 'response.txt',
load: helloCallback,
error: helloError
});
</script>
以上的程式碼主要是告訴Dojo去訪問URl定義的網址路徑，以及使用handler中定義的函式處理伺服器返回的資料。
最後，我們在HelloWorld.html 所在的資料夾下新建一個檔案 response.txt. 在這個檔案中，寫上 'Welcome to the Dojo Hello World Tutorial'.
現在，點選按鈕，JavaScript alert視窗中顯示的應該是 response.txt 檔案中的文字.Dojo-很簡單吧!
下面，我們嘗試讓這個伺服器請求做一些更有意義的事.
用GET傳送資料到伺服器
從伺服器獲取靜態的資料是不錯的功能，但在真正的應用中並不是那麼廣泛. 所以，除了簡單的從伺服器獲取資料，我們還可以給伺服器傳送資料. 在這個部分, 我們使用的是GET方法，下一部分使用的是POST方法.作為簡單的參考,這部分的程式碼可以在附件中下載，檔名為 HelloWorld-Section6.html .服務端檔名是" HelloWorldResponseGET". 副檔名分別如下 ASP ('.asp'), PHP ('.php'), ColdFusion ('.cfm'), 或者是 Java ('.jsp').
首先, 在檔案 HelloWorld.html 中 (例如：body),需要增加另外一個元素 - 一個 input 元素. 所以,把以下的程式碼:
<button dojoType="Button" widgetId="helloButton"><script type="dojo/method" event="onClick">
dojo.xhrGet({
url: 'response.txt',
load: helloCallback,
error: helloError
});
</script>
</button>
修改為:
<button dojoType="dijit.form.Button" id="helloButton">Hello World!
<script type="dojo/method" event="onClick">
dojo.xhrGet({
url: 'HelloWorldResponseGET.php',
load: helloCallback,
error: helloError,
content: {name: dojo.byId('name').value }
});
</script>
</button>
Please enter your name: <input type="text" id="name">
在繼續進行之前 - 需要強調一下：dojo.xhrGET函式中的url屬性指向的檔案格式必須是你伺服器支援的格式.
ASP 伺服器： 'HelloWorldResponseGET.asp' ，
PHP 伺服器： 'HelloWorldResponseGET.php' ，
ColdFusion 伺服器： 'HelloWorldResponseGET.cfm' ，
Java 伺服器 (JSP) ： 'HelloWorldResponseGET.jsp' ,
Perl 伺服器： 'HelloWorldResponseGET.pl' .
這些檔案的程式碼在下面的部分中會提供，在附件中中也可以下載.
在上面的程式碼中,你會注意到dojo.xhrGet中引入了一個新的屬性. 這個屬性 - 內容 - 允許程式設計師以引數的形式傳送任意的資料到伺服器. 在這個例子中,我們使用的是GET方法, 伺服器指令碼通過引數'name'來獲取傳過來的值. 需要提一下，如果如果這個引數是另外一個名字（例如： 'myName'), 我們還需要把程式碼改成 (把':'左面的 'name' 改成 'myName' ):
content: {myName: dojo.byId('name').value }因為我們之前沒用過,還需要提一下 dojo.byId('name').value. 非常簡單, 這個呼叫是標準的 document.getElementById(..) 函式.
最後,如果你在文字框中輸入你的名字，並點選 'Hello World' 按鈕, 提示框會顯示 'Hello , welcome to the world of Dojo!' ，還有你輸入的名字.
這是伺服器的程式碼. 有一些是可以在下面下載.
使用 PHP 伺服器
<?php/*
* HelloWorldResponseGET.php
* --------
*
* Print the name that is passed in the
* 'name' $_GET parameter in a sentence
*/
header('Content-type: text/plain');
print "Hello {$_GET['name']}, welcome to the world of Dojo!/n";
?>
使用ASP 伺服器
<%'
' HelloWorldResponseGET.asp
' --------
'
' Print the name that is passed in the
' 'name' GET parameter in a sentence
'
response.ContentType="text/plain"
response.write("Hello " & request.querystring("name") & ", welcome to the world of Dojo!/n")
%>
使用 ColdFusion 伺服器
<!---/*
* HelloWorldResponseGET.cfm
* --------
*
* Print the name that is passed in the
* 'name' GET parameter in a sentence
*/
--->
<cfsetting showDebugOutput="No">
Hello, #url.name#, welcome to the world of Dojo!
</cfsetting>
使用 Java 伺服器 (JSP)
<%/*
' HelloWorldResponseGET.jsp
' --------
'
' Print the name that is passed in the
' 'name' GET parameter in a sentence
*/
response.setContentType("text/plain");
%>
Hello <%= request.getParameter("name") %> , welcome to the world of Dojo!
使用 Perl 伺服器
#!/usr/bin/perl#
# ' HelloWorldResponseGET.pl
# ' --------
# '
# ' Print the name that is passed in the
# ' 'name' GET parameter in a sentence
#
use strict;
use CGI;
my $cgi = CGI::new();
print $cgi->header(-type => "text/html; charset=utf-8");
print "Hello " . $cgi->param('name') . ", welcome to the world of Dojo!/n";
通過POST傳送資料到伺服器
使用 GET傳送資料不錯，但是有些時候，你需要使用Dojo來提升使用者使用傳統表單的使用者體驗。通常,Dojo有一種更好的處理方式. 再次, 這些檔案的程式碼在下面的片段中, 在附件中也可以下載. 另外,跟上面一樣，你同樣要把 'url' 屬性指向你伺服器支援的檔案格式.
首先, 我們還要把 HelloWorld.html 檔案中body中的部分:
<br>Please enter your name: <input type="text" id="name">
修改為:
<br><form id="myForm" method="POST">
Please enter your name: <input type="text" name="name">
</form>
接著我們需要把 dojo/method的程式碼:
<script type="dojo/method" event="onClick">dojo.xhrGet({
url: 'HelloWorldResponseGET.php',
load: helloCallback,
error: helloError,
content: {name: dojo.byId('name').value }
});
</script>
修改為:
<script type="dojo/method" event="onClick">// Don't forget to replace the value for 'url' with
// the value of appropriate file for your server
// (i.e. 'HelloWorldResponsePOST.asp') for an ASP server
dojo.xhrPost({
url: 'HelloWorldResponsePOST.php',
load: helloCallback,
error: helloError,
form: 'myForm'
});
</script>
就像我們前面程式碼顯示的那樣, 我們把 dojo.xhrGet 修改為 dojo.xhrPost. 我們刪除了 'content' 屬性，取而代之的是增加了一個新的屬性 'form'. 它告知 dojo.xhrPost 函式要使用表單 'myForm' 作為資料的來源l.
最後，當你輸入你的名字，點選 'Hello World!' 按鈕的時候，提示資訊會是 'Hello , welcome to the world of Dojo!' 和你的名字.
使用 PHP 伺服器
<?php/*
* HelloWorldResponsePOST.php
* --------
*
* Print the name that is passed in the
* 'name' $_POST parameter in a sentence
*/
header('Content-type: text/plain');
print "Hello {$_POST['name']}, welcome to the world of Dojo!/n";
?>
使用ASP 伺服器
<%'
' HelloWorldResponsePOST.asp
' --------
'
' Print the name that is passed in the
' 'name' $_POST parameter in a sentence
'
response.ContentType="text/plain"
response.write("Hello " & request.form("name") & ", welcome to the world of Dojo!/n")
%>
使用 ColdFusion 伺服器
<!---/*
* HelloWorldResponsePOST.cfm
* --------
*
* Print the name that is passed in the
* 'name' POST parameter in a sentence
*/
--->
<cfsetting showDebugOutput="No">
Hello, #form.name#, welcome to the world of Dojo!
</cfsetting>
使用 Java 伺服器 (JSP)
<%/*
' HelloWorldResponsePOST.jsp
' --------
'
' Print the name that is passed in the
' 'name' POST parameter in a sentence
*/
response.setContentType("text/plain");
%>
Hello <%= request.getParameter("name") %> , welcome to the world of Dojo!
使用 Perl 伺服器
#!/usr/bin/perl#
# ' HelloWorldResponsePOST.pl
# ' --------
# '
# ' Print the name that is passed in the
# ' 'name' POST parameter in a sentence
#
use strict;
use CGI;
my $cgi = CGI::new();
print $cgi->header(-type => "text/html; charset=utf-8");
print "Hello " . $cgi->param('name') . ", welcome to the world of Dojo!/n";