Dojo 入门

关于dojo是什么这里不再叙述,大家可以在Google上找找。
这里是想最快速度构建好第一个hello world程序。
1、下载工具包
http://dojotoolkit.org/downloads
页面上有两个download:dojo-release-1.2.3.tar.gz
下载含:Dojo+Dijit+Dojox的。
其中 Dojo 是核心功能包,Dijit 中存放的是 Dojo 所有的 Widget 组件,而 DojoX 则是一些扩展或试验功能。
2、导入到Web项目中
项目WebRoot下新建一个文件夹dojo,把解压dojo-release-1.2.3.tar.gz后的文件复制到dojo中。
目录结构:
  1. ---WebRoot
  2. ------dojo
  3. ---------dojo
  4. ---------dijit
  5. ---------dojox

3、测试是否安装成功: http://localhost:8080 / DojoTest /dojo/dijit/themes/themeTester.html
服务器:http://localhost:8080
项目名称:DojoTest
能够正常访问,表示部署成功。
4、一个实例
项目中创建一个实例,test.html代码如下:

Java代码
  1. <html>
  2. <head>
  3. <title>test</title>
  4. <scripttype="text/javascript"src="dojo/dojo/dojo.js"
  5. djConfig="parseOnLoad:true"></script>
  6. <styletype="text/css">
  7. @import"dojo/dijit/themes/tundra/tundra.css";
  8. </style>
  9. <scripttype="text/javascript">
  10. dojo.require("dojo.parser");
  11. dojo.require("dijit.form.TextBox");
  12. dojo.require("dijit.form.Button");
  13. functioninit()
  14. {
  15. dojo.connect(dijit.byId("mybutton").domNode,"onclick","login");
  16. }
  17. functionlogin()
  18. {
  19. if(dijit.byId("myname").value=="goodguy"&&
  20. dijit.byId("mypassword").value=="goodgoodstudy")
  21. alert("DojoWorldwelcomeyou!");
  22. else
  23. {
  24. dijit.byId("myname").setValue("");
  25. dijit.byId("mypassword").setValue("");
  26. alert("Dojodoesnotlikeyou!");
  27. }
  28. }
  29. dojo.addOnLoad(init);
  30. </script>
  31. </head>
  32. <bodyclass="tundra">
  33. UserName:
  34. <inputtype="text"length="20"id="myname"
  35. dojoType="dijit.form.TextBox">
  36. <br>
  37. PassWord:
  38. <inputtype="password"length="20"id="mypassword"
  39. dojoType="dijit.form.TextBox">
  40. <br>
  41. <divid="mybutton"dojotype="dijit.form.Button">
  42. Submit
  43. </div>
  44. </body>
  45. </html>

  1. djConfig="parseOnLoad:true"
表示在页面加载完成以后,启用 Dojo 的解析模块对页面中的 Dojo 标签属性(Dojo 标签属性是指由 Dojo 定义的一些标记,这些标记只有在被处理以后,才能为浏览器识别执行)进行解析。djConfig 是使用 Dojo 页面的一个全局配置参数。通过对这个参数不同的赋值,可以控制页面中 Dojo 的解析模块是否运行, Dojo 的调试模块是否工作等。
  1. @import"dojo_path/dijit/themes/tundra/tundra.css"
表示引入 Dojo tundra 风格的层叠样式表。
  1. dojo.require("dojo.parser")
表示引入 Dijit 的解析功能模块。该模块将会把 Dojo 标签属性替换成浏览器可以识别执行的标记。需要与 djConfig="parseOnLoad:true" 相区别的是,djConfig="parseOnLoad:true" 表示确定在页面加载完成以后执行解析功能,但解析功能模块的引入要靠 dojo.require("dojo.parser") 来实现。
  1. dojo.require("dijit.form.TextBox")
  2. dojo.require("dijit.form.Button")

表示引入 Dojo 风格的文本输入框和按钮的功能模块。
  1. dojo.connect(dijit.byId("mybutton").domNode,"onclick","login")
表示将按钮的点击事件和 login 函数联系起来,当点击 id 为 mybutton 的按钮时,执行 login 函数。
  1. dijit.byId("myname").setValue("")
表示调用 id 为 myname 的 Dojo 文本框的 setValue 函数,将文本框里面的内容清为空。
  1. <inputtype="text"length="20"id="myname"dojoType="dijit.form.TextBox">

中的 dojoType="dijit.form.TextBox" 表示在页面中文本输入框是 Dojo 风格的。需要注意的是,通过声明 dojoType="dijit.form.TextBox" 这种方式来实现某些 Dojo 功能的使用,其表现形式上如同声明一个 HTML 标签的属性(如同 width="10px"),因此在本文中称其为 Dojo 标签属性。在页面加载完成以后,Dojo 的解析模块会将 Dojo 标签属性转化为浏览器能够识别执行的标记。
5、运行测试。

相关文章

我有一个网格,可以根据更大的树结构编辑小块数据.为了更容易...
我即将开始开发一款教育性的视频游戏.我已经决定以一种我可以...
我正在使用带有Grails2.3.9的Dojo1.9.DojoNumberTextBox小部...
1.引言鉴于个人需求的转变,本系列将记录自学arcgisapiforja...
我正在阅读使用dojo’sdeclare进行类创建的语法.描述令人困惑...
我的团队由更多的java人员和JavaScript经验丰富组成.我知道这...