HTML頁面模板

2024-03-07 18:36 更新

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

Velocity頁面模板

我們查看sample-center中提供的Velocity頁面模板示例: 從頁面的風(fēng)格我們看出這是一種開放式布局頁面,其頁面上嵌入了一些Dorado的控件，如: 場景1中的按鈕;場景2中的一個在Dorado中叫ListBox的控件;場景3中的一個面板控件 現(xiàn)在我們先看看其中的Velocity頁面模板,找到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>場景1 - renderTo模式:</h3>
<div id="place1" class="place"></div>

 
<h3>場景2 - renderOn模式:</h3>
<div id="place2" class="place"></div>

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

 
</body>

可以看到這是一個普通的html，唯一不同之處是"#outputPageHeader()"這行代碼,這樣這個html就比較容易的被美工人員在DremWeaver或FrongPage中進(jìn)行編輯。與使用標(biāo)簽庫開發(fā)不同，這種頁面美工更容易讀懂，也更容易被一般的網(wǎng)頁編輯器讀取和編輯。 我們再來看看同樣目錄下的VelocityTemplate.view.xml： 由于采用的是Velocity布局，因此在這個View中我們可以看到其中的控件是一個個羅列在View節(jié)點下的。View不再進(jìn)行布局的管理。 現(xiàn)在我們再看看Velocity頁面模板與View是怎么配合工作的，我們先了解View的一個特性: Dorado默認(rèn)的資源文件加載的約定：與View同名同目錄的html、js、css文件可以被自動裝載。 如剛才的VelocityTemplate.html和VelocityTemplate.view.xml文件我們注意到他的名字是一樣的，這樣Dorado就默認(rèn)認(rèn)為VelocityTemplate.html是VelocityTemplate.view.xml的HTML模板頁面,并自動裝載。同理相關(guān)的js和css文件也是這樣，如果我們希望加載不同文件名或不同資源路徑的文件，則我們也可以通過View的幾個屬性進(jìn)行設(shè)定: 以上三個屬性的值都支持協(xié)議的寫法，如:classpath:xxx或file:xxx 這樣我們就知道了View與HTML模板建立關(guān)系的方式。 另外關(guān)于控件渲染到HTML模板的模式，Dorado設(shè)計了三種: renderTo模式renderOn模式renderOn容器模式dorado中的所有可見控件都提供了renderTo和renderOn的兩個屬性。我們通過一個實例了解三種模式的差別。 頁面測試URL:http://dorado.bstek.com/sample-center/com.bstek.dorado.sample.basic.VelocityTemplate.d renderTo 其中的Button1和Button2被渲染到了頁面中帶紅邊框的一個DIV中,在XML定義的時候我們設(shè)置了其renderTo屬性:

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

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

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

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

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

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

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

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

<h3>場景1 - renderTo模式:</h3>
<div id="place1" class="place"></div>

 
<h3>場景2 - renderOn模式:</h3>
<div id="place2" class="place"></div>

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

renderOn容器模式

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

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

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

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

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

JSP頁面模板示例

另外很多開發(fā)人員都更習(xí)慣JSP,而可能這個頁面的開發(fā)中并需要美工人員的參與,那么開發(fā)人員可能會更樂于采用JSP做HTML模板。這個在Dorado中也得到了支持，其基本的使用方法與Velocity模板一致。包括三種控件的渲染方式:renderTo,renderOn,renderOn容器 測試頁面:http://dorado.bstek.com/sample-center/com.bstek.dorado.sample.basic.JspTemplate.d 查看頁面發(fā)現(xiàn)它與之前的Velocity頁面是一模一樣的。 唯一差別是View與模板的關(guān)系我們是通過View的pageUri屬性設(shè)定的，如下圖: JSP所處的位置并不一定要在WEB-INF下,也可以按照習(xí)慣的用法直接放在根目錄下。 我們再來看/WEB-INF/jsp/JspTemplate.jsp頁面:

 <%@ 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>場景1 - renderTo模式:</h3>
<div id="place1" class="place"></div>

 
<h3>場景2 - renderOn模式:</h3>
<div id="place2" class="place"></div>

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

 
</body>

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

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

另外我們在<head>標(biāo)簽中加入了:

<d:PageHeader/>

Velocity中我們用的是:

#outputPageHeader()

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

可以選擇其它的模板

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

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

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號