Home Tutorials Java Jsf Jsf2TagLibrary Html JSF html commandButton tag

JSF html commandButton tag

Posted in : Java Posted on : June 25, 2012 at 8:16 PM Comments : [ 0 ]

In this tutorial you will learn about the HTML commandButton tag.

JSF html commandButton tag

In this tutorial you will learn about the HTML commandButton tag.

<h:commandButton> tag in JSF is translated into the HTML <input> element. 'value' and 'name' attribute of this tag is encoded by rendering the current value of the component and the clientId respectively. But, in case of 'image' attribute is defined for this tag then it is rendered as the 'src' attribute. When this component is rendered each of the children of the UIParameter will be rendered by this renderer.

Attributes of <h:commandButton>

action : This attribute is not forcibly required to use with this tag. This attribute is used to invoke the application action. Expression used for this attribute must be a public method with no parameter and returns an object that is passed to the NavigationHandler for the current application.
NOTE : If you do not want to use the method for invoking the application action you may simply use the name of action which will be passed to the NavigationHandler.
actionListener : This is an optional attribute. This attribute is used when you are required to invoke an actionListener to notified on the activation of this component. This actionListener must be matched to the actionListener(javax.faces.event.ActionEvent) with no return type.
id : This is an optional attribute. This attribute is an unique identifier for this component.
immediate : This is an optional attribute. This attribute is acted as a flag which evaluates the boolean value that specifies whether the notifications should be delivered to the concerned listeners and actions immediately or not. Activated appearance of this attribute specifies that the delivery of notification to the concerned listeners and actions should be in the Apply Request Values phase(immediately) instead to wait for Invoke Application phase.
rendered : This is an optional attribute. This attribute is acted as a flag which evaluates to a boolean value that specifies whether the current component should be rendered in the Rendered Response phase or not or worked on any later form submission.
value : This is an optional attribute. This attribute evaluated to an java.lang.Object and is used to specified the current value of this tag.
accesskey : This is an optional attribute. This attribute evaluates the java.lang.String value, acted as an access key which transfers the focus to the current element when it is pressed.
alt : This is an optional attribute. This attribute evaluates to the java.lang.String value which expresses an another text based description of the element.
dir : This is an optional attribute. This attribute evaluates to the java.lang.String value that suggests the direction for the text which doesn't inherit the property of maintaining a direction. The allowable values are "LTR (Left-to-Right)" and "RTL (Right-to-Left)".
disabled : This is an optional attribute. This attribute evaluates to a java.lang.Boolean value acted as an flag which 'false' value specifies that the attribute shall not be rendered whereas, the 'true' value specifies that the attribute shall be rendered as disabled="disabled".
image : This is an optional attribute. This attribute evaluates to a java.lang.String value which specifies the path of the image. Path of the image may be a relative or absolute URL.
label : This is an optional attribute. This attribute evaluates to a java.lang.String value used to specifies the user presentable name.
lang : This is an optional attribute. This attribute evaluates to a java.lang.String value.
onblur : This is an optional attribute. This attribute evaluates to a java.lang.String value, specifies that when the focus of this element is lost a JavaScript code is executed.
onchange : This is an optional attribute. This attribute evaluates to a java.lang.String value, specifies that when the focus of this element is lost and the value of the element is changed when the focus is gained a JavaScript code is executed.
onclick : This is an optional attribute. This attribute evaluates to a java.lang.String value, specifies that when a button will be clicked a JavaScript code will be executed.
ondblclick : This is an optional attribute. This attribute evaluates to a java.lang.String value, specifies that when a button will be clicked double a JavaScript code will be executed.
onfocus : This is an optional attribute. This attribute evaluates to a java.lang.String value, specifies that when a button gets the focus a JavaScript code will be executed.
onkeydown : This is an optional attribute. This attribute evaluates to java.lang.String value, specifies that on a key pressed down throughout the current element a JavaScript code is executed.
onkeypress : This is an optional attribute. This attribute evaluates to a java.lang.String value, specifies that when a key is pressed and released throughout the current element a JavaScript code is executed.
onkeyup : This is an optional attribute. This attribute evaluates to a java.lang.String value. A JavaScript code is executed on releasing the key over the current element.
onmousedown : This is an optional attribute. This attribute evaluates to a java.lang.String value. A JavaScript code is run on pressing down the pointer.
onmousemove : This is an optional attribute. This attribute evaluates to a java.lang.String value. A JavaScript code is run on the pointer button is moved in the current element.
onmouseout : This is an optional attribute. This attribute evaluates to a java.lang.String value. A JavaScript code is run on the pointer button is moved out from the current element.
onmouseover : This is an optional attribute. This attribute evaluates to a java.lang.String value. A JavaScript code is run on the pointer button is moved onto the current element.
onmouseup : This is an optional attribute. This attribute evaluates to a java.lang.String value. A JavaScript code is run on the pointer button is released over the current element.
onselect : This is an optional attribute. This attribute evaluates to a java.lang.String value. A JavaScript code is run on the selection of the text inside the current element.
readonly : This is an optional attribute. This attribute evaluates to a java.lang.Boolean value, which specifies that whether this component will be prohibited to change by the user or not. The 'true' value of this attribute specifies that this component will be prohibited to change by the user.
style : This is an optional attribute. This attribute evaluates to a java.lang.String value, which specifies that the CSS style will be applied to this component when rendered.
styleClass : This is an optional attribute. This attribute evaluates to a java.lang.String value specifies the applicable CSS style space-separated list to applied at the time of rendering. "class" attribute must be used to pass this value.
tabindex : This is an optional attribute. This attribute evaluates to a java.lang.String value specifies the tabbing order value must be an integer within the range 0 to 32767.
title : This is an optional attribute. This attribute evaluates to a java.lang.String value specifies the title information about markup elements.
type : This is an optional attribute. This attribute evaluates to a java.lang.String value specifies the type of button. Value of this attribute can be "submit", "button", "reset". The default value of this attribute is "submit".
binding : This is an optional attribute. This attribute evaluates to a javax.faces.component.UIComponent specified for linking the component with the property of backing bean.

Example :

Here I am giving a simple example of how to use the <h:commandButton> in your application. In this example I will create a simple JavaBeans to set and get the value through inputTextbox and outputText box. Then I will create the JSF pages to use this tag. This example will demonstrate you what will the default type of this tag, how can you assign a value for this component and how to use the action attribute.

Directory Structure

NameBean.java

package devmanuals;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;

@ManagedBean(name="nameBean")
@RequestScoped
public class NameBean {

private String name;

public String getName() {
return name;
}

public void setName(String name) {
this.name = name;
}

public String appAction()
{
return "output";
}
}

input.xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">

<head>
<title>JSF 2 h commandButton</title>
</head>
<body>
<f:view>
<h:form>
Enter Name : <h:inputText value="#{nameBean.name}"/>
<h:commandButton value="Find Name" action="#{nameBean.appAction}" />
</h:form>
</f:view>
</body>
</html>

output.xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">

<head>
</head>
<body>
<f:view>
<h:outputText value="Your Name is : #{nameBean.name}" />
</f:view>
</body>
</html>

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_3_0.xsd" id="WebApp_ID" version="3.0">
<display-name>jsfCommandButton</display-name>
<welcome-file-list>
<welcome-file>input.xhtml</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>
<url-pattern>*.jsf</url-pattern>
<url-pattern>*.xhtml</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>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.faces</url-pattern>
</servlet-mapping>
</web-app>

How To Run

After copying the above code paste them to the respective files or by downloading the code from Download Source Code start your web server and then use the following link http://localhost:8181/jsfCommandButton/input.jsf in the address bar of the web browser.

Output :

When you will execute the above example you will get the output as follows :

1. The main page will look like as follows :