JSF Select Boolean Checkbox (h:selectBooleanCheckbox) Example

Tutorial JSF 1.2 – Learn Select Boolean Checkbox with example

Describing Example : in JSF tutorial :

1. In this tutorial will explain you how to work with JSF UI Component – Select Boolean CheckBox (h:selectBooleanCheckbox).
2. in JSF : Select Boolean CheckBox is one of very useful component in JSF. We will see an example to learn “how to work with Select Boolean CheckBox in JSF”.
3. We have these files while doing this example.

check.jsp
showCheckedResults.jsp
ManagedBean.java
ViewModel.java
faces-config.xml
web.xml

4. Eclipse image for this project.

Image of Eclipse for UI component Example in JSF

Eclipse image – select Boolean Checkbox

Please follow these procedures to do this Example

1. Creating a dynamic web application :
In this step we have to create a dynamic web application with name “selectBooleanCheckboxExample”. This dynamic web application should be configured for JSF.
Please read this tutorial this tutorial – First Sample Hello World Example in JSF. This tutorial will explain you how to create first JSF web project in Eclipse using Apache Tomcat Server.
After creating JSF dynamic Web Application, Let us see Select Boolean Check Box example () in JSF.

2. Create JSP Pages :
Now we have to create two JSP pages.
1. check.jsp – In this page user will be shown two option 1. Are you Married ? And 2. Are you Employed. Suppose user is employed then he will checked the option “Are you Employed?”
2. showCheckedResults.jsp – In this page we will show the values selected in the previous page. Suppose user has checked “Are you Employed?” Then we will show “Yes” for “Are you Employed?” in the next screen.
See how we are doing this scenario in this JSF Example (Select Boolean Check Box).

check.jsp


<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Select Boolean Check Box Example in JSF</title>
</head>
<body>
    <f:view>
        <h:form id="selectBooleanCheckboxFormId">
            <h:panelGrid columns="2" border="0">
                <h:outputText value="Are you Married ? :"></h:outputText>
                <h:selectBooleanCheckbox id="marriedStatusId"
                    value="#{managedBean.viewModel.checkMarriedStatus}"></h:selectBooleanCheckbox>
                <h:outputText value="Are you Employed :"></h:outputText>
                <h:selectBooleanCheckbox id="employmentStatusId"
                    value="#{managedBean.viewModel.checkEmploymentStatus}"></h:selectBooleanCheckbox>
            </h:panelGrid>
            <h:commandButton value="Show Selected Values" action="#{managedBean.showSelected}"></h:commandButton>
        </h:form>
    </f:view>
</body>
</html>

showCheckedResults.jsp


<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Select Boolean Check Box Example in JSF</title>
</head>
<body>
    <f:view>
        <h:panelGrid columns="2" border="0">
            <h:outputText value="Are you Married ? :"></h:outputText>
            <h:outputText value="#{managedBean.viewModel.marriedStatus}"></h:outputText>
            <h:outputText value="Are you Employed :"></h:outputText>
            <h:outputText value="#{managedBean.viewModel.employmentStatus}"></h:outputText>
        </h:panelGrid>
    </f:view>
</body>
</html>

3. Create Managed Bean For this Example :
Throughout this JSF example () you can see value attributes like “#{managedBean.viewModel.marriedStatus}”

Here managedBean stands for JSF Manged Bean(ManagedBean.java), viewModel stands View Model (ViewModel.java – Used to get & set values of the form field attribute) and marriedStatus is an attribute in ViewModel.java.

ManagedBean.java will be configured in faces-config.xml file. Please see faces-config.xml file for this example. There you will find managedBean inside this tag . Below code is for Managed Bean ManagedBean.java

ManagedBean.java


package com.sitenol.selectBooleanCheckbox;
public class ManagedBean {
    private ViewModel viewModel;
    private static String YES = "Yes";
    private static String NO = "No";
    public ViewModel getViewModel() {
        if(viewModel == null)
            viewModel = new ViewModel();
        return viewModel;
    }
    public void setViewModel(ViewModel viewModel) {
        this.viewModel = viewModel;
    }
    public String showSelected(){
        this.viewModel.setEmploymentStatus(this.viewModel.isCheckEmploymentStatus() ? YES : NO);
        this.viewModel.setMarriedStatus(this.viewModel.isCheckMarriedStatus() ? YES : NO);
        return "success";
    }
}

4. Create View Model For this Example :
Inside Managed Bean ManagedBean.java you can see
private ViewModel viewModel;

ViewModel is java class where all the variables has been declared. Please find the code below.

ViewModel.java


package com.sitenol.selectBooleanCheckbox;
public class ViewModel {
    private boolean checkMarriedStatus;
    private boolean checkEmploymentStatus;
    private String marriedStatus;
    private String employmentStatus;
    public boolean isCheckMarriedStatus() {
        return checkMarriedStatus;
    }
    public void setCheckMarriedStatus(boolean checkMarriedStatus) {
        this.checkMarriedStatus = checkMarriedStatus;
    }
    public boolean isCheckEmploymentStatus() {
        return checkEmploymentStatus;
    }
    public void setCheckEmploymentStatus(boolean checkEmploymentStatus) {
        this.checkEmploymentStatus = checkEmploymentStatus;
    }
    public String getMarriedStatus() {
        return marriedStatus;
    }
    public void setMarriedStatus(String marriedStatus) {
        this.marriedStatus = marriedStatus;
    }
    public String getEmploymentStatus() {
        return employmentStatus;
    }
    public void setEmploymentStatus(String employmentStatus) {
        this.employmentStatus = employmentStatus;
    }
}

5. Create faces-config.xml file :
Please find the faces-config.xml file code here. This faces-config.xml file is for example using in JSF.

Faces-config.xml


<?xml version="1.0" encoding="UTF-8"?>
<faces-config 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-facesconfig_1_2.xsd"
    version="1.2">
    <managed-bean>
        <managed-bean-name>managedBean</managed-bean-name>
        <managed-bean-class>com.sitenol.selectBooleanCheckbox.ManagedBean</managed-bean-class>
        <managed-bean-scope>session</managed-bean-scope>
    </managed-bean>
    <navigation-rule>
        <from-view-id>/check.jsp</from-view-id>
        <navigation-case>
            <from-outcome>success</from-outcome>
            <to-view-id>/showCheckedResults.jsp</to-view-id>
        </navigation-case>
    </navigation-rule>
</faces-config>

6. Create web.xml file :
Please find the web.xml file code here. This web.xml file is for example using in JSF.

web.xml


<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">
  <display-name>selectBooleanCheckboxExample</display-name>
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
    <welcome-file>index.htm</welcome-file>
    <welcome-file>index.jsp</welcome-file>
    <welcome-file>default.html</welcome-file>
    <welcome-file>default.htm</welcome-file>
    <welcome-file>default.jsp</welcome-file>
  </welcome-file-list>
  <servlet>
    <servlet-name>Faces Servlet</servlet-name>
    <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
    <load-on-startup>1</load-on-startup>
  </servlet>
  <servlet-mapping>
    <servlet-name>Faces Servlet</servlet-name>
    <url-pattern>*.faces</url-pattern>
  </servlet-mapping>
  <context-param>
    <param-name>javax.servlet.jsp.jstl.fmt.localizationContext</param-name>
    <param-value>resources.application</param-value>
  </context-param>
  <context-param>
    <description>State saving method: 'client' or 'server' (=default). See JSF Specification 2.5.2</description>
    <param-name>javax.faces.STATE_SAVING_METHOD</param-name>
    <param-value>client</param-value>
  </context-param>
  <context-param>
    <description>
    This parameter tells MyFaces if javascript code should be allowed in
    the rendered HTML output.
    If javascript is allowed, command_link anchors will have javascript code
    that submits the corresponding form.
    If javascript is not allowed, the state saving info and nested parameters
    will be added as url parameters.
    Default is 'true'</description>
    <param-name>org.apache.myfaces.ALLOW_JAVASCRIPT</param-name>
    <param-value>true</param-value>
  </context-param>
  <context-param>
    <description>
    If true, rendered HTML code will be formatted, so that it is 'human-readable'
    i.e. additional line separators and whitespace will be written, that do not
    influence the HTML code.
    Default is 'true'</description>
    <param-name>org.apache.myfaces.PRETTY_HTML</param-name>
    <param-value>true</param-value>
  </context-param>
  <context-param>
    <param-name>org.apache.myfaces.DETECT_JAVASCRIPT</param-name>
    <param-value>false</param-value>
  </context-param>
  <context-param>
    <description>
    If true, a javascript function will be rendered that is able to restore the
    former vertical scroll on every request. Convenient feature if you have pages
    with long lists and you do not want the browser page to always jump to the top
    if you trigger a link or button action that stays on the same page.
    Default is 'false'
</description>
    <param-name>org.apache.myfaces.AUTO_SCROLL</param-name>
    <param-value>true</param-value>
  </context-param>
  <listener>
    <listener-class>org.apache.myfaces.webapp.StartupServletContextListener</listener-class>
  </listener>
  </web-app>

7. Deploy Application and Run Server :
In this step you we have to deploy selectBooleanCheckboxExample.war file to server after proper deployment we have to start the server.

8. Run The Application :
After successfully war deployment. Please start the server. After that open Internet Explorer and hit this

"http://localhost:8080/selectBooleanCheckboxExample/check.faces".

So now we can see output of our example in JSF.
Out put screen will be like this

Image showing h:selectBooleanCheckbox example Ouput

First Screen : Select Boolean Checkbox example

In this screen we have to check options
1. Are you Married ?
2. Are you Employed ?
We can check any one out of these two options. After that we can click on “Show Selected Values” button. We will receive output screen like this.

Showing Selected Values

The above output image is showing the checked result as “Yes” and unchecked results as “No”.

Home → JSF

JSF Select Boolean Checkbox (h:selectBooleanCheckbox) Example

Tutorial JSF 1.2 – Learn Select Boolean Checkbox with example

Post by Sitenol Editorial Team

Comments (1)

Leave a Reply Cancel reply

Home → JSF

JSF Select Boolean Checkbox (h:selectBooleanCheckbox) Example

Tutorial JSF 1.2 – Learn Select Boolean Checkbox with example

JSF 1.2 Select One Menu (h:selectOneMenu) example

JSF 1.2 Select Many Checkbox (h:selectManyCheckbox)

Post by Sitenol Editorial Team

Recommended Posts for You

Difference between Action and Action Listener in JSF

Showing or hiding attributes in JSF using JavaScript

JSF 1.2 graphicImage tag example (h:graphicImage)

Comments (1)

Leave a Reply Cancel reply