JSF html標籤

 

JSF html標籤

Jsf提供了一套標準的html標籤。可以讓您搭配JSF組件輸出HTML檔案，標準的HTML Renderer Kit主要包括了幾個類別：

• 輸出（Outputs） 其名稱以output作為開頭，作用為輸出指定的資訊或綁定值。

• 輸入（Inputs） 其名稱以input作為開頭，其作用為提供使用者輸入欄位。

• 命令（Commands） 其名稱以command作為開頭，其作用為提供命令或連結按鈕。

• 選擇（Selections） 其名稱以select作為開頭，其作用為提供使用者選項的選取。

• 表格 （Table） 與dataTable相關，用於產生表格

• 其它 包括了form、message、messages、graphicImage等等未分類的標籤。

 

屬性名稱	適用	說明
id	所有組件	可指定id名稱，以讓其它標籤或組件參考
binding	所有組件	綁定至UIComponent
rendered	所有組件	是否顯示組件
styleClass	所有組件	設定Cascading stylesheet (CSS)
value	輸入、輸出、命令組件	設定值或綁定至指定的值
valueChangeListener	輸入組件	設定值變事件處理者
converter	輸入、輸出組件	設定轉換器
validator	輸入組件	設定驗證器
required	輸入組件	是否驗證必要欄位
immediate	輸入、命令組件	是否為立即事件

 

 

輸出類的標籤包括了outputLabel、outputLink、outputFormat與 outputText

分別舉例說明如下：

• outputLabel

產生<label> HTML標籤，使用for屬性指定組件的client ID，例如：

 <h:inputText id="user" value="#{user.name}"/>
 <h:outputLabel for="user" value="#{user.name}"/>

 
這會產生像是以下的html：
 <input id="user" type="text" name="user" value="guest" />
 <label for="user">

 

• outputLink

產生<a> HTML標籤，例如：
 <h:outputLink value="../index.jsp"/>
 

value所指定的內容也可以是JSF EL綁定。

 

• outputFormat

產生指定的文字資訊，可以搭配<f:param>來設定資訊的參數以格式化文本資訊，例如：
 <f:loadBundle basename="messages" var="msgs"/>
 <h:outputFormat value="#{msgs.welcomeText}">
     <f:param value="Hello"/>
     <f:param value="Guest"/>
 </h:outputFormat>
 
如果您的messages.properties包括以下的內容：
 welcomeText={0}, Your name is {1}.
 
則{0}與{1}會被取代為<f:param>設定的文字，最後顯示的文字會是：
 Hello, Your name is Guest.
 
另一個使用的方法則是：
 <h:outputFormat value="{0}, Your name is {1}.">
     <f:param value="Hello"/>
     <f:param value="Guest"/>
 </h:outputFormat>

 

• outputText

簡單的顯示指定的值或綁定的資訊，例如：
 <h:outputText value="#{user.name}"/>

 

 

 

輸入類標籤包括了inputText、inputTextarea、inputSecret、 inputHidden

分別舉例說明如下：

• inputText

顯示單行輸入欄位，即輸出<input> HTML標籤，其type屬性設定為text，例如：

 <h:inputText value="#{user.name}"/>

 

• inputTextarea

顯示多行輸入文字地區，即輸出<textarea> HTML標籤，例如：

 <h:inputTextarea value="#{user.command}"/>

 

• inputSecret

顯示密碼輸入欄位，即輸出<input> HTML標籤，其type屬性設定為password，例如：
 <h:inputSecret value="#{user.password}"/>
 
您可以設定redisplay屬性以決定是否要顯示密碼欄位的值，預設是false。

 

• inputHidden

隱藏欄位，即輸出<input> HTML標籤，其type屬性設定為hidden，隱藏欄位的值用於保留一些資訊於用戶端，以在下一次發送表單時一併送出，例如：
 <h:inputHidden value="#{user.hiddenInfo}"/>

標籤	說明
view	建立頂層視圖
subview	建立視圖的子視圖
facet	向組件添加 facet
param	向組件添加參數
attribute	向組件添加屬性
actionListener	在父組件上註冊操作監聽器
valueChangeListener	向父組件註冊值變更監聽器
converter	註冊任意轉換器
convertDateTime	註冊日期時間轉換器
convertNumber	註冊數量轉換器
validateLength	驗證組件值的長度
validateDoubleRange	驗證組件值的雙精確度範圍
validateLongRange	驗證組件值的長整型範圍
validator	向組件添加驗證器
loadBundle	載入資源套件
verbatim	向頁面中添加標籤
selectItem	指定 UISelectOne 或 UISelectMany 組件的一個項目
selectItems	指定 UISelectOne 或 UISelectMany 組件的多重專案

組件	標籤	說明
UIForm	form	表示 HTML表單元素
UIInput	InputText	單行文本輸入控制項
	inputTextarea	多行文本輸入控制項
	InputSecret	密碼輸入控制項
	inputHidden	隱藏欄位
UIOutput	outputLabel	顯示文本
	outputLink	連結到另一頁面或某頁面上的特定位置
	outputFormat	顯示格式化的資訊
	outputText	當行文本輸入
UICommand	commandButton	表示一個按鈕
	commandLink	表示一個連結
UISelectOne	SelectOneListbox	單一選取項目清單方塊
	selectOneMenu	單選菜單
	selectOneRadio	選項按鈕集
UISelectBoolean	selectBooleanCheckbox	單個複選框
UISelectMany	selectManyListbox	複選框集
	selectManyCheckbox	多行挑選清單框
	selectManyMenu	多選菜單
UIPanel	panelGrid	表示一 個 HTML 表格
	panelGroup	組合一系列組件
UIMessage	message	顯示一個組件的最近使用的訊息
	messages	顯示所有訊息
UIGraphic	graphicImage	顯示一個映像
UIData	dataTable	功能豐富的表格控制項
UIColumn	column	表示表格中的列
表單	h:form	產生 HTML form 元素