Jsf commandbutton html tag

by

JSF h:commandButton tag is used to render HTML input of type=”submit” button.

JSF tag:

<h:commandButton value="Click Here" />

Rendered HTML tag:

<input type="submit" name="j_idt10:j_idt13" value="Click Here" />

Attribute of h:commandButton tag:

Attribute Description
id id for the tag
rendered A boolean value; false would suppress rendering
styleClass Cascading stylesheet (CSS) class name
value value binding
valueChangeListener A method binding that responds to value changes
required A boolean; if true, marks the tag as required
coords Coordinates for an element whose shape is a rectangle, circle, or polygon
dir Direction for text. Valid values are ltr (left to right) and rtl (right to left).
disabled Disabled state of an input element or button
style Inline style information
tabindex Numerical value specifying a tab index
target The name of a frame in which a document is opened
title A title used for accessibility. Browsers typically create tooltips for the title’s value
width Width of an element
onblur Event handler for losing focus
onchange Event handler for value changes
onclick Event handler for Mouse button clicked over the element
ondblclick Event handler for Mouse button double-clicked
onfocus Event handler for element received focus
onkeydown Event handler for Key pressed
onkeypress Event handler for Key pressed and released
onkeyup Event handler for Key released
onmousedown Event handler for Mouse button pressed
onmousemove Event handler for mouse moved
onmouseout Event handler for mouse left
onmouseover Event handler for mouse moved onto
onmouseup Event handler for mouse button released
onreset Event handler for form reset
onselect Event handler for Text selected

Example:

test.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"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets">
	<h:head>
		<title>JSF command button example.</title> 
	</h:head>
    <h:body> 
      <h3>JSF command button example.</h3>
      <h:form>
         <h:commandButton value="Say Hello" action="welcome" />
      </h:form>
    </h:body>
 
</html>

welcome.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"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets">
	<h:head>
		<title>JSF command button example.</title>
	</h:head>
    <h:body> 
      <h3>Hello World.</h3>
    </h:body>
 
</html>

faces-config.xml

<?xml version="1.0" encoding="windows-1252"?>
<faces-config version="2.0" 
xmlns="http://java.sun.com/xml/ns/javaee" 
xmlns:xi="http://www.w3.org/2001/XInclude" 
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_2_0.xsd">
 
<navigation-rule>
   <from-view-id>test.xhtml</from-view-id>
   <navigation-case>
      <from-outcome>success</from-outcome>
      <to-view-id>welcome.xhtml</to-view-id>
   </navigation-case>   
</navigation-rule>
 
</faces-config>

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="3.0" 
    	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-app_3_0.xsd">
 
    <servlet>
        <servlet-name>faces</servlet-name>
        <servlet-class>
         javax.faces.webapp.FacesServlet
	<servlet-mapping>
        <servlet-name>faces</servlet-name>
        <url-pattern>/faces/*</url-pattern>
    </servlet-mapping>
 
</web-app>

URL:

http://localhost:7001/JSFExample55/faces/test.xhtml

Output:

JSF example55-1
Click on Say Hello button.
JSF example55-2
 
Download this example.