本文關(guān)鍵詞：html模板

  更多相關(guān)文章： HTML 模板 SEFC

前面我們提到過(guò)大部分的Dorado頁(yè)面都不需要JSP,我們可以通過(guò)布局管理器和容器完成系統(tǒng)中絕大部分的頁(yè)面設(shè)計(jì)，但是也不能排除系統(tǒng)中還是會(huì)存在某幾個(gè)特殊的頁(yè)面，開(kāi)發(fā)人員希望能夠引入JSP或Velocity作為頁(yè)面的布局管理器。比如說(shuō)原有的布局管理器無(wú)法滿足特殊的頁(yè)面布局管理，或者說(shuō)開(kāi)發(fā)人員希望讓美工更好的參與到頁(yè)面的設(shè)計(jì)中。

下面我們介紹一下Dorado7中的html模板功能。

我們查看sample-center中提供的Velocity頁(yè)面模板示例:

從頁(yè)面的風(fēng)格我們看出這是一種開(kāi)放式布局頁(yè)面,其頁(yè)面上嵌入了一些Dorado的控件，如:

由于采用的是Velocity布局，因此在這個(gè)View中我們可以看到其中的控件是一個(gè)個(gè)羅列在View節(jié)點(diǎn)下的。View不再進(jìn)行布局的管理。
現(xiàn)在我們?cè)倏纯碫elocity頁(yè)面模板與View是怎么配合工作的，我們先了解View的一個(gè)特性:
Dorado默認(rèn)的資源文件加載的約定：與View同名同目錄的html、js、css文件可以被自動(dòng)裝載。
如剛才的VelocityTemplate.html和VelocityTemplate.view.xml文件我們注意到他的名字是一樣的，這樣Dorado就默認(rèn)認(rèn)為VelocityTemplate.html是VelocityTemplate.view.xml的html模板頁(yè)面,并自動(dòng)裝載。同理相關(guān)的js和css文件也是這樣，如果我們希望加載不同文件名或不同資源路徑的文件，則我們也可以通過(guò)View的幾個(gè)屬性進(jìn)行設(shè)定:

屬性名

說(shuō)明

pageTemplate

HTML頁(yè)面模板

javascriptFile

js資源文件,多個(gè)js資源逗號(hào)隔開(kāi)

styleSheetFile

css文件按,多個(gè)css文件逗號(hào)隔開(kāi)

以上三個(gè)屬性的值都支持協(xié)議的寫法，如:classpath:xxx或file:xxx

這樣我們就知道了View與html模板建立關(guān)系的方式。
另外關(guān)于控件渲染到html模板的模式，Dorado設(shè)計(jì)了三種:

dorado中的所有可見(jiàn)控件都提供了renderTo和renderOn的兩個(gè)屬性。我們通過(guò)一個(gè)實(shí)例了解三種模式的差別。
頁(yè)面測(cè)試URL:

其中的Button1和Button2被渲染到了頁(yè)面中帶紅邊框的一個(gè)DIV中,在XML定義的時(shí)候我們?cè)O(shè)置了其renderTo屬性:

這兒我們用了"#place1",如果對(duì)jquery屬性就能猜出來(lái)這是css中的一種寫法:在dorado中目的是表示要查找HTML模板中id為"place1"的DOM對(duì)象,并將當(dāng)前控件渲染進(jìn)去。我們?cè)趯?duì)應(yīng)的html模板中可以找到這個(gè)一個(gè)DIV:

這個(gè)DIV本身設(shè)置了class，本例為:

顯示效果為一帶紅色邊框的DIV對(duì)象。renderTo功能是把button1和button2渲染到這個(gè)DIV的內(nèi)部。place1這個(gè)DIV還會(huì)被保留。這就是我們?cè)陧?yè)面上看到的最效果。

通過(guò)我們對(duì)renderTo的了解，我們很容易就能想到應(yīng)該還有一種可以把目標(biāo)DIV替換的渲染方式，如頁(yè)面上的ListBox控件:

與Button控件采用了renderTo的方式不同，ListBox采用了renderOn的方式進(jìn)行渲染。
查看html模板的設(shè)定:

其中place2與place1的class值相同，正常來(lái)將它們?cè)跒g覽器中顯示的時(shí)候都應(yīng)該有一個(gè)紅色邊框，但實(shí)際運(yùn)行的時(shí)候由于LisBox采用了renderOn的模式，導(dǎo)致整個(gè)DIV被替換了，也就無(wú)法看到那個(gè)紅色邊框。

最后我們?cè)賮?lái)了解一下renderOn容器模式,我們已經(jīng)知道了renderOn的運(yùn)行處理機(jī)制，當(dāng)在某些場(chǎng)景下美工人員可能希望他可以定義DIV的內(nèi)部元素，也就是說(shuō)希望在renderOn的運(yùn)行處理過(guò)程中只替換外部的DIV,這中模式已經(jīng)被renderOn支持了，例如我們看到的:

上面的place3中包含了一段文字說(shuō)明以及一個(gè)圖片的定義。而在View中我們定義的控件如下:

這兒用了一個(gè)Panel控件替換place3最外面的那個(gè)DIV,這樣在瀏覽器中我們最終看到的效果中，那段文字和圖片都得到了保留。不過(guò)需要注意的是這兒只能使用容器類的控件才能實(shí)現(xiàn)這種效果。

另外很多開(kāi)發(fā)人員都更習(xí)慣JSP,而可能這個(gè)頁(yè)面的開(kāi)發(fā)中并需要美工人員的參與,那么開(kāi)發(fā)人員可能會(huì)更樂(lè)于采用JSP做html模板。這個(gè)在Dorado7中也得到了支持，其基本的使用方法與Velocity模板一致。包括三種控件的渲染方式:renderTo,renderOn,renderOn容器

測(cè)試頁(yè)面:

查看頁(yè)面發(fā)現(xiàn)它與之前的Velocity頁(yè)面是一模一樣的。

唯一差別是View與模板的關(guān)系我們是通過(guò)View的pageUri屬性設(shè)定的，如下圖:

JSP所處的位置并不一定要在WEB-INF下,也可以按照習(xí)慣的用法直接放在根目錄下。
我們?cè)賮?lái)看/WEB-INF/jsp/JspTemplate.jsp頁(yè)面:

這個(gè)JSP與剛才的Velocity對(duì)應(yīng)的HTML頁(yè)面幾乎沒(méi)有差別，差別在頭部,在這個(gè)JSP中我們需要引入Dorado的標(biāo)簽庫(kù):

另外我們?cè)?!--http://wiki.bsdn.org/pages/viewpage.action?pageId=6947239-->，

本文編號(hào)：1218925