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

About Thodoris Bais

Thodoris Bais
Thodoris Bais pursues a diploma at Informatics & Telecommunications Engineering; he has worked as a Junior Java Developer for high-profile clients, specializes in Java and looks forward to being a successful IT professional. He is interested in entrepreneurship and is also a quick learner and curious about new technologies.

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:

//JSF
<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

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

Normal button with onClick event listener

//JSF
<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

//JSF
<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

//JSF
<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

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

Happy Easter to you and your families!
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 ....

Do you want to know how to develop your skillset and become a ...

Subscribe to our newsletter to start Rocking right now!

To get you started we give you our best selling eBooks for FREE!
Get ready to Rock!
To download the books, please verify your email address by following the instructions found on the email we just sent you.

THANK YOU!

Close