在 JSP 中設(shè)計(jì)用戶界面
創(chuàng)建頁面流時(shí),WebLogic Workshop 提供各種標(biāo)記庫,您可以使用其中包含的標(biāo)記設(shè)計(jì) JSP。頁面流向?qū)傻拿總€(gè) JSP 文件都定義為包括引用標(biāo)記庫的 <% taglib...> 語句。例如:
<!--由 WebLogic Workshop 生成--> <%@ page language="java" contentType="text/html;charset=UTF-8"%> <%@ taglib uri="netui-tags-databinding.tld" prefix="netui-data"%> <%@ taglib uri="netui-tags-html.tld" prefix="netui"%> <%@ taglib uri="netui-tags-template.tld" prefix="netui-template"%> <netui:html> <head> <title> Web 應(yīng)用程序頁 </title> </head> <body> <p> 新建 Web 應(yīng)用程序頁 </p> </body> </netui:html>
注意:WebLogic Workshop 將 TLD 和 TLDX 庫文件置于 Web 項(xiàng)目的 /WEB-INF 文件夾下。 TLD 文件是 J2EE 標(biāo)準(zhǔn)標(biāo)記庫描述符文件。TLDX 文件是 WebLogic Workshop 的特定文件,包含有關(guān)標(biāo)記在 IDE 中應(yīng)如何起作用的信息。此信息包括顯示、屬性表單和其他信息。
在 IDE 中,如果 JSP 文件在設(shè)計(jì)視圖或源代碼視圖中打開,則可以在選項(xiàng)板窗口中獲取標(biāo)記。例如:
可以將這些標(biāo)記從“選項(xiàng)板”窗口拖放到設(shè)計(jì)視圖中。在某些情況下,會(huì)出現(xiàn)一個(gè)對話框窗口,允許您將操作分配給使用表單 Bean 的標(biāo)記。例如:
注意:在將標(biāo)記圖標(biāo)從“選項(xiàng)板”窗格移動(dòng)到“設(shè)計(jì)視圖”畫布時(shí),您會(huì)注意到,在“設(shè)計(jì)視圖”畫布中,插入點(diǎn)是用垂直線顯示的。請記住此插入點(diǎn),因?yàn)樗鼘Q定標(biāo)記代碼在 JSP 中的初始位置。
JSP 設(shè)計(jì)器是為開發(fā)人員設(shè)計(jì)的,開發(fā)人員需要快速匯編基于 NetUI、NetUI 數(shù)據(jù)綁定和 NetUI 模板標(biāo)記的 JSP 頁。作為一個(gè)開發(fā)人員,您可以創(chuàng)建這些頁的初稿,并決定表單操作和其他上下文以將簡單或復(fù)雜的數(shù)據(jù)顯示給用戶。在 JSP 設(shè)計(jì)器中,可以利用“放置向?qū)А焙停ㄔ创a視圖中的)其他代碼完成工具以協(xié)助開發(fā)工作。JSP 設(shè)計(jì)視圖并不是設(shè)計(jì)用作完全的 JSP 圖形編輯器,您可以切換到源代碼視圖以輸入文本,或者使用您喜歡的 JSP 編輯產(chǎn)品來完成頁,為顯示添加更多潤色。
本主題描述“NetUI”庫和“NetUI 模板”庫中的各種元素。這些庫包含用于設(shè)計(jì)用戶界面(如標(biāo)簽、單選按鈕和鏈接)的典型組件。這些庫中的許多組件,尤其是表單組件,允許您為用戶提供數(shù)據(jù)或從用戶引出數(shù)據(jù)。
此外,“NetUI 數(shù)據(jù)綁定”庫包含用于向用戶顯示復(fù)雜數(shù)據(jù)的專用組件。NetUI 數(shù)據(jù)綁定標(biāo)記另行在 JSP 中顯示復(fù)雜數(shù)據(jù)集中討論。
注意:“選項(xiàng)板”窗口還提供一個(gè)稱為“HTML”的標(biāo)記庫,該庫包含幾種標(biāo)準(zhǔn) HTML 標(biāo)記。這些 HTML 標(biāo)記不具有可以與頁面流運(yùn)行時(shí)進(jìn)行交互的特殊特性。
NetUI 標(biāo)記
“選項(xiàng)板”窗口中的 NetUI 組件存儲(chǔ)在 netui-tag-html.tld 庫中,此庫是默認(rèn)導(dǎo)入 JSP 的:
<%@ taglib uri="netui-tags-html.tld" prefix="netui"%>
將 NetUI 組件添加到 JSP 時(shí),您會(huì)注意到組件名稱的前綴為“netui”,例如:
<netui:button value="Start" action="letsGo" type="submit"/>
下表總結(jié)了 NetUI 標(biāo)記的常見用途。有關(guān)標(biāo)記及其特性的詳細(xì)描述,請參閱 JSP 標(biāo)記引用,也可以在源代碼視圖中將光標(biāo)置于標(biāo)記內(nèi)部并按 F1 鍵:
標(biāo)記的典型用途 | 標(biāo)記名 | 概要 |
導(dǎo)航 | anchor | 生成指向特定 URI 的 URL 編碼超鏈接。 |
imageAnchor | 生成一個(gè)用 URL 編碼的超鏈接,鏈接到指定 URI,此 URI 有一個(gè)作為正文包含進(jìn)來的圖像。 | |
button | 生成名稱是只讀的按鈕,通常用于重置或提交表單,或觸發(fā)特定操作(如“signing out”)。 | |
imageButton | 生成一個(gè)作為按鈕的圖像,包括圖像的 URL 和(可選)懸停圖像,通常用于提交表單。 | |
讀/寫數(shù)據(jù)(使用 dataSource、defaultValue 特性) | form | 代表一個(gè)與表單 Bean 關(guān)聯(lián)的輸入表單,此表單 Bean 的屬性與表單的各個(gè)字段相對應(yīng)。 |
checkBox | 生成一個(gè)綁定到表單 Bean 屬性的復(fù)選框。 | |
checkBoxGroup | 對 CheckBoxOption 集合進(jìn)行歸組,并處理其值的數(shù)據(jù)綁定。有關(guān)示例,請參閱頁面流詳細(xì)示例。 | |
checkBoxOption | 一個(gè)復(fù)選框,其狀態(tài)由包含它的 checkBoxGroup 確定。 | |
hidden | 生成隱藏表單字段。 | |
radioButtonGroup | 對 RadioButtonOption 集合進(jìn)行歸組,并處理其值的數(shù)據(jù)綁定。有關(guān)示例,請參閱頁面流詳細(xì)示例。 | |
radioButtonOption | 單選按鈕,狀態(tài)由包含它的 RadioButtonGroup 確定。 | |
select | 渲染下拉列表。有關(guān)示例,請參閱頁面流詳細(xì)示例。 | |
selectOption | 選項(xiàng),狀態(tài)由包含它的 select 組件確定。 | |
textArea | 渲染數(shù)據(jù)綁定的 TextArea。 | |
textBox | 渲染數(shù)據(jù)綁定的 TextBox。 | |
錯(cuò)誤報(bào)告 | bindingUpdateErrors | 開發(fā)時(shí)幫助標(biāo)記,顯示發(fā)送表單時(shí)發(fā)生的數(shù)據(jù)綁定更新錯(cuò)誤的相關(guān)消息。這些消息顯示在命令窗口中。默認(rèn)情況下,此標(biāo)記在服務(wù)器以生產(chǎn)模式運(yùn)行時(shí)是禁用的。 |
error | 使用給定錯(cuò)誤鍵值渲染單個(gè)錯(cuò)誤消息。有關(guān)詳細(xì)信息,請參閱驗(yàn)證用戶輸入。 | |
errors | 渲染發(fā)現(xiàn)的錯(cuò)誤消息集。有關(guān)詳細(xì)信息,請參閱驗(yàn)證用戶輸入。 | |
exceptions | 渲染已格式化的異常消息。 | |
參數(shù) | parameter | 將 URL 參數(shù)寫入其父標(biāo)記中的 URL。有關(guān)示例,請參閱在頁面流中使用數(shù)據(jù)綁定中的 url 數(shù)據(jù)綁定上下文。 |
parameterMap | 將 URL 參數(shù)映射中的每個(gè)參數(shù)寫入其父標(biāo)記中的 URL。 | |
其他 | base | 提供此頁中每個(gè) URL 的基。 |
content | 顯示只讀的標(biāo)準(zhǔn)或動(dòng)態(tài)生成的文本。 | |
image | 生成圖像。 | |
label | 根據(jù)數(shù)據(jù)綁定表達(dá)式或字面值生成樣式化的只讀文本。 | |
node | 實(shí)例化 TreeNode 對象,該對象將要添加到父標(biāo)記(樹或其它節(jié)點(diǎn))中。 | |
tree | 渲染一個(gè)由 TreeNode 對象集代表的樹控件。 |
Netui 模板標(biāo)記
“選項(xiàng)板”窗口中的 NetUI 模板組件存儲(chǔ)在 netui-tag-template.tld 庫中,此庫是默認(rèn)導(dǎo)入 JSP 的:
<%@ taglib uri="netui-tags-template.tld" prefix="netui-template"%>
將 NetUI 模板組件添加到 JSP 時(shí),您會(huì)注意到組件名稱的前綴為“netui-template”,例如:
<netui-template:visible visible="true">Is Visible</netui-template:visible>
此庫中的標(biāo)記通常用于定義地點(diǎn)模板。模板頁是一個(gè) JSP 頁,用于定義一組頁的總體外觀及感覺。這是通過提供總體布局結(jié)構(gòu)、樣式和頁面設(shè)計(jì),并定義內(nèi)容占位符完成的。這些占位符稱為部分。內(nèi)容頁是一個(gè)包含內(nèi)容的 JSP 頁。內(nèi)容頁提供插入模板內(nèi)容的各個(gè)部分。將內(nèi)容頁和模板頁進(jìn)行組合,可以創(chuàng)建內(nèi)容的總體外觀及感覺。模板的一大優(yōu)勢在于可以更改一組頁的外觀及感覺,而不必強(qiáng)制修改每個(gè)頁。
NetUI 模板庫定義了兩類標(biāo)記集。第一類用于在 JSP 模板頁中定義占位符(這是內(nèi)容頁提供內(nèi)容的地方)。第二類標(biāo)記集用于內(nèi)容頁內(nèi)部,可以指示要使用的模板和定義將要在模板內(nèi)顯示的內(nèi)容。
下表總結(jié)了 NetUI 模板標(biāo)記的常見用途。有關(guān)標(biāo)記及其特性的詳細(xì)描述,請參閱 JSP 標(biāo)記引用,也可以在源代碼視圖中將光標(biāo)置于標(biāo)記內(nèi)部并按 F1 鍵:
標(biāo)記集 | 標(biāo)記名 | 概要 |
模板頁 | attribute | 定義模板文件中的特性。與內(nèi)容 JSP 中的 setAttribute 聯(lián)合使用。 |
includeSection | 定義模板文件中的一個(gè)部分,使用 section 標(biāo)記,內(nèi)容 JSP 可以進(jìn)一步填充此部分。 | |
內(nèi)容頁 | setAttribute | 設(shè)置在模板文件中聲明的特性的值。 |
section | 引用 includeSection 并定義要包括的內(nèi)容。 | |
template | 指定要使用的模板。 | |
二者之一 | visibility | 使一個(gè)部分可見或不可見。 |
要查看使用模板標(biāo)記的樣例應(yīng)用程序,請轉(zhuǎn)至下列頁面流并檢查 JSP 文件:
<WEBLOGIC_HOME>\samples\workshop\SamplesApp\WebApp\simpleflow
另請參閱 template.jsp 和 header.jsp 文件,它們位于:
<WEBLOGIC_HOME>\samples\workshop\SamplesApp\WebApp\resources\jsp