JSF Button Example

The JSF button refers its outcome attribute for Navigation. It uses Javascript OnClick() method for the navigation so if the browser does not has the JavaScript support then the Navigation in h:button won’t work.

The Button component will render an HTML <input> component of type Button like below. Notice the JavaScript OnClick() Method

JSF => <h:button value=”h:button” outcome=”home”/>

     HTML => <input type=”button” 


return false;value=”h:button” />


The Button component will render an HTML <input> component of type image if image attribute is specified as shown below; .

     JSF => <h:button value=”h:button” outcome=”home” image=”pumba.jpg” style=”width:240px;height:240px;” />

     HTML =>

<input type=”imagesrc=”pumba.jpg” return false;” value=”h:button”


style=”width:240px;height:240px;” />


Here below I have described an example of h:button


JSF h:button Example


Below is the Index.jsf Page contains two JSF button. The first component only do navigation and other renders an image and do navigation



The JSF Button renders like below in Browser


JSF_Button_Example JSF Button Example


Download the Source Project: 


govindan JSF Button Example
Connect me


Thank you for visiting my personal blog. Myself Govindan, Software Developer by profession since 2006 and hence I started this blog early in 2016 and ever since I've been writing about technologies experienced and learnings of everyday life.

The views expressed on this blog are my personal views and do not necessarily reflect the views of my employer.

Please feeling free to reach me on any comments and feedbacks you have. Would be more than glad to listen and reply 🙂
govindan JSF Button Example
Connect me
By | 2017-11-19T17:37:51+00:00 November 19th, 2017|Categories: JSF|Tags: , , , |0 Comments
Like us on Facebook.