| ☰ See All Chapters |
JSF commandButton commandLink outputLink
JSF provides the following tags to support buttons and links:
h:commandButton
h:commandLink
h:outputLink
The h:commandButton and h:commandLink actions both represent JSF command components—the JSF framework fires action events and invokes actions when a button or link is activated.
The h:outputLink tag generates an HTML anchor element that points to a resource such as an image or a web page. Clicking the generated link takes you to the designated resource without further involving the JSF framework.
Both h:commandButton and h:commandLink submit requests and subsequently invokethe JSF life cycle.
The h:commandButton tag generates an HTML input element whose type is button, image, submit, or reset, depending on the attributes you specify.
The h:commandLink tag generates an HTML anchor element that acts like a form submit button. Here button will not be displayed but a string value will be displayed which appears like a link in web page. When this link/string value is pressed the form will be displayed.
<h:outputLink> tag of JSF 2 html tag library is rendered an HTML <a> (anchor) element. Body of this tag is rendered as the link text (anchor text). The 'value' attribute of this tag specifies the URL linked-to. This is as similar to the value what we were supplied to the HTML <a> 'href' attribute. So, with this tag the navigation rule can't be applied.
Like h:commandLink, h:outputLink generates an HTML anchor element. But unlike h:commandLink, h:outputLink does not generate JavaScript to make the link act like a submit button. The value of the h:outputLink value attribute is used for the anchor’s href attribute, and the contents of the h:outputLink body are used to populate the body of the anchor element.
Attributes of h:commandButton and h:commandLink
Attribute | Description |
action | This attribute is used to invoke the application action. If specified as method expression: <h:commandButton value="Login" action="{managedBean.methodName}/> Method used in the expression must be a public method with no parameter and should return an object which will be passed to the NavigationHandler for the current application. If specified as a String value: If you do not want to use the method for invoking the application action you may simply use the name of the action which will be passed to the NavigationHandler |
actionListener | This attribute is used when you are required to invoke an actionListener to notify on the activation of this component. This actionListener must be matched to the actionListener (javax.faces.event.ActionEvent) with no return type. |
charset | (For h:commandLink only) This attribute is used to identify the character encoding of the resources assigned by this hyperlink. |
image | (For h:commandButton only) This attribute evaluates to a java.lang.String value which specifies the path of the image. Path of the image may be a relative or absolute URL. |
immediate | Value for this attribute should be a Boolean. If false (the default), actions and action listeners are invoked at the end of the request life cycle; if true, actions and action listeners are invoked at the beginning of the life cycle. |
type | For h:commandButton: This attribute evaluates to a java.lang.String value and this specifies the type of Button. Value of thus attribute can be "submit", "button", "reset". The default value of this attribute is "submit". If thus attribute is not used then this attribute is considered with default value. |
| For h:commandLink: This attribute is used to specify the MIME type (content type) of the resource assigned via this commandLink, for example text/html, image/png, text/css etc.. |
value | The label displayed by the button or link. You can specify a string or a value expression. |
JSF commandButton commandLink outputLink examples
Example | Output |
<h:commandButton value="Submit" type="submit" /> | |
<h:commandButton value="Reset" type="reset" /> | |
<h:commandButton value="Click here to pop alert" onclick="alert('button clicked')" type="button" /> | |
<h:commandButton value="Disabled" disabled="#{not loginBean.buttonEnabled}" />
---------- public class LoginBean { private boolean buttonEnabled = false; //Setters and Getters }
| |
<h:commandButton value="#{loginBean.buttonText}" type="reset" />
---------- public class LoginBean { private String buttonText = "Click Here"; //Setters and Getters }
| |
<h:commandLink> <h:outputText value="Register" /> </h:commandLink>
| |
<h:commandLink > <h:outputText value="#{loginBean.linkText}" /> </h:commandLink> ----------
public class LoginBean { private String linkText = "Click Here To Register"; // Setters and Getters }
| |
<h:commandLink> <h:outputText value="#{loginBean.linkText}" /> <h:graphicImage value="register.png" /> </h:commandLink> ----------
public class LoginBean { private String linkText = "Click Here To Register"; // Setters and Getters }
| |
<h:commandLink value="welcome" actionListener="#{loginBean.onLinkActivation}" action="#{loginBean.onLinkActivated}"></h:commandLink>
| |
<h:outputLink value="https://java4coding.com"> <h:graphicImage value="logo.png" /> <h:outputText value="www.java4coding.com" /> </h:outputLink>
| |
<h:outputLink value="#{loginBean.url}"> <h:outputText value="#{loginBean.welcomeLinkText}" /> </h:outputLink> ----------
public class LoginBean { private String url = "www.java4coding.com"; private String welcomeLinkText = "Welcome to www.java4coding.com"; // Setters and Getters } | |
<h:outputLink value="#welcome"> <h:outputText value="Welcome" style="font-style: italic" /> </h:outputLink> | |
<h:outputLink value="#contactus" title="Contact Us"> <h:outputText value="Contact Us" /> </h:outputLink>
| |
<h:outputLink value="#aboutus" title="About Us"> <h2>About Us</h2> </h:outputLink>
|
All Chapters
