HelloWorld

最新推荐文章于 2025-08-11 18:37:27 发布

joshokn

最新推荐文章于 2025-08-11 18:37:27 发布

阅读量102

点赞数

分类专栏： Dojo 文章标签： Dojo 编程 HTML 数据结构

Dojo 专栏收录该内容

2 篇文章

订阅专栏

[声明]：此文章只是偶得学习总结，如果您觉得不爽，可以到下面的网站看原文：
[url]http://dojo.jot.com/WikiHome/Tutorials/HelloWorld#Introduction[/url]（我永远认为看原文远比看翻译理解的透彻）。
今天要小试Dojo，初次接触，依然从HelloWorld开始：
1.
从它的tutorial中知道，先要建立文件结构，所谓的文件结构，随便建，只是待会用到相对路径的时候能写清楚就可以了
如此：
[quote]
- HelloWorldTutorial/
|
|---- js/
|
---- dojo/
[/quote]
将 [url]http://dojotoolkit.org/download/[/url]下面的release解压到dojo下面
[quote]
- HelloWorldTutorial/
|
|-- js/
|
-- dojo/
|
-- build.txt
-- CHANGELOG
-- demos
|
-- ..
-- dojo.js
-- dojo.js.uncompressed.js
-- iframe_history.html
-- LICENSE
-- README
-- src/
|
-- ..
[/quote]
还是那句话自己可以搞清楚相对路径就OK了。

2.例子中用到了dojo组件中的button，风格还真是蛮有特点的，待会就知道了
在HelloWorldTutorial/下面建立HelloWorld.html吧
这是最后整理在一起的文件:

[code]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Dojo: Hello World!</title>


<script type="text/javascript" src="js/dojo/dojo.js"></script>

<script type="text/javascript">
dojo.require("dojo.event.*");
// Load Dojo's code relating to widget managing functions
//dojo.require("dojo.widget.*");
// Load Dojo's code relating to the Button widget
dojo.require("dojo.widget.Button");

function helloPressed()
{
dojo.io.bind({
url: 'response.txt',
handler: helloCallback
});

}

function init()
{
var helloButton = dojo.widget.byId('helloButton');
dojo.event.connect(helloButton, 'onClick', 'helloPressed')
}

dojo.addOnLoad(init);

function helloCallback(type, data, evt)
{
if (type == 'error')
alert('Error when retrieving data from the server!');
else
alert(data);
}

</script>

</head>

<body>
<button dojoType="Button" widgetId="helloButton">Hello World!</button>
</body>
</html>
[/code]
解释一下,
首先你得html文件中需要有dojo自己的
[code]
<script type="text/javascript" src="js/dojo/dojo.js"></script>
[/code]
dojo.js文件,
其二,'dojo.require'类似java的import ,可以看到文件中包含了dojo的button，怕麻烦就直接dojo.require("dojo.widget.*");将所有的widget引入，[这样做极其糟糕，不好的编程习惯！]
其三，‘ dojo.require("dojo.event.*");’组件和事件绑定。‘function init()’在html运行后被加载，init()中寻找‘button's id’,绑定相应的事件处理函数。
其四，看看这段代码很有意思：
[code]function helloPressed()
{
dojo.io.bind({
url: 'response.txt',
handler: helloCallback
});
}[/code]
'url':url当然是将数据(=HelloWorldTutorial/下面建立一个'response.txt'文件)送出的了，tutorial上面讲送往服务器,我想这里就本地了,有送就有回,在'服务器'返回数据的时候就调用[code]handler: helloCallback[/code]处理了.'helloCallback'里面的参数顾名思义了.
到此为止已经可以运行这样一个用dojo组件编写的html页面了。