Life with Dojo(0.9-1.0)

Javabengou

浏览: 175972 次
性别:
来自: 郴州

最近访客更多访客>>

星空不远

omeweb

longzhiwuing

xyllxf521

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JavaScript

Dojo UI JavaScript CSS JSF

一直都在写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 代码

<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>

下面这个代码是你必须的（在你使用DOJO ui,她负责解析）

xml 代码

<script type="text/javascript">
dojo.require("dojo.parser");
</script>

2.
这里要说明的是DOJO默认的Dijit 的 theme（主题）是Tundra
所以第2个要添加的代码片段如下：

xml 代码

<body class="tundra">

如果你不写上上面的代码，DOJO的 ui会让你看起来觉得很奇怪，因为他们基本上依靠CSS的。

上面说了基本的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>

其实个人觉得DOJO的这种模式有点接近JAVA import(当然还有很多这样的框架) 大家注意看dojoType这个属性。
下面的代码就更像了，因为她把要使用的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>

第一遍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

分享到：

Open鼠 | 什么是开源

2007-11-07 14:04
浏览 2122
评论(0)
查看更多

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论