struts結(jié)合Dojo

1、Struts2內(nèi)置對dojotoolkit的支持TODO 基于Ajax標(biāo)簽做更詳細(xì)的使用講解，由于dojo ajax標(biāo)簽在struts2中還處于試驗(yàn)階段，所以我們主要講解dojo在不使用struts2內(nèi)置功能的情況下怎么和struts2結(jié)合使用。Dojotoolkit介紹Dojotoolkit是當(dāng)前比較流行的JavaScript框架，dojo主要提供了以下功能：Java Script Web組件（例如Tree，Grid，Button，Menu等），事件處理框架，Ajax異步調(diào)用等功能，非常好用。Dojo現(xiàn)在主要有兩個版本： 現(xiàn)在流行的版本，優(yōu)點(diǎn)是，功能非常強(qiáng)大，非常穩(wěn)定，缺點(diǎn)是類庫本身比較低，

2、執(zhí)行效率較低0.9 beta是新的版本，是為了保留的有點(diǎn)同時提升性能而重寫的一個版本，但是現(xiàn)在還處在beta階段，bug相會還比較多。但是系列絕對是將來的發(fā)展方向。我們主要以0.9 beta版本為講解對象，主要講解以下內(nèi)容：Widget組件，事件處理，Ajax等功能。但是情大家注意，dojo的功能遠(yuǎn)不止這么多。Dojo安裝1 從下述網(wǎng)站下載dojo0.9 beta壓縮文件2 在你的Web項(xiàng)目目錄中建立一個名字叫做js的目錄（名字任意，這里叫js）3 將壓縮文件在上面建立的目錄中解壓縮，得到如下文件結(jié)構(gòu)：4 打開瀏覽器，在地址欄中輸入如下內(nèi)容： http:/hostname:port/js/do

3、jo-beta/dijit/themes/themeTester.html 如果看到如下頁面說明安裝成功：Dojo Widget 組件我們回頭看/themeTester.html 畫面，上面的組件要比HTML默認(rèn)的組件漂亮很多。他們都是使用dojo的widget（又叫dijit）來完成的。Dojo widget在目錄dijit中。下面我們使用一個小例子還逐步的說明dijit的使用方法，通過如下步驟，我們將todo的insert畫面改編為dijit組件。我們有一個小小的Todo輸入的頁面，靜態(tài)的效果如下：這里有很多地方不是很方便，例如：1 日期能不能出現(xiàn)一個日歷選擇對話框，只要選擇就好？2 日期

4、能不能自動校驗(yàn)，例如如果輸入，2007/02/29可以判斷為錯誤日期？3 時間需要校驗(yàn)，需要校驗(yàn)格式（HH:mm:ss）和數(shù)字內(nèi)容例如不會有25:89:60。4 下拉列表能不能支持手工編寫？能不能支持根據(jù)已經(jīng)輸入的值自動過濾選擇項(xiàng)？5 能否讓系統(tǒng)提示必須填入項(xiàng)目？通過使用dojo的dijit組件這些都可以做到，并且dijit組件有兩種使用方式：標(biāo)簽和JS編程動態(tài)實(shí)現(xiàn)。無論那種方式實(shí)現(xiàn)都需要了解一些基本的步驟：第一步，由于dojo是JavaScript編寫的，所以第一步必須首先引用dojo框架的JavaScript，同時dojo提供了一些初始化配置，可以在引用dojo的時候同時配置，代碼如下：s

5、cript type=text/javascript src=/dojo- djConfig=isDebug: true, parseOnLoad: true其中src指向的是dojo在web項(xiàng)目中的存放路徑。djConfig是dojo追加的自定義屬性，在HTML標(biāo)準(zhǔn)里并沒有。使用djConfig可以做一些基本的配置，isDebug表示了當(dāng)前頁面中使用的dojo內(nèi)容是否處在調(diào)試狀態(tài)，在調(diào)試狀態(tài)可以輸出更多的內(nèi)容，一般開發(fā)的時候我么選擇true。parseOnLoad表示所有的dijit組件是否在html頁面裝載的時候自動的做展現(xiàn)（Render）處理，使用dijit組件的時候我們選擇true，沒

6、有使用的時候使用false可以獲得更好的性能。第二步，引用需要使用的dojo類，這一步有些像Java中的import，注意添加引用的類會增加頁面加載是JavaScript的下載量，所以應(yīng)該盡量的精簡引用的dojo對象。代碼為： dojo.require(dijit.form.ValidationTextbox); dojo.require(dijit.form.DateTextbox); dojo.require(dijit.form.ComboBox); dojo.require(dijit.form.Button); dojo.require(dijit.form.Textbox); do

7、jo.require(dijit.form.NumberTextbox); dojo.require(dijit.form.CurrencyTextbox); dojo.require(dojo.currency); dojo.require(dojo.date.locale); dojo.require(dojo.parser);上述的代碼說明了我們需要在后續(xù)的代碼中使用的dojo組件。第三步，引用需要使用的CSS文件，由于dojo使用CSS實(shí)現(xiàn)了主題的概念，所以我們在使用dojo的時候一定要選擇合適的主題。代碼為：import /teamware/dojo-beta/dojo/resour

8、ces/dojo.css;import /teamware/dojo-beta/dijit/themes/dijit.css;import /teamware/dojo-beta/dijit/themes/tundra/tundra.css;當(dāng)然，也可以加入自己的內(nèi)容，自定以主題。默認(rèn)的主題時tundra主題。另外需要注意，使用主題的時候需要在html的body元素上使用class屬性，代碼為：第四步（標(biāo)簽），使用dojo的dijit組件。所有的組件都有一個dojo自定義的屬性dojoType，dojoType決定了這個組件的dijit類型。例如：日期組件這里dojoType=”dijit.f

9、orm.DateTextbox”，表示這個組件的類型為DateTextbox類型，具體表現(xiàn)形式為：時間組件：具體表現(xiàn)形式為：第四步（JS編程動態(tài)實(shí)現(xiàn)），使用dojo的dijit組件。在使用Struts2的過程中，為了方便操作，我們一般使用Struts2的內(nèi)置標(biāo)簽，例如：等。但是使用這些標(biāo)簽有一個問題，這些標(biāo)簽都是Struts2的標(biāo)簽，在定制這些標(biāo)簽的時候沒有考慮到dojo，所以這些標(biāo)簽中不能使用dojoType屬性，所以要想在Struts2中要想使用dojo，就得：要么放棄這些好用的Struts2標(biāo)簽，要么，就是我們要講的使用JS動態(tài)的使用dojo。例如，我們有了如下的JSP頁面（只講述for

10、m部分），其中使用了struts2標(biāo)簽： 那么我們?nèi)绾问褂肑avaScript來動態(tài)的使用Dojo呢？基本原理如下：（1） 構(gòu)造組件需要使用的dojo屬性（2） 找到需要套用dojo組件的HTML 元素，使用前面定義的屬性建立新的替代組件，例如，現(xiàn)在要將替換為類型，代碼為：var paramsStartDate = required: true, constraints: selector: date, formatLength: short, datePattern: yyyy-MM-dd, timePattern: HH:mm:ss, locale: zh-cnvar startDateT

11、ext = new dijit.form.DateTextbox(paramsStartDate, document.getElementById(startDate);首先我們定義了一個Map型的對象paramsStartDate用來存儲我們在構(gòu)建dijit組件時使用的屬性和值。之后我們使用的構(gòu)造方法來創(chuàng)建dojo類型的組件。但是需要注意一點(diǎn)，上述代碼必須在HTML頁面load的時候執(zhí)行，否則無法正常創(chuàng)建dojo組件，這里我們使用了dojo對象的addOnLoad方法吧這段代碼加入到HTML頁面load時運(yùn)行的代碼中。全部的JavaScript代碼如下： dojo.addOnLoad( fu

12、nction () var paramsStartDate = required: true, constraints: selector: date, formatLength: short, datePattern: yyyy-MM-dd, timePattern: HH:mm:ss, locale: zh-cn var startDateText = new dijit.form.DateTextbox(paramsStartDate, document.getElementById(startDate); /* init start time */ var paramsStartTim

13、e = value: 08:30:00, validator: dojo.date.locale.parse, constraints: formatLength: short, selector: time, timePattern: HH:mm:ss, trim: true, required: true,invalidMessage: Invalid time. Use HH:mm:ss where HH is 00 - 23 hours. var startTimeText = new dijit.form.ValidationTextbox(paramsStartTime, docu

14、ment.getElementById(startTime); /* init title */ var paramsTitleText = required: true, promptMessage: Enter a Title var titleText = new dijit.form.ValidationTextbox(paramsTitleText, document.getElementById(title); ); Dojo事件處理JavaScript中使用事件的方式為： function foo() alert(Hello!); Hello!上述代碼表示firstButton被

15、點(diǎn)擊（onclick）的時候，觸發(fā)foo()方法。使用上述方式很簡單，但是存在不好的地方，所有的畫面表示內(nèi)容（例如標(biāo)簽）會和事件處理（onclick=”foo();”）關(guān)聯(lián)起來。當(dāng)畫面事件處理比較簡單的時候，這個缺點(diǎn)體現(xiàn)不出來，但是當(dāng)畫面時間比較多，并且經(jīng)常需要調(diào)整JavaScript方法和表示內(nèi)容的時候就會暴露出來修改比較困難的問題?？梢允褂胏onnect將JavaScript方法和表示組件聯(lián)合起來，例如：dojo.addOnLoad( function() dojo.connect(dojo.byId(firstButton), onclick, foo); );上述的代碼表示將first

16、Button的onclick事件和foo方法聯(lián)系起來，當(dāng)firstButton被點(diǎn)擊的時候會觸發(fā)foo方法。這里就解決了畫面表示內(nèi)容（例如標(biāo)簽）和事件處理之間關(guān)聯(lián)的問題。我們可以在onLoad方法內(nèi)部將所有的關(guān)聯(lián)鏈接起來。Event Object 說明我們接著dojo.connect方法說，能不能在JavaScript方法內(nèi)部看到事件的詳細(xì)信息？我們把事件的相關(guān)信息認(rèn)為Event Object對象，例如，在做方法的時候，我們可以使用一個dojo的內(nèi)置對象叫做EventObjectEventObject屬性：event.target 觸發(fā)事件的HTML元素（the element that ge

17、nerated the event）event.currentTarget 當(dāng)前的Target（the current target）event.layerX 跟currentTarget相關(guān)的X坐標(biāo)（ the x coordinate, relative to the event.currentTarget）event.layerY 跟currentTarget相關(guān)的Y坐標(biāo)（ the y coordinate, relative to the event.currentTarget ）event.pageX 當(dāng)前View Point的X坐標(biāo)（the x coordinate, relativ

18、e to the view port）event.pageY 當(dāng)前View Point的Y坐標(biāo)the y coordinate, relative to the view port event.relatedTarget 對于onmouseover and onmouseout 時間，指鼠標(biāo)進(jìn)入或者退出的對象。（For onmouseover and onmouseout, the object that the mouse pointer is moving to or out of）event.charCode 針對于keypress時間表示key code（ For keypress e

19、vents, the character code of the key pressed ）EventObject方法：event.preventDefault 阻止了時間的默認(rèn)行為（ prevent an events default behavior (e.g., a link from loading a new page) ）event.stopPropagation 阻止了父Node的事件觸發(fā)（ prevent an event from triggering a parent nodes event）例如：function echo(event) key = event.charC

20、ode; console.debug(event.charCode);function foo(event) dojo.stopEvent(event); console.debug(The link was clicked);dojo.addOnLoad(function() interactiveNode = dojo.byId(interactive); linkNode = dojo.byId(link); dojo.connect(interactiveNode, onkeypress, echo); dojo.connect(linkNode, onclick, foo);); D

21、ojo is great. Type some text: Dijit組件和Event TODOTopicTODODojoAjax異步調(diào)用HelloWorld Dojo Ajax 程序我們做一個畫面，在畫面中使用ajax從服務(wù)器中取得動態(tài)的內(nèi)容，將這些內(nèi)容顯示在頁面中。首先我們在服務(wù)器上做一個txt文件，例如文件為ajax.txt，內(nèi)容為：Hello World!This is a simple ajax text file.然后做一個jsp畫面，其中有一個div內(nèi)容從服務(wù)器上的ajax.txt文件取得，代碼為：Ajax Hello World!script type=text/javascr

22、ipt src=/dojo- function hello() dojo.xhrGet( / The following URL must match that used to test the server. url: http:/localhost:8080/teamware/test/ajax.txt, handleAs: text, timeout: 5000, / Time in milliseconds / The LOAD function will be called on a successful response. load: function(response, ioAr

23、gs) dojo.byId(cargo).innerHTML = response; return response; ,/ The ERROR function will be called in an error case. error: function(response, ioArgs) console.error(HTTP status code: , ioArgs.xhr.status); return response; ); dojo.addOnLoad(hello); 說明：引入dojo框架把方法hello注冊到onload中，當(dāng)畫面全部裝載以后運(yùn)行該方法。Ajax方法，取得

24、服務(wù)器ajax.txt的內(nèi)容，在cargo div中顯示這些內(nèi)容。指向ajax.txt的url路徑。服務(wù)器文件類型錯誤處理第十五章 AJAX JQueryJQuery是另外一個非常流行的JavaScript框架，相對于Dojo來說JQuery更加的輕便，JQuery代碼文件的大小為20kb，但是絲毫沒有影響到JQuery的強(qiáng)大功能，也許在了解JQuery之后你會有更深刻的體會。并且JQuery使用了插件的體系結(jié)構(gòu)，開發(fā)人員可以在JQuery的基礎(chǔ)上利用插件的機(jī)制擴(kuò)展JQuery的功能。和JQuery詳細(xì)的JavaScript框架有Prototype，雖然Prototype和也可以制作出強(qiáng)大的功

25、能的頁面。但是我更喜歡JQuery的簡介方式和強(qiáng)大的插件群。JQuery官方網(wǎng)站: Prototype官方網(wǎng)站: 官方網(wǎng)站: JQuery核心只有一個文件，其中表示了文件的版本，現(xiàn)在最新的版本為.1。并且為了提高jquery的下載效率，官方網(wǎng)站提供了一個壓縮版本的文件，這個文件只有20kb。安裝jqueyr只需要將拷貝到對應(yīng)web項(xiàng)目的javascript腳本目錄即可。JQuery 核心Onload 使用我們有些時候需要在頁面初始化完成的時候調(diào)用一些JavaScript預(yù)處理操作，例如設(shè)置某些Button不可用等，這個時候我們通常有兩種選擇。第一：第二：window.onload = some

26、Function;上述代碼意義相同，都會在頁面初始化完成之后執(zhí)行someFunction這個預(yù)先定義的JavaScript函數(shù)。但是，頁面初始化完成到底是什么含義呢？頁面初始化完成意味著頁面全部被瀏覽器顯示，也就是說所有的image都加載完成。有些時候這個過程非常的常，有些時候我們可以看到有些網(wǎng)站的button先是可用，后來等所有頁面顯示之后又不可用了就是這個原因。那么我們到底在什么時候執(zhí)行someFunction是比較合適的呢？我們傾向于頁面的全部document內(nèi)容被加載，而不是所有內(nèi)容正確顯示之后別調(diào)用。以img為例說明上述的區(qū)別，例如當(dāng)上述字面內(nèi)容被瀏覽器下載完成時，我們可以說img被

27、加載了，當(dāng)指向的內(nèi)容被下載并且被正確顯示之后，可以說img被正確顯示了。如何使用JQuery來達(dá)到頁面內(nèi)容別加載就執(zhí)行someFunction？$(document).ready(someFunction);$()是什么？$()是JQuery的核心方法，$()方法有幾種不同的調(diào)用方式，但是這幾種方式都有一個共通的特點(diǎn)，就是通過$()方法，可以將一個普通的HTML DOM對象（p, div, body, doucment等）封裝成為一個特殊的，增強(qiáng)了JQuery功能的JQuery對象。說道這里大家可能會知道了JQuery其實(shí)相當(dāng)于一個對象，一個封裝了不同HTMLDOM對象的對象。$(string

28、) 憑空創(chuàng)建一個JQuery包裝起來的HTML DOM對象，例如： $(Hello).appendTo(body)上述代碼建立了一個Hello段，Hello段在一個div內(nèi)部，之后將這個div追加到了doby內(nèi)部。$( elems ) 講一個已經(jīng)存在的HTML DOM對象包裝為JQuery對象，例如： $(document.body).css( background, black ); 上述代碼把body的background設(shè)置為black $( myForm.elements ).hide() 隱藏myForm中所有的對象$( function)$(document).ready(func

29、tion)的簡寫，總共有三種方法讓一個function在dom初始化完成之后被調(diào)用： $(document).ready(function) $( function) JQuery(function)$( expr, context )在上下文（）中查找表達(dá)式（）所只是的對象，context不存在的情況下在document上下文中查找，例如：DOM對象： one two three調(diào)用： $(div p)結(jié)果： two$(input:radio, document.forms0)查找第一個form中的所有redio類型的輸入框。$(div, xml.responseXML)查找指示的XML文件

30、內(nèi)容中所有的div項(xiàng)。擴(kuò)展JQuery的功能可以使用$.fn.extend( prop )來擴(kuò)展JQuery提供的功能，例如，JQuery并沒有提供check和uncheck方法，但是我們可以通過如下的代碼擴(kuò)展JQquery，使JQuery增加check和uncheck功能：jQuery.fn.extend( check: function() return this.each(function() this.checked = true; ); , uncheck: function() return this.each(function() this.checked = false; );

31、 );之后我們可以選擇一個對象來使用擴(kuò)展的check和uncheck方法，例如：$(inputtype=checkbox).check();$(inputtype=radio).uncheck();解決和其他框架的沖突$在JQuery中有著特殊的含義，但是有些時候我們的項(xiàng)目已經(jīng)集成了其他的框架）（例如Prototype），在其他框架中$已經(jīng)被使用了，那么我們怎么消除JQuery對$指定的特殊含義呢？我們可以使用jQuery.noConflict()方法，在調(diào)用這個方法之后，$已經(jīng)不在具有我們前面說的JQuery賦予的功能，所以所有的后續(xù)代碼必須使用JQuery調(diào)用，例如：jQuery.noCo

32、nflict(); / 調(diào)用JQuery的方法 jQuery(div p).hide(); / 調(diào)用其他框架的$()方法 $(content).style.display = none;我們也可以指定自己喜歡的名字來替換$，例如：var j = jQuery.noConflict();/ 調(diào)用jQuery的方法j(div p).hide();/ 調(diào)用其他框架的 $( ) 方法$(content).style.display = none;其他常用方法each( fn ) 這對數(shù)組中的每一個對象調(diào)用fn方法。例如： HTML DOM代碼： 調(diào)用方法： $(img).each(function(i

33、) this.src = test + i + .jpg;); 結(jié)果： eq( pos ) 定位具體的HTML DOM對象 HTML DOM代碼：This is just a test.So is this 調(diào)用方法： $(p).eq(1) 結(jié)果： So is thisget( pos ) 定位具體的HTML DOM對象（脫掉了JQuery的包裝，原始的DOM對象） HTML DOM代碼： 調(diào)用方法： $(img).get( num ) 結(jié)果： get() 針對所有的對象，脫掉了JQuery的包裝，獲取原始的DOM對象 HTML DOM代碼： 調(diào)用方法： $(img).get() 結(jié)果： gt

34、( pos ) 取出pos之后的所有對象 HTML DOM代碼： 調(diào)用方法： $(img).gt(0) 結(jié)果： index( subject ) 找到subject在數(shù)組中對應(yīng)的index，不存在時返回-1 HTML DOM代碼： 調(diào)用方法： $(*).index( $(#foobar)0 ) 結(jié)果： 0Length 返回對象數(shù)組的長度。 HTML DOM代碼： 調(diào)用方法： $(img).length 結(jié)果： 2lt( pos ) 與gt相反 HTML DOM代碼：This is just a test.So is this 調(diào)用方法： $(p).lt(1) 結(jié)果： This is just

35、a test.size() 與length相同JQuery HTML DOM遍歷和選擇器JQuery的功能很強(qiáng)大，可以包裝任何一個HTML DOM元素添加強(qiáng)大的功能，那么如何找到需要的元素呢？這就需要JQuery Selector來幫慢，原理上講，JQuery Selector可以超找到HTML DOM里的任何元素JQuery Selector主要包含三個方面的實(shí)現(xiàn)：CSS方式，XPath方式，和JQuery自定義的方式。為了逐個講解這些Selector，首先給大家一些基本的例子：隱藏所有包含鏈接（a）的段（p）：$(pa).hide();顯示一個頁面的第一個段（p）：$(p:eq(0).sh

36、ow();將所有顯示（visible=true）的div隱藏：$(div:visible).hide();所有無須列表（ul）的項(xiàng)目（li）：$(ul/li)或者 $(ul li) */獲得所有class類型為foo，并且包含鏈接（a）的段：$(p.fooa);獲得所有字符內(nèi)容包含Register的項(xiàng)目（li）$(lia:contains(Register);得到name=bar的輸入項(xiàng)目的值： $(inputname=bar).val();獲得所有被選中的button：$(inputtype=radiochecked)CSS方式JQuery的CSS方式的Selector支持CSS1-CSS3標(biāo)準(zhǔn)。與CSS中的實(shí)現(xiàn)完全一致的：* 任何的元素E 任何類型為E的元素E:nth-child(n) E元素的第n個子元素E:first-child E的第一個子元素E:last-child E的最后一個元素E:only-child E的唯一的子元素E:empty E沒有子元素，也不能包含text內(nèi)容E:e