Dojo中文使用手册Word格式.docx
《Dojo中文使用手册Word格式.docx》由会员分享，可在线阅读，更多相关《Dojo中文使用手册Word格式.docx（59页珍藏版）》请在冰点文库上搜索。
页框（TitlePane）
高级功能（只讲一个Tree）
树（Tree）
第三部分：
使用Dojo和Dijit与javascript协作
通用性
初始对象
模块
建立和设计小部件
自已设计小部件类
事件系统
异步交互XMLHttpRequest（XHR）
拖拽
使用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/javascript"
src="
来引用Dojo的js文件
请参考:
DojoAndAOL获取最新的引用链接.
使用本地的Dojo
如果您是Dojo的传统用户,你可以以以往的方式下载,安装,并且使用Dojo.
1.从
http:
//dojotoolkit.org/downloads下载最新的Dojo
2.解压缩文件到本地服务器上.假设您将文件安装到/js目录下,其目录结构应该如下（注：
dojo版本与本目录不相同，只有dojo、dijit、dojox三个子目录）。
3.从您的浏览器中打开你就能够看到如下页面:
这样你就已经成功安装Dojo了!
这篇教程的目的是提供一个新手学习和了解Dojo的窗口。
虽然内容不可能覆盖所有的细节信息（因为过多的细节对新手可能会产生负面影响）,但是我们任然尽量将Dojo的大部分特性都介绍给大家.至于那些介绍到的概念等信息,您可以参考本文末尾的连接（获取更多资源一节FindingMoreResources）
HelloWorld第一个程序
准备工作
首先你当然需要Dojo了。
你可以到http:
//download.dojotoolkit.org获取稳定的版本.接着，你需要一个网络服务器,无论是跑在Linux,Windows还是Mac上,Dojo的Javascript库均会从你的服务器按需的下载到本地.不过,这个文档中的AJAX例子需要服务器端的语言支持,如PHP,ASP等.
跑在客户端的Dojo以及Dijit代码已证实可以在IE6,7,Firefox2和Safari上正常运行.
建立Dojo
首先,你需要在服务器端创建一个文件夹,取名为"
HelloWorldTutorial"
然后创建再创建一个取名为"
dojoroot"
.最后,使用任何解压缩工具将Dojo压缩包解压缩到/HelloWorldTutorial/dojoroot.目录结构如下:
正式开始
当我们完成了上述准备工作,我们需要将Javascript组件放入我们的HTML页面当中.代码如下:
<
html>
head>
title>
Dojo:
HelloWorld!
/title>
!
--SECTION1-->
styletype="
text/css"
>
@import"
dojoroot/dijit/themes/tundra/tundra.css"
dojoroot/dojo/resources/dojo.css"
/style>
dojoroot/dojo/dojo.js"
djConfig="
parseOnLoad:
true"
/script>
/head>
bodyclass="
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-->
//LoadDojo'
scoderelatingtotheButtonwidget
dojo.require（"
dijit.form.Button"
）;
dojo.require作用是通知Dojo加载按钮的小部件（Buttonwidget）.如果不加这一行,下面的代码将不能被Dojo解析,这样得到的将是普通的HTML按钮.
然后,请将下面的代码插入到html的body部分中.
buttondojoType="
id="
helloButton"
/button>
这段代码当中最关键的是dojoType属性.这个dojoType属性负责通知Dojo在页面加载时如何处理这个元素.在这里,我们使用的是button元素而不是input元素.事实上,两者都是可以被Dojo识别的.前提是只要元素里存在dojoType属性.值得注意的是如果我们用input元素来显示按钮元素,我们应该使用input中的value属性来显示希望出现的字符.
将一个事件和小部件相连起来
如果点击这个按钮触发事件,Dojo将如何处理呢?
我们只需要为这个按钮添加一个onClick事件处理函数.不过,Dojo还提供了一套简单而有效的办法:
Dojo事件系统（Dojoeventsystem）!
这种简单的绑定事件的方法是通过一个脚本标签（scripttag）来绑定事件.当然,这不是一个简单的脚本标签,它包含了一个"
dojo/method"
的type属性.就像这样:
event="
onClick"
alert（'
Youpressedthebutton'
是不是很简单？
将脚本片段插入到标签当中的确是一个好主意。
并且你还可以在脚本中利用DOMLevel2事件的全部功能。
也就是说，你可以检测到SHIFT和CTRL键，获取所有的事件属性，以及HTML树在事件的冒泡阶段获取事件信息等。
如果你曾经使用过DOMLevel2的事件，你就能理解IE与Firefox有多大差别了。
通过使用Dojo，你不用多做任何处理就能很好的支持不同的浏览器。
这也是Dojo的强大所在。
通过服务器获取数据
当你点击按钮就弹出一个对话框很不错吧？
！
但如果我们想从服务器获取数据怎么办？
Dojo使用一个简洁的方法完成这一复杂的功能-dojo.xhrGet。
为了引用方便，我们标记这一节代码在附带代码一节为HelloWorld-Section5.html和response.txt。
首先，当数据从服务端返回时，我们需要一个回调函数去处理数据。
将下面的代码插入到head标签里：
functionhelloCallback（data,ioArgs）{
alert（data）;
}
functionhelloError（data,ioArgs）{
Errorwhenretrievingdatafromtheserver!
'
}
这里的两个参数很重要，请不要删除任意一个。
第一个参数:
data包含了从服务端返回的数据，第二个参数ioArgs包含了DojoI/O绑定对象（Bindobject）。
我们现在只考虑第一个参数。
第二步是使点击按钮触发服务端请求。
将下面的代码：
onclick"
改为：
dojo.xhrGet（{
url:
'
response.txt'
load:
helloCallback,
error:
helloError
}）;
上面的代码主要目的是告诉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）。
将一下部分：
HelloWorldResponseGET.php'
helloError,
content:
{name:
dojo.byId（'
name'
）.value}
Pleaseenteryourname:
inputtype="
text"
name"
换为：
在下一步之前,我们需要注意的是在dojo.xhrGet方法中的url属性应该设置成与你的服务器环境相匹配的地址,如果你用ASP的服务器,则应该使用'
HelloWorldResponseGET.asp'
而不是'
相似的,如果你使用ColdFusion服务器,则应该使用'
HelloWorldResponseGET.cfm'
如果是JSP服务器,则应该使用'
HelloWorldResponseGET.jsp'
等等.这些代码都将在下一节中出现,并且能够在本教程最后的附件中找到.
在上面的代码中,你可以注意到有一个新的参数传递到dojo.xhrGet方法中,这个新的属性content允许程序员将任意的值作为参数传递给服务器端.在本例中,因为我们使用的是dojo.io.bind的默认方法:
GET方法,所以服务器端通过GET的一个参数'
得到文本框中的值.值得注意的是,如果服务器端期望的是另外的名字（比如'
myName'
）,我们只需改变内容属性就可以了.如下:
content:
{myName:
这里的dojo.byId（'
）.value我们是第一次见到,很简单,其实这个方法是标准的document.getElementById（...）的简单写法.
最后,如果你将你的名字放到文本框中,然后点击"
HelloWorld"
一个信息框应该会显示出"
Hello,welcometotheworldofDojo!
的信息,而你在文本框中输入的名字就会出现在那里.
下面是服务器端的脚本.一些能够从本页面的最下面下载.
使用PHP服务器
?
php
/*
*HelloWorldResponseGET.php
*--------
*
*Printthenamethatispassedinthe
*'
$_GETparameterinasentence
*/
header（'
Content-type:
text/plain'
print"
Hello{$_GET['
]},welcometotheworldofDojo!
n"
$$
使用ASP服务器
%
HelloWorldResponseGET.asp
--------
Printthenamethatispassedinthe
GETparameterinasentence
response.ContentType="
text/plain"
response.write（"
Hello"
&
request.querystring（"
）&
"
welcometotheworldofDojo!
%>
使用Java（JSP）服务器
HelloWorldResponseGET.jsp
response.setContentType（"
Hello<
%=request.getParameter（"
）%>
welcometotheworldofDojo!
通过POST方法提交数据
通过GET方法很有用,但是有些时候你却需要在传统的HTML的表单中使用Dojo去提高网站的用户体验.同样,Dojo提供了一个非常友善的方法.你可以从下面部分获得代码,或者,你也可以本文最末的连接处下载.最后提醒一下,就像上一节所述,你同样需要根据服务端脚本类型去改变url属性的值.
首先,我们需要将HelloWorld.html中html代码做一些调整.将:
br>
Pleaseenteryourname:
变为:
formid="
myForm"
method="
POST"
name="
/form>
然后,我们需要改变dojo的方法:
//Don'
tforgettoreplacethevaluefor'
url'
with
//thevalueofappropriatefileforyourserver
//（i.e.'
HelloWorldResponsePOST.asp'
）foranASPserver
dojo.xhrPost（{
HelloWorldResponsePOST.php'
form:
myForm'
从上面的代码可以看出,我们将dojo.xhrGet变为dojo.xhrPost,我们将content属性删除了,取而代之的是form属性.这样做的目的是通知dojo.xhrPost需要使用表单'
作为数据源.
接下来,你只要点击"
按钮,应该会弹出一个带有你名字的提示框"
使用PHP服务器:
*HelloWorldResponsePOST.php
$_POSTparameterinasentence
Hello{$_POST['
HelloWorldResponsePOST.asp
request.form（"
使用ColdFusion服务器
---
*HelloWorldResponsePOST.cfm
POSTparameterinasentence
--->
cfsettingshowDebugOutput="
No"
Hello,#form.name#,welcometothew
升级会员 