Home → JSF

Showing or hiding attributes in JSF using JavaScript

|In: JSF|Last Updated:
Like Tweet Pin it Share Share Email

Let us learn showing or hiding attributes in JSF with example. While doing web development using JSF framework we need to show or hide attributes based on certain conditions.

Sometimes you need to show or hide JSF components also. You can use the same Javascript logic mentioned in this example. Surely it will work in both the cases.

In fact, it depends on certain conditions. For example attributes value or some business logic.

So in this post I will show you how to display or hide a text box. Similarly you can do samething with other JSF UI component.

So in this example if user selects “other” from Listbox (<h:selectOneMenu>) we will display text box to enter college name.

Certainly, in the end of the example you will be able to write code for displaying, showing and hiding any JSF UI Component using Javascript.

Later you can try some good examples by yourself.

A practical scenarion where showing or hiding attributes in JSF is required

I would like to take an example to clarify this article. Suppose I am registering myself on one of a job portal as a job seeker. Unfortunately I did not found my college in the list.

But I must  enter my College or University name in order to complete my educational details. So that employer and HR manager can validate my data.

In order to solve this problem, we can have an option of “Other” in the College or University list. So that I can select my University name as “Other”.

Further I can fill the university name in the text field shown after selecting value as “Other”. In this example I will take the same scenario. So let us continue with the example.

Moreover, I would suggest to have a good focus on util.js file in this tutorial. I will explain later in the example.

Create A Front JSP page (universityName.jsp)


<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<html>
<head>
<link rel="stylesheet" type="text/css"
href="<%=request.getContextPath() + "/"%>style.css">
<SCRIPT src="<%=request.getContextPath() + "/"%>util.js"
language="javascript" type="text/javascript"></SCRIPT>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Showing and Hiding UI Component in JSF</title>
</head>
<body>
<f:view>
<h:form id="showHideJSFUIComponentId">
<h:panelGroup style="text-align:center;">
<h:outputText value="Please enter University Details"
styleClass="boldLabel"></h:outputText>
</h:panelGroup>
<h:panelGrid border="0" columns="2">
<h:panelGroup>
<h:outputText value="University or College Name"
styleClass="outputLabel" />
<h:panelGrid>
<h:outputText styleClass="outputLabelSmall"
value="*if your college or university is not present" />
<h:outputText styleClass="outputLabelSmall"
value="please select 'other' and give college name" />
</h:panelGrid>
</h:panelGroup>
<h:selectOneMenu value="#{showHideJSFMBean.universityNameSelected}"
id="collegeNameSelectedId" onchange="showOtherCollegeField();">
<f:selectItems value="#{showHideJSFMBean.universityList}" />
</h:selectOneMenu>
<h:outputText value="Other" id="lblOtherCollegeNameId"
styleClass="#{showHideJSFMBean.universityNameSelected=='Other' ? 'outputLabel' : 'hide'}"></h:outputText>
<h:inputText value="#{showHideJSFMBean.otherUniversityNameEntered}"
id="txtOtherCollegeNameId"
styleClass="#{showHideJSFMBean.universityNameSelected=='Other' ? 'show' : 'hide'}"></h:inputText>
</h:panelGrid>
<h:panelGroup style="text-align:center;">
<h:commandButton value="Display College Details" id="commandButton"
action="#{showHideJSFMBean.collegeDetailsEntered}"></h:commandButton>
</h:panelGroup>
</h:form>
</f:view>
</body>
</html>

Create A Javascript file (util.js)


function showOtherCollegeField() {
var selectedCollegeNameId =
document.getElementById("showHideJSFUIComponentId:collegeNameSelectedId");
if (selectedCollegeNameId != null && selectedCollegeNameId.value == '00') {
alert("Please select any College Name");
}
if (selectedCollegeNameId.value == 'Other') {
document.getElementById("showHideJSFUIComponentId:lblOtherCollegeNameId").className = 'outputLabel';
document.getElementById("showHideJSFUIComponentId:txtOtherCollegeNameId").className = 'show';
} else {
document.getElementById("showHideJSFUIComponentId:lblOtherCollegeNameId").className = 'hide';
document.getElementById("showHideJSFUIComponentId:txtOtherCollegeNameId").className = 'hide';
}
}

In the above file you can see this line


document.getElementById("showHideJSFUIComponentId:lblOtherCollegeNameId").className = 'outputLabel';

if value selected is “Other” then we are calling CSS class which will show the attribute and if value is not other then we are calling the CSS class which will hide the attribute. We can assign CSS class to the jsf UI attribute in javascript method by using .className .

Create A CSS file (style.css)


.hide {
display: none;
}
.show {
display: table;
}
.outputLabel{
font-size: medium;
color: blue;
}
.outputLabelSmall{
font-size: xx-small;
color: red;
}
.boldLabel{
font-size: medium;
font-weight: bold;
color: blue;
}

Create JSF Managed Bean


package com.sitenol.showhidejsfuicomponent;
import java.util.ArrayList;
import java.util.List;
import javax.faces.model.SelectItem;
public class ShowHideJSFManagedBean {
private String universityNameSelected;
private String otherUniversityNameEntered;
private List<SelectItem> universityList;
public String collegeDetailsEntered() {
return "displayUniversityDetails";
}
public List<SelectItem> getUniversityList() {
if (universityList == null) {
universityList = new ArrayList<SelectItem>();
universityList.add(new SelectItem("00", "Select"));
universityList.add(new SelectItem("stanford university",
"stanford university"));
universityList.add(new SelectItem("paris university",
"paris university"));
universityList.add(new SelectItem("Other", "Other"));
}
return universityList;
}
public void setUniversityList(List<SelectItem> universityList) {
this.universityList = universityList;
}
public String getUniversityNameSelected() {
return universityNameSelected;
}
public void setUniversityNameSelected(String universityNameSelected) {
this.universityNameSelected = universityNameSelected;
}
public String getOtherUniversityNameEntered() {
return otherUniversityNameEntered;
}
public void setOtherUniversityNameEntered(String otherUniversityNameEntered) {
this.otherUniversityNameEntered = otherUniversityNameEntered;
}
}

Create JSP to display University Name Selected (displayUniversityName.jsp)


<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<html>
<head>
<link rel="stylesheet" type="text/css"
href="<%=request.getContextPath() + "/"%>style.css">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Showing and Hiding UI Component in JSF</title>
</head>
<body>
<f:view>
<h:form>
<h:panelGroup style="text-align:center;">
<h:outputText value="University Name Entered" styleClass="boldLabel"></h:outputText>
</h:panelGroup>
<h:panelGrid border="0" columns="2">
<h:outputText value="University or College Name - "
styleClass="outputLabel" />
<h:outputText value="#{showHideJSFMBean.otherUniversityNameEntered}"
styleClass="#{showHideJSFMBean.universityNameSelected =='Other' ? 'show' : 'hide'}"></h:outputText>
</h:panelGrid>
</h:form>
</f:view>
</body>
</html>

Create A faces-config.xml File

In faces-config.xml we have to configure managed bean ShowHideJSFManagedBean – a java file and navigation-rule. Please add the following code in your faces-config.xml file.


<?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>showHideJSFMBean</managed-bean-name>
<managed-bean-class>com.sitenol.showhidejsfuicomponent.ShowHideJSFManagedBean</managed-bean-class>
<managed-bean-scope>session</managed-bean-scope>
</managed-bean>
<navigation-rule>
<from-view-id>/universityName.jsp</from-view-id>
<navigation-case>
<from-outcome>displayUniversityDetails</from-outcome>
<to-view-id>/displayUniversityName.jsp</to-view-id>
</navigation-case>
</navigation-rule>
</faces-config>

Create web.xml file

Please use this web.xml file.


<?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>ShowHideJSFUIComponents</display-name>
<welcome-file-list>
<welcome-file>universityName.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>
<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>
<param-name>javax.servlet.jsp.jstl.fmt.localizationContext</param-name>
<param-value>resources.application</param-value>
</context-param>
<listener>
<listener-class>com.sun.faces.config.ConfigureListener</listener-class>
</listener>
</web-app>

How it will work (Output)

Once you have done with all the coding side deploy the war file to the web server and start it. Please make sure if you have already deployed same war multiple times then delete the temp files. I am using Apache tomcat.

Please type

http://localhost:8081/ShowHideJSFUIComponents/universityName.faces

in browser and hit. You will find the result like this image given below.

This image is showing the output result of hiding and showing JSF attributes.

Conclusion

Finally thanks for reading this article.

Now you learnt showing or hiding attributes in JSF. Similary you can show or hide components as well.

Login to show and hide attributes or components using JavaScript is same.

Here we have good tutorial on JSF.

Please give your valuable comments.

best jsf javascript examples jsf jsf example show hide jsf javascript example

Recommended Posts for You

Comments (0)

Leave a Reply

Your email address will not be published. Required fields are marked *