学习Ajax框架之dojo：第十三节——如何编写自己的dojo widget

Dojo开发包本身提供了多种widget，它们涵盖了大部分在web开发中可能会使用的界面组件，如下拉菜单、树形菜单等，开发人员只需要在JavaScript代码中声明对特定widget的引用，就可以使用标记的方式在页面中加入widget。当然这些widget并不一定能完成满足实际应用的需要，开发人员也可以通过继承的方式在现有widget的基础上进行功能扩展。

此外，在web应用中可能会有多处地方使用相同或者类似的界面，因此在页面中可能会有大量类似或者重复的代码。这时开发人员可以定义新的widget，在页面中使用标记的方式实现界面代码的重用。

1. 扩展Dojo自带widget

第一种自定义widget的方法是扩展Dojo开发包自带的widget，下面以按钮widget为例进行widget的扩展。我们的目标是修改按钮的显示风格，包括各种状态下按钮的背景图片。

（1）   定义widget子类

首先，在test\mywidget目录下新建一个JavaScript代码文件Button.js，其中定义了一个继承自dojo.widget.Button的widget，使用的函数是dojo.widget.defineWidget，具体代码如下：

//扩展widget的包名

Dojo.provide(“my.widget.Button”);

Dojo.require(“dojo.widget.Button”);

//定义一个新的widget

Dojo.widget.defineWidget(

           //类名

           “my.widget.Button”,

           //父类

           Dojo.widget.Button,

           //覆盖父类的若干属性

           {

                    //更换按钮的背景图片

                    InactiveImg: “test/mywidget/inactive”,

                    activeImg: “test/mywidget/active-”,

                    pressedImg: “test/mywidget/pressed-”,

                    diaabledImg: “test/mywidget/diaabled-”,

}

);

 

上面的代码通过覆盖父类的相关属性更换了4种状态（inactive、active、pressed、disabled）下按钮的背景图片。

（2）   注册模块路径

Button.js的代码指明扩展的widget对应的类是my.widget.Button，因此使用这个widget必须引入my.widget.Button类。仅仅通过dojo.require语句是不够的，Dojo并不知道Button.js代码所在的路径，因此首先要调用dojo.registerModulePath方法注册模块路径。模块路径的概念相当于java中的类路径，Dojo会在模块路径下寻找相关类的执行代码，模块路径的起始位置是dojo.js所在的目录。注册模块路径的代码如下所示：

Dojo.registerModulePath(“my.widget”, “test/mywidget”);

Dojo.require(“my.widget.Button”);

 

（3）   使用widget

现在可以用标记的方式在页面中调用自定义的按钮widget，例如：

<button dojoType=”my:Button”>

<div class=”text” style=”width:50px;height:20px”>button</div>

</button>

 

这里使用my作为Button的前缀，与Dojo自带的Button widget所示区别。

 

 

2. 定义新的widget

某些情况下，在Dojo自带的widget的基础上进行扩展不能满足应用的需要，这时就需要从头开始打造一个全新的widget。一个widget的定义通常包括以下内容：

1)         显示模板（HTML页面和CSS样式）；

2)         内容和属性的定义；

3)         事件的定义。

下面介绍开发自定义widget的一般步骤。以实现简单的便签页面组件为例。如图1所示。

            图1 自定义widget效果图

在页面中可以通过如下的代码调用该widget。

<div dojoType=”my:Memo” title=”测试标题”>

文本内容……

</div>

 

（1）定义widget的显示模板

自定义widget的第1步是准备widget的显示模板，它一般由两部分组成：HTML页面和CSS样式表。相关代码比较简单，如下所示：

Memo.html:

<div class=”memo”>

<div class=”title”>Memo Title</div>

<div class=”close”>X</div>

<div class=”contents”> </div>

</div>

Memo.css(略)

 

（2）声明widget

第2步是在JavaScript代码中给出widget的定义，对于在HTML页面中使用的widget来说，它们的基类是dojo.widget.HtmlWidget。自定义的widget类必须覆盖基类dojo.widget.HtmlWidget的两个属性：templatePath和templateCssPath，它们分别是HTML模板和CSS模板文件的路径。具体实现代码（Memo.js）如下所示：

//给出自定义widget的类名

Dojo.provide(“my.widget.Memo”);

Dojo.require(“dojo.widget.HtmlWidget”);

Dojo.widget.defineWidget(

           //widget对应的类

           “my.widget.Memo”,

           //widget的基类是Dojo.widget. HtmlWidget

           Dojo.widget. HtmlWidget,

           //覆盖基类的属性

           {

                    //模板HTML的路径

                    templatePath: dojo.uri.dojoUri(“test/mywidget/Memo.html”),

                    //模板CSS的路径

                    templateCssPath: dojo.uri.dojoUri(“test/mywidget/Memo.css”)

}

);

 

（3）处理widget的内容和参数

运行上面的代码，可以得知widget还存在两个问题：

1)         Widget内部的内容完全被忽略，没有显示在页面上；

2)         便签的标题不能以属性的方式进行声明，始终显示固定的文字“Memo Title”。

在Dojo widget中只有容器类型的widget才能处理其内部的HTML代码。设置容器类型widget的方法是：覆盖基类Dojo.widget. HtmlWidget的属性isContainer，将其设置为true。对Memo.js进行修改，代码如下所示：

……

//覆盖基类的属性

           {

                    //该widget是一个容器

                    isContainer：true,

//模板HTML的路径

                    templatePath: dojo.uri.dojoUri(“test/mywidget/Memo.html”),

                    //模板CSS的路径

                    templateCssPath: dojo.uri.dojoUri(“test/mywidget/Memo.css”)

}

         ……

 

容器类型的widget会对其内部的HTML代码进行处理，具体如何显示以及显示在widget的哪一部分，则需要在HTML模板中进行配置。例如在便签widget中，如果希望它内部的HTML代码在widget内部的某个<div>元素中呈现，那么可以这样修改HTML模板的定义：

<div class=”memo”>

<div class=”title”>Memo Title</div>

<div class=”close”>X</div>

<div class=”contents” dojoAttachPoint=”containerNode”> </div>

</div>

 

为了能够使用属性的方式声明便签的标题，需要在widget的定义中增加一个title属，性，同时将其添加到HTML模板中合适的位置。修改后的Memo.js和Memo.html代码如下所示：

Memo.js:

……

//覆盖基类的属性

           {

                    //便签widget的标题

                    title：”Memo Title”,

                    //该widget是一个容器

                    isContainer：true,

//模板HTML的路径

                    templatePath: dojo.uri.dojoUri(“test/mywidget/Memo.html”),

                    //模板CSS的路径

                    templateCssPath: dojo.uri.dojoUri(“test/mywidget/Memo.css”)

}

         ……

Memo.html:

<div class=”memo”>

<div class=”title”>${this.title}</div>

<div class=”close”>X</div>

<div class=”contents” dojoAttachPoint=”containerNode”> </div>

</div>

其中${this.title}表示widget对象的title属性。

 

（4）定义widget的事件

Widget可以看作页面中相对独立的界面组件，它必须具有独立的事件响应机制，才能完成一些复杂的功能。对于便签widget来说，需要增加单击“关闭”按钮的onClick事件。事件的定义是在HTML模板中进行的，下面的代码为“关闭”按钮的<div>元素增加了一个onClick事件。

<div class=”close” dojoAttachEvent=”onClick”>X</div>

 

事件的处理函数可以使用dojo.event.connect方法添加，例如：

Dojo.addOnLoad(function(){

         //widget对象

         Var memo=dojo.widget.byId(“memo”);

//添加widget对象的onClick事件处理函数

Dojo.event.connect(memo, “onClick”, function(evt){

                  Memo.destroy();

});

})

 

Dojo widget的事件名称有“内外”之分，内部事件通常采用DOM事件的名称，例如onclick、onmouseover等；而外部事件名称则在为widget添加事件处理函数时使用，缺省情况下外部事件的名称与内部事件相同，如果需要指定外部事件的名称，则需要在相应的dojoAttachEvent属性中使用“内部事件名称：外部事件名称”的形式。例如将便签widget的HTML模板修改为如下的代码：

……

<div class=”close” dojoAttachEvent=”ondblclick:onclick”>X</div>

……

 

此时当“关闭”按钮<div>元素被双击时（即触发内部事件ondblclick），widget的外部事件——onClick事件被触发，页面执行相应的处理函数。