使用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标签的样式设置为： 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");