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.
The following attributes are commonly used with selectManyListBox;
id: unique identifier to identify the component.
accept: comma separated list of content types for the form.
dir: indicates the direction for the text. Values for this are ltr(left to right) and rtl(right to left).
disabled: disabled state for the button or an element.
hreflang: language of the resource specified with the href attribute.
rev: reverse link from the anchor specified with the href attribute.
target: name of the frame to be in which the document is opened.
type: type of the link specified.
onselect: text selected in an input field.
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.
Create the JSF page mobileselect.xhtml as below.
mobileselect.xhtml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<?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.
Create the details.xhtml page to display the selected values;
details.xhtml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<?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.
Create the Mobile.java bean that handles the array to set and retrieve the values by the help of getter and setter methods.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
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.
Create the bean MobileObject.java as
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
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.
Create the JSF page mobobject.xhtml as;
mobobject.xhtml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<?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.
Create the JSF page det.xhtml as;
det.xhtml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<?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.
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.
Create the bean MobileMap.java as;
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
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, 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; } } |
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.
Create the JSF page mobmap.xhtml as;
mobmap.xhtml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<?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.
Create the mapdet.xhtml view page that displays the selected values by the user.
mapdet.xhtml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<?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.
Finally, you can download the final project from below link and play around with it to learn more.