Dojo入门Hello World！

本文的目的是为Dojo的入门者提供一个起点。每一个步骤都是为了尽可能多的介绍Dojo，但也不可能非常详尽，描述的太详尽反而会把入门用户搞糊涂了。如果需要了解本文中提到的概念，请查看底部指向其他资源的链接。@H_301_1@

入门要求

很明显，第一步是你需要Dojo！你可以从 http://dojotoolkit.org/downloads 下载最新的稳定版本.第二步，你需要一个Web服务器.无论是连网服务器或者是离线服务器，Linux、Windows或者是Mac ... 都没什么要紧的。Dojo JavaScript library 是可以可以直接在浏览器上运行的,但文中有一些 AJAX 案例需要服务器的PHP或者ASP支持.@H_301_1@

Dojo 和 Dijit 中的代码,运行在客户端浏览器的部分,是兼容 IE 6 - 7,Firefox 2,和 Safari的. @H_301_1@

Dojo的设置

首先，你需要在Web服务器上新建一个目录. 假设为HelloWorldTutorial. 然后在里面建立一个名称为 dojoroot 的目录. 最后,使用压缩工具解压缩Dojo压缩包至 /HelloWorldTutorial/dojoroot目录. 完成后，效果如下：@H_301_1@

@H_301_1@

开始了

一旦设置好了以上的目录和文件结构,我们就要为HTMl文件设置JavaScript标记了.看一下下面的代码:@H_301_1@

 
 <html> 
 
 <head> 
 
 <title>Dojo: Hello World! 
 </title> 
 
 <!-- SECTION 1 --> 
 
 <style type="text/css"> 
 
@import "dojoroot/dijit/themes/tundra/tundra.css"; 
 
@import "dojoroot/dojo/resources/dojo.css" 
 
 </style> 
 
 <script type="text/javascript" src="dojoroot/dojo/dojo.js"
djConfig="parSEOnLoad: true"> 
 </script> 
 
 </head> 
 
 <body class="tundra"> 
 
 </body> 
 
 </html>

@H_301_1@

正如上面看到的，这个页面只是一个标准的HTML页面框架，它包含了3个部分:@H_301_1@

两个CSS文件. 标记为 Tundra 的是案例中要用到的Dijit主题风格. 当然也可以选择其他的主题.
在Head部分中的script 元素标签. 这个script 元素标签复杂加载Dojo的核心库，它为我们后面用到的Dojo函数提供接口支持.
最后,把 tundra CSS 样式添加到 body 标签.

创建一个按钮

好了,我们开始这一激动人心的部分!在这个例子中，我们将会建立一个"Hello World!"的按钮部件.对这个例子，鼠标移出、鼠标经过、鼠标按下(mouSEOut,mouSEOver,and mouseDown) 这3种可视状态可以在一定程度上提升用户体验。 @H_301_1@

第一个步骤是告知Dojo加载适合的模组.在网页头部，在片段1下添加一个片段2，代码如下: @H_301_1@

 
 <!-- SECTION 2 --> 
 
 <script type="text/javascript"> 
 
// Load Dojo's code relating to the Button widget 
 
dojo.require("dijit.form.Button"); 
 
 </script>

@H_301_1@

dojo.require 这一行代码通知 Dojo 加载 Button（按钮）部件. 如果你省略的这一行,在Dojo 加载的时候，Button（按钮）中添加的代码将会失效,返回的结果是一个普通的HTML 按钮，而不是我们期待的.@H_301_1@

添加以上一段代码后，在body片段中加入下列HTML代码:@H_301_1@

 
 <button dojoType="dijit.form.Button" id="helloButton">Hello World! 
 </button> 

这一行HTML代码中最重要的属性是通知Dojo ，按钮的dojoType属性是什么. dojoType 属性负责通知Dojo：在页面加载的时候怎样处理这个元素.在这个例子，我们使用了button这个HTMl元素，当然用 input 也是可以的 - 无论 dojoType 属性有多长，Dojo都是可以运行的.但是使用 input 是不值得的,我们还必须通过额外增加标题属性，来设定button中要显示的文本.@H_301_1@

设置部件（Widget）的事件

按钮已经做好了，但是当点击按钮的时候它会做什么呢？我们可以为button（按钮）设定一个点击事件（ event handler）,但是这里有一种更高效的方法 - Dojo 事件系统!@H_301_1@

最容易的方式是通过script标记为button附加一个事件.但这并不是随意的 script 标签 ... 它必须包含一个值为 dojo/method 的type属性,例如:@H_301_1@

 
 <button dojoType="dijit.form.Button" id="helloButton"> 
 
Hello World! 
 
 <script type="dojo/method" event="onClick"> 
 
alert('You pressed the button'); 
 
 </script> 
 
 </button>

@H_301_1@

真的很简单，是吧？把script放置在标签的内部，从感官上也好看得多.同时还可以在script中充分利用第2层DOM的事件. 这意味着你可以监测到 SHIFT 和 CTRL 键,获取各种各样的事件属性,从而使HTML目录结构的事件处理上升到一个更高的境界. 如果你曾经使用过第二层事件,你会知道IE和 Firefox 中有不同的使用语法.在 Dojo中,同样的函数可以运行在任何一个支持的浏览器上.真是十分强大!@H_301_1@

从服务器读取数据

点击按钮弹出警告窗口不错的方法,但如果我们想从服务器上获取数据呢? 又一次,Dojo用一个简单的方法拯救了这个任务 - dojo.xhrGet. 顺便提及一下,这个部分的代码可以在附件中下载（文件HelloWorld-Section5.html 和 response.txt ）。@H_301_1@

开始，我们需要一个回调函数（ callback function ）来处理服务器返回的数据.在头部（head标签）添加以下代码: @H_301_1@

 
 <script> 
 
function helloCallback(data,ioArgs) { 
 
alert(data); 
 
} 
 
function helloError(data,ioArgs) { 
 
alert('Error when retrieving data from the server!'); 
 
} 
 
 </script>

@H_301_1@

函数中的两个参数(data,and ioArgs) 是非常重要的 - 一个都不能少! 第一个参数 (data) 包含了服务器返回的数据,第二个参数包含了绑定的 Dojo I/O 对象. 我们现在主要看第一个参数.@H_301_1@

第二步：将鼠标的点击连接到发起服务器请求. 要完成这一步,修改以下代码:@H_301_1@

 
 <script type="dojo/method" event="onClick"> 
 
alert('You pressed the button'); 
 
 </script>

@H_301_1@

修改后，代码如下:@H_301_1@

 
 <script type="dojo/method" event="onClick"> 
 
dojo.xhrGet({ 
 
url: 'response.txt',
load: helloCallback,
error: helloError 
 
}); 
 
 </script>

@H_301_1@

以上的代码主要是告诉Dojo去访问URl定义的网址路径，以及使用handler中定义的函数处理服务器返回的数据。@H_301_1@

最后，我们在HelloWorld.html 所在的文件夹下新建一个文件 response.txt. 在这个文件中，写上 'Welcome to the Dojo Hello World Tutorial'.@H_301_1@

现在，点击按钮，JavaScript alert窗口中显示的应该是 response.txt 文件中的文字.Dojo-很简单吧!@H_301_1@

下面，我们尝试让这个服务器请求做一些更有意义的事.@H_301_1@

用GET发送数据到服务器

从服务器获取静态的数据是不错的功能，但在真正的应用中并不是那么广泛. 所以，除了简单的从服务器获取数据，我们还可以给服务器发送数据. 在这个部分,我们使用的是GET方法，下一部分使用的是POST方法.作为简单的参考,这部分的代码可以在附件中下载，文件名为 HelloWorld-Section6.html .服务端文件名是" HelloWorldResponseGET". 扩展名分别如下 ASP ('.asp'),PHP ('.PHP'),ColdFusion ('.cfm'),或者是 Java ('.jsp').@H_301_1@

首先,在文件 HelloWorld.html 中 (例如：body),需要增加另外一个元素 - 一个 input 元素. 所以,把以下的代码:@H_301_1@

 
 <button dojoType="Button" widgetId="helloButton"> 
 
 <script type="dojo/method" event="onClick"> 
 
dojo.xhrGet({ 
 
url: 'response.txt',
error: helloError 
 
}); 
 
 </script> 
 
 </button>

@H_301_1@

修改为:@H_301_1@

 
 <button dojoType="dijit.form.Button" id="helloButton"> 
 
Hello World! 
 
 <script type="dojo/method" event="onClick"> 
 
dojo.xhrGet({ 
 
url: 'HelloWorldResponseGET.PHP',
error: helloError,
content: {name: dojo.byId('name').value } 
 
}); 
 
 </script> 
 
 </button> 
 
Please enter your name: 
 <input type="text" id="name">

@H_301_1@

在继续进行之前 - 需要强调一下：dojo.xhrGET函数中的url属性指向的文件格式必须是你服务器支持的格式. @H_301_1@

ASP 服务器： 'HelloWorldResponseGET.asp' ，
PHP 服务器： 'HelloWorldResponseGET.PHP' ，
ColdFusion 服务器： 'HelloWorldResponseGET.cfm' ，
Java 服务器 (JSP) ： 'HelloWorldResponseGET.jsp',
Perl 服务器： 'HelloWorldResponseGET.pl' .
这些文件的代码在下面的部分中会提供，在附件中中也可以下载.@H_301_1@

在上面的代码中,你会注意到dojo.xhrGet中引入了一个新的属性. 这个属性 - 内容 - 允许程序员以参数的形式发送任意的数据到服务器. 在这个例子中,我们使用的是GET方法,服务器脚本通过参数'name'来获取传过来的值. 需要提一下，如果如果这个参数是另外一个名字（例如： 'myName'),我们还需要把代码改成 (把':'左面的 'name' 改成 'myName' ):@H_301_1@

  content: 
 {myName: dojo. 
 byId 
 ( 
 'name' 
 ). 
 value 
 } 

@H_301_1@

因为我们之前没用过,还需要提一下 dojo.byId('name').value. 非常简单,这个调用是标准的 document.getElementById(..) 函数.@H_301_1@

最后,如果你在文本框中输入你的名字，并点击 'Hello World' 按钮,提示框会显示 'Hello ,welcome to the world of Dojo!' ，还有你输入的名字.@H_301_1@

这是服务器的代码. 有一些是可以在下面下载.@H_301_1@

使用 PHP 服务器

 
 <?PHP 
 
 
 /*
* HelloWorldResponseGET.PHP
* --------
*
* Print the name that is passed in the
* 'name' $_GET parameter in a sentence
*/ 
 
 
 header 
 ( 
 'Content-type: text/plain' 
 ); 
 
 
 print 
 "Hello {$_GET['name']},welcome to the world of Dojo!/n"; 
 
 
 ?> 

使用ASP 服务器

 
 <% 
 
 ' 
 
 ' HelloWorldResponseGET.asp 
 
 ' -------- 
 
 ' 
 
 ' Print the name that is passed in the 
 
 ' 'name' GET parameter in a sentence 
 
 ' 
 
 response. 
 ContentType= 
 "text/plain" 
 
 response. 
 write 
 ( 
 "Hello " & 
 request. 
 querystring 
 ( 
 "name" 
 ) & 
 ",welcome to the world of Dojo!/n" 
 ) 
 
 %>

使用 ColdFusion 服务器

  <!--- 
 
 
 /*
* HelloWorldResponseGET.cfm
* --------
*
* Print the name that is passed in the
* 'name' GET parameter in a sentence
*/ 
 
---> 
 
<cfsetting showDebugOutput= 
 "No"> 
 
Hello,#url. 
 name#,welcome to the world of Dojo! 
 
</cfsetting> 

使用 Java 服务器 (JSP)

  <% 
 
 
 /*
' HelloWorldResponseGET.jsp
' --------
'
' Print the name that is passed in the
' 'name' GET parameter in a sentence
*/ 
 
response. 
 setContentType 
 ( 
 "text/plain" 
 ); 
 
%> 
 
Hello <%= request. 
 getParameter 
 ( 
 "name" 
 ) %>,welcome to the world of Dojo! 

使用 Perl 服务器

  #! 
 /usr/bin/perl 
 
# 
 
# 
 ' HelloWorldResponseGET.pl
# ' -------- 
 
# 
 '
# ' 
 Print the 
 name that 
 is passed 
 in the 
 
# 
 ' ' 
 name 
 ' GET parameter in a sentence
#
use strict;
use CGI;
my $cgi = CGI::new();
print $cgi->header(-type => "text/html; charset=utf-8");
print "Hello " . $cgi->param(' 
 name 
 ') . ",welcome to the world of Dojo!/n"; 

通过POST发送数据到服务器

使用 GET发送数据不错，但是有些时候，你需要使用Dojo来提升用户使用传统表单的用户体验。通常,Dojo有一种更好的处理方式. 再次,这些文件的代码在下面的片段中,在附件中也可以下载. 另外,跟上面一样，你同样要把 'url' 属性指向你服务器支持的文件格式.@H_301_1@

首先,我们还要把 HelloWorld.html 文件中body中的部分:@H_301_1@

 
 <br> 
 
Please enter your name: 
 <input type="text" id="name"> 

@H_301_1@

修改为:@H_301_1@

 
 <br> 
 
 <form id="myForm" method="POST"> 
 
Please enter your name: 
 <input type="text" name="name"> 
 
 </form>

@H_301_1@

接着我们需要把 dojo/method的代码:@H_301_1@

 
 <script type="dojo/method" event="onClick"> 
 
dojo.xhrGet({ 
 
url: 'HelloWorldResponseGET.PHP',
content: {name: dojo.byId('name').value } 
 
}); 
 
 </script>

@H_301_1@

修改为:@H_301_1@

 
 <script type="dojo/method" event="onClick"> 
 
// Don't forget to replace the value for 'url' with 
 
// the value of appropriate file for your server 
 
// (i.e. 'HelloWorldResponsePOST.asp') for an ASP server 
 
dojo.xhrPost({ 
 
url: 'HelloWorldResponsePOST.PHP',
form: 'myForm' 
 
}); 
 
 </script>

@H_301_1@

就像我们前面代码显示的那样,我们把 dojo.xhrGet 修改为 dojo.xhrPost. 我们删除了 'content' 属性，取而代之的是增加了一个新的属性 'form'. 它告知 dojo.xhrPost 函数要使用表单 'myForm' 作为数据的来源l. @H_301_1@

最后，当你输入你的名字，点击 'Hello World!' 按钮的时候，提示信息会是 'Hello ,welcome to the world of Dojo!' 和你的名字.@H_301_1@

使用 PHP 服务器

 
 <?PHP 
 
 
 /*
* HelloWorldResponsePOST.PHP
* --------
*
* Print the name that is passed in the
* 'name' $_POST parameter in a sentence
*/ 
 
 
 header 
 ( 
 'Content-type: text/plain' 
 ); 
 
 
 print 
 "Hello {$_POST['name']},welcome to the world of Dojo!/n"; 
 
 
 ?> 

使用ASP 服务器

 
 <% 
 
 ' 
 
 ' HelloWorldResponsePOST.asp 
 
 ' -------- 
 
 ' 
 
 ' Print the name that is passed in the 
 
 ' 'name' $_POST parameter in a sentence 
 
 ' 
 
 response. 
 ContentType= 
 "text/plain" 
 
 response. 
 write 
 ( 
 "Hello " & 
 request. 
 form 
 ( 
 "name" 
 ) & 
 ",welcome to the world of Dojo!/n" 
 ) 
 
 %>

使用 ColdFusion 服务器

  <!--- 
 
 
 /*
* HelloWorldResponsePOST.cfm
* --------
*
* Print the name that is passed in the
* 'name' POST parameter in a sentence
*/ 
 
---> 
 
<cfsetting showDebugOutput= 
 "No"> 
 
Hello,#form. 
 name#,welcome to the world of Dojo! 
 
</cfsetting> 

使用 Java 服务器 (JSP)

  <% 
 
 
 /*
' HelloWorldResponsePOST.jsp
' --------
'
' Print the name that is passed in the
' 'name' POST parameter in a sentence
*/ 
 
response. 
 setContentType 
 ( 
 "text/plain" 
 ); 
 
%> 
 
Hello <%= request. 
 getParameter 
 ( 
 "name" 
 ) %>,welcome to the world of Dojo! 

使用 Perl 服务器

  #! 
 /usr/bin/perl 
 
# 
 
# 
 ' HelloWorldResponsePOST.pl
# ' -------- 
 
# 
 '
# ' 
 Print the 
 name that 
 is passed 
 in the 
 
# 
 ' ' 
 name 
 ' POST parameter in a sentence
#
use strict;
use CGI;
my $cgi = CGI::new();
print $cgi->header(-type => "text/html; charset=utf-8");
print "Hello " . $cgi->param(' 
 name 
 ') . ",welcome to the world of Dojo!/n"; 

Dojo入门Hello World！

入门要求

Dojo的设置

开始了

创建一个按钮

设置部件（Widget）的事件

从服务器读取数据

用GET发送数据到服务器

使用 PHP 服务器

使用ASP 服务器

使用 ColdFusion 服务器

使用 Java 服务器 (JSP)

使用 Perl 服务器

通过POST发送数据到服务器

使用 PHP 服务器

使用ASP 服务器

使用 ColdFusion 服务器

使用 Java 服务器 (JSP)

使用 Perl 服务器

猜你在找的Dojo相关文章