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:
- We can have a direct navigation declaration, without the need to call a bean first.
- If our browser has disabled its Javascript feature, navigation may fail, as the
<h:button>tag generates anonclickevent listener, that handles the navigation throughwindow.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.
