Dojo入门Hello World！

来源：互联网发布：mac桌面图标隐藏编辑：程序博客网时间：2024/05/16 10:54

本文的目的是为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',
load: helloCallback,
error: helloError
});
</script>
</button>

修改为:

<button dojoType="dijit.form.Button" id="helloButton">
Hello World!
<script type="dojo/method" event="onClick">
dojo.xhrGet({
url: 'HelloWorldResponseGET.php',
load: helloCallback,
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',
load: helloCallback,
error: helloError,
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',
load: helloCallback,
error: helloError,
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";