Dojo的高级运用：Widget的制作

本文摘自：http://tailsherry.iteye.com/blog/102907




Widget是一个比较抽象的概念，就我们实际遇到的UI页面来说，按钮、文本框以及滚动条等都是一个个Dojo Widget. 一个Widget可以包含很多个网页元素（如按钮文本等），你可以在一个HTML页面上同时指定多个相同性质的Widget，可以给他们绑定一个事件，自定义他们的行为，甚至可以用它来创建其他的Widget。

本篇文章的讲到的例子叫做Autocompletion，一个类似于google搜索输入框的例子。这个Widget将侦测用户的键盘输入事件，并提供一个List供用户去选择可能要输入的内容。

Widget的组成
在开发一个Widget的时候，要事先决定到底需要那些个UI元素，了解他们是如何工作的。在本例中，包含了一下四个部分：
1、dojo.js：标准的Dojo的类库
2、js/dojo/utils/templates/AutoComplete.html：包含了所有相关的UI元素，以及相关的HTML标签。template中可以包含任何标准的HTML标签，但是只能有一个根元素。如果有多个元素在根部，那么默认第一个是根元素。
3、js/dojo/utils/AutoComplete.js：针对本Widget的JavaScript脚本，这里经常是一个JavaScript类，它继承了Dojo Widget中的一个相关类。
4、example3.jsp：用到Widget组件的页面。

学习并理解运用JavaScript来访问控制UI元素是制作Widget的关键。一旦Ajax功能被集成入JavaScript，创建一个RIA将是一件比较有创新意义的工作。

访问UI元素
如上段第2点讲到的，指定一个根元素是必须的，如AutoCompletion中的根元素是一个div，我们可以通过this.domNode来访问这个元素。如：

this.domNode.style.display = "none";   

如果要通过JavaScript访问界面上其他性质的元素，可以遍历this.domNode直到我们找到目标UI元素。另外，我们可以通过dojoAttachPoint属性：

  <input type="text" name="someTextField" dojoAttachPoint="myTextField"/>   

如果这段代码嵌入在了一个HTML中，那么我们可以直接在相关的JavaScript中使用this.myTextField来访问这个UI元素（注意，是HTML对象，并非此对象的值）。

Dojo可以同时绑定多个事件到UI元素，我们可以用dojo.event.connect()来绑定事件，如：

dojo.event.connect(this.domNode, "onclick", this, "myFunction");    

此外，我们也可以模仿上面属性访问的方式：

 

1. <div dojoAttachEvent="onclick: myFunction">     
2. <div dojoAttachEvent="onclick, onmouseover: myFunction">   

先看下面的示例代码：

dojo.provide("utils.AutoComplete");      
     
dojo.require("dojo.dom");      
...      
     
dojo.widget.tags.addParseTreeHandler("dojo:AutoComplete");      
     
utils.AutoComplete = function() {      
     
 // call super constructor      
 dojo.widget.HtmlWidget.call(this);      
     
 // load template      
 this.templatePath =      
    dojo.uri.dojoUri("utils/templates/AutoComplete.html");      
     
 this.widgetType = "AutoComplete";      
     
 // Instance variables      
 this.action = "";      
 this.formId = "";      
 this.form = {};      
 ...      
     
 this.postCreate = function() {      
  this.form = document.getElementById(this.formId);      
  this.textbox = document.getElementById(this.textboxId);      
  dojo.event.connect(this.textbox, "onkeyup",      
                    this, "textboxOnKeyUp");      
  ...      
 }      
     
 this.textboxOnKeyUp = function(evt) {      
  if (this.isKey(evt.keyCode, 38, 40)) {      
   this.checkUpDownArrows(evt.keyCode);      
  } else {      
   bindArgs = {      
    url:  this.action,      
    mimetype:   "text/javascript",      
    formNode:   this.form      
   };      
   var req = dojo.io.bind(bindArgs);      
   dojo.event.connect(req, "load", this, "populateChoices");      
  }      
 }      
     
 // Handler for "load" action of dojo.io.bind() call.      
 this.populateChoices = function(type, data, evt) {      
  ...      
 }      
}      
     
// define inheritance      
dojo.inherits(utils.AutoComplete, dojo.widget.HtmlWidget);  

例子中的代码是JavaScript类AutoComplete，这个js也是这个Widget例子的核心。

在上面的例子中，我们用到了addParseTreeHandler("dojo:AutoComplete") 来标志我们在HTML中对该Widget的引用，那在我们的页面中，应该如此调用这个Widget：

   <dojo:AutoComplete action="getBooks.jsp" textboxId="bookName" formId="bookForm"/>