HTML SelectOneListbox in JSF

Uses of h:selectOneListbox

The h:selectOneListbox in JSF is probably the most commonly used selection component. We have listed its uses for better understanding.

• It renders a collection of data into a single list. 
• In both native applications and websites, h:selectOneListbox is used for selection. They aren't meant to be used to run commands or to display modal windows, dialogue boxes, or dynamic controls. 
• h:selectOneListbox is commonly used on e-commerce sites to house filters that cascade down the left side of a category page.
• This is useful in the cases of creating forms that give single choices to the user among multiple options.
• h:selectOneListboxes make a form more compact, especially when there are many options to choose from and present. As a list of standalone radio buttons or checkboxes would take up too much screen space, limiting the options to those in the list ensures that users enter data in the proper format. 
• Using a selectOneListbox can also reduce errors.

Attributes of Tags

We will cover some of the attributes of the tag h:selectOneListbox in JSF. These have been discussed below:

Example

We will be going through the steps of creating h:selectOneListbox in JSF in detail.

Building Java Web Application

First, we will make a directory with the name 'JSF.' After opening this directory in the terminal, and we will run the command 'mvn archetype: generate.'

Maven will begin processing and building the entire Java web application project structure.

Now navigate to the JSF directory. You'll notice that an onelistbox Java web application project has been generated (as specified in the property 'artifactId'). Maven follows a conventional directory structure, as indicated in the image below.

Running in Eclipse IDE

'mvn eclipse: eclipse' must be executed from the directory containing the pom.xml, i.e., the onelistbox directory.

Command: 

mvn eclipse:eclipse -Dwtpversion=2.0

'BUILD SUCCESS' will be prompted.

We will then import our project 'onelistbox' to Eclipse.

Now, we will be adding JSF dependencies in 'pom.xml' file. It works by allowing you to designate external library dependencies for your project. When you use Maven to build your project, it will fetch these libraries from the web (external repositories) and include them in your finished project. As a result, dependencies are handled automatically.

We will add the following dependencies to 'pom.xml'.

<dependencies>
   <dependency>
      <groupId>com.sun.faces</groupId>
      <artifactId>jsf-api</artifactId>
      <version>2.1.7</version>
   </dependency>
   
   <dependency>
      <groupId>com.sun.faces</groupId>
      <artifactId>jsf-impl</artifactId>
      <version>2.1.7</version>
   </dependency>
</dependencies>

pom.xml:

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
 <modelVersion>4.0.0</modelVersion>
 <groupId>com.codingninjas.JSFonelist</groupId>
 <artifactId>onelistbox</artifactId>
 <packaging>war</packaging>
 <version>1.0-SNAPSHOT</version>
 <name>onelistbox Maven Webapp</name>
 <url>http://maven.apache.org</url>
 <dependencies>
   <dependency>
     <groupId>junit</groupId>
     <artifactId>junit</artifactId>
     <version>3.8.1</version>
     <scope>test</scope>
   </dependency>
  <dependency>
     <groupId>com.sun.faces</groupId>
     <artifactId>jsf-api</artifactId>
     <version>2.1.7</version>
  </dependency>
  
  <dependency>
     <groupId>com.sun.faces</groupId>
     <artifactId>jsf-impl</artifactId>
     <version>2.1.7</version>
  </dependency>
 </dependencies>
 <build>
   <finalName>onelistbox</finalName>
 </build>
</project>

faces-config.xml:

<?xml version="1.0" encoding="windows-1252"?>
<faces-config version="2.0"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xi="http://www.w3.org/2001/XInclude"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-facesconfig_2_0.xsd">
<navigation-rule>
  <from-view-id>home.xhtml</from-view-id>
  <navigation-case>
     <from-outcome>success</from-outcome>
     <to-view-id>welcome.xhtml</to-view-id>
  </navigation-case>  
</navigation-rule>
</faces-config>

Configuring Faces Servlet in 'web.xml'

We will be updating our 'web.xml' file as below:

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="3.0"
       xmlns="http://java.sun.com/xml/ns/javaee"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
       http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd">
   <servlet>
       <servlet-name>faces</servlet-name>
       <servlet-class>
         javax.faces.webapp.FacesServlet
       </servlet-class>
   </servlet>
   <servlet-mapping>
       <servlet-name>faces</servlet-name>
       <url-pattern>/faces/*</url-pattern>
   </servlet-mapping>
</web-app>

Creating the Managed Bean

We will be updating the 'home.java' file as below:

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

@ManagedBean(name="home")
@SessionScoped

/**********************
Managed Bean
@author codingninjas
**********************/

public class Home {
   private String selectedValue;
   public String getSelectedValue()
   {
       return selectedValue;
   }
   public void setSelectedValue( String selectedValue )
   {
       this.selectedValue = selectedValue;
   }
   public String checkSelectedValue()
   {
       return "Success";
   }
}

You can also try this code with Online Java Compiler

Run Code

home.xhtml:

<?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:head>
       <title> 
           CodingNinjas SelectOneListBox
       </title>
   </h:head>
   <h:body>
       <h2>CodingNinjas SelectOneListBox Example</h2>
       <hr>
       <h3>h:selectonelistbox in JSF</h3>
       <h:form>
           <h:selectOneListbox value="#{home.selectedValue}"> 
               <f:selectItem itemValue="Captain Marvel" itemLabel="Captain Marvel" />
               <f:selectItem itemValue="Thor" itemLabel="Thor" />
               <f:selectItem itemValue="The Hulk" itemLabel="The Hulk" />
               <f:selectItem itemValue="Dr. Strange" itemLabel="Dr. Strange" />
               <f:selectItem itemValue="Iron Man" itemLabel="Iron Man" />
               <f:selectItem itemValue="Black Panther" itemLabel="Black Panther" />
          </h:selectOneListbox>
          <br>
          <br>
          <h:commandButton value="Select One Value"
          action="#{home.checkSelectedValue}"/>   
       </h:form>
   </h:body>
</html>

welcome.xhtml:

<?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"
   xmlns:ui="http://java.sun.com/jsf/facelets">
   <h:head>
       <title>
           CodingNinjas SelectOneListBox
       </title>
   </h:head>
   <h:body>
       <h2>CodingNinjas SelectOneListBox Example</h2>
       <hr>
       <h3>Your Selected Value</h3>
       <h:outputText value="#{home.selectedValue}"/>
   </h:body>
</html>

Output

The output will be displayed in 'http://localhost:8000/onelistbox/home.xhtml'.

Now, we have to select one value in the list box shown.

After clicking the 'Select One Value' button, you'll be prompted with this:

Frequently Asked Questions

How is MVC related to JSF?

Java Server Faces (JSF) technology is a front-end framework that simplifies the creation of user interface components by allowing them to be reused. The Model View Controller pattern (MVC) is used to design JSF, separating the presentation, controller, and business logic.

Explain the selectOne menu tag's function in JSF.

The h:selectOneMenu component lets you choose from a list of options. Examples of elements include a list box, radio buttons, or a menu.

How's h:selectOneListbox differ from h:selectManyListbox?

A user can select one value from a list of data using the selectOneListbox. The user can see a few of the entries in the list within a box on the screen. Then the user can choose one of the options from the Listbox. On the other hand, the h:selectManyListbox components allow the user to select multiple options from a selection list box.

Conclusion

In the article, we learned about h:selectOneListbox, its uses, and its advantages they have. It is suggested to always display the options in a logical order when using a Listbox in your design. This could include grouping related items together, putting the most frequently selected item first, or alphabetizing the options. It is great to remember that Numbers and dates should always be in the same order. 

Find our courses on HTML and CSS here for free. You can check out various Java topics and blogs on JSF Architecture to follow.

Explore Coding Ninjas Studio to find more exciting stuff. Happy Coding!