JSF selectManyListBox示例教程
时间：2020-02-23 14:33:45 来源:igfitidea点击:
JSF允许用户借助<h：selectManyListBox>标记为单个字段选择多个值，该标记对应于标准HTML中的select标记。
以下属性通常与selectManyListBox一起使用；
id：标识组件的唯一标识符。
accept：以逗号分隔的内容类型列表。
dir：指示文本的方向。
值是ltr(从左到右)和rtl(从右到左)。
Disabled：按钮或者元素的禁用状态。
hreflang：使用href属性指定的资源的语言。
rev：使用href属性指定的锚点的反向链接。
目标：要其中打开文档的框架的名称。
type：指定链接的类型。
onselect：在输入字段中选择的文本。
形状：圆形，正方形等区域的形状
让我们看一个通过在selectItem标记中插入多个值来为单个字段选择多个值的示例。
如下创建JSF页面" mobileselect.xhtml"。
mobileselect.xhtml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml"
xmlns:f="https://java.sun.com/jsf/core"
xmlns:h="https://java.sun.com/jsf/html">
<h:body>
<h:form>
<h:outputLabel>MobileNames:</h:outputLabel>
<h:selectManyListbox value="#{mobile.mobname}">
<f:selectItem itemValue="Nokia" itemLabel="Nokia"
<f:selectItem itemValue="Samsung" itemLabel="Samsung"
<f:selectItem itemValue="Blackberry" itemLabel="Blackberry"
<f:selectItem itemValue="Sony" itemLabel="Sony"
<f:selectItem itemValue="Mi3" itemLabel="Mi3"
</h:selectManyListbox>
<br
<br
<h:commandButton value="Submit" action="details"
<h:commandButton value="Reset" type="reset"></h:commandButton>
</h:form>
</h:body>
</html>
其中我们通过itemValue和itemLabel通过selectItem标记为列表框插入多个值，并通过调用bean mobile.mobname设置当前选定的值，其中mobname是字符串数据类型的数组，用于保存多个值。
创建details.xhtml页面以显示所选值；
details.xhtml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml"
xmlns:h="https://java.sun.com/jsf/html"
xmlns:ui="https://java.sun.com/jsf/facelets">
<head>
<title>Selected Values</title>
</head>
<h:body>
Selected values are
<hr
<ui:repeat value="#{mobile.mobname}" var="mob">
#{mob}
<br
</ui:repeat>
</h:body>
</html>
<ui：repeat>标记用于遍历数组并打印多个值(如果用户选择了这些值)。
在getter和setter方法的帮助下，创建用于处理数组的" Mobile.java" bean来设置和检索值。
package com.theitroad.jsf.beans;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
@ManagedBean(name = "mobile", eager = true)
@SessionScoped
public class Mobile {
public String[] mobname;
public String[] getMobname() {
return mobname;
}
public void setMobname(String[] mobname) {
this.mobname = mobname;
}
}
现在运行显示以下输出的应用程序。
现在，让我们看看如何通过调用构造函数来填充列表框的值并将其显示在JSF页面中，从而从Bean中填充多个值。
创建beanMobileObject.java作为
package com.theitroad.jsf.beans;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
@ManagedBean(name = "mo1")
@SessionScoped
public class MobileObject {
private String mlabel;
private String mvalue;
private String[] mob;
public MobileObject() {
}
public MobileObject(String mlabel, String mvalue) {
this.mlabel = mlabel;
this.mvalue = mvalue;
}
public String getMlabel() {
return mlabel;
}
public void setMlabel(String mlabel) {
this.mlabel = mlabel;
}
public String getMvalue() {
return mvalue;
}
public void setMvalue(String mvalue) {
this.mvalue = mvalue;
}
public String[] getMob() {
return mob;
}
public void setMob(String[] mob) {
this.mob = mob;
}
public MobileObject[] m1;
public MobileObject[] getM1() {
return m1;
}
public void setM1(MobileObject[] m1) {
this.m1 = m1;
}
public MobileObject[] getMobValue() {
m1 = new MobileObject[4];
m1[0] = new MobileObject("SonyErricson", "SonyErricson");
m1[1] = new MobileObject("NokiaN72", "NokiaN72");
m1[2] = new MobileObject("Xperia", "Xperia");
m1[3] = new MobileObject("MicromaxCanvas", "MicromaxCanvas");
return m1;
}
}
其中我们通过将值传递给它来调用mobileObject类的参数化构造函数。
创建JSF页面mobobject.xhtml为；
mobobject.xhtml
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml"
xmlns:h="https://java.sun.com/jsf/html"
xmlns:c="https://java.sun.com/jsf/core">
<h:head>
<title>Facelet Title</title>
</h:head>
<h:body>
<h:form>
<h:outputLabel>Mobile Names:</h:outputLabel>
<h:selectManyListbox value="#{mo1.mob}">
<c:selectItems value="#{mo1.mobValue}" var="m1"
itemLabel="#{m1.mlabel}" itemValue="#{m1.mvalue}"
</h:selectManyListbox>
<br
<br
<h:commandButton value="Submit" action="det"></h:commandButton>
<h:commandButton value="Reset" type="reset"></h:commandButton>
</h:form>
</h:body>
</html>
在JSF页面中，我们使用mobValue变量，该变量从MobileObject类中获取值并在列表框中填充数据。
变量mlabel和mvalue用于获取标签和值。
创建JSF页面det.xhtml为；
det.xhtml
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml"
xmlns:h="https://xmlns.jcp.org/jsf/html"
xmlns:ui="https://java.sun.com/jsf/facelets">
<h:head>
<title>Facelet Title</title>
</h:head>
<h:body>
<ui:repeat value="#{mo1.mob}" var="mob">
#{mob}
<br
</ui:repeat>
<br
</h:body>
</html>
<ui：repeat>标记用于遍历对象并获取多个值。
现在运行产生以下输出的应用程序。
现在让我们看一下如何从将数据插入到映射中的bean填充数据。
创建bean" MobileMap.java"为；
package com.theitroad.jsf.beans;
import java.util.LinkedHashMap;
import java.util.Map;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
@ManagedBean(name = "mobilemap")
@SessionScoped
public class MobileMap {
private String[] mname;
public String[] getMname() {
return mname;
}
public void setMname(String[] mname) {
this.mname = mname;
}
private static Map<String, Object> mobnames;
static {
mobnames = new LinkedHashMap<String, Object>();
mobnames.put("MotoE", "MotoE"); //label, value
mobnames.put("GalaxyNote", "GalaxyNote");
mobnames.put("AppleIPhone", "AppleIPhone");
}
public Map<String, Object> getMobnames() {
return mobnames;
}
public static void setMobnames(Map<String, Object> mobnames) {
MobileMap.mobnames = mobnames;
}
}
其中我们声明一个具有String和Object数据类型的LinkedHashMap，并使用地图的put方法并插入数据，并且在那里使用getter setters方法设置和检索值。
创建JSF页面mobmap.xhtml为；
mobmap.xhtml
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml"
xmlns:h="https://java.sun.com/jsf/html"
xmlns:c="https://java.sun.com/jsf/core">
<h:head>
<title>Facelet Title</title>
</h:head>
<h:body>
<h:form>
<h:outputLabel>Mobile Names:</h:outputLabel>
<h:selectManyListbox value="#{mobilemap.mname}">
<c:selectItems value="#{mobilemap.mobnames}"
</h:selectManyListbox>
<br
<br
<h:commandButton value="Submit" action="mapdet"></h:commandButton>
<h:commandButton value="Reset" type="reset"></h:commandButton>
</h:form>
</h:body>
</html>
我们使用映射Mobnames将值检索到jsf页面中的列表框。
创建mapdet.xhtml视图页面，以显示用户选择的值。
mapdet.xhtml
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml"
xmlns:h="https://xmlns.jcp.org/jsf/html"
xmlns:ui="https://xmlns.jcp.org/jsf/facelets">
<h:head>
<title>Facelet Title</title>
</h:head>
<h:body>
<h3>Selected values are</h3>
<ui:repeat value="#{mobilemap.mname}" var="m1">
#{m1}
<br
</ui:repeat>
</h:body>
</html>
