jsf入门实例_JSF selectManyListBox示例教程

jsf入门实例

JSF allows users to select multiple values for a single field with the help of <h:selectManyListBox> tag which corresponds to select tag in standard HTML.

JSF允许用户借助<h：selectManyListBox>标记为单个字段选择多个值，该标记对应于标准HTML中的select标记。

The following attributes are commonly used with selectManyListBox;

以下属性通常与selectManyListBox一起使用；

id: unique identifier to identify the component.

id ：用于标识组件的唯一标识符。

accept: comma separated list of content types for the form.

accept ：用逗号分隔的表单内容类型列表。

dir: indicates the direction for the text. Values for this are ltr(left to right) and rtl(right to left).

dir ：指示文本的方向。值是ltr（从左到右）和rtl（从右到左）。

disabled: disabled state for the button or an element.

Disabled ：按钮或元素的禁用状态。

hreflang: language of the resource specified with the href attribute.

hreflang ：使用href属性指定的资源的语言。

rev: reverse link from the anchor specified with the href attribute.

rev ：使用href属性指定的锚点的反向链接。

target: name of the frame to be in which the document is opened.

target ：将在其中打开文档的框架的名称。

type: type of the link specified.

type ：指定链接的类型。

onselect: text selected in an input field.

onselect ：在输入字段中选择的文本。

shape: shape of the region like circle, square etc.

形状：圆形，正方形等区域的形状

Let’s look into an example of selecting multiple values for a single field by inserting multiple values in the selectItem tag.

让我们看一个通过在selectItem标记中插入多个值来为单个字段选择多个值的示例。

Create the JSF page mobileselect.xhtml as below.

如下创建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>

Here we insert multiple values for a listbox through selectItem tag by itemValue and itemLabel and set the current selected value by invoking bean mobile.mobname where mobname is an array of string data type to hold the multiple values.

在这里，我们通过itemValue和itemLabel的selectItem标签为列表框插入多个值，并通过调用bean mobile.mobname设置当前选定的值，其中mobname是字符串数据类型的数组，用于保存多个值。

Create the details.xhtml page to display the selected values;

创建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>

The <ui:repeat> tag is used to iterate over the array and print the multiple values if selected by the user.

<ui：repeat>标签用于遍历数组并打印多个值（如果用户选择了这些值）。

Create the Mobile.java bean that handles the array to set and retrieve the values by the help of getter and setter methods.

创建一个用于处理数组的Mobile.java Bean，以使用getter和setter方法来设置和检索值。

package com.journaldev.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;}}

Now run the application which displays the following output shown below.

现在运行显示以下输出的应用程序。

Lets now see how to populate the multiple values from the bean by invoking the constructor to populate values for the listbox and display them in the JSF page.

现在，让我们看看如何通过调用构造函数来填充列表框的值并将其显示在JSF页面中，从而从Bean中填充多个值。

Create the bean MobileObject.java as

创建bean MobileObject.java为

package com.journaldev.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;}}

Here we invoke the parameterized constructor of the mobileObject class by passing the values to it.

在这里，我们通过将值传递给它来调用mobileObject类的参数化构造函数。

Create the JSF page mobobject.xhtml as;

创建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>

In the JSF page we use the mobValue variable that fetches the values from the MobileObject class and populates the data in the Listbox. The variables mlabel and mvalue are used to fetch the label and values.

在JSF页面中，我们使用mobValue变量，该变量从MobileObject类中获取值，并在列表框中填充数据。变量mlabel和mvalue用于获取标签和值。

Create the JSF page det.xhtml as;

创建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>

The <ui:repeat> tag is used to iterate over the object and fetch multiple values.

<ui：repeat>标记用于遍历对象并获取多个值。

Now run the application that produces the following output.

现在运行产生以下输出的应用程序。

Lets now look how to populate the data from the bean where the data is inserted into the map.

现在让我们看一下如何从将数据插入到映射中的bean填充数据。

Create the bean MobileMap.java as;

创建bean MobileMap.java为；

package com.journaldev.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, valuemobnames.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;}
}

Here we declare a LinkedHashMap with String and Object data types and use the put method of the map and insert the data and getter setters methods are there to set and retrieve the values.

在这里，我们声明一个具有String和Object数据类型的LinkedHashMap，并使用映射的put方法并插入数据，并且在那里使用getter setters方法设置和检索值。

Create the JSF page mobmap.xhtml as;

创建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>

We use the map mobnames to retrieve the values to the Listbox in the jsf page.

我们使用映射Mobnames将值检索到jsf页面中的列表框。

Create the mapdet.xhtml view page that displays the selected values by the user.

创建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>

Once done with these run the application and you should get below output.

完成这些后，运行应用程序，您应该获得以下输出。

Below image shows the final project structure, I have not shown the web.xml and pom.xml details because they are almost same in all the projects.

下图显示了最终的项目结构，我没有显示web.xml和pom.xml详细信息，因为它们在所有项目中都几乎相同。

Finally, you can download the final project from below link and play around with it to learn more.

最后，您可以从下面的链接下载最终项目并进行试用以了解更多信息。

Download JSF selectManyListBox Example Project下载JSF selectManyListBox示例项目

翻译自: https://www.journaldev.com/7002/jsf-selectmanylistbox-example-tutorial

jsf入门实例

jsf入门实例_JSF selectManyListBox示例教程相关推荐

jsf入门实例_JSF错误消息示例教程
jsf入门实例 In this section, we will see how to use the default JSF validators to shoot out the built in ...
jsf表单验证_JSF验证示例教程–验证器标签，定制验证器
jsf表单验证 JSF validation model defines a set of standard classes for validating the UI components. The ...
angularjs 实例_AngularJS服务示例教程
angularjs 实例 Today we will look at one of the important angular concepts called AngularJS Services. ...
angularjs 实例_AngularJS包含示例教程
angularjs 实例 Earlier we looked at custom directives and in this tutorial, we will discuss about the ...
angularjs 实例_AngularJS过滤器示例教程
angularjs 实例 We looked at View Model, View and Controller concepts in the previous post. Now we are ...
帆软单选按钮实例_HTML单选按钮示例教程
帆软单选按钮实例 In the old times, radios have some buttons to change stations that have saved to a specific ...
jsf tree组件_JSF表单组件示例教程
jsf tree组件 JSF Form component is a collection of fields along with the data and submit functionality ...
java jsf 入门_JSF入门、简单示例
JSF入门 1. 什么是 Java Server Faces(jsf)? JSF为JAVA的 Web应用用户界面的开发人员提供了标准的编程接口.丰富可扩展的UI组件库(一个核心的JSP标记库用来处 ...
junit 经典示例_JUnit 4，JWebUnit，Arquillian和JSF单元示例教程
junit 经典示例 Along side of development lifecycle, most of us looking for a way to be sure that the uni ...

jsf入门实例_JSF selectManyListBox示例教程

jsf入门实例_JSF selectManyListBox示例教程相关推荐

最新文章

热门文章