使用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");