學習Ajax架構之dojo：第七節——初識Dojo widget（附原始碼）

        widget在越來越多的web應用中出現，那麼，什麼是widget？widget使用什麼樣的標記方式進行聲明的呢？widget可以動態建立嗎？widget有哪些常用的方法和屬性呢？……這一系列的問題不由自主的浮現在腦海，下面，讓我們來共同學習一下吧。

學習一：widget的含義
        widget的英文含義是裝飾物或者小器具，有些技術文檔將其譯為小組件，在這裡直接使用其英文名，以免引起不必要的混淆。Dojo提供widget架構的原因來自兩方面：一是為了更好的使用者體驗；二是為了協助開發人員快速開發Web應用。

學習二：widget的聲明
        Dojo widget提供了大量可以直接使用的UI控制項，它還支援標記方式的聲明。其中，dojoType是聲明Dojo widget的關鍵屬性，它指明了widget的類型。如：

<button id="button" dojoType="Button">Create</button>.

 
       也可以在頁面中這樣聲明一個Button widget: <button id="button" class="dojo-Button">Create</button>; 或者<dojo:Button id="button" caption="Create"/>

 

學習三：在Dojo中動態建立widget
        Dojo 支援動態建立widget，例如下面的代碼動態建立一個Button widget，並將其添加到頁面中：
         Create Button Widget
         w=dojo.widget.createWidget("Button",{caption:"Create"});
         dojo.body().appendChild(w.domNode);

 

 

學習四：widget編程中常用的方法和屬性
        在Dojo中可以通過編程的方式改變widget的特性，下面是widget編程中常用的方法和屬性。

• dojo.widget.byId(id)：根據ID擷取widget對象
• dojo.widget.createWidget：動態建立widget對象
• widgetObject.domNode：widget對象對應的DOM節點
• widgetObject.containerNode：widget對象所在容器對應的DOM節點
• widgetObject.show()/hide()：顯示/隱藏widget
• widgetObject.toggle()：切換widget的顯示/隱藏狀態
• widgetObject.isShowing()：widget是否可見

 

學習五：Dojo widget的類型

        目前Dojo提供了豐富的widget庫，可以滿足絕大多數web應用開發的需求。Dojo widget按照用途分為3大類：

•         用於頁面配置的Layout Widget
•         用於表單增強Form Widget
•        實現通用功能的General Widget

 

總結：
        Dojo widget架構具有良好的可擴充性，開發人員基於它可以開發自訂的widget，實現代碼複用。