`

Dojo 入门

    博客分类：
  • Ajax
DojoJavaCSS浏览器Google 
阅读更多
[size=medium]关于dijo是什么这里不再叙述，大家可以在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代码如下： 

<html>
	<head>
		<title>test</title>
		<script type="text/javascript" src="dojo/dojo/dojo.js"
			djConfig="parseOnLoad: true"></script>
		<style type="text/css">
@import "dojo/dijit/themes/tundra/tundra.css";
</style>
		<script type="text/javascript"> 
    dojo.require("dojo.parser"); 
    dojo.require("dijit.form.TextBox"); 
    dojo.require("dijit.form.Button"); 
    function init() 
    { 
      dojo.connect(dijit.byId("mybutton").domNode,"onclick","login"); 
    } 
    function login() 
    { 
      if( dijit.byId("myname").value=="goodguy" && 
	    dijit.byId("mypassword").value=="goodgoodstudy")
        alert("Dojo World welcome you!"); 
      else 
      { 
        dijit.byId("myname").setValue(""); 
        dijit.byId("mypassword").setValue(""); 
        alert("Dojo does not like you!"); 
      } 
    } 
    dojo.addOnLoad(init); 
  </script>
	</head>
	<body class="tundra">
		UserName:
		<input type="text" length="20" id="myname"
			dojoType="dijit.form.TextBox">
		<br>
		PassWord:
		<input type="password" length="20" id="mypassword"
			dojoType="dijit.form.TextBox">
		<br>
		<div id="mybutton" dojotype="dijit.form.Button">
			Submit
		</div>
	</body>
</html>


djConfig="parseOnLoad: true"
表示在页面加载完成以后，启用 Dojo 的解析模块对页面中的 Dojo 标签属性（Dojo 标签属性是指由 Dojo 定义的一些标记，这些标记只有在被处理以后，才能为浏览器识别执行）进行解析。djConfig 是使用 Dojo 页面的一个全局配置参数。通过对这个参数不同的赋值，可以控制页面中 Dojo 的解析模块是否运行， Dojo 的调试模块是否工作等。 

@import "dojo_path/dijit/themes/tundra/tundra.css"
表示引入 Dojo tundra 风格的层叠样式表。 

dojo.require("dojo.parser")
表示引入 Dijit 的解析功能模块。该模块将会把 Dojo 标签属性替换成浏览器可以识别执行的标记。需要与 djConfig="parseOnLoad:true" 相区别的是，djConfig="parseOnLoad:true" 表示确定在页面加载完成以后执行解析功能，但解析功能模块的引入要靠 dojo.require("dojo.parser") 来实现。 

dojo.require("dijit.form.TextBox") 
 dojo.require("dijit.form.Button")

表示引入 Dojo 风格的文本输入框和按钮的功能模块。 

dojo.connect(dijit.byId("mybutton").domNode, "onclick", "login")
表示将按钮的点击事件和 login 函数联系起来，当点击 id 为 mybutton 的按钮时，执行 login 函数。 

dijit.byId("myname").setValue("")
表示调用 id 为 myname 的 Dojo 文本框的 setValue 函数，将文本框里面的内容清为空。 

<input type="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、运行测试。

  


   
[/size]
分享到：
| 证书导入
评论
2 楼 xlyang0505 2012-08-22  
只能用html吗，貌似我还是没搞定
1 楼 liwanfeng 2012-03-23  
简明扼要，对刚刚入门的我很有用！非常感谢，希望能有更多的例子。
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics