`
Javabengou
  • 浏览: 175497 次
  • 性别: Icon_minigender_1
  • 来自: 郴州
社区版块
存档分类
最新评论

Life with Dojo(0.9-1.0)

阅读更多
一直都在写JAVA方面的东西
现在也写写关于客户端脚本的东西
这篇是自己根据DOJO(0.9-1.0)官方教材的不完全翻译(哈哈,把主要和重要的翻译出来).
其实个人觉得
如果你学会一套或几套JS UI框架,对你以后JSF的自定义组件会很有用
对于JSF怎么说了,毕竟JSP使用了标签,注定在定义组件的时候会有很多HTML代码写在后台代码用来渲染一个组件。
如果有套JS UI做渲染,UIComponent,Helper等类做后台的组件核心也是不错的解决方案(国内有EXT+JSF,现在才觉得,JSP的标签。。。唉)!

现在开始DOJO(0.9-1.0)吧

先来看个示例,一个标准的HTML(官方dojotoolkit.org/book/dojo-book-0-9/part-1-life-dojo/example-1-why-doesnt-anyone-fill-out-their-tax-forms/adding-some

xml 代码
 
  1. <head>  
  2.     <title>Taxes, The Surest Thing Next to Death!</title>  
  3. </head>  
  4. <body>  
  5.   
  6. <h1>2007 Tax Form</h1>  
  7.     The Sovereign Nation of Googolica,  In Search We Trust  
  8.   
  9. <form>  
  10.     First Name: <input type="text" length="20" name="first"><br>  
  11.     Last Name: <input type="text" length="20" name="last"><br>  
  12.     Email Address: <input type="text" length="20" name="email"><br>  
  13. <hr>  
  14.   
  15. <ol>  
  16.     <li>  
  17.         Please Enter Your 2007 Gross Income  
  18.         <input type="text" length="10" name="grossIncome">  
  19.     </li>  
  20.     <li>  
  21.         Please enter the value from line 1.  This is your <em>2007 tax</em>  
  22.         <input type="text" length="10" name="tax">  
  23.    </li>  
  24.     <li>  
  25.         Would you like to contribute an extra $3 to the Presidential Campaign Fund?  
  26.         <input type="checkbox" name="campaign" value="Y">  
  27.     </li>  
  28.     <li>  
  29.         Filing Date:  
  30.         <input type="text" length="10" name="filingDate">  
  31.     </li>  
  32. </ol>  
  33.   
  34.   
  35. <input type="submit" value="Submit">  
  36. </form>  
  37. </body>  
上面的代码是大家都能看得懂!这里就不介绍了!

对于上面的代码,如果使用DOJO UI只需要添加少许几行JS代码或者在已存在的标准HTML中添加扩展DOJO的专有属性。
其实这些魔力的所在是一个叫做Dijit - 这里我们可以叫她 "dojo widgets",她完成了各种各样的任务。

Dijit - 的初步认识:

首先我们得做两件事,来让Dijit - 工作(必须在每个使用Dijit 的页面添加2处代码片段):
1.
xml 代码
 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  
  2.             "http://www.w3.org/TR/html4/strict.dtd">  
  3. <html>  
  4. <head>  
  5. <title>Taxes, The Surest Thing Next to Death!</title>  
  6.     <style type="text/css">  
  7.         @import "http://o.aolcdn.com/dojo/0.9.0/dijit/themes/tundra/tundra.css";  
  8.         @import "http://o.aolcdn.com/dojo/0.9.0/dojo/dojo.css"  
  9.     </style>  
  10.     <script type="text/javascript" src="http://o.aolcdn.com/dojo/0.9.0/dojo/dojo.xd.js"  
  11.                 djConfig="parseOnLoad: true"></script>  
  12.     <script type="text/javascript">  
  13.        dojo.require("dojo.parser");  
  14.     </script>  
  15. </head>  

你得导入DOJO的CSS,对于JS脚本,你得导入DOJO的js,当然这里使用的是 aolcdn,你也可以使用你自己服务器上
xml 代码
 
  1. <script type="text/javascript" src="lib/dojo/dojo.js"></script>  
下面这个代码是你必须的(在你使用DOJO ui,她负责解析)
xml 代码
 
  1. <script type="text/javascript">  
  2.        dojo.require("dojo.parser");  
  3.     </script>  
2.
这里要说明的是DOJO默认的Dijit theme(主题)是Tundra
所以第2个要添加的代码片段如下:
xml 代码
 
  1. <body class="tundra">  
如果你不写上上面的代码,DOJO的 ui会让你看起来觉得很奇怪,因为他们基本上依靠CSS的。



上面说了基本的DOJO该做的事情,下面,来让我们把上面的标准HTML代码,改成DOJO的 UI。
这里要介绍个属性,这就是Dijit引进的新属性dojoType":
代码如下:
xml 代码
 
  1. <form>  
  2. First Name: <input type="text" length="20" name="first"  dojoType="dijit.form.TextBox"><br>  
  3. Last Name: <input type="text" length="20" name="last"  dojoType="dijit.form.TextBox"><br>  
  4. Email Address: <input type="text" length="20" name="email"  dojoType="dijit.form.TextBox">  
  5. Filing Date: <input type="text" length="10" name="filingDate" dojoType="dijit.form.DateTextBox">  
  6. <hr>  
  7.   
  8. <ol>  
  9. <li>Please Enter Your 2007 Gross Income  
  10. <input type="text" length="10" name="grossIncome"  dojoType="dijit.form.TextBox"></li>  
  11. <li>Please enter the value from line 1.  This is your <em>2007 tax</em>  
  12. <input type="text" length="10" name="tax"  dojoType="dijit.form.TextBox"></li>  
  13. <li>Would you like to contribute an extra $3 to the Presidential Campaign Fund?  
  14. <input type="checkbox" name="campaign" value="Y"  dojoType="dijit.form.CheckBox"></li>  
  15. </ol>  
其实个人觉得DOJO的这种模式有点接近JAVA import(当然还有很多这样的框架) 大家注意看dojoType这个属性。
下面的代码就更像了,因为她把要使用的UI  类库(先借用JAVA的表述来说吧)在你的HTML header处就要导入进来(或许现在C#,JAVA都在使用这样的导入,DOJO也借用,让大家能感觉到亲近,哈哈!)
如下:
xml 代码           
 
  1. <script type="text/javascript">  
  2.         dojo.require("dojo.parser");  
  3.         dojo.require("dijit.form.TextBox");  
  4.         dojo.require("dijit.form.CheckBox");  
  5.         dojo.require("dijit.form.DateTextBox");  
  6. </script>  
第一遍DOJO(0。9-1.0)的翻译就到这里,希望大家能互相交流!
完整的DEMO在主页dojotoolkit.org/book/dojo-book-0-9/part-1-life-dojo/example-1-why-doesnt-anyone-fill-out-their-tax-forms/adding-some
分享到:
评论

相关推荐

    Dojo Book 1.0

    Dojo Book 0.9-1.0 chm 版,Ajax 辅助。

    struts2-dojo-plugin-2.2.1.jar

    Struts2-dojo-plugin-2.2.1.jar 是一个针对Apache Struts2框架的扩展插件,主要用于增强Struts2应用的用户界面交互性,特别是通过集成Dojo JavaScript库来提供丰富的AJAX功能和用户体验。这个插件是Struts2与Dojo ...

    dojo-release-1.4.2-src.tar.gz

    标题中的"dojo-release-1.4.2-src.tar.gz"是一个特定版本的Dojo Toolkit源码压缩包,属于JavaScript库的范畴。Dojo Toolkit是一个强大的、开源的JavaScript库,广泛用于构建富互联网应用程序(RIA)。这个版本是...

    struts2-dojo-plugin-2.1.8.jar

    struts2-dojo 跨域时解决拒绝访问的问题

    dojo精品中文教程(包一)

    Dojo.1.0 Practice Note [1] 什么是dojo 选择dojo的理由 AJAX架构之Dojo篇 Adding Ajax中文版 (DoJo) DOJO学习笔记(七)-日期控件DropdownDatePicker和DatePicker DOJO常用的验证函数 Dojo with Adobe AIR ...

    dojo0.9

    Dojo 0.9 强化了事件处理机制,提供 dojo.connect() 和 dojo.disconnect() 函数来订阅和取消订阅事件,以及 dojo.stopEvent() 来阻止事件冒泡或默认行为。 7. **动画效果**: Dojo 包含 dojo.fx.* 模块,提供了...

    dojo精品中文教程(包二)

    Dojo.1.0 Practice Note [1] 什么是dojo 选择dojo的理由 AJAX架构之Dojo篇 Adding Ajax中文版 (DoJo) DOJO学习笔记(七)-日期控件DropdownDatePicker和DatePicker DOJO常用的验证函数 Dojo with Adobe AIR ...

    dojo精品中文教程(全)

    Dojo.1.0 Practice Note [1] 什么是dojo 选择dojo的理由 AJAX架构之Dojo篇 Adding Ajax中文版 (DoJo) DOJO学习笔记(七)-日期控件DropdownDatePicker和DatePicker DOJO常用的验证函数 Dojo with Adobe AIR ...

    dojo-release-1.6.1-src.zip

    标题 "dojo-release-1.6.1-src.zip" 指的是 Dojo 框架的一个源码版本,这是在2011年发布的1.6.1版本。Dojo 是一个广泛使用的JavaScript库,它提供了丰富的功能和工具,帮助开发者构建高性能、可维护的Web应用程序。...

    dojo-1.0

    用过的都知道了,没用过的到这里看吧 http://www.dojochina.com/?q=node/64

    dojo-release dojo

    这个压缩包包含了 Dojo 的多个历史版本,包括0.9、1.0和1.4。这些版本见证了Dojo从早期到成熟的发展过程,每个版本都有其特定的功能特性和改进。 Dojo 0.9 是Dojo工具箱的早期版本,它提供了基础的JavaScript功能,...

    dojo精品中文教程(包三)

    Dojo.1.0 Practice Note [1] 什么是dojo 选择dojo的理由 AJAX架构之Dojo篇 Adding Ajax中文版 (DoJo) DOJO学习笔记(七)-日期控件DropdownDatePicker和DatePicker DOJO常用的验证函数 Dojo with Adobe AIR ...

    dojo-release-1.10.4

    "dojo-release-1.10.4"是Dojo框架的一个稳定版本,发布于2015年,它提供了大量的功能和改进,以支持开发人员构建高效、响应式的网页应用。 1. **Dojo核心模块**:Dojo的核心模块包括`dojo/_base`,它包含了基本的...

    dojo-release-1.4.3

    标题"dojo-release-1.4.3"揭示了我们讨论的是Dojo框架的一个特定版本——1.4.3。这个版本发布于2010年,尽管现在已经有了更新的版本,但1.4.3仍然被许多项目广泛使用,因为它稳定且支持众多特性。 Dojo的核心特性...

    struts2-dojo-plugin-2.3.1.2.jar

    struts2-dojo-plugin-2.3.1.2.jar

    dojo-0.3.1-ajax

    "dojo-0.3.1-ajax" 是一个与Dojo JavaScript库相关的版本,特别是涉及到其 AJAX(Asynchronous JavaScript and XML)功能的版本。Dojo是一个开源的JavaScript工具包,为Web开发提供了丰富的功能,包括DOM操作、动画...

    dojo-release-1.9.1-src

    本压缩包"dojo-release-1.9.1-src"包含了Dojo 1.9.1版本的源代码,对于开发者来说,深入理解其内部结构和工作原理具有极高的价值。 1. **模块化设计** Dojo Toolkit遵循AMD(Asynchronous Module Definition)规范...

    struts2-dojo-plugin-2.3.8

    struts2-dojo-plugin-2.3.8

    dojo-release-1.6.0-src

    dojo是一个用javascript语言实现的开源DHTML工具包。它是在几个项目捐助基础上建立起来的(nWidgets,Burstlib,f(m)),这也是为什么叫它a"unified"toolkit的原因。Dojo的目标是解决开发DHTML应用程序遇到的那些,长期...

Global site tag (gtag.js) - Google Analytics