JSF标签
一、简介JSF标准标签
JSF提供了標準的HTML Renderer Kit,可以讓您搭配JSF元件輸出HTML文件,標準的HTML Renderer Kit主要包括了幾個類別:?輸出(Outputs)
其名稱以output作為開頭,作用為輸出指定的訊息或綁定值。
?輸入(Inputs)
其名稱以input作為開頭,其作用為提供使用者輸入欄位。
?命令(Commands)
其名稱以command作為開頭,其作用為提供命令或連結按鈕。
?選擇(Selections)
其名稱以select作為開頭,其作用為提供使用者選項的選取。
?其它
包括了form、message、messages、graphicImage等等未分類的標籤。
JSF標準HTML標籤包括了幾個共通的屬性,整理如下:
除了共通的屬性之外,您還可以在某些元件上設定標籤HTML 4.01的屬性,像是size、alt、width等屬性,或者是設定DHTML事件屬性,例如onchange、onclick等等。
除了JSF的標準HTML標籤之外,您還需要一些標準核心標籤,這些標籤是獨立於Renderer Kit的,JSF並不限制在HTML輸出
表示層,核心標籤可以搭配其它的Renderer Kit來使用。
詳細的HTML標籤或核心標籤的使用與屬性說明可以查詢Tag Library Documentation文件。
二、输出类标签
輸出類的標籤包括了outputLabel、outputLink、outputFormat與outputText,分別舉例說明如下:
outputLabel
產生
這會產生像是以下的標籤:
outputLink
產生 HTML標籤,例如:
value所指定的內容也可以是JSF EL綁定。
outputFormat
產生指定的文字訊息,可以搭配
如果您的messages.properties包括以下的內容:
welcomeText={0}, Your name is {1}.
則{0}與{1}會被取代為
Hello, Your name is Guest.
另一個使用的方法則是:
outputText
簡單的顯示指定的值或綁定的訊息,例如:
三、输入类标签
輸入類標籤包括了inputText、inputTextarea、inputSecret、inputHidden,分別舉例說明如下:
inputText
顯示單行輸入欄位,即輸出 HTML標籤,其type屬性設定為text,例如:
inputTextarea
顯示多行輸入文字區域,即輸出
inputSecret
顯示密碼輸入欄位,即輸出 HTML標籤,其type屬性設定為password,例如:
您可以設定redisplay屬性以決定是否要顯示密碼欄位的值,預設是false。
inputHidden
隱藏欄位,即輸出 HTML標籤,其type屬性設定為hidden,隱藏欄位的值用於保留一些訊息於客戶端,以在下一次發送表單時一併送出,例如:
四、命令类标签
命令類標籤包括commandButton與commandLink,其主要作用在於提供一個命令按鈕或連結,以下舉例說明:
commandButton
顯示一個命令按鈕,即輸出 HTML標籤,其type屬性可以設定為button、submit或reset,預設是submit,按下按鈕會觸發javax.faces.event.ActionEvent,使用例子如下:
您可以設定image屬性,指定圖片的URL,設定了image屬性的話,標籤的type屬性會被設定為image,例如:
image="images/logowiki.jpg" action="#{user.verify}"/> commandLink 五、选择类标签(一) 選擇類的標籤可略分為單選標籤與多選標籤,依外型的不同可以分為單選鈕(Radio)、核取方塊(CheckBox)、列示方塊(ListBox)與選單(Menu),以下分別先作簡單的說明。 在視圖上呈現一個核取方塊,例如: 我同意 value所綁定的屬性必須接受與傳回boolean型態。這個元件在網頁上呈現的外觀如下: ? 這三個標籤的作用,是讓使用者從其所提供的選項中選擇一個項目,所不同的就是其外觀上的差別,例如: value所綁定的屬性可以接受字串以外的型態或是自訂型態,但記得如果是必須轉換的型態或自訂型態,必須搭配標準轉換器或自訂轉換器來轉換為物件, 您也可以設定layout屬性,可設定的屬性是lineDirection、pageDirection,預設是lineDirection,也就是由左到右來排列選項,如果設定為pageDirection,則是由上至下排列選項,例如設定為: value="#{https://www.wendangku.net/doc/2811707832.html,cation}"> 則外觀如下: ? 這三個標籤提供使用者複選項目的功能,一個 value="#{user.preferColors}"> value所綁定的屬性必須是陣列或集合(Collection)物件,在這個例子中所使用的是boolean陣列,例如: package onlyfun.caterpillar; public class UserBean { private boolean[] preferColors; public boolean[] getPreferColors() { return preferColors; } public void setPreferColors(boolean[] preferColors) { this.preferColors = preferColors; } ...... } 如果是其它型態的物件,必要時必須搭配轉換器(Converter)進行字串與物件之間的轉換。 下圖是 在Internet Explorer則是這樣的: 六、选择类标签(二) 選擇類標籤可以搭配 itemValue="高中" itemDescription="學歷" itemDisabled="true"/> itemLabel屬性設定顯示在網頁上的文字,itemValue設定發送至伺服端時的值,itemDescription 設定文字描述,它只作用於一些工具程式,對HTML沒有什麼影響,itemDisabled設定是否選項是否作用,這些屬性也都可以使用JSF Expression Language來綁定至一個值。 則綁定的Bean上必須提供下面這個方法: .... public SelectItem getSex() { return new SelectItem("男"); } .... 如果要一次提供多個選項,則可以使用 這個例子中 .... private SelectItem[] educationItems; public SelectItem[] getEducationItems() { if(educationItems == null) { educationItems = new SelectItem[3]; educationItems[0] = new SelectItem("高中", "高中"); educationItems[1] = new SelectItem("大學", "大學"); educationItems[2] = new SelectItem("研究所以上", "研究所以上"); } return educationItems; } .... 在這個例子中,SelectItem的第一個建構參數用以設定value,而第二個參數用以設定label,SelectItem還提供有數個建構函式,記得可以參考一下線上API文件。 您也可以提供一個傳回Map物件的方法,Map的key-value會分別作為選項的label-value,例如: value="#{user.preferColors}"> 您要提供下面的程式來搭配上面這個例子: .... private Map preferColorItems; public Map getPreferColorItems() { if(preferColorItems == null) { preferColorItems = new HashMap(); preferColorItems.put("紅", "Red"); preferColorItems.put("黃", "Yellow"); preferColorItems.put("藍", "Blue"); } return preferColorItems; } .... 七、其他标签 這個標籤會繪製一個HTML 標籤,value可以指定路徑或圖片URL,路徑可以指定相對路徑或絕對路徑,例如: ? 這個標籤可以用來作簡單的元件排版,它會使用HTML表格標籤來繪製表格,並將元件置於其中,主要指定columns屬性,例如設定為2: 則自動將元件分作 2 個column來排列,排列出來的樣子如下: ? 這個元件用來將數個JSF元件包裝起來,使其看來像是一個元件,例如: 在 八、简单表格 很多資料經常使用表格來表現,JSF提供 UserBean.java TableBean.java 在TableBean中,我們假設getUserList()方法實際上是從資料庫中查詢出UserBean的內容,之後傳回List物件,若我們的faces-config.xml如下: faces-config.xml 我們可以如下使用 index.jsp 所產生的HTML表格標籤如下: ?陣列 ?java.util.List的實例 ?java.sql.ResultSet的實例 ?javax.servlet.jsp.jstl.sql.Result的實例 ?javax.faces.model.DataModel的實例 九、表头、表尾 所產生的表格如下所示: 另外,對於表頭、表尾仍至於每一行列,都可以分別設定CSS風格,例如下面這個styles.css摘錄自Core JSF一書: styles.css 可以在我們的頁面中如下加入: .... .... headerClass="ordersHeader" rowClasses="evenColumn,oddColumn"> 則顯示的表格結果如下: 十、tablemodel类别 在簡單的表格中曾經提過, ?陣列 ?java.util.List的實例 ?java.sql.ResultSet的實例 ?javax.servlet.jsp.jstl.sql.Result的實例 ?javax.faces.model.DataModel的實例 十一、 對於前四種型態,JSF實際上是以javax.faces.model.DataModel加以包裝,DataModel是個抽象類別,其子類別都是位於javax.faces.model這個package下: ?ArrayDataModel ?ListDataModel ?ResultDataModel ?ResultSetDataModel ?ScalarDataModel 如果您想要對表格資料有更多的控制,您可以直接使用DataModel來設定表格資料,呼叫DataModel的setWrappedObject()方法可以讓您設定對應型態的資料,呼叫getWrappedObject()則可以取回資料,例如: ?TableBean.java 在這個Bean中,我們直接設定DataModel?,將userList設定給它,如您所看到的,我們還可以取得DataModel?的各個變項,在這個例子中,select()將作為點選表格之後的事件處理方法,我們可以藉由DataModel?的getRowIndex ()來取得所點選的是哪一row 的資料,例如: index.jsp DataModel的rowIndex是從0開始計算,當處理ActionEvent時,JSF會逐次遞增rowIndex的值,這讓您可以得知目前正在處理的是哪一個row的資料,一個執行的圖示如下:caterpillar 123456 momor 654321 becky 7890