HTML頁(yè)面模板

2024-03-07 18:36 更新

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

Velocity頁(yè)面模板

我們查看sample-center中提供的Velocity頁(yè)面模板示例: 從頁(yè)面的風(fēng)格我們看出這是一種開放式布局頁(yè)面,其頁(yè)面上嵌入了一些Dorado的控件，如: 場(chǎng)景1中的按鈕;場(chǎng)景2中的一個(gè)在Dorado中叫ListBox的控件;場(chǎng)景3中的一個(gè)面板控件 現(xiàn)在我們先看看其中的Velocity頁(yè)面模板,找到src目錄下com.bstek.dorado.sample.basic目錄中的VelocityTemplate.html，并打開查看其中代碼:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
#outputPageHeader()
<style>
h1 {
    font-size: 14pt;
}
h3 {
    font-size: 11pt;
}
hr {
    border: none;
    border-bottom: 1px #77BDFD solid;
}
.place {
    border: 3px red solid;
    padding: 16px;
}
</style>
</head>
<body style="margin:24px; background:white url(images/summary-bg.png) no-repeat">

 
<h1>Velocity模板</h1>

 
<h3>場(chǎng)景1 - renderTo模式:</h3>
<div id="place1" class="place"></div>

 
<h3>場(chǎng)景2 - renderOn模式:</h3>
<div id="place2" class="place"></div>

 
<h3>場(chǎng)景3 - renderOn容器模式:</h3>
<div id="place3" class="place">
這里的內(nèi)容是通過(guò)HTML模板定義的！
<p>
<img src="images/dorado-logo-big.png">
</p>
</div>

 
</body>

可以看到這是一個(gè)普通的html，唯一不同之處是"#outputPageHeader()"這行代碼,這樣這個(gè)html就比較容易的被美工人員在DremWeaver或FrongPage中進(jìn)行編輯。與使用標(biāo)簽庫(kù)開發(fā)不同，這種頁(yè)面美工更容易讀懂，也更容易被一般的網(wǎng)頁(yè)編輯器讀取和編輯。 我們?cè)賮?lái)看看同樣目錄下的VelocityTemplate.view.xml： 由于采用的是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è)定: 以上三個(gè)屬性的值都支持協(xié)議的寫法，如:classpath:xxx或file:xxx 這樣我們就知道了View與HTML模板建立關(guān)系的方式。 另外關(guān)于控件渲染到HTML模板的模式，Dorado設(shè)計(jì)了三種: renderTo模式renderOn模式renderOn容器模式dorado中的所有可見控件都提供了renderTo和renderOn的兩個(gè)屬性。我們通過(guò)一個(gè)實(shí)例了解三種模式的差別。 頁(yè)面測(cè)試URL:http://dorado.bstek.com/sample-center/com.bstek.dorado.sample.basic.VelocityTemplate.d renderTo 其中的Button1和Button2被渲染到了頁(yè)面中帶紅邊框的一個(gè)DIV中,在XML定義的時(shí)候我們?cè)O(shè)置了其renderTo屬性:

<Button caption="按鈕1" renderTo="#place1"/>
<Button caption="按鈕2" renderTo="#place1"/>

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

<div id="place1" class="place"></div>

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

.place {
    border: 3px red solid;
    padding: 16px;
}

顯示效果為一帶紅色邊框的DIV對(duì)象。renderTo功能是把button1和button2渲染到這個(gè)DIV的內(nèi)部。place1這個(gè)DIV還會(huì)被保留。這就是我們?cè)陧?yè)面上看到的最效果。 renderOn 通過(guò)我們對(duì)renderTo的了解，我們很容易就能想到應(yīng)該還有一種可以把目標(biāo)DIV替換的渲染方式，如頁(yè)面上的ListBox控件:

<ListBox items="One,Two,Three" renderOn="#place2"/>

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

<h3>場(chǎng)景1 - renderTo模式:</h3>
<div id="place1" class="place"></div>

 
<h3>場(chǎng)景2 - renderOn模式:</h3>
<div id="place2" class="place"></div>

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

renderOn容器模式

最后我們?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支持了，例如我們看到的:

<div id="place3" class="place">
這里的內(nèi)容是通過(guò)HTML模板定義的！
<p>
<img src="images/dorado-logo-big.png">
</p>
</div>

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

<Panel layout="padding:20" caption="一個(gè)面板控件" collapseable="true" height="300" renderOn="#place3" width="800"/>

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

JSP頁(yè)面模板示例

另外很多開發(fā)人員都更習(xí)慣JSP,而可能這個(gè)頁(yè)面的開發(fā)中并需要美工人員的參與,那么開發(fā)人員可能會(huì)更樂(lè)于采用JSP做HTML模板。這個(gè)在Dorado中也得到了支持，其基本的使用方法與Velocity模板一致。包括三種控件的渲染方式:renderTo,renderOn,renderOn容器 測(cè)試頁(yè)面:http://dorado.bstek.com/sample-center/com.bstek.dorado.sample.basic.JspTemplate.d 查看頁(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è)面:

 <%@ page contentType="text/html; charset=UTF-8" %>
<%@ taglib uri="http://www.bstek.com/dorado/taglib-7.0" prefix="d" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 

 
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<d:PageHeader/>
<style>
h1 {
    font-size: 14pt;
}
h3 {
    font-size: 11pt;
}
hr {
    border: none;
    border-bottom: 1px #77BDFD solid;
}
.place {
    border: 3px red solid;
    padding: 16px;
}
</style>
</head>
<body style="margin:24px; background:white url(images/summary-bg.png) no-repeat">

 
<h1>JSP模板</h1>

 
<h3>場(chǎng)景1 - renderTo模式:</h3>
<div id="place1" class="place"></div>

 
<h3>場(chǎng)景2 - renderOn模式:</h3>
<div id="place2" class="place"></div>

 
<h3>場(chǎng)景3 - renderOn容器模式:</h3>
<div id="place3" class="place">
這里的內(nèi)容是通過(guò)HTML模板定義的！
<p>
<img src="images/dorado-logo-big.png">
</p>
</div>

 
</body>

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

<%@ taglib uri="http://www.bstek.com/dorado/taglib-9.0" prefix="d" %>

另外我們?cè)?lt;head>標(biāo)簽中加入了:

<d:PageHeader/>

Velocity中我們用的是:

#outputPageHeader()

從代碼上看,dorado并沒(méi)有對(duì)JSP做太多的侵入。我們還可以按照自己習(xí)慣的方式開發(fā)JSP。

可以選擇其它的模板

從JSP的模板使用中我們注意到它的pageUri,事實(shí)上按照pageUri的運(yùn)行規(guī)則是:當(dāng)我們?cè)L問(wèn)這個(gè)View的時(shí)候，如果發(fā)現(xiàn)配置了pageUri的時(shí)候,View就認(rèn)為需要通過(guò)這個(gè)屬性裝載一個(gè)HTML模板，并Forward到這個(gè)URL上,至于這個(gè)URL是JSP還是html還是別的什么都不重要，關(guān)鍵在于web服務(wù)器的Servlet可以解析它。因此通過(guò)JSP模板的運(yùn)行機(jī)制我們知道只要WEB服務(wù)器可以解析我們所希望的某種形式的模板(例如Velocity Tools, FreeMarker等)，我們都可以將它配置到View的pageUri中作為Dorado的View的HTML模板。HTML模板

以上內(nèi)容是否對(duì)您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)