使用DOJO简单的构建一个页面
第一次使用DOJO，感觉DOJO非常强大
1.下载DOJO的包，最新版的是1.7.3，把包拷贝到MyEclipse的dojoroot目录下
修改dojoroot的字符集编码为utf-8，否则会报错，显示乱码
2.引入dojo的css样式
<style type="text/css"> @import "<%=path%>/dojoroot/dijit/themes/tundra/tundra.css"; @import "<%=path%>/dojoroot/dojo/resources/dojo.css"</style>
?
?3.设置djConfig,它是DOJO的全局设置变量，可以控制DOJO的行为
parseOnLoad：设置为true后，在页面完成加载后，启动对DOJO标签进行解析
isDebug：开启调试模式，正式发行后设置为false
<script type="text/javascript" src="<%=path%>/dojoroo/dojo/dojo.js" djConfig="parseOnLoad: true,isDebug:true"></script>
?
?
4. 设置css样式，控制表单元素在页面中的位置
body标签的样式设置为： name="code">.formContainer { width:600px; height:600px; margin: 0px 0px 0px 200px;}label { width:150px; float:left;}
5. 传统的表单都是竖着放一排，那么这样的话，不太美观
dojo的dijit提供了类似于java的SWING的一个组建来构建页面
ContentPane 在内容周围创建边界，把各个组建放入边界内
TabContainer将ContentPane层叠，用户可以通过顶部选项卡选择
ValidationTextBox对单个控件验证
DateTextBox给文本框添加一个弹出式的日历选取器
dojoType="dijit.form.ValidationTextBox"如果为空的背景显示黄色警告
trim去掉空格
propercase首字母改为大写
regExp=".*@.*提供正则表达式验证
<div dojoType="dijit.layout.TabContainer" style="width:600px;height:600px"><div dojoType="dijit.layout.ContentPane" title="Personal Data"> <label for="first_name">First Name:</label> <input type="text" name="first_name" id="first_name" dojoType="dijit.form.ValidationTextBox" trim="true" propercase="true" required="true" size="30" invalidMessage="请输入你的名字" /><br/> <label for="last_name">Last Name:</label> <input type="text" name="last_name" id="last_name" size="30" /><br/> <label for="middle_initial">Middle Initial:</label> <input type="text" name="middle_initial" id="middle_initial" size="1" /><br/> <label for="email">Email:</label> <input type="text" name="email" id="email" size="30" dojoType="dijit.form.ValidationTextBox" regExp=".*@.*"/></div><div dojoType="dijit.layout.ContentPane" title="Address"> <label for="address_line_1">Address Line 1:</label> <input type="text" name="address_line_1" id="address_line_1" size="30" /><br/> <label for="address_line_2">Address Line 2:</label> <input type="text" name="address_line_2" id="address_line_2" size="30" /><br/> <label for="city">City:</label> <input type="text" name="city" id="city" size="30" /><br/> <label for="state">State:</label> <input type="text" name="state" id="state" size="2" /><br/> <label for="postal_code">Postal Code:</label> <input type="text" name="postal_code" id="postal_code" size="15" /><br/> <label for="country">Country:</label> <input type="text" name="country" id="country" size="30" /><br/> <label for="date_move">Date of Move to this Address:</label> <input type="text" name="date_move" id="date_move" dojoType="dijit.form.DateTextBox" size="11" /><br/></div><div dojoType="dijit.layout.ContentPane" title="Phones"> <label for="home_phone">Home Phone:</label> <input type="text" name="home_phone" id="home_phone" size="30" /><br/> <label for="work_phone">Work Phone:</label> <input type="text" name="work_phone" id="work_phone" size="30" /><br/> <label for="cell_phone">Cell Phone:</label> <input type="text" name="cell_phone" id="cell_phone" size="30" /><br/></div></div>
6.dojo.parser为dijit中配置使用声明式的dojoType所必须的
dojo.require动态获取所需的js，这个是必须要添加的
<script> dojo.require("dojo.parser"); dojo.require("dijit.layout.ContentPane"); dojo.require("dijit.layout.TabContainer"); dojo.require("dijit.form.ValidationTextBox"); dojo.require("dijit.form.DateTextBox");</script> dojo.require("dojo.parser");