JSF 2 h button

In this tutorial you will learn about the JSF 2 h button tag.

JSF 2 h button

In this tutorial you will learn about the JSF 2 h button tag.

<h:button> tag is rendered to the HTML <input> type of 'button'. This tag specifies the target page URL using the outcome attribute. The target page is activated on the 'onclick'. If the outcome attribute is not specified it treats the current page as the target URL. The 'onclick' attribute of this tag is specified by the value of encoded URL as onclick= "window.location.href='/jsfHButton/output.jsf'; return false;"

Attributes of JSF h button

• id :  This is not a required attribute. This attribute acted as a component's identifier. If this attribute is used it makes the component uniquely identifiable inside it's closest parent.
  
• includeViewParams : This is not a required attribute. This attribute evaluates to a boolean value which specifies whether the page parameters will be included to the requested URI or not.
  
  
• outcome : This is not a required attribute. This attribute is used to specifies the target page that decides the navigation case.
• rendered : This is not a required attribute. It evaluates a boolean expression. Presence of this attribute specifies that whether the current component should be rendered in the Rendered Response phase or not or worked on any later form submission. The default value of this attribute is defined to true.
  
• value : This is not a required 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 i.e used to create a keyboard shortcut which can be accessed by the combination of Alt+accesskeyValue or Alt+Shift+accesskeyValue (browser dependent combination) which transfers the focus to the current element when it is pressed.
  
• alt : This is not a required attribute. This attribute evaluates to the java.lang.String value which expresses an another text based description of the element.
• dir : This is not a required 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)".
  
• fragment : This is not a required attribute. This is a page fragment identifier which should become focused on rendering of the target page. This fragment value is added at the end of the target URL followed by hash (#). # is a part of standard URL syntax.
  
• image : This is not a required attribute. This attribute is used to display the image for this button. Path of this image may be specified as the absolute or relative URL.
  
• lang : This is not a required attribute. This attribute is used to specify the language code for the component.
• 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.
  
• 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 a 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 of 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 mouse 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 inside 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.
  
• 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. This value must be an integer within the range 0 to 32767.
  
• title : This is an optional attribute. This attribute is used to specify the title information which will be displayed as tooltip about the markup elements.
• 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

An example is being given here for you which will demonstrate about how to use the JSF <h:button> tag in JSF applications. For this I have created a very simple two JSF pages. One of them is the input.xhtml page where I have used this tag and the other is output.xhtml where I have written the texts to display.

Directory Structure

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 button Example</title>
</head>
<body>
<f:view>
<p>Click the button below</p>
<h:button value="submit" outcome="output" />
</f:view>
</body>
</html>

output.xhtml

<?xml version="1.0" encoding="UTF-8"?>
<!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"
>

<h:body> 
<p><b>This is output.xhtml page</b></p> 
</h:body>

</html>

web.xml

<?xml version="1.0" encoding="ASCII"?>
<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" version="3.0">
<display-name>jsfHButton</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/jsfHButton/input.jsf in the address bar of the web browser.

Output :

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

1. An input.xhtml page will be look like as below :

2. When you will click the button named 'submit' at the input.xhmtl page then the output.xhtml page will be look like as below :

And when you will see the HTML source code of input.xhtml page, you will see into which HTML tag the JSF <h:button> tag is converted.

<!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">

<head>
<title>JSF 2 h button Example</title>
</head>
<body>
<p>Click the button below</p><input type="button" onclick="window.location.href='/jsfHButton/output.jsf'; return false;" value="submit" />
</body>
</html>