Buttons and Links

Buttons and Links

• The primary components for navigating within a JSF application
• These tags must be within the scope of an h:form tag to have their values communicated to the server.
• When a button or link is activated, a POST request sends the form data back to the server
• For Example:
• h:commandButton
• h:commandLink
• h:button
• h:link
• h:outputLink

h:commandButton and h:commandLink:

• The primary components for navigating within a JSF application
• h:commandButton renders as a button; h:commandLink is a link;
• When a button or link is activated, a POST request sends the form data back to the server
• The “h:commandLink” tag is released since JSF 1.x, which generates a link act like a submit button when clicked. 
• The “value” attribute is rendered as the anchor text, the “action” attribute is determined the target URL of the HTML “href” attribute.
• Example of h:commandButton

• Submit button

h:commandButton value="submit" type="submit" action="#{user.goLoginPage}"

• Reset button

h:commandButton value="reset" type="reset"

• Normal button

h:commandButton value="button" type="button"

• Normal button with onclick event

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

• Example of h:commandLink
• commandLink

h:commandLink value="Login page"

• commandLink + action

h:commandLink action="#{user.goLoginPage}" value="Login page"

• commandLink + action + parameter

h:commandLink action="#{user.goLoginPage}" value="Login page + Param "
f:param name="username" value="sarthak"
/h:commandLink

h:button and h:link:

• Like h:commandButton and h:commandLink, but when a button or link is activated, a bookmarkable GET request sends the form data back to the server
• 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. 
• The “h:link” tag is a new tag in JSF 2.0, the “value” attribute is rendered as the anchor text, “outcome” attribute is determined the target URL of the HTML “href” attribute. 

• Example of h:button
• Normal button without outcome

h:button value="button"

• Normal button with an outcome

h:button value="buton" outcome="login"

• Normal button with JavaScript.

h:button value="Click Me" onclick="alert('h:button');"

• Example of h:link 
• link + “outcome”

h:link value="Login page" outcome="login"

• link + “outcome” + parammeter

h:link value="Login page + Param " outcome="login"
f:param name="username" value="sarthak"
/h:link

• link + “outcome” + image

h:link outcome="login"
h:graphicImage library="images" name="sofa.png"
/h:link

h:outputLink:

• Generates an HTML anchor element that takes the user to a resource outside the JSF framework.
• The “h:outputLink” tag is released in JSF 1.x, the body of the tag is rendered as the anchor text, “value” attribute is rendered as the value of the HTML “href” attribute directly.
• Example of h:outputLink
• outputLink

h:outputLink> Login page

• outputLink + “value”

h:outputLink value="login.xhtml">Login page

Summary: