jsf

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

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

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

0 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Back to top button