Dojo入门Hello World！

发布时间：2020-12-16 22:07:15 所属栏目：百科来源：网络整理

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

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

入门要求

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

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

Dojo的设置

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

开始了

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

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

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

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

创建一个按钮

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

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

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

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

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

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

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

设置部件（Widget）的事件

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

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

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

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

从服务器读取数据

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

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

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

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

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

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

修改后，代码如下:

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

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

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

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

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

用GET发送数据到服务器

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

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

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

修改为:

 
 <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">

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

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

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

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

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

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

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

使用 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' 属性指向你服务器支持的文件格式.

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

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

修改为:

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

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

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

修改为:

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

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

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

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

原文地址：http://dojotoolkit.org/book/dojo-book-0-9/hello-world-tutorial

转载请表明译者：朱雄业

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!