Mock tests, Interview questions, Tutorials and Tech news
 
 
Home > Programming / tutorials > Difference Between h:commandButton , h:commandLink and h:outputLink in JSF

Difference Between h:commandButton , h:commandLink and h:outputLink in JSF

September 7th, 2009 Leave a comment Go to comments

Buttons and Links are the way to send request to the server. JSF has 3 such useful tags to do these:

  1. h:commandLink
  2. h:commandbutton
  3. h:outputLink

When we have all 3 tags, it’s a common question for an end user ask which tag should be used in which situations? Though there is no exact rule, by  knowing the difference and function, we can decide where each tag can be used.

Both h:commandLink and h:commandButton requests involve JSF’s framework and initiates the lifecycle events. But the h:outputLink will not. Below are little more details of these tags

h:commandButton Tag:

  • This tag generates HTML’s <input> element.  So you can use this tag everywhere you can decide to use a input button type o component.

To submit a form:

<h:commandButton value=”Button Text To Be displayed” />

  • By adding type=”reset” you can add reset function to form. The default type=”submit”
  • h:commandButton has styleClass and style tags to apply style. styleClass can be used to specify the CSS class and style to directly the style elements,
  • H:commandButton has got attribute called image. This is very useful. In case you want to display a button image rather than a simple button, you don’t have to do it in stylesheet. You can simply specify the image path like below:

<h:commandButton image=”/images/arrow_box.gif” value=”Reset” />

The image path is relative to context path. If you have both image and value attributes, image will be displayed as a button.

  • The 2 other important attributes are actionListener and action attributes. Many times they sound confusing.

The actionListener function always gets called before any ‘Action’ function.  From actionListener function, the JSF page can’t navigate. But here user can perform operations like validations etc(all the components of the page can be accessed.)

Action specifies the function called after submitting the page and after all actionListener functions are being called. The navigation rules will be applied using the outcome of action function on the page.

  • If you want some javascript to be executed after clicking button, you can add your javascript function, and specify it as value to onclick attribute. The onclick javascript function should return true to submit the page.

<h:commandButton  value=”"  action=”#{loginBean.logout}”></h:commandButton>

function logoutAction(){

if (!confirm(‘Are you sure you want to Logout?’))

return false;

else

return true;

}

h:commadLink Tag:

This tag generates HTML’s  ‘<a href ‘ link tag and some JavaScript functions which make the link to act as a submit button.

The main difference between h:commandButton and h:commandLink is how to use onclick attribute.  If you see generate html code from commandLink tag, you can notice some onclick events are already being added. Therefore you should be careful while writing onclick event functions.

For example if you want a confirm dialogue when logout and if you write

<h:commandLink  onclick=”return confirm(‘Are you sure you want to logout?’);” />

It will not work. The dialogue will appear and the page will be submitted even if you select OK or Cancel. This is because of the onclick javascript code added automatically for the commandLink. To prevent page submission, you have to explicitly add simple ‘ return; ‘ to your onclick function something like below:

<h:commandLink  onclick=”if(!confirmFuncion()) return;” />

function confirmFuncion(){

if(!confirm(‘Are you sure you want to delete?’))

return false;

return true;

}

Another problem faced by me while using h:commandLink was to make it submit from the javascript.

A code something like

Document.getElementById(“frm1:linkLogout”).click();

Do not work as desired. It do not submit the page properly. But it works for commandButton.

One more difference between h:commandButton and h:commandLink is, one can place as many JSF HTML tags inside a <h:commandLink> tags. When you do so, all of them appear as part of your link. But with command button its not. If you add JSF HTML elements inside h:command button tag, they will not be part of the button.

Although both the h:commandButton and h:commandLinks submit the requests and invoke JSF lifecycle, one might need a link many times rather than button. In that case commandLink is useful.

h:outputLink Tag

h:outputLink can be used similar to a simple anchor HTML tag in jsf pages. It generates simple HTML’s <a href tag, but it will not submit the page. It just calls another link. It generates a GET request. You can also use this tag to add links to named anchors in the same page:

Eg: if you have something in you jsf page:

<a> Part 1: </a>

You can use h:outputLink to navigate to this portion something like this:

<h:outputLink value=”#1” />

Also you can send parameters to the page you are calling.

<h:outputLink value=”http://www.skill-guru.com” >

<f:param name=”testVar” value=”test” />

</h:outputLink>

When this link is clicked, the testVar parameter is appended to the value url. Output link can’t be used to submit a page.

Be Sociable, Share!
Categories: Programming / tutorials Tags:
  1. Felipe
    February 24th, 2013 at 19:30 | #1

    And h:link?
    The h:link tag also create a tag A, what the difference?

  2. May 26th, 2012 at 23:00 | #2

    I appreciate your article on this topics.Please prove a example on these differences.
    Thanks a lot

  3. May 26th, 2012 at 22:58 | #3

    It is very good article to know about these differences. Please write more articles on these topics like difference between this and that.

  4. October 3rd, 2011 at 12:20 | #4

    Wonderful data. I’ll be guaranteed to check back often.

  1. No trackbacks yet.

Get Adobe Flash playerPlugin by wpburn.com wordpress themes