1、1Dojo中文使用手册本手册针对 0.9、1.0 及 1.x版本。目录快速安装Hello World-第一个程序程序调试第一部分：使用 Dojo-Dojo和 Dijit例子第一个例子：为什么一些人不填写传真表单？第二个例子：总是点击两次第三个例子：和技术人员交谈第二部分 Dijit-Dojo的小部件库概述共用特征表单、验证和个性化的文本输入框表单小部件复选框、单选框、切换（？）组合框（ComboBox）下拉过滤选择框（FilteringSelect）数字选择框（NumberSpinner）滑尺（Slider）文本输入域（Textarea）文本框类（验证、货币、数字、日期、时间）布局（只讲一个
2、tabContainer）命令控制按钮、组合按钮和下拉按钮菜单工具菜单用户使用帮助提示和反馈进度条提示对话框和工具对话框页框（TitlePane）高级功能（只讲一个 Tree）树（Tree）第三部分：使用 Dojo和 Dijit与 javascript协作通用性初始对象模块建立和设计小部件自已设计小部件类事件系统异步交互 XMLHttpRequest(XHR)拖拽2使用 Dojo.Data接口使用 dojo.query选择 DOM节点回退按钮其它功能多个版本共处于一个页面第四部分：调试第五部分：Dojox 扩展包cometd(客户端)dojox图表dojox集合dojox加密dojox数据do
3、jox网格（翻译）dojox离线（翻译）快速安装Dojo 提供了三种安装方式:1. 使用美国在线(AOL)的内容分发网络(CDN)上的 dojo. 2. 在本地使用 dojo的一个稳定版本. 3. 从 dojo网站的 SVN服务器上获取的最新代码.使用内容分发网络(CDN)上的 Dojo这种方法非常的快捷!你能够通过添加一个 到 美国在线(AOL)的内容分发网络(CDN)上,而无需占用你服务器上的任何空间和资源.所有在这本手册里出现的 Dijit范例均通过此方法获取 Dojo的 js文件.你可以直接拷贝粘贴第 1,2部分的任何例子到你自己的服务器上就可以正常的运行了!在第 3部分的例子中,因为
4、很多是一些代码片段,所以我们将提醒您如何做一些更改以便使这些例子正常运行.您可以使用: 来引用 Dojo的 js文件请参考: Dojo And AOL 获取最新的引用链接.使用本地的 Dojo如果您是 Dojo的传统用户,你可以以以往的方式下载,安装,并且使用 Dojo.1. 从 http:/dojotoolkit.org/downloads 下载最新的 Dojo 2. 解压缩文件到本地服务器上. 假设您将文件安装到/js 目录下,其目录结构应该如下(注：dojo1.2.3 版本与本目录不相同，只有 dojo、dijit、dojox 三个子目录)。33. 从您的浏览器中打开 http:/ 你就
5、能够看到如下页面:这样你就已经成功安装 Dojo了!这篇教程的目的是提供一个新手学习和了解 Dojo的窗口。虽然内容不可能覆盖所有的细节信息(因为过多的细节对新手可能会产生负面影响),但是我们任然尽量将 Dojo的大部分特性都介绍给大家.至于那些介绍到的概念等信息,您可以参考本文末尾的连接( 获取更多资源一节 Finding More Resources )Hello World 第一个程序准备工作首先你当然需要 Dojo 了。你可以到 http:/download.dojotoolkit.org 获取稳定的版本.接着，你需要一个网络服务器,无论是跑在 Linux,Windows 还是 Mac
6、 上,Dojo 的 Javascript 库均会从你的服务器按需的下载到本地.不过,这个文档中的 AJAX 例子需要服务器端的语言支持,如 PHP,ASP 等.跑在客户端的 Dojo 以及 Dijit 代码已证实可以在 IE6,7,Firefox 2 和 Safari 上正常运行.建立 Dojo首先,你需要在服务器端创建一个文件夹,取名为“HelloWorldTutorial“然后创建再创建一个取名为“dojoroot“.最后,使用任何解压缩工具将 Dojo 压缩包解压缩到4/HelloWorldTutorial/dojoroot. 目录结构如下:正式开始当我们完成了上述准备工作,我们需要将
7、Javascript 组件放入我们的 HTML 页面当中.代码如下:Dojo: Hello World!import “dojoroot/dijit/themes/tundra/tundra.css“import “dojoroot/dojo/resources/dojo.css“正如你所看到的,这是一个个标准的 HTML,其包含三个元素:* 两个 CSS 文件. tundra.css 是在本范例中 Dijit使用的主题风格.* 在 head标签里的脚本元素(script element). 这个脚本元素负责加载基本的 Dojo脚本,其作用是提供动态加载其他 Dojo功能的能力.* 最后,我们
8、将 trundra作为 body标签的 class属性值.创建一个按钮小部件(Button Widget)好了,现在是最令人兴奋的部分!在这个例子里我们将创建一个拥有“Hello World!“文字的按钮小部件.在这里,我们将获取三个事件(mouseOut,mouseOver,mouseDown),这样,我们就能做一些其他事情,比如提高用户体验等.我们要做的第一步是告诉 Dojo去动态加载哪些模块.在 head标签里,添加另外一个部分(这部分称作 section 2)到 section 1下面:/ Load Dojos code relating to the Button widgetdoj
9、o.require(“dijit.form.Button“);dojo.require 作用是通知 Dojo加载按钮的小部件(Button widget).如果不加这一行,下面的代码将不能被 Dojo解析,这样得到的将是普通的 HTML 按钮.5然后,请将下面的代码插入到 html的 body部分中.Hello World!这段代码当中最关键的是 dojoType属性.这个 dojoType 属性负责通知 Dojo在页面加载时如何处理这个元素.在这里,我们使用的是 button元素而不是 input元素.事实上,两者都是可以被 Dojo识别的.前提是只要元素里存在 dojoType属性.值得注
10、意的是如果我们用input元素来显示按钮元素,我们应该使用 input中的 value属性来显示希望出现的字符.将一个事件和小部件相连起来如果点击这个按钮触发事件,Dojo 将如何处理呢?我们只需要为这个按钮添加一个 onClick事件处理函数.不过,Dojo 还提供了一套简单而有效的办法: Dojo 事件系统( Dojo event system)!这种简单的绑定事件的方法是通过一个脚本标签(script tag)来绑定事件.当然,这不是一个简单的脚本标签,它包含了一个“dojo/method“的 type 属性.就像这样:Hello World!alert(You pressed the
11、button);是不是很简单？将脚本片段插入到标签当中的确是一个好主意。并且你还可以在脚本中利用 DOM Level2事件的全部功能。也就是说，你可以检测到 SHIFT和 CTRL键，获取所有的事件属性，以及 HTML树在事件的冒泡阶段获取事件信息等。如果你曾经使用过 DOM Level2的事件，你就能理解 IE与 Firefox有多大差别了。通过使用 Dojo，你不用多做任何处理就能很好的支持不同的浏览器。这也是 Dojo的强大所在。通过服务器获取数据当你点击按钮就弹出一个对话框很不错吧？！但如果我们想从服务器获取数据怎么办？Dojo使用一个简洁的方法完成这一复杂的功能- dojo.xhrG
12、et。为了引用方便，我们标记这一节代码在附带代码一节为 HelloWorld-Section5.html 和 response.txt。首先，当数据从服务端返回时，我们需要一个回调函数去处理数据。将下面的代码插入到head标签里：function helloCallback(data,ioArgs) alert(data); function helloError(data, ioArgs) alert(Error when retrieving data from the server!);这里的两个参数很重要，请不要删除任意一个。第一个参数: data 包含了从服务端返回的数据，第二个参数
13、 ioArgs包含了 Dojo I/O 绑定对象(Bind object)。我们现在只考虑第一个参数。第二步是使点击按钮触发服务端请求。将下面的代码：alert(You pressed the button);6改为：dojo.xhrGet(url: response.txt,load: helloCallback,error: helloError);上面的代码主要目的是告诉 Dojo查询指定的 url，并且定义回调函数处理服务器端返回的数据。而后，我们需要在与 HelloWorld相同路径下创建另外一个名为 response.txt的文件。在这个文件中，你可以写上一些文字，比如:“Welc
14、ome to the Dojo Hello World Tutorial“。现在，如果你点击按钮，一个 javascript的对话框将显示 response.txt中的内容。真的很容易！下一步，我们将看看如何通过服务器端请求做一些有意义的事情。使用 GET 方法向服务器端传送数据从服务端传回静态的数据是个不错的开始。但是在现实生活中却并不常见。我们更需要提交一些信息供服务器端处理。在这一节中，我们将使用 GET 方法，而下一节我们将使用POST 方法实现这一目标。为了引用方便，我们标记这一节代码在附带代码一节为 HelloWorld-Section6.html。服务器端代码文件为： “Hell
15、oWorldResponseGET.“分别有以下几个后缀的文件： ASP(.asp),PHP(.php),ColdFusion(.cfm)或者 Java(jsp)。首先，在 HelloWorld.html 里需要添加一个输入框(Input Element)。将一下部分：Hello World!dojo.xhrGet(url: HelloWorldResponseGET.php,load: helloCallback,error: helloError,content: name: dojo.byId(name).value );Please enter your name: 换为：Hello
16、World!dojo.xhrGet(url: HelloWorldResponseGET.php,load: helloCallback,error: helloError,7content: name: dojo.byId(name).value );Please enter your name: 在下一步之前,我们需要注意的是在 dojo.xhrGet 方法中的 url 属性应该设置成与你的服务器环境相匹配的地址,如果你用 ASP 的服务器,则应该使用HelloWorldResponseGET.asp 而不是HelloWorldResponseGET.php,相似的,如果你使用 ColdF
17、usion 服务器,则应该使用 HelloWorldResponseGET.cfm,如果是 JSP 服务器,则应该使用HelloWorldResponseGET.jsp等等.这些代码都将在下一节中出现,并且能够在本教程最后的附件中找到.在上面的代码中,你可以注意到有一个新的参数传递到 dojo.xhrGet 方法中,这个新的属性content 允许程序员将任意的值作为参数传递给服务器端.在本例中,因为我们使用的是dojo.io.bind 的默认方法:GET 方法,所以服务器端通过 GET 的一个参数name,得到文本框中的值.值得注意的是,如果服务器端期望的是另外的名字(比如myName),我
18、们只需改变内容属性就可以了.如下:content: myName: dojo.byId(name).value 这里的 dojo.byId(name).value 我们是第一次见到,很简单,其实这个方法是标准的document.getElementById(.)的简单写法.最后,如果你将你的名字放到文本框中,然后点击“Hello World“,一个信息框应该会显示出“Hello , welcome to the world of Dojo!“的信息,而你在文本框中输入的名字就会出现在那里.下面是服务器端的脚本.一些能够从本页面的最下面下载.使用 PHP 服务器使用 ASP 服务器使用 Java
19、(JSP)服务器Hello , welcome to the world of Dojo!通过 POST 方法提交数据通过 GET 方法很有用,但是有些时候你却需要在传统的 HTML 的表单中使用 Dojo 去提高网站的用户体验.同样,Dojo 提供了一个非常友善的方法.你可以从下面部分获得代码,或者,你也可以本文最末的连接处下载.最后提醒一下,就像上一节所述,你同样需要根据服务端脚本类型去改变 url 属性的值.首先,我们需要将 HelloWorld.html 中 html 代码做一些调整.将:Please enter your name: 变为:Please enter your name
20、: 然后,我们需要改变 dojo 的方法 :dojo.xhrGet(url: HelloWorldResponseGET.php,load: helloCallback,error: helloError,content: name: dojo.byId(name).value );变为:/ Dont forget to replace the value for url with/ the value of appropriate file for your server/ (i.e. HelloWorldResponsePOST.asp) for an ASP serverdojo.xhr
21、Post(url: HelloWorldResponsePOST.php,9load: helloCallback,error: helloError,form: myForm);从上面的代码可以看出,我们将 dojo.xhrGet 变为 dojo.xhrPost,我们将 content 属性删除了,取而代之的是 form 属性.这样做的目的是通知 dojo.xhrPost 需要使用表单myForm作为数据源.接下来,你只要点击“Hello World“按钮,应该会弹出一个带有你名字的提示框“Hello , welcome to the world of Dojo!“使用 PHP 服务器:使用
22、 ASP 服务器使用 ColdFusion 服务器10Hello, #form.name#, welcome to the world of Dojo!使用 Java(JSP)服务器Hello , welcome to the world of Dojo!程序调试可以利用以下调试工具来进行调试。使用 Firebug 或者是 Firebug LiteFirebug是最佳的调试工具。下载地址是：http:/ IE或其它浏览器下使用 Firebug Lite。，但这种方式要求你必须在 dojo里包含以下内容：第一部分：使用 Dojo-Dojo和 Dijit例子第一个例子：为什么一些人不填写传真表单？
23、第二个例子：总是点击两次第三个例子：和技术人员交谈第一部分：使用 Dojo-Dojo 和 Dijit 例子略第二部分 Dijit-Dojo 的小部件库如果你没有使用 Dojo的经历，那么从 Dijit开始将是个好的起点。你可以通过它使用很少甚至不需要使用 JS来建立符合 web2.0的页面。Dijit有两种使用方式：在 html标签里使用特殊属性的声明、通过 JS实现。这两种方式都有相同的选项。像在第一部分里我们都使用声明的方式使用。第三部分将展示如何通过程序实现。Dijit是与它自己的主题绑定的，tundra 主题给了针对所有小部件的一个通用的设计和色彩方案。你可以通过容器或元素的主题重构。Dijit被设计成通用的-适应用户不同的语言和文化以及相关的不同功能。语言翻译，双向文本，不同习惯的数字、日期都已经被封装了。服务器交互后的数据可能并没有考虑
