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处理过的页面,不是从服务器取回的原始页面。