From Gossip@caterpillar

JSF Gossip: 選擇類標籤（二）

 

 


選擇類標籤可以搭配<f:selectItem>或<f:selectItems>標籤來設定選項，例如：
 <f:selectItem itemLabel="高中"
               itemValue="高中"
               itemDescription="學歷"
               itemDisabled="true"/>
 

itemLabel屬性設定顯示在網頁上的文字，itemValue設定發送至伺服端時的值，itemDescription 設定文字描述，它只作用於一些工具程式，對HTML沒有什麼影響，itemDisabled設定是否選項是否作用，這些屬性也都可以使用JSF Expression Language來綁定至一個值。

<f:selectItem>也可以使用value來綁定一個傳回javax.faces.model.SelectItem的方法，例如：
 <f:selectItem value="#{user.sex}"/>
 

則綁定的Bean上必須提供下面這個方法：
 ....
     public SelectItem getSex()  {
        return new SelectItem("男");
     }
 ....
 

如果要一次提供多個選項，則可以使用<f:selectItems>，它的value綁定至一個提供傳回SelectItem?的陣列、集合，或者是Map物件的方法，例如：
 <h:selectOneRadio value="#{user.education}">
     <f:selectItems value="#{user.educationItems}"/>
 </h:selectOneRadio><p>
 

這個例子中<f:selectItems>的value綁定至user.educationItems，其內容如下：
 ....
     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，例如：
 <h:selectManyCheckbox layout="pageDirection"
                       value="#{user.preferColors}">
    <f:selectItems value="#{user.preferColorItems}"/>
 </h:selectManyCheckbox><p> 
 

您要提供下面的程式來搭配上面這個例子：
 ....
    private Map preferColorItems;
   
    public Map getPreferColorItems() {
        if(preferColorItems == null) {
            preferColorItems = new HashMap();
            preferColorItems.put("紅", "Red");
            preferColorItems.put("黃", "Yellow");
            preferColorItems.put("藍", "Blue");
        }
       
        return preferColorItems;
    }
 ....