JSF 表單組合框示例
2018-02-20 13:43 更新
JSF教程 - JSF表單組合框示例
以下部分顯示如何從JSF創(chuàng)建HTML組合框。
h:selectOneMenu標(biāo)簽渲染一個(gè)HTML輸入元素類型“select"，大小未指定。
以下JSF標(biāo)記
<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>
標(biāo)簽屬性
| 屬性 | 描述 |
|---|---|
| id | 標(biāo)簽的表識(shí) |
| binding | 引用在backing bean中使用的組件 |
| rendered | 布爾值; false將抑制渲染 |
| styleClass | 級(jí)聯(lián)樣式表(CSS)類名稱 |
| value | 值綁定 |
| valueChangeListener | 響應(yīng)值更改的方法綁定 |
| converter | 轉(zhuǎn)換器類名 |
| validator | 附加到組件的驗(yàn)證器的類名 |
| required | 布爾值; 如果為true，則根據(jù)需要標(biāo)記標(biāo)簽 |
| accesskey | 給予一個(gè)元素的焦點(diǎn) |
| accept | 表單的內(nèi)容類型的逗號(hào)分隔列表 |
| accept-charset | 表單的字符編碼的逗號(hào)或空格分隔列表。 |
| alt | 非文字元素(例如圖片)的替代文字 |
| border | 元素的邊框?qū)挾鹊南袼刂?/td> |
| charset | 鏈接資源的字符編碼 |
| coords | 形狀為矩形，圓形或多邊形的元素的坐標(biāo) |
| dir | 文本的方向。 有效值為 ltr (從左到右)和 rtl (從右到左)。 |
| disabled | 輸入元素或按鈕的禁用狀態(tài) |
| hreflang | 使用 href 屬性指定的資源的基本語言; |
| lang | 元素的屬性和文本的基本語言 |
| maxlength | 文本字段的最大字符數(shù) |
| readonly | 輸入字段的只讀狀態(tài) |
| style | 內(nèi)聯(lián)樣式信息 |
| tabindex | 指定制表符索引的數(shù)值 |
| target | 打開文檔的框架的名稱 |
| title | 用于輔助功能的標(biāo)題。 瀏覽器通常為標(biāo)題的值創(chuàng)建工具提示 |
| type | 鏈接類型; 例如樣式表 |
| width | 元素的寬度 |
| onblur | 失去焦點(diǎn)的事件處理程序 |
| onchange | 值更改的事件處理程序 |
| onclick | 鼠標(biāo)按鈕的事件處理程序點(diǎn)擊該元素 |
| ondblclick | 雙擊鼠標(biāo)按鈕的事件處理程序 |
| onfocus | 元素接收焦點(diǎn)的事件處理程序 |
| onkeydown | 按鍵的事件處理程序 |
| onkeypress | 鍵按下并釋放的事件處理程序 |
| onkeyup | Key的事件處理程序發(fā)布 |
| onmousedown | 鼠標(biāo)按鈕的事件處理程序 |
| onmousemove | 鼠標(biāo)移動(dòng)的事件處理程序 |
| onmouseout | 鼠標(biāo)左的事件處理程序 |
| onmouseover | 鼠標(biāo)移動(dòng)到的事件處理程序 |
| onmouseup | 釋放鼠標(biāo)按鈕的事件處理程序 |
| onreset | 表單重置的事件處理程序 |
| onselect | 選擇文本的事件處理程序 |
| immediate | 在生命周期的早期進(jìn)行過程驗(yàn)證 |
硬編碼組合框
以下代碼來自demo.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 cn.w3cschool.common;
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;
}
}
下載 Form_ComboBox_Hardcode.zip
映射生成的組合框
下面的代碼來自UserBean.java。
package cn.w3cschool.common;
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;
}
}
以下代碼來自demo.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>
下載 Form_ComboBox_Generated_By_Map.zip
ComboBox內(nèi)部項(xiàng)目
以下代碼來自demo.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 cn.w3cschool.common;
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;
}
}
下載 Form_ComboBox_Innter_Item.zip運(yùn)行
將生成的WAR文件從目標(biāo)文件夾復(fù)制到Tomcat部署文件夾，并運(yùn)行Tomcat-Install-folder/bin/startup.bat。
Tomcat完成啟動(dòng)后，在瀏覽器地址欄中鍵入以下URL。
http://localhost:8080/simple-webapp/demo.xhtml
以上內(nèi)容是否對您有幫助：
更多建議：