表单控件组合框是一种特殊的表单控件,它可以将多个表单控件组合在一起,形成一个完整的表单。它可以用来显示多个选项,并允许用户选择其中的一个或多个选项。
表单控件组合框有很多不同的形式,如下拉列表、复选框、单选框和列表框。这些形式都有自己的优势和特性,可以根据不同的应用场景来使用。
例如,如果要显示一系列国家/地区,可以使用下拉列表来显示所有国家/地区;如果要让用户选择多个语言,可以使用复选框来显示所有语言;如果要让用户选择一门语言,可以使用单选框来显示所有语言。
// 例子1: 使用下拉列表显示国家/地区 <select name="country"> <option value="CN">中国</option> <option value="US">美国</option> <option value="UK">英国</option> <option value="JP">日本</option> <option value="DE">德国</option> <option value="FR">JSF 表单组合框示例
JSF教程 - JSF表单组合框示例
以下部分显示如何从JSF创建HTML组合框。
h:selectOneMenu标签渲染一个HTML输入元素类型“select",大小未指定。
以下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>标签属性
属性 描述 id 标签的表识 binding 引用在backing bean中使用的组件 rendered 布尔值; false将抑制渲染 styleClass 级联样式表(CSS)类名称 value 值绑定 valueChangeListener 响应值更改的方法绑定 converter 转换器类名 validator 附加到组件的验证器的类名 required 布尔值; 如果为true,则根据需要标记标签 accesskey 给予一个元素的焦点 accept 表单的内容类型的逗号分隔列表 accept-charset 表单的字符编码的逗号或空格分隔列表。 alt 非文字元素(例如图片)的替代文字 border 元素的边框宽度的像素值 charset 链接资源的字符编码 coords 形状为矩形,圆形或多边形的元素的坐标 dir 文本的方向。 有效值为 ltr (从左到右)和 rtl (从右到左)。 disabled 输入元素或按钮的禁用状态 hreflang 使用 href 属性指定的资源的基本语言; lang 元素的属性和文本的基本语言 maxlength 文本字段的最大字符数 readonly 输入字段的只读状态 style 内联样式信息 tabindex 指定制表符索引的数值 target 打开文档的框架的名称 title 用于辅助功能的标题。 浏览器通常为标题的值创建工具提示 type 链接类型; 例如样式表 width 元素的宽度 onblur 失去焦点的事件处理程序 onchange 值更改的事件处理程序 onclick 鼠标按钮的事件处理程序点击该元素 ondblclick 双击鼠标按钮的事件处理程序 onfocus 元素接收焦点的事件处理程序 onkeydown 按键的事件处理程序 onkeypress 键按下并释放的事件处理程序 onkeyup Key的事件处理程序发布 onmousedown 鼠标按钮的事件处理程序 onmousemove 鼠标移动的事件处理程序 onmouseout 鼠标左的事件处理程序 onmouseover 鼠标移动到的事件处理程序 onmouseup 释放鼠标按钮的事件处理程序 onreset 表单重置的事件处理程序 onselect 选择文本的事件处理程序 immediate 在生命周期的早期进行过程验证 硬编码组合框
以下代码来自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..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..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.zipComboBox内部项目
以下代码来自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..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运行
将生成的WAR文件从目标文件夹复制到Tomcat部署文件夹,并运行Tomcat-Install-folder/bin/startup.bat。
Tomcat完成启动后,在浏览器地址栏中键入以下URL。
http://localhost:8080/simple-webapp/demo.xhtml
JSF教程 -JSF命令链接h:commandLink标签渲染一个HTML“anchor元素。以下JSF标记h:commandLink value=Page 1 action=page1 /被渲...
JSF教程 -JSF验证Int范围示例f:validateLongRange标记用于验证特定范围内的长整型值。以下代码显示如何使用f:validateLongRange...