Enabling and Disabling Button In JSF

In this tutorial enabling and disabling a button on different conditions has been explained. A button can be disabled setting disabled attribute of the commandButton tag to true.

Enabling and Disabling Button In JSF

Enabling and Disabling Button In JSF

        

In this tutorial enabling and disabling a button on different conditions has been explained. A button can be disabled setting "disabled" attribute of the commandButton tag to "true". We can set this attribute while writing the tag or by setting it according to different conditions. In this example we have used beans to set this attribute to "true" or "false" according to the type of the user. The first page that comes to the user is login page where the user puts login ID and password. If ID and Password both are "admin" then the next page will be containing buttons "Employee Area" and "Admin Area" enabled. If both are "emp" then in the next page only one "Employee Area" button will be enabled and "Admin Area" button will be disabled. If the ID and Password doesn't match with any of these then no button will be enabled.

Code for all the pages have been given below :

login.jsp :

<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>

<f:view>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<head>
  <title>Enable Disable Button</title>
</head>

<body topmargin="40"><center>
<h:form>
  <table bgcolor="#e6edfd">
   <tr>
   <td><h:outputText value="Login ID" /></td>
   <td><h:inputText id="loginname" value="#{EnableDisable.loginname}"
   required="true"/></td>
   <td>&nbsp;</td>
   <td><h:message for="loginname" style="color:red"/></td>
  </tr>
  <tr>
   <td><h:outputText value="Password" /></td>
   <td><h:inputSecret id="password" value="#{EnableDisable.password}"
  required="true"/></td>
   <td>&nbsp;</td>
   <td><h:message for="password" style="color:red"/></td>
  </tr>
  <tr>
   <td>&nbsp;</td>
   <td><h:commandButton value="Login"
   action="#{EnableDisable.CheckValidUser}" /></td>
  </tr>
</table>
</h:form>

<center>
</body>
</html>
</f:view>

EnableDisable.jsp :

<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>

<f:view>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<head>
  <title>Enable Disable Button</title>
</head>

<body topmargin="40">
<center>
<h:form>
<table bgcolor="#e6edfd">

   <tr>
  <th colspan="2"><h:outputText value="Sorry... You can't Proceed."
  style="color:red;" rendered="#{EnableDisable.render3}" /></th>
   </tr>
   <tr>
  <th colspan="2"><h:outputText value="Welcome...Go to your area."
  style="color:Green;" rendered="#{EnableDisable.render4}" /></th>
   </tr>
   <tr>
  <td><h:commandButton value="Employee Area"
   disabled="#{EnableDisable.disable1}" /></td>
  <td><h:commandButton value="Admin Area"
   disabled="#{EnableDisable.disable2}" /></td>
   </tr>
</h:form>
</center>
</body>
</html>
</f:view>

 EnableDisable.java (JavaBean) : 

package roseindia;

public class EnableDisable{
  String loginname;
  String password;
  boolean disable1;
  boolean disable2;
  boolean render3;
  boolean render4;

  public EnableDisable(){
  }
  public String getLoginname(){
  return loginname;
  }
  public void setLoginname(String loginname){
  this.loginname = loginname;
  }

  public String getPassword(){
  return password;
  }
  public void setPassword(String password){
  this.password = password;
  }

  public boolean getDisable1(){
  return disable1;
  }
  public void setDisable1(boolean disable1){
  this.disable1 = disable1;
  }
  
  public boolean getDisable2(){
  return disable2;
  }
  public void setDisable2(boolean disable2){
  this.disable2 = disable2;
  }

  public boolean getRender3(){
  return render3;
  }
  public void setRender3(boolean render3){
  this.render3 = render3;
  }

  public boolean getRender4(){
  return render4;
  }
  public void setRender4(boolean render4){
  this.render4 = render4;
  }

  public String CheckValidUser(){

  if(loginname.equals("admin")==true && 
password.equals("admin")==true){
  disable1=false;
  disable2=false;
  render3=false;
  render4=true;
  }
  else{
  if(loginname.equals("emp")==true &&
 password.equals("emp")==true){
  disable1=false;
  disable2=true;
  render3=false;
  render4=true;
  }
  else{
  disable1=true;
  disable2=true;
  render3=true;
  render4=false;
  }
  }

  return "success";
  
  }
}

Rendered Output : This is the first page for the user.

 

If the user fills Login ID as "admin" and Password as "admin":

 

Then user is welcome and all buttons are enabled.

If the user fills Login ID as "emp" and Password as "emp":

 

Then again user is welcome but "Admin Area" button is disabled.

 

If the user is not administrator or employee then there is a message indicating no permission to proceed further and both buttons are disabled.

 

faces-config.xml :

 <?xml version="1.0"?>
<!DOCTYPE faces-config PUBLIC
"-//Sun Microsystems, Inc.//DTD JavaServer Faces Config 1.1//EN"
"http://java.sun.com/dtd/web-facesconfig_1_1.dtd">

<faces-config>

   <managed-bean>
  <managed-bean-name>EnableDisable</managed-bean-name>
  <managed-bean-class>roseindia.EnableDisable</managed-bean-class>
  <managed-bean-scope>request</managed-bean-scope>
   </managed-bean>
   <navigation-rule>
  <from-view-id>/pages/login.jsp</from-view-id>
  <navigation-case>
   <from-action>#{EnableDisable.CheckValidUser}</from-action>
   <from-outcome>success</from-outcome>
   <to-view-id>/pages/EnableDisable.jsp</to-view-id>
  </navigation-case>
   </navigation-rule>
</faces-config>

Download Example Here :