Main Tutorials

JSF 2 button and commandButton example

In JSF 2.0, both <h:button /> and <h:commandButton /> tags are used to render HTML input element of type button, with different mechanism to handle the navigation.

1. JSF h:commandButton example

The “h:commandButton” tag is released since JSF 1.x, you can declare the bean, which return the navigation outcome in the “action” attribute. If browser’s with JavaScript disabled, the navigation is still working, because the navigation is handled via form post.

1. Submit button


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

//HTML output
<input type="submit" name="xxx" value="submit" /> 

2. Reset button


//JSF
<h:commandButton value="reset" type="reset" />

//HTML output
<input type="reset" name="xxx" value="reset" /> 

3. Normal button


//JSF
<h:commandButton value="button" type="button" />

//HTML output
<input type="button" name="xxx" value="button" /> 

4. Normal button with onclick event


//JSF
<h:commandButton value="Click Me" type="button" onclick="alert('h:commandButton');" />	

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

2. JSF h:button example

The “h:button” is a new tag in JSF 2.0, you can declared the navigation outcome directly in the “outcome” attribute, no need to call a bean to return an outcome like “h:commandButton” above. But, if browser’s with JavaScript disabled, the navigation will failed, because the “h:button” tag is generate an “onclick” event to handle the navigation via “window.location.href”. See examples :

1. Normal button without outcome


//JSF
<h:button value="buton" />			

//HTML output
<input type="button" 
   onclick="window.location.href='/JavaServerFaces/faces/currentpage.xhtml; return false;" 
   value="buton" /> 

P.S if the outcome attribute is omitted, the current page URL will treat as the outcome.

2. Normal button with an outcome


//JSF
<h:button value="buton" outcome="login" />			

//HTML output
<input type="button" 
   onclick="window.location.href='/JavaServerFaces/faces/login.xhtml; return false;" 
   value="buton" /> 

3. Normal button with JavaScript.


//JSF
<h:button value="Click Me" onclick="alert('h:button');" />

//HTML output
<input type="button" 
   onclick="alert('h:button');window.location.href='/JavaServerFaces/faces/page.xhtml;return false;" 
   value="Click Me" /> 
My thought…
No really sure why JSF 2.0 released this “h:button” tag, the JavaScript redirection is not practical, especially in JavaScript disabled browser. The best is integrate the “outcome” attribute into the “h:commandButton” tag, hope it can be done in future release.

Download Source Code

Reference

  1. JSF <h:button /> JavaDoc
  2. JSF <h:commandButton /> JavaDoc

About Author

author image
Founder of Mkyong.com, love Java and open source stuff. Follow him on Twitter. If you like my tutorials, consider make a donation to these charities.

Comments

Subscribe
Notify of
7 Comments
Most Voted
Newest Oldest
Inline Feedbacks
View all comments
toto
10 years ago

“No really sure why JSF 2.0 released this “h:button” tag”

For developers to issue GET requests instead of POST (default request type issued by commanButton and commandLink).

subbareddy
11 years ago

Hello sir,

Here i am posting my problem.I am new to JSF. I am trying to develop one simple application. But Here i am facing some problems. That are
i am using that command.But that not worked.Here, i am also trying to use tag but this button not showing in my eclipse tab.Please post any solution.

Thanks & regards
Subbareddy.N

aarif mohammad
11 years ago

hi MkYong,

please explore what is the difference between type=”reset” and type=”submit”

in respect to the retaing of the text inputs.

regards
aarifmkhan

Antoine
5 years ago

To add AWESOME-ICON into a jsf button, use placeholder p:elementName=”button” attribute on h:commandButton to change element tag from “input” to “button”, then you can put into button rectangle the children ( an icon like )

AskarOff Askat
8 years ago

What’s the Difference and

Nag
9 years ago

Very Good for Java developers …very nice site.. Thanks a lot.

Koray
10 years ago

You can use:

with no problems.

This is false information.

So again, no need to call a bean..