Dojo的高级运用:Widget的制作

原创 2007年09月22日 09:55:00
 

在上一篇 使用Dojo和JSON构建Ajax应用 中,我初步介绍了一下Dojo和JSON,并提供了简单的例子。在这篇文章中,将涉及到Dojo的高级运用之一,利用Dojo的高可扩展性框架来制作widget。在某种意义上来说,widget的模块化开发可以大大的简化我们的工作。

什么是Dojo Widget

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来访问这个元素。如:

js 代码
  1. this.domNode.style.display = "none";  

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

xml 代码
  1. <input type="text" name="someTextField" dojoAttachPoint="myTextField"/>  

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

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

js 代码
  1. dojo.event.connect(this.domNode, "onclick"this"myFunction");  

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

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


Widget牛刀小试

先看下面的示例代码:

js 代码
  1. dojo.provide("utils.AutoComplete");   
  2.   
  3. dojo.require("dojo.dom");   
  4. ...   
  5.   
  6. dojo.widget.tags.addParseTreeHandler("dojo:AutoComplete");   
  7.   
  8. utils.AutoComplete = function() {   
  9.   
  10.  // call super constructor   
  11.  dojo.widget.HtmlWidget.call(this);   
  12.   
  13.  // load template   
  14.  this.templatePath =   
  15.     dojo.uri.dojoUri("utils/templates/AutoComplete.html");   
  16.   
  17.  this.widgetType = "AutoComplete";   
  18.   
  19.  // Instance variables   
  20.  this.action = "";   
  21.  this.formId = "";   
  22.  this.form = {};   
  23.  ...   
  24.   
  25.  this.postCreate = function() {   
  26.   this.form = document.getElementById(this.formId);   
  27.   this.textbox = document.getElementById(this.textboxId);   
  28.   dojo.event.connect(this.textbox, "onkeyup",   
  29.                     this"textboxOnKeyUp");   
  30.   ...   
  31.  }   
  32.   
  33.  this.textboxOnKeyUp = function(evt) {   
  34.   if (this.isKey(evt.keyCode, 38, 40)) {   
  35.    this.checkUpDownArrows(evt.keyCode);   
  36.   } else {   
  37.    bindArgs = {   
  38.     url:  this.action,   
  39.     mimetype:   "text/javascript",   
  40.     formNode:   this.form   
  41.    };   
  42.    var req = dojo.io.bind(bindArgs);   
  43.    dojo.event.connect(req, "load"this"populateChoices");   
  44.   }   
  45.  }   
  46.   
  47.  // Handler for "load" action of dojo.io.bind() call.   
  48.  this.populateChoices = function(type, data, evt) {   
  49.   ...   
  50.  }   
  51. }   
  52.   
  53. // define inheritance   
  54. dojo.inherits(utils.AutoComplete, dojo.widget.HtmlWidget);  

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

当我们定义一个Widget的时候,Dojo需要通过dojo.provide()方法显式的标志这个类;另外,我们在最后通过dojo.inherits()方法来定义此JavaScript类的继承,在js代码的最前端用 dojo.widget.HtmlWidget.call(this)来触发实现这个继承;此外,还有来自于父类的this.templatePath属性,this.postCreate()方法都应该注意到。

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

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

这段页面代码输出AutoComplete htmltemplate中的页面到浏览器,所有在这段tag中的属性都是直接对应后台js中的this."attribute"的。

本章和 使用Dojo和JSON构建Ajax应用 中涉及到的代码:dojo_json.rar

Dojo1.11官方教程文档翻译(5.8)创建基于模板的widget

这篇教程你将了解Dijit的`_TemplateMixin`混合的重要性,以及如何使用模板快速创建自定义widget。...
  • taijiedi13
  • taijiedi13
  • 2017年02月17日 20:41
  • 472

掌握 Dojo 工具包,第 6 部分: Dojo Widget 的高级应用

本文主要是讲述 Dojo Widget 的高级使用方法。Dojo 在目前种类众多的 Web2.0 开发框架中,其最令人瞩目的就是其类型多样,功能强大的 Widget。通过本文,读者能够掌握对 Dojo...
  • joyous
  • joyous
  • 2016年04月23日 03:43
  • 963

Mac OS使用技巧十八:Safari碉堡功能之一制作Widget

Safari的使用大家应该自己摸索就可以慢慢驾轻就熟,毕竟再高端也是个浏览器,从开始上网就要一直使用浏览器,Safari只是众多浏览器中的一个比较强大的罢了。      下面给大家介绍一下Safa...
  • u012200908
  • u012200908
  • 2014年10月01日 00:37
  • 5444

C++的高级特性

本文介绍以下内容:如何创建动态数组,如何使用向量,如何使用迭代器,define如何定义函数,函数如何返回复杂类型,STL中的快速排序。 动态数组 int n; n=10;//此处可以把用户从界面上输入...
  • qq_35488967
  • qq_35488967
  • 2017年02月25日 19:08
  • 484

使用Dojo(一) widget的生命周期管理

最近在使用dojo作为项目系统前端开发的第三方库时,遇到了一些问题,由于之前只是单纯的拷贝代码,而未考虑到这些问题,现将这些问题记录下来,并结合DOJO库进行分析,以此系列作为记录,为今后的前端开发积...
  • u010600020
  • u010600020
  • 2015年05月30日 10:14
  • 99

WebView的高级使用

WebView的高级使用 1.原生语言app——NativeApp(纯ios,纯安卓)的应用(OC,JAVA) 好处:原生系统支持强,流畅性足,系统的正统开发语言,用户体验好 ...
  • haiooh
  • haiooh
  • 2016年04月15日 10:31
  • 422

学习Ajax框架之dojo:第七节——初识Dojo widget(附源代码)

widget在越来越多的web应用中出现,那么,什么是widget?widget使用什么样的标记方式进行声明的呢?widget可以动态创建吗?widget有哪些常用的方法和属性呢?……这一系列的问题不...
  • zhigangsun
  • zhigangsun
  • 2014年03月25日 13:50
  • 405

dojo lazy Tree,使用JsonRest获取节点数据

创建html标签 创建dojo代码 require([ "dojo/store/JsonRest", "dijit/Tree", "dijit/tree/Obje...
  • earthhour
  • earthhour
  • 2013年07月30日 14:12
  • 1844

(2)Dojo学习之模块化

引言 Dojo之模块化 1定义模块 2调用模块 3解释dojoConfig的全局变量 总结1.引言      在本篇博客中主要讲解一下如何在dojo中使用模块,如何自定义自己的模块等等,在使用dojo...
  • LoveCarpenter
  • LoveCarpenter
  • 2017年01月02日 17:24
  • 2372

(7)Dojo学习之query选择器(上)

引言 基本选择器 1 通过id选择DOM 2 通过class选择DOM 3 通过标签名选择元素 4 多个选择器一起使用 层次选择器 1 祖先元素和后代元素的关系 2 父子元素的关系 3 根据相对位置选...
  • LoveCarpenter
  • LoveCarpenter
  • 2017年01月26日 16:36
  • 924
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Dojo的高级运用:Widget的制作
举报原因:
原因补充:

(最多只允许输入30个字)