Dojo中文使用手册.docx

Dojo中文使用手册.docx

《Dojo中文使用手册.docx》由会员分享，可在线阅读，更多相关《Dojo中文使用手册.docx（51页珍藏版）》请在冰豆网上搜索。

Dojo中文使用手册

Dojo中文使用手册

本手册针对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）

拖拽

使用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

这种方法非常的快捷!

你能够通过添加一个

正如你所看到的,这是一个个标准的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部分中.

HelloWorld!

这段代码当中最关键的是dojoType属性.这个dojoType属性负责通知Dojo在页面加载时如何处理这个元素.在这里,我们使用的是button元素而不是input元素.事实上,两者都是可以被Dojo识别的.前提是只要元素里存在dojoType属性.值得注意的是如果我们用input元素来显示按钮元素,我们应该使用input中的value属性来显示希望出现的字符.

将一个事件和小部件相连起来

如果点击这个按钮触发事件,Dojo将如何处理呢?

我们只需要为这个按钮添加一个onClick事件处理函数.不过,Dojo还提供了一套简单而有效的办法:

Dojo事件系统（Dojoeventsystem）!

这种简单的绑定事件的方法是通过一个脚本标签（scripttag）来绑定事件.当然,这不是一个简单的脚本标签,它包含了一个"dojo/method"的type属性.就像这样:

       HelloWorld!

          alert（'Youpressedthebutton'）;

是不是很简单？

将脚本片段插入到标签当中的确是一个好主意。

并且你还可以在脚本中利用DOMLevel2事件的全部功能。

也就是说，你可以检测到SHIFT和CTRL键，获取所有的事件属性，以及HTML树在事件的冒泡阶段获取事件信息等。

如果你曾经使用过DOMLevel2的事件，你就能理解IE与Firefox有多大差别了。

通过使用Dojo，你不用多做任何处理就能很好的支持不同的浏览器。

这也是Dojo的强大所在。

通过服务器获取数据

当你点击按钮就弹出一个对话框很不错吧？

！

但如果我们想从服务器获取数据怎么办？

Dojo使用一个简洁的方法完成这一复杂的功能-dojo.xhrGet。

为了引用方便，我们标记这一节代码在附带代码一节为HelloWorld-Section5.html和response.txt。

首先，当数据从服务端返回时，我们需要一个回调函数去处理数据。

将下面的代码插入到head标签里：

这里的两个参数很重要，请不要删除任意一个。

第一个参数:

data包含了从服务端返回的数据，第二个参数ioArgs包含了DojoI/O绑定对象（Bindobject）。

我们现在只考虑第一个参数。

第二步是使点击按钮触发服务端请求。

将下面的代码：

   alert（'Youpressedthebutton'）;

改为：

  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）。

将一下部分：

       HelloWorld!

       dojo.xhrGet（{

          url:

'HelloWorldResponseGET.php',

          load:

helloCallback,

          error:

helloError,

          content:

{name:

dojo.byId（'name'）.value}

       }）;

Pleaseenteryourname:

换为：

       HelloWorld!

       dojo.xhrGet（{

          url:

'HelloWorldResponseGET.php',

          load:

helloCallback,

          error:

helloError,

          content:

{name:

dojo.byId（'name'）.value}

       }）;

Pleaseenteryourname:

在下一步之前,我们需要注意的是在dojo.xhrGet方法中的url属性应该设置成与你的服务器环境相匹配的地址,如果你用ASP的服务器,则应该使用'HelloWorldResponseGET.asp'而不是'HelloWorldResponseGET.php',相似的,如果你使用ColdFusion服务器,则应该使用'HelloWorldResponseGET.cfm',如果是JSP服务器,则应该使用'HelloWorldResponseGET.jsp'等等.这些代码都将在下一节中出现,并且能够在本教程最后的附件中找到.

在上面的代码中,你可以注意到有一个新的参数传递到dojo.xhrGet方法中,这个新的属性content允许程序员将任意的值作为参数传递给服务器端.在本例中,因为我们使用的是dojo.io.bind的默认方法:

GET方法,所以服务器端通过GET的一个参数'name',得到文本框中的值.值得注意的是,如果服务器端期望的是另外的名字（比如'myName'）,我们只需改变内容属性就可以了.如下:

content:

{myName:

dojo.byId（'name'）.value}

这里的dojo.byId（'name'）.value我们是第一次见到,很简单,其实这个方法是标准的document.getElementById（...）的简单写法.

最后,如果你将你的名字放到文本框中,然后点击"HelloWorld",一个信息框应该会显示出"Hello,welcometotheworldofDojo!

"的信息,而你在文本框中输入的名字就会出现在那里.

下面是服务器端的脚本.一些能够从本页面的最下面下载.

使用PHP服务器

php

 /*

 *HelloWorldResponseGET.php

 *--------

 *

 *Printthenamethatispassedinthe

 *'name'$_GETparameterinasentence

 */

 header（'Content-type:

text/plain'）;

 print"Hello{$_GET['name']},welcometotheworldofDojo!

n"$$

?

>

使用ASP服务器

<%

 '

 'HelloWorldResponseGET.asp

 '--------

 '

 'Printthenamethatispassedinthe

 ''name'GETparameterinasentence

 '

 response.ContentType="text/plain"

 response.write（"Hello"&request.querystring（"name"）&",welcometotheworldofDojo!

n"）

%>

使用Java（JSP）服务器

<%

 /*

 'HelloWorldResponseGET.jsp

 '--------

 '

 'Printthenamethatispassedinthe

 ''name'GETparameterinasentence

 */

 response.setContentType（"text/plain"）;

%>

Hello<%=request.getParameter（"name"）%>,welcometotheworldofDojo!

通过POST方法提交数据

通过GET方法很有用,但是有些时候你却需要在传统的HTML的表单中使用Dojo去提高网站的用户体验.同样,Dojo提供了一个非常友善的方法.你可以从下面部分获得代码,或者,你也可以本文最末的连接处下载.最后提醒一下,就像上一节所述,你同样需要根据服务端脚本类型去改变url属性的值.

首先,我们需要将HelloWorld.html中html代码做一些调整.将:

   Pleaseenteryourname:

变为:

     Pleaseenteryourname:

然后,我们需要改变dojo的方法:

       dojo.xhrGet（{

          url:

'HelloWorldResponseGET.php',

          load:

helloCallback,

          error:

helloError,

          content:

{name:

dojo.byId（'name'）.value}

       }）;

变为:

  //Don'tforgettoreplacethevaluefor'url'with

  //thevalueofappropriatefileforyourserver

 //（i.e.'HelloWorldResponsePOST.asp'）foranASPserver

   dojo.xhrPost（{

       url:

'HelloWorldResponsePOST.php',

       load:

helloCallback,

       error:

helloError,

       form:

'myForm'

  }）;

从上面的代码可以看出,我们将dojo.xhrGet变为dojo.xhrPost,我们将content属性删除了,取而代之的是form属性.这样做的目的是通知dojo.xhrPost需要使用表单'myForm'作为数据源.

接下来,你只要点击"HelloWorld"按钮,应该会弹出一个带有你名字的提示框"Hello,welcometotheworldofDojo!

"

使用PHP服务器:

php

 /*

 *HelloWorldResponsePOST.php

 *--------

 *

 *Printthenamethatispassedinthe

 *'name'$_POSTparameterinasentence

 */

 header（'Content-type:

text/plain'）;

 print"Hello{$_POST['name']},welcometotheworldofDojo!

n"$$

?

>

使用ASP服务器

<%

 '

 'HelloWorldResponsePOST.asp

 '--------

 '

 'Printthenamethatispassedinthe

 ''name'$_POSTparameterinasentence

 '

 response.ContentType="text/plain"

 response.write（"Hello"&request.form（"name"）&",welcometotheworldofDojo!

n"）

%>

使用ColdFusion服务器

---

 /*

 *HelloWorldResponsePOST.cfm

 *--------

 *

 *Printthenamethatispassedinthe

 *'name'POSTparameterinasentence

 */

--->

Hello,#form.name#,w