Home » Enterprise Java » jsf » Button and CommandButton Example with JSF 2.0

About Thodoris Bais

Avatar photo
Thodoris is an Oracle Certified Associate Java Programmer and currently works as a Junior Software Developer, for Intrasoft International S.A. He holds a diploma at Informatics & Telecommunications Engineering and is interested in continuous development.

Button and CommandButton Example with JSF 2.0

Hello Java code geeks! Today we ‘re gonna take a look at navigation handling, using buttons. Regarding JSF 2.0, both <h:button /> and <h:commandButton /> are used to render HTML input element mechanisms that can guide the navigation through a web application.

1. h:commandButton tag

We first have to declare the bean, which returns the navigation’s outcome in the action attribute. This navigation is handled through a form post, so it will also work in a browser with disabled Javascript.

Let’s have a look at a sample submit button:

<h:commandButton value="Submit" type="submit" action="#{user.login}" />

And here is what is generated to HTML:

<input type="submit" name="xxx" value="Submit" />

Pretty cool, huh?! Ok, let’s see a reset button now:

<h:commandButton value="Reset" type="reset" />
//HTML output
<input type="reset" name="xxx" value="Reset" />

Regarding basic understanding efforts, let’s investigate the difference between a normal button and a same one, with an event listener attached.

Normal button

<h:commandButton type="button"  value="Click Me!" />
//HTML output
<input type="button" name="xxx" value="Click Me!" />

Normal button with onClick event listener

<h:commandButton type="button" value="Click Me!" onclick="alert('Hi from commandButton!');" />	
//HTML output
<input type="button" name="xxx" value="Click Me!" onclick="alert('Hi from commandButton!');" />

2. h:button tag

While on JSF 2.0, we can use the latest button tags, such as <h:commandButton>, so generally, there is no need for the deprecated one, <h:commandButton>, which is available, since JSF 1.x. And if you ‘re still wondering about last sentence’s italics format, this comes from our tag’s attributes:

  1. We can have a direct navigation declaration, without the need to call a bean first.
  2. If our browser has disabled its Javascript feature, navigation may fail, as the <h:button> tag generates an onclick event listener, that handles the navigation through window.location.href.

Just to ensure that noone has questionmarks, here are some very basic examples, using the fore-mentioned tag:

Normal button – no outcome

<h:button value="Click Me!" />			
//HTML output
<input type="button" 
   onclick="window.location.href='/JavaServerFaces/faces/index.xhtml; return false;" 
   value="Click Me!" />

Normal button – with outcome

<h:button value="Click Me!" outcome="login" />			
//HTML output
<input type="button" 
   onclick="window.location.href='/JavaServerFaces/faces/login.xhtml; return false;" 
   value="Click Me!" />

Normal button – with Javascript

<h:button value="Click Me!" onclick="alert('Hi from button!');" />
//HTML output
<input type="button" 
   onclick="alert('Hi from button!');window.location.href='/JavaServerFaces/faces/sample_page.xhtml;return false;" 
   value="Click Me!" />

This was an example of Button and CommandButton in JSF 2.0.

Do you want to know how to develop your skillset to become a Java Rockstar?

Subscribe to our newsletter to start Rocking right now!

To get you started we give you our best selling eBooks for FREE!


1. JPA Mini Book

2. JVM Troubleshooting Guide

3. JUnit Tutorial for Unit Testing

4. Java Annotations Tutorial

5. Java Interview Questions

6. Spring Interview Questions

7. Android UI Design


and many more ....


Receive Java & Developer job alerts in your Area

I have read and agree to the terms & conditions


Notify of

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Inline Feedbacks
View all comments