第一次使用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标签的样式设置为: class="tundra"
.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 class="formContainer" 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");