JSF 2 CommandButton Example

The h:commandButton component is an important one among those components that are provided by JSF. This component does render an HTML submit button that work as a simple <input type=”submit”/>. JSF 2 does enhance the h:commandButton by allowing the command to invoke an associated action by passing a parameters for it. The main attribute of the h:commandButton is an action attribute that accepts a method-binding expression for a backing bean action (method) to be invoked when the user has clicked on the button. The method-binding expression has the following roles to be accepted as a proper action.

The defined method (action) in the backing bean should have a public access modifier.
The defined method (action) in the backing bean should have a String as returned type. (This string token will be consumed by the JavaServer Faces Navigation Handler).
Starting with JSF 2.0, the defined method can accept a parameter values in the method signature, this feature is useful for providing parameters to the actions of buttons and links. When a method reference is evaluated, the parameters are evaluated and passed to the method.

The h:commandButton and h:commandLink are the primary components for navigating within a JSF application, when a button or link is clicked (activated), a POST request sends the form data back to the server and the JSF framework lifecycle has started. The main difference between h:commandButton and h:commandLink that the latter provides a predefined code at the onclick JavaScript attribute

Also Read:

JSF 2 Tutorials

JSF Tutorials

Introduction to JSF

1. Managed Bean

LoginBean.java

package net.javabeat.jsf;

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

@ManagedBean
@SessionScoped
public class LoginBean {
	private String username = "";
	private String password = "";
	private String authority = "";

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

	public String getAuthority() {
		return authority;
	}
	public void setAuthority(String authority) {
		this.authority = authority;
	}
	public String login(String type){
		this.authority = type;
		if(this.username.isEmpty() == false && this.username.equalsIgnoreCase("Josha")
				&& this.password.isEmpty() == false && this.password.equals("Josha1@#$")){
			return "success";
		}
		return "failure";
	}
}

2. The Views

login.xhtml

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core">
<h:form>
	<h1>
		<h:outputText value="JavaBeat JSF 2.2 Examples" />
	</h1>
	<h2>
		<h:outputText value="CommandButton Example" />
	</h2>
	<table>
		<tr><td>Enter Your Username : </td><td><h:inputText id="username" value="#{loginBean.username}"/></td></tr>
		<tr><td>Enter Your Password : </td><td><h:inputSecret value="#{loginBean.password}"/></td></tr>
		<tr><td colspan="2"><h:commandButton value="Login" action="#{loginBean.login('Admin')}"/></td></tr>
	</table>
	<br/>
</h:form>
</html>

success.xhtml

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core">
<h:form>
	<h1>
		<h:outputText value="JavaBeat JSF 2.2 Examples" />
	</h1>
	<h2>
		<h:outputText value="CommandButton Example" />
	</h2>
	Welcome <h:outputText value="#{loginBean.username}"/>
	<br/>
	You're Logged in By <h:outputText value="#{loginBean.authority}"/> Authority
	<br/>
</h:form>
</html>

failure.xhtml

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core">
<h:form>
	<h1>
		<h:outputText value="JavaBeat JSF 2.2 Examples" />
	</h1>
	<h2>
		<h:outputText value="CommandButton Example" />
	</h2>
		Login Failure, Please Try Again !
	<br/>
</h:form>
</html>

3. The Deployment Descriptor (web.xml)

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" metadata-complete="true">
	<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.faces.application.CONFIG_FILES</param-name>
		<param-value>/WEB-INF/faces-config.xml</param-value>
	</context-param>
	<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>
	<servlet-mapping>
		<servlet-name>Faces Servlet</servlet-name>
		<url-pattern>*.xhtml</url-pattern>
	</servlet-mapping>
	<listener>
		<listener-class>com.sun.faces.config.ConfigureListener</listener-class>
	</listener>
</web-app>

4. JSF 2 CommandButton Demo

The below snapshots demonstrates the using of h:commandButton with JSF 2, in that the action represented by the h:commandButton will be used for sending a parameter determines the type of authority that the user has logged with. The h:commandButton does associate with the a navigation handler, so a navigation to a proper view will be happened in case the login process has succeeded or failed.

[wpdm_file id=13]

1. Managed Bean

2. The Views

3. The Deployment Descriptor (web.xml)

4. JSF 2 CommandButton Demo

About Amr Mohammed