JSF selectManyListBox Example Tutorial

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

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

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.

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

JSF-selectManyListBox-example-2-450x148

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

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

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

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

Now run the application that produces the following output.

JSF-selectManyListBox-example-3-450x177

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;

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

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

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

JSF-selectManyListBox-project

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.

JSF-selectManyListBox-project

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

By admin

Leave a Reply