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

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

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

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

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

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

由于采用的是Velocity布局，因此在這個(gè)View中我們可以看到其中的控件是一個(gè)個(gè)羅列在View節(jié)點(diǎn)下的。View不再進(jìn)行布局的管理。
現(xiàn)在我們再看看Velocity頁面模板與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模板頁面,并自動(dòng)裝載。同理相關(guān)的js和css文件也是這樣，如果我們希望加載不同文件名或不同資源路徑的文件，則我們也可以通過View的幾個(gè)屬性進(jìn)行設(shè)定:

屬性名

說明

pageTemplate

HTML頁面模板

javascriptFile

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

styleSheetFile

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

測試頁面:

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

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

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

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

另外我們在，

本文編號(hào)：1218925