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.

Thodoris Bais

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.
Notify of

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

Inline Feedbacks
View all comments
Back to top button