JSF - 1.2 Select One Radio (h:selectOneRadio)

Tutorial – Select One Radio(h:selectOneRadio) in JSF-1.2 example

Describing Example

1. Select One Radio (h:selectOneRadio) in JSF can be used to display multiple radio buttons. Select One Radio (h:selectOneRadio) allows user to select one radio button out of multiple radio buttons. In this example we will demonstrate how to work with Select One Radio in JSF 1.2. We will take one example to see Select One Radio (h:selectOneRadio) in JSF.
2. Let us take an example to understand use of Select One Radio (h:selectOneRadio) in JSF -1.2. Suppose we are creating our user account on any dating website. There will be one field asking your martial status. Martial status of a person can be Married, Unmarried, Divorced or Separated. At a time only one status is true for a person according to law. In this case we have to select only one radio button out of four radio buttons. In this case we use Select One Radio(h:selectOneRadio). In this Select One Radio(h:selectOneRadio) example we will take the example of Martial Status of a person.
3. We have these files while doing this example

selectMartialStatus.jsp
showMartialStatus.jsp
JSFSelectOneRadioManagedBean.java
SelectOneRadioView.java
faces-config.xml
web.xml

4. Eclipse image for this project.

Image is showing Eclipse architecture of the JSF Example

Eclipse Hierarchy of Select One Radion Example

In this Select One Radio() – JSF-1.2 example, we will display all the radio buttons Married, Unmarried, Divorced or Separated on the first page. On the next page we will display the martial status selected by the user. Please find the image below to see how Select One Radio looks in UI.

Image showing How Radion Buttons are displaying on User Interface

Image of h:selectOneRadio On User Interface

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 “jsfSelectOneRadioExample”.

2. Create JSP Pages :
Now we have to create two JSP pages.

selectMartialStatus.jsp – In this page user will be shown radio buttons with names “Married”, “Unmarried”, “Divorced” or “Separated”. User will be able to select one radio button out of these four.
showMartialStatus.jsp – In this page we will show the martial status selected by User.

selectMartialStatus.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-One-Radio h:selectOneRadio JSF-1.2 Example</title>
</head>
<body>
    <f:view>
        <h:form>
            <h:panelGrid>
                <h:outputText value="Please Select Martial Status :"></h:outputText>
                <h:selectOneRadio
                    value="#{jsfSelectOneRadioMBean.selectOneRadioView.martialStatus}">
                    <f:selectItems value="#{jsfSelectOneRadioMBean.selectOneRadioView.martialStatusList}"/>
                </h:selectOneRadio>
            </h:panelGrid>
            <h:commandButton value="Show MartialStatus" action="#{jsfSelectOneRadioMBean.showMartialStatusMethod}">
            </h:commandButton>
        </h:form>
    </f:view>
</body>
</html>

showMartialStatus.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-One-Radio h:selectOneRadio JSF-1.2 Example</title>
</head>
<body>
	<f:view>
		<h:panelGrid columns="2">
			<h:outputText value="Martial Status is : "></h:outputText>
			<h:outputText style="color:blue"
				value="#{jsfSelectOneRadioMBean.selectOneRadioView.martialStatus}">
			</h:outputText>
		</h:panelGrid>
	</f:view>
</body>
</html>

Points Of Discussion About JSP’s :

Value Binding In JSF :
In the JSP pages you can see value attributes like “#{jsfSelectOneRadioMBean.selectOneRadioView.martialStatus}”
or “#{jsfSelectOneRadioMBean.selectOneRadioView.martialStatusList}”.

“jsfSelectOneRadioMBean” is managed bean in this example. It is representing JSFSelectOneRadioManagedBean.java class. Please see tags in faces-config.xml file to see manged bean configuration. We have configured JSFSelectOneRadioManagedBean.java in faces-config.xml file.

“selectOneRadioView” is representing View Model. In this example SelectOneRadioView.java is View Model. View Model is used to get & set values of the form field attribute. “selectOneRadioView” has been declared as an instance variable in JSFSelectOneRadioManagedBean.java class.
“martialStatusList” and “martialStatus” are variables which have been declared in SelectOneRadioView.java.

Method or Action In JSP (Page Submit) :
In selectMartialStatus.jsp you can see this action call
action=”#{jsfSelectOneRadioMBean.showMartialStatus}”
“showMartialStatusMethod” is an action method has been written in JSFSelectOneRadioManagedBean.java class. When user will click on “Show MartialStatus” command button on first output screen, “showMartialStatusMethod” method will be executed. Please see this method carefully. The return type of this method is a String value. If the process executed successfully this method will return a string “showMartialStatus”.
showMartialStatus” string will be returned to faces-config.xml. When our faces-config.xml will receive “showMartialStatus”. It will look into
tag. For outcome “showMartialStatus” we have configured our faces-config.xml to render page showMartialStatus.jsp. So showMartialStatus.jsp will be rendered in this case.

3. Create Managed Bean For this Example :
In this example our managed bean is JSFSelectOneRadioManagedBean.java. Please see faces-config.xml file to see how JSFSelectOneRadioManagedBean.java has been configured.
Please find the code for managed bean below.

JSFSelectOneRadioManagedBean.java

package com.sitenol.selectOneRadio;
public class JSFSelectOneRadioManagedBean {
	private SelectOneRadioView selectOneRadioView;
	public SelectOneRadioView getSelectOneRadioView() {
		if(selectOneRadioView == null)
			selectOneRadioView = new SelectOneRadioView();
		return selectOneRadioView;
	}
	public void setSelectOneRadioView(SelectOneRadioView selectOneRadioView) {
		this.selectOneRadioView = selectOneRadioView;
	}
	public String showMartialStatusMethod(){
		return "showMartialStatus";
	}
}

4. Create View Model For this Example :
Inside Managed Bean JSFSelectOneRadioManagedBean.java you can see
private SelectOneRadioView selectOneRadioView;

Please find the code for SelectOneRadioView.java

SelectOneRadioView.java

package com.sitenol.selectOneRadio;
import java.util.ArrayList;
import java.util.List;
import javax.faces.model.SelectItem;
public class SelectOneRadioView {
	private String martialStatus;
	private List<SelectItem> martialStatusList;
	public String getMartialStatus() {
		return martialStatus;
	}
	public void setMartialStatus(String martialStatus) {
		this.martialStatus = martialStatus;
	}
	public List<SelectItem> getMartialStatusList() {
		if(martialStatusList == null || martialStatusList.size() == 0){
			martialStatusList = new ArrayList<SelectItem>();
			martialStatusList.add(new SelectItem("Married", "Married"));
			martialStatusList.add(new SelectItem("Unmarried", "Unmarried"));
			martialStatusList.add(new SelectItem("Divorced", "Divorced"));
			martialStatusList.add(new SelectItem("Separated", "Separated"));
		}
		return martialStatusList;
	}
	public void setMartialStatusList(List<SelectItem> martialStatusList) {
		this.martialStatusList = martialStatusList;
	}
}

Point of Discussion about attributes in SelectOneRadioView.java:

We can see attributes “martialStatus” and “martialStatusList” in SelectOneRadioView.java.

“martialStatus” is an String type. It will contain the martial status value selected by user.
accepts a list of javax.faces.model.SelectItem. So “martialStatusList” is of type List. We are creating “martialStatusList” in getMartialStatusList() method in SelectOneRadioView.java class.

5. Create faces-config.xml file :
Please see below code for the faces-config.xml file for example “Tutorial – Select One Radio() in JSF-1.2”.

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>jsfSelectOneRadioMBean</managed-bean-name>
        <managed-bean-class>com.sitenol.selectOneRadio.JSFSelectOneRadioManagedBean</managed-bean-class>
        <managed-bean-scope>session</managed-bean-scope>
    </managed-bean>
    <navigation-rule>
        <from-view-id>/selectMartialStatus.jsp</from-view-id>
        <navigation-case>
            <from-outcome>showMartialStatus</from-outcome>
            <to-view-id>/showMartialStatus.jsp</to-view-id>
        </navigation-case>
    </navigation-rule>
</faces-config>

6. Create web.xml file :
Please find the web.xml file code for example “Tutorial – Select One Radio() in JSF-1.2”.

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>jsfSelectOneRadioExample</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 jsfSelectOneRadioExample.war file to server after proper deployment we have to start the server.

8. Run The Application :
Once server is started after that please open Internet Explorer and hit this url “http://localhost:8080/jsfSelectOneRadioExample/selectMartialStatus.faces”.
So now we can see output of our Select One Radio(h:selectOneRadio) in JSF-1.2.
Output screen will be like this

First Screen

This image is the first output Screen of our Example

Screen showing four Select One Radio Buttons

In the above screen we have radio options “Married”, “Unmarried”, “Divorced” or “Separated” to select. We can select only one option. After that we can click on “Show MartialStatus” button.
We will receive output screen like Second Screen.

Second Screen

This image is the final image of this example

Image showing selected value

This screen is showing the marital status selected by user in the first screen.

michael kors February 4, 2014 at 3:33 pm

conversation concerning this piece of writing here at this weblog, I have read all that, so at this
time me also commenting at this place.
I am sure this post has touched all the internet visitors, its really really fastidious piece of writing on
building up new website.
Wow, this piece of writing is pleasant, my younger sister
is analyzing such things, so I am going to convey her.
bookmarked!!, I really like your blog!
Way cool! Some extremely valid points! I appreciate you

michael kors

klimatyzacje February 13, 2014 at 2:32 pm

Hey There. I found your weblog the use of msn.
That is an extremely well written article. I will be sure to bookmark it and return to learn more of your helpful info.
Thanks for the post. I will certainly return.

Comprar November 25, 2016 at 8:46 am

Its not my first time to pay a quick visit this web page, i am visiting this web page daily and get nice data from here every day.

Medloja March 13, 2017 at 9:17 am

Aw, this was a really good post. Spending some time and actual effort to
generate a top notch article…

Home → JSF

JSF – 1.2 Select One Radio (h:selectOneRadio)

Tutorial – Select One Radio(h:selectOneRadio) in JSF-1.2 example

Post by Sitenol Editorial Team

Comments (4)

Leave a Reply Cancel reply

Home → JSF

JSF – 1.2 Select One Radio (h:selectOneRadio)

Tutorial – Select One Radio(h:selectOneRadio) in JSF-1.2 example

JSF 1.2 Data Table (h:dataTable) example

Tutorial : properties file in JSF with example

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 (4)

Leave a Reply Cancel reply