JSF表單下拉式方塊 - tw511教學網

以下部分介紹如何從JSF建立HTML下拉式方塊。<h:selectOneMenu>標籤呈現大小未指定的「select」型別的HTML輸入元素。

以下JSF標籤 -

<h:selectOneMenu value="#{userData.data}">
   <f:selectItem itemValue="1" itemLabel="Item 1" />
   <f:selectItem itemValue="2" itemLabel="Item 2" />                   
</h:selectOneMenu>

被渲染成以下HTML程式碼 -

<select name="j_idt6:j_idt8">  
   <option value="1">Item 1</option>
   <option value="2">Item 2</option>
</select>

寫死下拉式方塊範例

以下是檔案：index.xhtml 中的程式碼 -

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"   
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core">
    <h:body>
      <h:form>
      Hard-coded with "f:selectItem" : 
       <h:selectOneMenu value="#{user.favItem}">
         <f:selectItem itemValue="A" itemLabel="Coffee A" />
         <f:selectItem itemValue="B" itemLabel="Coffee B" />
         <f:selectItem itemValue="C" itemLabel="Coffee C" />
       </h:selectOneMenu>

    <br /><br />

      <h:commandButton value="Submit" action="result" />
    <h:commandButton value="Reset" type="reset" />

      </h:form>

    </h:body>
</html>

以下是檔案：result.xhtml 中的程式碼 -

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"   
      xmlns:h="http://java.sun.com/jsf/html">
<h:body>
  <p>user.favItem : #{user.favItem}</p>
</h:body>
</html>

以下是檔案：UserBean.java 中的程式碼 -

package com.yiibai;

import java.io.Serializable;
import java.util.LinkedHashMap;
import java.util.Map;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

@ManagedBean(name="user")
@SessionScoped
public class UserBean implements Serializable{
  public String favItem = "Black";
  public String getFavItem() {
    return favItem;
  }

  public void setFavItem(String f) {
    this.favItem = f;
  }
}

由對映生成下拉式方塊範例

以下是檔案：UserBean.java 中的程式碼 -

package com.yiibai;

import java.io.Serializable;
import java.util.LinkedHashMap;
import java.util.Map;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

@ManagedBean(name="user")
@SessionScoped
public class UserBean implements Serializable{
  public String favItem;
  public String getFavItem() {
    return favItem;
  }

  public void setFavItem(String favItem) {
    this.favItem = favItem;
  }
  //Generated by Map
  private static Map<String,Object> value;
  static{
    value = new LinkedHashMap<String,Object>();
    value.put("Item A", "A"); //label, value
    value.put("Item B", "B");
    value.put("Item C", "C");
  }

  public Map<String,Object> getFavItemValue() {
    return value;
  }  
}

以下是檔案：index.xhtml 中的程式碼 -

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"   
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core">
    <h:body>
      <h:form>
      Generated by Map :
       <h:selectOneMenu value="#{user.favItem}">
         <f:selectItems value="#{user.favItemValue}" />
       </h:selectOneMenu>

    <br /><br />

      <h:commandButton value="Submit" action="result" />
    <h:commandButton value="Reset" type="reset" />

      </h:form>

    </h:body>
</html>

以下是檔案：result.xhtml 中的程式碼 -

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"   
      xmlns:h="http://java.sun.com/jsf/html">
<h:body>
  <p>User Selected : #{user.favItem}</p>
</h:body>
</html>

下拉式方塊內部項

以下是檔案：index.xhtml 中的程式碼 -

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"   
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core">
    <h:body>
      <h:form>
      Generated by Object array and iterate with var :
       <h:selectOneMenu value="#{user.favItem}">
         <f:selectItems value="#{user.itemValue}" var="c" itemLabel="#{c.itemLabel}" itemValue="#{c.itemValue}" />
       </h:selectOneMenu>
    <br /><br />
      <h:commandButton value="Submit" action="result" />
    <h:commandButton value="Reset" type="reset" />
      </h:form>
    </h:body>
</html>

以下是檔案：result.xhtml 中的程式碼 -

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"   
      xmlns:h="http://java.sun.com/jsf/html">
<h:body>
  <p>Selected: #{user.favItem}</p>
</h:body>
</html>

以下是檔案：UserBean.java 中的程式碼 -

package com.yiibai;

import java.io.Serializable;
import java.util.LinkedHashMap;
import java.util.Map;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

@ManagedBean(name="user")
@SessionScoped
public class UserBean implements Serializable{
  public String favItem;
  public String getFavItem() {
    return favItem;
  }
  public void setFavItem(String f) {
    this.favItem = f;
  }
  //Generated by Object array
  public static class Item{
    public String itemLabel;
    public String itemValue;

    public Item(String l, String v){
      this.itemLabel = l;
      this.itemValue = v;
    }
    public String getItemLabel(){
      return itemLabel;
    }
    public String getItemValue(){
      return itemValue;
    }
  }
  public Item[] itemList;
  public Item[] getItemValue() {
    itemList = new Item[3];
    itemList[0] = new Item("Item A", "A");
    itemList[1] = new Item("Item B", "B");
    itemList[2] = new Item("Item C", "C");
    return itemList;
  }  
}