一直都在写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)
上面的代码是大家都能看得懂!这里就不介绍了!
对于上面的代码,如果使用DOJO UI只需要添加少许几行JS代码或者在已存在的标准HTML中添加扩展DOJO的专有属性。
其实这些魔力的所在是一个叫做 Dijit - 这里我们可以叫她 "dojo widgets",她完成了各种各样的任务。
Dijit - 的初步认识:
首先我们得做两件事,来让 Dijit - 工作(必须在每个使用 Dijit 的页面添加2处代码片段):
1.
你得导入DOJO的CSS,对于JS脚本,你得导入DOJO的js,当然这里使用的是 aolcdn,你也可以使用你自己服务器上
下面这个代码是你必须的(在你使用DOJO ui,她负责解析)
2.
这里要说明的是DOJO默认的 Dijit 的 theme(主题)是Tundra
所以第2个要添加的代码片段如下:
如果你不写上上面的代码,DOJO的 ui会让你看起来觉得很奇怪,因为他们基本上依靠CSS的。
上面说了基本的DOJO该做的事情,下面,来让我们把上面的标准HTML代码,改成DOJO的 UI。
这里要介绍个属性,这就是Dijit引进的新属性dojoType":
代码如下:
其实个人觉得DOJO的这种模式有点接近JAVA import(当然还有很多这样的框架) 大家注意看
dojoType这个属性。
下面的代码就更像了,因为她把要使用的UI 类库(先借用JAVA的表述来说吧)在你的HTML header处就要导入进来(或许现在C#,JAVA都在使用这样的导入,DOJO也借用,让大家能感觉到亲近,哈哈!)
如下:
第一遍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(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 代码
- <head>
- <title>Taxes, The Surest Thing Next to Death!</title>
- </head>
- <body>
- <h1>2007 Tax Form</h1>
- The Sovereign Nation of Googolica, In Search We Trust
- <form>
- First Name: <input type="text" length="20" name="first"><br>
- Last Name: <input type="text" length="20" name="last"><br>
- Email Address: <input type="text" length="20" name="email"><br>
- <hr>
- <ol>
- <li>
- Please Enter Your 2007 Gross Income
- <input type="text" length="10" name="grossIncome">
- </li>
- <li>
- Please enter the value from line 1. This is your <em>2007 tax</em>
- <input type="text" length="10" name="tax">
- </li>
- <li>
- Would you like to contribute an extra $3 to the Presidential Campaign Fund?
- <input type="checkbox" name="campaign" value="Y">
- </li>
- <li>
- Filing Date:
- <input type="text" length="10" name="filingDate">
- </li>
- </ol>
- <input type="submit" value="Submit">
- </form>
- </body>
对于上面的代码,如果使用DOJO UI只需要添加少许几行JS代码或者在已存在的标准HTML中添加扩展DOJO的专有属性。
其实这些魔力的所在是一个叫做 Dijit - 这里我们可以叫她 "dojo widgets",她完成了各种各样的任务。
Dijit - 的初步认识:
首先我们得做两件事,来让 Dijit - 工作(必须在每个使用 Dijit 的页面添加2处代码片段):
1.
xml 代码
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
- "http://www.w3.org/TR/html4/strict.dtd">
- <html>
- <head>
- <title>Taxes, The Surest Thing Next to Death!</title>
- <style type="text/css">
- @import "http://o.aolcdn.com/dojo/0.9.0/dijit/themes/tundra/tundra.css";
- @import "http://o.aolcdn.com/dojo/0.9.0/dojo/dojo.css"
- </style>
- <script type="text/javascript" src="http://o.aolcdn.com/dojo/0.9.0/dojo/dojo.xd.js"
- djConfig="parseOnLoad: true"></script>
- <script type="text/javascript">
- dojo.require("dojo.parser");
- </script>
- </head>
你得导入DOJO的CSS,对于JS脚本,你得导入DOJO的js,当然这里使用的是 aolcdn,你也可以使用你自己服务器上
xml 代码
- <script type="text/javascript" src="lib/dojo/dojo.js"></script>
xml 代码
- <script type="text/javascript">
- dojo.require("dojo.parser");
- </script>
这里要说明的是DOJO默认的 Dijit 的 theme(主题)是Tundra
所以第2个要添加的代码片段如下:
xml 代码
- <body class="tundra">
上面说了基本的DOJO该做的事情,下面,来让我们把上面的标准HTML代码,改成DOJO的 UI。
这里要介绍个属性,这就是Dijit引进的新属性dojoType":
代码如下:
xml 代码
- <form>
- First Name: <input type="text" length="20" name="first" dojoType="dijit.form.TextBox"><br>
- Last Name: <input type="text" length="20" name="last" dojoType="dijit.form.TextBox"><br>
- Email Address: <input type="text" length="20" name="email" dojoType="dijit.form.TextBox">
- Filing Date: <input type="text" length="10" name="filingDate" dojoType="dijit.form.DateTextBox">
- <hr>
- <ol>
- <li>Please Enter Your 2007 Gross Income
- <input type="text" length="10" name="grossIncome" dojoType="dijit.form.TextBox"></li>
- <li>Please enter the value from line 1. This is your <em>2007 tax</em>
- <input type="text" length="10" name="tax" dojoType="dijit.form.TextBox"></li>
- <li>Would you like to contribute an extra $3 to the Presidential Campaign Fund?
- <input type="checkbox" name="campaign" value="Y" dojoType="dijit.form.CheckBox"></li>
- </ol>
下面的代码就更像了,因为她把要使用的UI 类库(先借用JAVA的表述来说吧)在你的HTML header处就要导入进来(或许现在C#,JAVA都在使用这样的导入,DOJO也借用,让大家能感觉到亲近,哈哈!)
如下:
xml 代码
- <script type="text/javascript">
- dojo.require("dojo.parser");
- dojo.require("dijit.form.TextBox");
- dojo.require("dijit.form.CheckBox");
- dojo.require("dijit.form.DateTextBox");
- </script>
完整的DEMO在主页 dojotoolkit.org/book/dojo-book-0-9/part-1-life-dojo/example-1-why-doesnt-anyone-fill-out-their-tax-forms/adding-some