測試 Dojo (III)

• 這個網頁使用了另一個 Dojo 主題 tundra。為了使用 tundra，我們需要 將原先 soria.css 的檔案換成 tundra.css，更換後的語法如下：（一個網頁 只能選擇一個主題）

    @import "http://ajax.googleapis.com/ajax/libs/dojo/1.2.3/dijit/themes/tundra/tundra.css";
  

  仔細觀察兩個主題的差別，只是 @import 中出現 soria 的部分改成 tundra 即可。 另外，主題的設定可以不必針對整個網頁，而可以只設定網頁的某特定部分；例如， 本網頁只針對"姓名"的輸入區塊套用 tundra 的主題。有興趣的人，可以仔細看看 soria 和 tundra 的差別。

• 我們將輸入區塊命名為 myform（為了配合之前的 AJAX 程式），而輸出區塊 命名為 textBox，它們的 CSS 如下：

  #myform { width:350px; height:120px; float: left; margin:5px; border:1px dotted #317082; padding:3px; }

  #textBox { width:350px; height:120px; float: left; margin:5px; border:1px dotted #317082; padding:3px; background-color:#99FF99; }

• 調整"確定"的大小：之前"確定"按鈕都太大了一點，尤其使用 YUI 的時候， 我確定字體縮小也不能讓按鈕變小。在 Dojo 中，把字體變小，也會讓按鈕跟著 變小。測試了幾次，如下的字體大小可以呈現大小洽當的按鈕：

  <span style="font-size:8pt">確定</span>
  

• 試過了 YUI 的 Drag and Drop 之後，發現 Dojo 的 Drag and Drop（DnD） 真的非常的簡單好用。Dojo 的 Drag and Drop 需要 dojo.dnd.Source 當作 drag 這個動作的物件（或稱來源），另外，也需要 dojo.dnd.Target 當作 drop 這個動作的物件（或稱目標）。除此之外，dojo.dnd.Source 也可以當作 drop 這個動作的物件。由於我們的設計是希望輸入區塊以及輸出區塊可以 任意互換位置，所以我們只使用 dojo.dnd.Source。需要使用 dojo.dnd.Source 的網頁，需要在程式碼的部分加上 dojo.require("dojo.dnd.Source");。

  有一件事情要特別提醒大家：這些 Drag and Drop 只有畫面上的效果；也就是 說互換位置後的設定並不會被記憶下來。如果希望能像 iGoogle 一樣能記憶 之前的位置，那麼我們需要伺服器端的配合，才有可能。

  一般來說，我們會在 dojo.dnd.Source 設定可以被移動的物件（大多是由 div 組成），而該物件的 CSS class 會被設定為 dojoDndItem。以本網頁為例， 我們在下列的原始碼中的第 01 到 08 行，設定了一個 div 區塊，該區塊包含 左邊的輸入區塊以及右邊的輸出區塊，而且該區塊的 dojoType 就是 dojo.dnd.Source。 第 01 行除了 dojoType 的設定之外，我們在這一個區塊使用了 tundra 主題，也 設定了這個區塊的寬度（這個寬度必須大於輸入區塊加上輸出區塊的寬度）。 請注意，當初設計這個網頁的時候，花了不少時間在找出如何使得兩個 div 能夠併排出現，而且能夠同時在 Firefox 和 IE 出現一樣的結果；除了這裡的 設定以外，請記得也要在 myform 和 textBox 的 CSS 設定為 float:left 才行。 最後，一定要在這個區塊結束後，加上第 09 行的設定，否則會有"文繞區塊" 的效果。

  01  <div dojoType="dojo.dnd.Source" class="tundra" style="width:800px">
  02    <div name="myform" id="myform" class="dojoDndItem">
  03    姓名：<input type="text" dojoType="dijit.form.TextBox" id="name"></input>
  04    <button dojoType="dijit.form.Button" onClick="callRemote();">
  05    <span style="font-size:8pt">確定</span></button>
  06    </div>
  07    <div id="textBox" class="dojoDndItem"></div>
  08  </div>
  09  <p style="clear:left"/>
  

  如第 02 和 07 行所示，myform 和 textBox 分別是可以被拖曳的對象，因此 他們必須加上 class="dojoDnDItem" 的設定。至於，其他的設定跟之前的範例 相同，我們就不再說明。

• 在拖曳的過程中，你應該會注意到有一個代表 dojoDnDItem 的物件該著 滑鼠的游標走，這個物件在 Dojo 中稱之為 Avatar。Avatar 的其他用法，我們 在下一個範例中說明。相信不相信，我們的 Drop and Drop 的網頁已經完成了， 夠簡單吧！請自行定義一個田字型的區塊，並且分別放上四個 dojoDndItem 試試看。