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