dojo widget的实例化

dojo用户通过实例化widget类型来创建界面上表现的各个widget实例，实例化的方式有两种可以选择：

• javascript 形如：

  var properties = {<Attribute>:<Value>,<Attribute2>:<Value2>}; dojo.widget.createWidget("DojoWidgetTypeName",properties,DomNodeAsContainer);  

• html 形如：

  <div id="..." dojoType="<DojoWidgetTypeName>" widgetId="<ID>" [<Attribute>="<Value>"]>  </div> 

这里的DojowidgetTypeName是要实例化的widget类型的名字，它可以不和实现该widget类型的javascript类名相同。

某些widget可能需要用户提供一些数据才能工作，而且大部分的widget都是可以定制的，如何把这些数据传给要创建的widget呢？这里javascript的方式使用了一个object变量，而html方式则使用的是xml element的attribute，不过结果是相同的：在某个属性上指定的值都会进入javascipt类上声明的同名属性中。当然如果你设置了一个javascript类上未声明的属性是不会有任何效果的，因此你常常需要知道某个widget都有哪些属性，http://www.get-the-answer.info/files/DojoWidgetOverview.pdf也许是个不错的参考。

不管那种实例化方式，结果都产生了一个代表该widget实例的javascript对象，该对象持有一个DOM node，为其在页面上的表现，我们称之为widget node；widget的效果就是由javascript对象操纵其widget node来实现的。widget node是怎么生成的呢？

大部分的widget类型都有一个template，是该widget类型表现在页面上的html/css代码的轮廓，一般以文件的形式存放在src/widget/template目录下，实例化的的一个主要步骤是根据实例化的参数填充template，从而生成widget实例的html代码。填充的方式当然是通过DOM了，这就需要持有template的node的引用，可以在template里使用dojoAttachPoint把该node连接到相应widget类的属性上，如：

<div id="${this.widgetId} dojoAttachPoint="wizardNode">
...
</div>

若想在template里输出widget类上的某些属性值，可以用${this.<PropertyName>}的语法，比如很多widget都把widget类上的widgetId属性值作为element的id attribute的值，如上例。

对没有template的widget如ContentPane，当用html实例化时，其表现在页面上的html代码就是实例化的html代码，但一样会生成相应的widget对象，可以用来实现一些动态效果。

当然浏览器是不认识dojo形式的html的，html的实例化方式能够工作是因为在页面被加载之后、显示之前，dojo对页面上的html实例化方式进行了处理：在填充template后，用其替换页面上创建widget的那个node(source node)，从而得到widget node；如果该widget是一个container，接着还会处理其source node下的子html的实例化方式，实例化相应的子widget并建立它们和container widget的关系。因此，我们最终看到的页面实际上是经过dojo处理过的页面，不是从服务器取回的原始页面。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!