Introduction
In this blog, we will learn about the JSF h:selectManyListbox. JSF (Java Server Faces) is a Java-based web application framework designed to build web-based user interfaces more accessible. The Java Community process codified a definition for JavaServer Faces. The MVC design pattern separates model and display, allowing developers to concentrate on their primary competencies and communicate more effectively. The h:selectManyListbox tag renders an HTML input element of the type "select" with size and multiple specified. This article describes the JSF h:selectManyListbox function in JSF, beginning with the most straightforward statements and progressing to the most significant modules.
h:selectManyListbox tag
Input tag
<h:selectManyListbox value = "#{userInfo.info}">
<f:selectItem itemValue = "1" itemLabel = "Info 1" />
<f:selectItem itemValue = "2" itemLabel = "Info 2" />
</h:selectOneListbox>
Render output:
<select name = "codingNinjas6:codinNinjas8" size = "2" multiple = "multiple">
<option value = "1">Info 1</option>
<option value = "2">Info 2</option>
</select> Tag Attributes
The message Tag properties are listed in the tables below:
| S.NO. | ATTRIBUTES |
DESCRIPTION |
| 1. | title |
A title that is used for accessibility. Browsers often generate tooltips for the value of the title. |
| 2. | border |
The width of an element's border in pixels. |
| 3. | id |
It is used as a component's identifier. |
| 4. | binding |
The component that can use in a backing bean. |
| 5. | rendered |
It is a boolean tag attribute, where false reduces rendering. |
| 6. | styleClass |
It is used as the class name for Cascading style sheet(CSS). |
| 7. | is value | The value of a component, often a value binding. |
| 8. | bgcolor |
It is used to change the background color for the table. |
| 9. | border |
It is used to change the Width of the table’s border. |
| 10. | cellpadding |
It is used to change the Padding around table cells. |
| 11. | cellspacing |
It is used to change the spacing around table cells. |
| 12. | columnClasses |
CSS classes for columns, separated by commas. |
| 13. | columns |
It is used to handle the number of columns in a table. |
| 14. | footerClass |
It is the CSS class for the table footer. |
| 15. | headerClass |
It is the CSS class for the table header. |
| 16. | rowClasses |
CSS classes for columns, separated by commas. |
| 17. | frame |
Valid values for the sides of the frame encircling the table to be drawn are none, above, below, hsides, vsides, lhs, rhs, box and border. |
| 18. | rules |
Specification for cell-to-cell lines; permissible values include groups, rows, columns, and all. |
| 19. | summary |
A summary of the table's purpose and structure as it relates to non-visual feedback such as speech. |
| 20. | dir |
Textual direction Valid values are ltr (left to right) and rtl (right to left) (right to left). |
| 21. | lang |
The attributes and text of an element's base language. |
| 22. | onblur |
The element's focus has shifted. |
23. |
onchange |
The element's value shifts. |
24. |
onclick |
The mouse button is clicked over the element. |
25. |
ondblclick |
The mouse button is double-clicked over the element. |
26. |
onfocus |
The element is highlighted. |
27. |
onkeydown |
The desired key is pressed. |
28. |
onkeypress |
The desired key is pressed and subsequently released. |
29. |
onkeyup |
The desired key is released. |
30. |
onmousedown |
The desired element is selected with the mouse. |
31. |
onmousemove |
The desired element has hovered over with the mouse. |
32. |
onmouseout |
The desired element's area is left by the mouse. |
33. |
onmouseover |
The mouse lands on the desired element. |
34. |
onmouseup |
The desired mouse button is released. |
35. |
onselect |
An input field's text has been selected. |
Example Application
To test the above tag, let's create a test JSF application.
- According to the instructions in the JSF - First Application chapter, create a project called helloworld under the package com.codingNinjas.test.
- Make the following changes to main.xhtml. Leave the remaining files alone.
- As stated below, create output.xhtml and place it in the web apps directory.
- As stated below, add UserFood.java as a managed bean to the com.codingNinjas.test package.
- Verify that the business logic is performing in line with the specifications by compiling and running the application.
- Create the program as a war file, then deploy it to the Apache Tomcat Webserver
- Launch your web application using the proper URL as described in the final step below.
UserFood.java
import java.io.Serializable;
import java.util.Arrays;
import java.util.LinkedHashMap;
import java.util.Map;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
@ManagedBean(name="user")
@SessionScoped
public class UserFood implements Serializable{
public String[] Food1;
public String[] Food2;
public String[] Food3;
//getter and setter methods...
public String getFood1InString() {
return Arrays.toString(Food1);
}
public String getFood2InString() {
return Arrays.toString(Food2);
}
public String getFood3InString() {
return Arrays.toString(Food3);
}
//Generated by Map
private static Map<String,Object> food2Value;
static{
food2Value = new LinkedHashMap<String,Object>();
food2Value.put("Food2 - Fry Chicken", "Fry Chicken"); //label, value
food2Value.put("Food2 - Tomato Soup", "Tomato Soup");
food2Value.put("Food2 - Fried Rice", "Fried Rice");
}
public Map<String,Object> getFavFood2Value() {
return food2Value;
}
//Generated by Object array
public static class Food{
public String foodLabel;
public String foodValue;
public Food(String foodLabel, String foodValue){
this.foodLabel = foodLabel;
this.foodValue = foodValue;
}
public String getFoodLabel(){
return foodLabel;
}
public String getFoodValue(){
return foodValue;
}
}
public Food[] food3List;
public Food[] getFood3Value() {
food3List = new Food[3];
food3List[0] = new Food("Food3 - Fry Chicken", "Fry Chicken");
food3List[1] = new Food("Food3 - Tomato Soup", "Tomato Soup");
food3List[2] = new Food("Food3 - Fried Rice", "Fried Rice");
return food3List;
}
}
JSF page
<?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>
<h1>JSF 2 multi-select listbox example</h1>
<h:form>
1. Hard-coded with "f:selectItem" :
<h:selectManyListbox value="#{user.Food1}">
<f:selectItem itemValue="Fry Chicken" itemLabel="Food1 - Fry Chicken" />
<f:selectItem itemValue="Tomato Soup" itemLabel="Food1 - Tomato Soup" />
<f:selectItem itemValue="Fried Rice" itemLabel="Food1 - Fried Rice" />
</h:selectManyListbox>
<br /><br />
2. Generated by Map :
<h:selectManyListbox value="#{user.Food2}">
<f:selectItems value="#{user.Food2Value}" />
</h:selectManyListbox>
<br /><br />
3. Generated by Object array and iterate with var :
<h:selectManyListbox value="#{user.Food3}">
<f:selectItems value="#{user.Food3Value}" var="f"
itemLabel="#{f.foodLabel}" itemValue="#{f.foodValue}" />
</h:selectManyListbox>
<br /><br />
<h:commandButton value="Submit" action="result" />
<h:commandButton value="Reset" type="reset" />
</h:form>
</h:body>
</html>
result.xhtm
<?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>
<h1>JSF 2 multi-select listbox example</h1>
<h2>result.xhtml</h2>
<ol>
<li>user.Food1 : #{user.Food1InString}</li>
<li>user.Food2 : #{user.Food2InString}</li>
<li>user.Food3 : #{user.Food3InString}</li>
</ol>
</h:body>
</html> 
You can also try this code with Online Java Compiler
Output:
19+ registered 
