在上一篇 使用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来访问这个元素。如:
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");
此外,我们也可以模仿上面属性访问的方式:
<div dojoAttachEvent="onclick: myFunction">
<div dojoAttachEvent="onclick, onmouseover: myFunction">
Widget牛刀小试
先看下面的示例代码:
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例子的核心。
当我们定义一个Widget的时候,Dojo需要通过dojo.provide()方法显式的标志这个类;另外,我们在最后通过dojo.inherits()方法来定义此JavaScript类的继承,在js代码的最前端用 dojo.widget.HtmlWidget.call(this)来触发实现这个继承;此外,还有来自于父类的this.templatePath属性,this.postCreate()方法都应该注意到。
在上面的例子中,我们用到了addParseTreeHandler("dojo:AutoComplete") 来标志我们在HTML中对该Widget的引用,那在我们的页面中,应该如此调用这个Widget:
<dojo:AutoComplete action="getBooks.jsp" textboxId="bookName" formId="bookForm"/>
这段页面代码输出AutoComplete htmltemplate中的页面到浏览器,所有在这段tag中的属性都是直接对应后台js中的this."attribute"的。
本章和 使用Dojo和JSON构建Ajax应用 中涉及到的代码:dojo_json.rar
- dojo_json.rar (190.2 KB)
- 描述: <<Dojo的高级运用:Widget的制作>> 和 <<使用Dojo和JSON构建Ajax应用>> 中涉及到的源代码
- 下载次数: 202
分享到:
相关推荐
http://bbs.csdn.net/topics/390775979 请参考此处描述
Include <SCRIPT TYPE="text/javascript" SRC="dojo/dojo.js"></SCRIPT> and you're on your way. Browse to dojo/tests/runTests.html or dijit/themes/themeTester.html to see Dojo in action
该项目为提供了包装器,以便在带有 dijit Forms 的 dojo 工具包中使用。 这个包装器定义了新的 FormValue 对象 dojo-ckeditor/Editor。 dojo-ckeditor 项目在 MIT 许可下可用。安装使用 Bower 自动下载可以使用以下...
dojo_reads:使用PythonDjango创建的Dojo读取
Dojo之路:如何利用Dojo实现Drag and Drop效果
Dojo之Widget标签开发 - 我为人人,人人为我 - BlogJava
dojo_ninjas:使用Python创建的Dojo和Ninjas
Widget是指小工具。一系列的小工具通过一个特定的平台(Widget引擎)为用户展示不同的个性化的信息。
dojo-smore: S'more 道场商店概述这个包包含一些dojo/store API 的实现,它们试图“带回”一些更常用的dojo/data存储中存在的有用特性,但dojo/store中的任何东西都没有提供开箱即用的特性。 dojo/store 。 包括以下...
dojo-pizza:React,redux,axios,json服务器
Dojo开发包: 包含以下目录dijit dojo dojox util
@dojo/widget-core存储库已被弃用并合并到 您可以在我们的上阅读有关此更改的更多信息。 我们将继续为widget-core和其他Dojo 2存储库提供补丁,并且可用于帮助将项目从v2迁移到v3。 @ dojo / widget-core widget-...
在 /js/app/widget 下你会发现模板位于模板目录中。 字符串包位于 nls 目录中。 要添加对不同位置的支持,只需使用所需的 js 文件创建正确命名的文件夹。 CSS 位于资源目录中。 可用的浏览器前进和后退按钮,...
Dojo Boilerplate:Dojo开发入门工具包 Dojo Boilerplate是一组文件,可帮助您快速使用Dojo Toolkit进行安装和运行。 它说明了与Dojo合作时的一些基本最佳实践。 快速开始 确保已安装和。 使用git clone --...
您的任务将是使用ReasonReact制作一张世界地图,将github用户名发送到我们的后端,并获取其他所有人的位置,以在地图上绘制点。 要绘制地图,您将绑定到 ,这里有一个非常有用的。 要获取每个人的位置,您应该将...
Code_Dojo_1 dojo代码的代码2015/10/08
Dextra SQL Xtags培训创建Mysql环境docker run -d -p 3306:3306 -P -e MYSQL_ROOT_PASSWORD=admin --name mysql-dojo mysql:5.7 该代码是用于创建Barzinga数据库(Dextra的自助糖果)的原型。 在此项目中,我们的...