168 total views, 5 views today

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” 

onclick=”window.location.href=’/JSF_Button_Example/faces/Home.xhtml’ 

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”

onclick=”window.location.href=’/JSF_Button_Example/faces/Home.xhtml’;  

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: 


</span

govindan JSF Button Example
Connect me

Govind

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.
Connect!