dojo点滴

作者tag:web web开发(脚本和动态语言) dojo instantiate template parse 

 dojo点滴

 

dojo点滴

[e-mail]
Reversion:0.5 Date:2006/09/17

1. 实例化

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都有哪些属性，这里也许是个不错的参考。

2. parse和widget

在browser加载页面之后、显示页面之前，dojo会对页面做一次parse，处理dojo相关的属性如dojoType，dojoAttachPoint等，创建相应的的javascript对象并建立相关对象之间的关联，对widget来说，其表现在页面上的html/css代码也是在这个阶段产生的。 大部分的widget都有一个template，是widget表现在页面上的html/css代码的轮廓，一般以文件的形式存放在src/widget/template目录下，widget最终表现在页面上的代码是通过处理其template生成的：在parse一个widget时，会调用其widget类上的fillInTemplate方法，该方法有两个参数：args以一个object保存着你设置在widget所在的element上的属性，frag则是widget所在element的引用；通常，template里会使用dojoAttachPoint把所在node连接到相应widget类的属性上，如：

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

这样widget类就持有了template里node的引用，在fillInTemplate里用DOM来操作它们就不难生成想要的widget的表现代码了。

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

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