Dojo 入門：第二個範例

測試 Dojo (II)

Written by: 國立中興大學資管系呂瑞麟

請勿轉貼

姓名：

首先，我們還是看一下網頁的 HTML 元件，其內容如下：

<body class="soria">
...

<div name="myform">
姓名：<input type="text" dojoType="dijit.form.TextBox" id="name"></input>
<div dojoType="dijit.Tooltip" style="display:none" connectId="name">
請輸入任意字元！
</div>
<button dojoType="dijit.form.Button" onClick="callRemote();">確定</button>
</div>

第一個要說明的就是在 body 標籤內，我們加上了 class="soria" 的用法。這個是 Dojo 所提供的一種主題（網頁的 theme）。Dojo 總共有三個 themes，分別是 tundra、soria、以及 nihilo；請參考 Themes and Theming 所呈現的各種效果。從以上的設定可以看出，本範例用的是 soria 的主題。

為了能夠使用 Dojo 的主題設定，我們必須引用 soria 的 CSS 檔；另外，為了能夠充分呈現 Dojo 的效果，我們把 dojo.css 也加進來。如果要加入這些效果，我們需要以下的設定：

<style type="text/css">
  @import "http://ajax.googleapis.com/ajax/libs/dojo/1.2.3/dijit/themes/soria/soria.css";
  @import "http://ajax.googleapis.com/ajax/libs/dojo/1.2.3/dojo/resources/dojo.css"
</style>

關於這兩個 CSS 檔的出現順序，我有一點觀察：至少在 1.2.3 版，soria.css 必須出現在 dojo.css 之前，否則在 Firefox 沒辦法正確顯示 Dojo 的 Button。

加上 Dojo 的文字欄位：Dojo 提供了功能非常強的文字欄位，在之後的範例中，我們會說明如何使得使用者只能在文字欄位中輸入數字，現在先說明基本的用法。 Dojo 文字欄位的全名為 dijit.form.TextBox，使用的方式很簡單，只需要在原來 HTML 的文字欄位內加上 dojoType="dijit.form.TextBox" 的設定，其完整的使用方式顯示如下：

姓名：<input type="text" dojoType="dijit.form.TextBox" id="name"></input>

另外，由於我們使用了 dijit.form.TextBox 元件，我們必須加上如下的 Javascript 設定：

  dojo.require("dojo.parser");
  dojo.require("dijit.form.TextBox");

基本上，Dojo 的運作方式跟 YUI 一樣（或許所有 AJAX 程式庫的設計都是如此吧），過程大概如下：當瀏覽器把網頁所有的資料都下載之後，首先會呈現原始的 HTML 的元件，然後等到載入 Dojo 之後，Dojo 就會以比較漂亮的元件取代原來的 HTML 元件。如果你們仔細觀察的話，你會發現文字欄位分兩次呈現，下一個 Button 的元件更明顯。

加上 Dojo 的按鈕：Dojo 按鈕的全名為 dijit.form.Button，它的設定方式與 TextBox 類似，設定方式如下：

<button dojoType="dijit.form.Button" onClick="callRemote();">確定</button>

由於我們使用了 dijit.form.Button，我們必須再加上如下的 Javascript 設定：

  dojo.require("dijit.form.Button");

加上 Dojo 的 ToolTip：Dojo ToolTip 元件的全名為 dijit.Tooltip，使用的方式將 dojoType="dijit.Tooltip" 的設定加在 div 或者 span 標籤內。另外，我們必須將這個 ToolTip 指定給某個需要的 HTML 或者 Dojo 元件，而指定的方式就是加上 connectId="元件 id"。在本範例中，由於我們將 ToolTip 指定給文字欄位，而該欄位的 ID 為 name，所以 ToolTip 的設定如下：

<div dojoType="dijit.Tooltip" style="display:none" connectId="name">
請輸入任意字元！
</div>

至於設定中的 style="display:none"，依據文件的說明，它可以避免網頁不必要的閃動。

Last Updated:
Written by: 國立中興大學資管系呂瑞麟