麻雀虽小五脏俱全 Dojo自定义控件应用(1)(2)
关于_Widget基类的介绍
1、生命周期方法
_Widget提供了一系列方法称为“生命周期方法”，Dojo框架在初始化一个控件的时候，会依次调用它们，我们的自定义控件，可以重写特定的方法来加入自己的初始化逻辑，方法调用顺序及说明：
- JScript code
- <
- Code highlighting produced by Actipro CodeHighlighter (freeware)
- http://www.CodeHighlighter.com/
- >preamble(/*Object*/ params, /*DOMNode*/node)
- //这是一个通常不会用到的方法，这个方法的返回值，作为constructor的输入参数param
- constructor(/*Object*/ params, /*DOMNode*/node)
- // 这个方法相当于java类的构造函数
- // 在这个类中执行初始化动作
- postscript(/*Object*/ params, /*DOMNode*/node)
- //实际的控件创建过程，依次调用如下方法（都可以被重写）
- _Widget.create(/*Object*/params, /*DOMNode*/node)
- _Widget.postMixInProperties( )
- _Widget.buildRendering( )
- _Widget.postCreate( )
- //我用得最多的是postCreate方法，这个方法中，控件已经初始化完毕，界面上也已经显示出来了，
- //通常在这个方法中启动业务相关的处理
2、该类的几个重要属性（控件可以通过this访问）
◆id:控件被授予的唯一编号，如果用户不指定，则Dojo随机创建一个。
◆domNode:该控件在HTML中对应的DOM节点。
最基本的自定义控件示例：
js文件：./hello/world.js（以下涉及到文件名，都用相对路径，其中./代表和"Dojo,dijit,Dojox"同级目录）。
- JScript code
- <
- Code highlighting produced by Actipro CodeHighlighter (freeware)
- http://www.CodeHighlighter.com/
- >//声明自己输出的类名
- Dojo.provide("hello.world");
- //声明自己依赖的类名Dojo.require("dijit._Widget");
- Dojo.require("dijit._Templated");
- //Dojo.declare定义控件类，第一个参数：类名，第二个参数：父类数组，第三个参数：类的prototype
- Dojo.declare("hello.world",[dijit._Widget,dijit._Templated],
- {
- postCreate:function(){
- this.domNode.innerHTML="hellow world";
- }
- }
- );
该控件的行为极其简单，在postCreate方法中，将自己在HTML页面中对应的DOM节点的内容设置为hellow world。
- HTML code
- <
- Code highlighting produced by Actipro CodeHighlighter (freeware)
- http://www.CodeHighlighter.com/
- ><html>
- <head>
- <title>Hello World</title>
- <!-- 首先引入Dojo.js，modulePaths用来定义包含控件的js目录，类似于jsp的自定义tag引入的机制-->
- <script type="text/javascript" src="./Dojo/Dojo.js" djConfig="parseOnLoad:true,modulePaths:{hello:'../hello'}"></script>
- <script type="text/javascript">
- Dojo.require("Dojo.parser");
- Dojo.require("hello.world"); //引入自定义控件
- </script>
- </head>
- <body>
- <div DojoType="hello.world">
- </div>
- </body>
- </html>
modulePaths的具体作用和用法，请google即可。接下来，我们将控件参数化，我们可以在写标签的时候，将名字作为参数传进去，然后控件显示HELLO XXX，首先将html文件改成：
- HTML code
- <
- Code highlighting produced by Actipro CodeHighlighter (freeware)
- http://www.CodeHighlighter.com/
- >
- <html>
- <head>
- <title>Hello World</title>
- <!-- 首先引入Dojo.js，modulePaths用来定义包含控件的js目录，类似于jsp的自定义tag引入的机制-->
- <script type="text/javascript" src="./Dojo/Dojo.js" djConfig="parseOnLoad:true,modulePaths:{hello:'../hello'}">
- </script><script type="text/javascript">
- Dojo.require("Dojo.parser");
- Dojo.require("hello.world");
- </script></head><body>
- <div DojoType="hello.world" yourName="jinxfei"></div>
- </body>
- </html>
大家注意到，我们在标签上增加了“yourName”属性，在控件中如何使用该属性呢？可以在construtctor方法中接收此属性的值，将值赋给控件类自身的变量，然后在postCreate中使用，JavaScript代码如下：
- JScript code
- <
- Code highlighting produced by Actipro CodeHighlighter (freeware)
- http://www.CodeHighlighter.com/
- >
- Dojo.provide("hello.world");
- Dojo.require("dijit._Widget");
- Dojo.require("dijit._Templated");
- Dojo.declare("hello.world",[dijit._Widget,dijit._Templated],
- { yourName:'world',
- constructor:function(params,node)
- {
- this.yourName=params.yourName;
- },
- postCreate:function()
- {
- this.domNode.innerHTML="hellow "+this.yourName;
- }
- }
- );
接下来，我们将进一步增加控件进的复杂性，增加一个输入框，在这个输入框中输入文本的同时，动态更新hello XXX，这就要用到Dojo的事件绑定机制，最常用的模式为：Dojo.connect(node,event,obj,method);表示将obj的method方法作为domNode的event事件处理函数，例如：
- Dojo.connect(inputText,"onkey",this,"updateHello");
这次先改控件，在postCreate的时候，动态增加一个输入框，并为输入框动态绑定事件：
- JScript code
- <
- Code highlighting produced by Actipro CodeHighlighter (freeware)
- http://www.CodeHighlighter.com/
- >
- Dojo.provide("hello.world");
- Dojo.require("dijit._Widget");
- Dojo.require("dijit._Templated");
- Dojo.declare("hello.world",[dijit._Widget,dijit._Templated],
- { yourName:'world',
- typeIn:null,
- echoDiv:null,
- constructor:function(params,node)
- { this.yourName=params.yourName;
- },
- postCreate:function(){
- this.typeIn=document.createElement("input");
- this.typeIn.type="text";
- this.domNode.appendChild(this.typeIn);
- this.echoDiv=document.createElement("div");
- this.domNode.appendChild(this.echoDiv);
- Dojo.connect(this.typeIn,"onkeyup",this,"updateHello");//动态绑定事件
- this.updateHello();//调用方法初始化一下，先显示一个空的hello
- } ,
- updateHello:function()
- {
- this.echoDiv.innerHTML="hello "+this.typeIn.value;
- }
- }
- );
而HTML文件中对控件的引用，不用做任何改变(严格来讲，你需要删除yourName="jinxfei"这个属性）。从这个稍微有一点点复杂的控件，我们已经可以看出Dojo的优势：真正的面向对象！控件管理范畴内的DOM元素，都可以放在类中作为属性来使用（直接用this.xxx引用)，这样，避免了document.getElementByID()满天飞，控件是内聚的。响应事件的方法也是类的方法，免得在页面中声明大量的离散function，不好管理。
