Dojo-user-booklet1

1Dojo中文使用手册本手册针对0.9、1.0及1.x版本。目录快速安装HelloWorld-第一个程序程序调试第一部分：使用Dojo-Dojo和Dijit例子第一个例子：为什么一些人不填写传真表单？第二个例子：总是点击两次第三个例子：和技术人员交谈第二部分Dijit-Dojo的小部件库概述共用特征表单、验证和个性化的文本输入框表单小部件复选框、单选框、切换（？）组合框（ComboBox）下拉过滤选择框（FilteringSelect）数字选择框（NumberSpinner）滑尺（Slider）文本输入域（Textarea）文本框类（验证、货币、数字、日期、时间）布局（只讲一个tabContainer）命令控制按钮、组合按钮和下拉按钮菜单工具菜单用户使用帮助提示和反馈进度条提示对话框和工具对话框页框（TitlePane）高级功能（只讲一个Tree）树（Tree）第三部分：使用Dojo和Dijit与javascript协作通用性初始对象模块建立和设计小部件自已设计小部件类事件系统异步交互XMLHttpRequest(XHR)拖拽2使用Dojo.Data接口使用dojo.query选择DOM节点回退按钮其它功能多个版本共处于一个页面第四部分：调试第五部分：Dojox扩展包cometd(客户端)dojox图表dojox集合dojox加密dojox数据dojox网格（翻译）dojox离线（翻译）快速安装Dojo提供了三种安装方式:1.使用美国在线(AOL)的内容分发网络(CDN)上的dojo.2.在本地使用dojo的一个稳定版本.3.从dojo网站的SVN服务器上获取的最新代码.使用内容分发网络(CDN)上的Dojo这种方法非常的快捷!你能够通过添加一个script到美国在线(AOL)的内容分发网络(CDN)上,而无需占用你服务器上的任何空间和资源.所有在这本手册里出现的Dijit范例均通过此方法获取Dojo的js文件.你可以直接拷贝粘贴第1,2部分的任何例子到你自己的服务器上就可以正常的运行了!在第3部分的例子中,因为很多是一些代码片段,所以我们将提醒您如何做一些更改以便使这些例子正常运行.您可以使用:scripttype=text/javascriptsrc=来引用Dojo的js文件请参考:DojoAndAOL获取最新的引用链接.使用本地的Dojo如果您是Dojo的传统用户,你可以以以往的方式下载,安装,并且使用Dojo.1.从下载最新的Dojo2.解压缩文件到本地服务器上.假设您将文件安装到/js目录下,其目录结构应该如下(注：dojo1.2.3版本与本目录不相同，只有dojo、dijit、dojox三个子目录)。33.从您的浏览器中打开你就能够看到如下页面:这样你就已经成功安装Dojo了!这篇教程的目的是提供一个新手学习和了解Dojo的窗口。虽然内容不可能覆盖所有的细节信息(因为过多的细节对新手可能会产生负面影响),但是我们任然尽量将Dojo的大部分特性都介绍给大家.至于那些介绍到的概念等信息,您可以参考本文末尾的连接(获取更多资源一节FindingMoreResources)HelloWorld第一个程序准备工作首先你当然需要Dojo了。你可以到获取稳定的版本.接着，你需要一个网络服务器,无论是跑在Linux,Windows还是Mac上,Dojo的Javascript库均会从你的服务器按需的下载到本地.不过,这个文档中的AJAX例子需要服务器端的语言支持,如PHP,ASP等.跑在客户端的Dojo以及Dijit代码已证实可以在IE6,7,Firefox2和Safari上正常运行.建立Dojo首先,你需要在服务器端创建一个文件夹,取名为HelloWorldTutorial然后创建再创建一个取名为dojoroot.最后,使用任何解压缩工具将Dojo压缩包解压缩到4/HelloWorldTutorial/dojoroot.目录结构如下:正式开始当我们完成了上述准备工作,我们需要将Javascript组件放入我们的HTML页面当中.代码如下:htmlheadtitleDojo:HelloWorld!/title!--SECTION1--styletype=text/css@importdojoroot/dijit/themes/tundra/tundra.css@importdojoroot/dojo/resources/dojo.css/stylescripttype=text/javascriptsrc=dojoroot/dojo/dojo.jsdjConfig=parseOnLoad:true/script/headbodyclass=tundra/body/html正如你所看到的,这是一个个标准的HTML,其包含三个元素:*两个CSS文件.tundra.css是在本范例中Dijit使用的主题风格.*在head标签里的脚本元素(scriptelement).这个脚本元素负责加载基本的Dojo脚本,其作用是提供动态加载其他Dojo功能的能力.*最后,我们将trundra作为body标签的class属性值.创建一个按钮小部件(ButtonWidget)好了,现在是最令人兴奋的部分!在这个例子里我们将创建一个拥有HelloWorld!文字的按钮小部件.在这里,我们将获取三个事件(mouseOut,mouseOver,mouseDown),这样,我们就能做一些其他事情,比如提高用户体验等.我们要做的第一步是告诉Dojo去动态加载哪些模块.在head标签里,添加另外一个部分(这部分称作section2)到section1下面:!--SECTION2--scripttype=text/javascript//LoadDojo'scoderelatingtotheButtonwidgetdojo.require(dijit.form.Button);/scriptdojo.require作用是通知Dojo加载按钮的小部件(Buttonwidget).如果不加这一行,下面的代码将不能被Dojo解析,这样得到的将是普通的HTML按钮.5然后,请将下面的代码插入到html的body部分中.buttondojoType=dijit.form.Buttonid=helloButtonHelloWorld!/button这段代码当中最关键的是dojoType属性.这个dojoType属性负责通知Dojo在页面加载时如何处理这个元素.在这里,我们使用的是button元素而不是input元素.事实上,两者都是可以被Dojo识别的.前提是只要元素里存在dojoType属性.值得注意的是如果我们用input元素来显示按钮元素,我们应该使用input中的value属性来显示希望出现的字符.将一个事件和小部件相连起来如果点击这个按钮触发事件,Dojo将如何处理呢?我们只需要为这个按钮添加一个onClick事件处理函数.不过,Dojo还提供了一套简单而有效的办法:Dojo事件系统(Dojoeventsystem)!这种简单的绑定事件的方法是通过一个脚本标签(scripttag)来绑定事件.当然,这不是一个简单的脚本标签,它包含了一个dojo/method的type属性.就像这样:buttondojoType=dijit.form.Buttonid=helloButtonHelloWorld!scripttype=dojo/methodevent=onClickalert('Youpressedthebutton');/script/button是不是很简单？将脚本片段插入到标签当中的确是一个好主意。并且你还可以在脚本中利用DOMLevel2事件的全部功能。也就是说，你可以检测到SHIFT和CTRL键，获取所有的事件属性，以及HTML树在事件的冒泡阶段获取事件信息等。如果你曾经使用过DOMLevel2的事件，你就能理解IE与Firefox有多大差别了。通过使用Dojo，你不用多做任何处理就能很好的支持不同的浏览器。这也是Dojo的强大所在。通过服务器获取数据当你点击按钮就弹出一个对话框很不错吧？！但如果我们想从服务器获取数据怎么办？Dojo使用一个简洁的方法完成这一复杂的功能-dojo.xhrGet。为了引用方便，我们标记这一节代码在附带代码一节为HelloWorld-Section5.html和response.txt。首先，当数据从服务端返回时，我们需要一个回调函数去处理数据。将下面的代码插入到head标签里：scriptfunctionhelloCallback(data,ioArgs){alert(data);}functionhelloError(data,ioArgs){alert('Errorwhenretrievingdatafromtheserver!');}/script这里的两个参数很重要，请不要删除任意一个。第一个参数:data包含了从服务端返回的数据，第二个参数ioArgs包含了DojoI/O绑定对象(Bindobject)。我们现在只考虑第一个参数。第二步是使点击按钮触发服务端请求。将下面的代码：scripttype=dojo/methodevent=onclickalert('Youpressedthebutton');6/script改为：scripttype=dojo/methodevent=onClickdojo.xhrGet({url:'response.txt',load:helloCallback,error:helloError});/script上面的代码主要目的是告诉Dojo查询指定的url，并且定义回调函数处理服务器端返回的数据。而后，我们需要在与HelloWorld相同路径下创建另外一个名为response.txt的文件。在这个文件中，你可以写上一些文字，比如:WelcometotheDojoHelloWorldTutorial。现在，如果你点击按钮，一个javascript的对话框将显示response.txt中的内容。真的很容易！下一步，我们将看看如何通过服务器端请求做一些有意义的事情。使用GET方法向服务器端传送数据从服务端传回静态的数据是个不错的开始。但是在现实生活中却并不常见。我们更需要提交一些信息供服务器端处理。在这一节中，我们将使用GET方法，而下一节我们将使用POST方法实现这一目标。为了引用方便，我们标记这一节代码在附带代码一节为HelloWorld-Section6.html。服务器端代码文件为：HelloWorldResponseGET.分别有以下几个后缀的文件：ASP('.asp'),PHP('.php'),ColdFusion('.cfm')或者Java('jsp')。首先，在HelloWorld.html里需要添加一个输入框(InputElement)。将一下部分：buttondojoType=dijit.form.Buttonid=helloButtonHelloWorld!scripttype=dojo/methodevent=onClickdojo.xhrGet({url:'HelloWorldResponseGET.php',load:helloCallback,error:helloError,content:{name:dojo.byId('name').value}});/script/butt