JSF 2 html commandLink

In this tutorial you will learn about the tag in JSF 2.

JSF 2 html commandLink

In this tutorial you will learn about the <h:commandLink> tag in JSF 2.

<h:commandLink> tag in JSF is used since its 1.x release. This tag renders an <a> element of the HTML by which a link is generated that on click acted like the submit button of a form.

Attributes of <h:commandLink>

• action : This is an optional attribute. This attribute is used to specify the which application action has to be invoked i.e using this attribute JSF knows that where it has to go. Using this attribute an target URL can be specified.
  
  
• actionListener : This is an optional attribute. This attribute is used to notify the action listener method on activation of link.
• id : This is an optional attribute. This attribute is used to make this tag uniquely identifiable.
• immediate : This is an optional attribute. This attribute evaluates to a boolean value which indicates that on the activation of link the concerned listeners and actions should get the notifications immediately i.e the notifications should be get by the concerned listener and actions on the Apply Request phase instead to wait for Invoke Application phase.
  
  
• rendered : This is an optional attribute. This attribute evaluates to a boolean value which indicates that whether the current component should be rendered in the Render Response Phase or not or worked on any later form submission.
  
  
• value : This is an optional attribute. This attribute is used to specify a value for this tag.
• accesskey : This is an optional attribute. This attribute evaluates the java.lang.String value, acted as an access key i.e used to create a keyboard shortcut which can be accessed by the combination of Alt+accesskeyValue or Alt+Shift+accesskeyValue (browser dependent combination) which transfers the focus to the current element when it is pressed.
  
  
• charset : This is an optional attribute. This attribute is used to identify the character encoding of the resource assigned by this hyperlink.
• coords : This is an optional attribute. This attribute is used to specify the shape of the image and its co-ordinate (i.e position for image to show) used in the client side image maps. for example : "rect: left-x, top-y, right-x, bottom-y".
  
  
• dir : This is an optional attribute. This attribute evaluates to the java.lang.String value that suggests the direction for the text which doesn't inherit the property of maintaining a direction. The allowable values are "LTR (Left-to-Right)" and "RTL (Right-to-Left)".
  
  
• disabled : This is an optional attribute. This attribute evaluates to a java.lang.Boolean value acted as an flag which 'true' value disables the current element whereas, the 'false' value enables the current element.
  
  
• hreflang : This is an optional attribute. This attribute is specifies the base language for the resource assigned by the current hyperlink.
• lang : This is an optional attribute. This attribute is used to give the description of language of the generated HTML output.
• onblur : This is an optional attribute. This attribute specifies the onblur event i.e the JavaScript code is executed when the blur event is occurred.
• onclick : This is an optional attribute. This attribute specifies the onclick event i.e the JavaScript code is executed when a click is done on the component.
• ondblclick : This is an optional attribute. This attribute specifies the obdblclick event i.e the JavaScript code is executed when this component is clicked double.
  
  
• onfocus : This is an optional attribute. This attribute specifies the onfocus event i.e the JavaScript code is executed when commandLink is focused.
  
• onkeydown : This is an optional attribute. This attribute specifies the onkeydown event i.e the JavaScript code is executed when the key of keyboard is pressesed.
  
  
• onkeypress : This is an optional attribute. This attribute specifies the onkeypress event i.e the JavaScript code is executed when key of keyboard is holds down or pressed.
  
  
• onkeyup : This is an optional attribute. This attribute specifies the onkeyup event i.e the JavaScript code is executed when the key of keyboard is released.
  
• onmousedown : This is an optional attribute. This attribute specifies the onmousedown event i.e the JavaScript code is executed when a mouse button is clicked.
  
  
• onmousemove : This is an optional attribute. This attribute specifies the onmousemove event i.e. the JavaScript code is executed when the mouse pointer is moved.
  
  
• onmouseout : This is an optional attribute. This attribute specifies the onmouseout event i.e the JavaScript code is executed when the mouse pointer is moved away from the commandLink.
  
  
• onmouseover : This is an optional attribute. This attribute specifies the onmouseover event i.e the JavaScript code is executed when the mouse pointer is moved over the commandLink.
  
  
• onmouseup : This is an optional attribute. This attribute specifies the onmouseup event i.e the JavaScript code is executed when the mouse button is relesased.
  
  
• rel : This is an optional attribute. This attribute describes the relationship of current document to the URL specified by this hyperlink. It's values are of link types these link types are the space-separated list of link types.
  
  
• rev : This is an optional attribute. This attribute describes the reverse link from the specified URL by this hyperlink to the current document. It's values are of link types these link types are the space-separated list of link types.
  
  
• shape : This is an optional attribute. This attribute is used to specify the shape of the image used in the client side image maps. The "default" value specifies the shape for image in entire region as well as the valid values are rect (for rectangle), circle (for circle) and poly (for polygon).
  
  
• style : This is an optional attribute. This attribute is used to add the inline CSS styles that are to be applied on the commandLink to specify how it will be displayed.
  
  
• styleClass : This is an optional attribute. This attribute is used to assign the external CSS style class/es that are to be applied on the commandLink to specify how it will be displayed.
  
  
• tabindex : This is an optional attribute. This attribute is used to specify the tabbing order of this component in which Tab key pressed it has to be selected. Value of this attribute must be an integer within the range 0-32767. The component value 0 indicates the first component which is selected in the Tab key press.
   
• target : This is an optional attribute. This attribute specifies the frame name where the resource get by this hyperlink should be displayed.
• title : This is an optional attribute. This attribute specifies the text information of the component as a tooltip when the mouse pointer is hover over this commandLink.
  
• type : This is an optional attribute. 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.
  
  
• binding : This is an optional attribute. This attribute evaluates to a javax.faces.component.UIComponent specified for linking the component with the property of backing bean.

Example :

Here I am giving a simple example which will demonstrate you about how a <h:commandLink> tag can be used in the JSF applications. In this example you I have used this tag with the attributes "title", "action", "value", "accesskey". An action attribute specifies that which application action will be invoked and the attribute value specifies the current value of this commandLink, the attribute title specifies that the text information to be displayed as tooltip when the mouse pointer is hover over this commandLink, and the accesskey attribute specifies the keyboard shortcut to transfer the focus by pressing the key.

Directory Structure

NameBean.java

package devmanuals;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;

@ManagedBean(name="nameBean")
@RequestScoped
public class NameBean {

private String name;

public String getName() {
return name;
}

public void setName(String name) {
this.name = name;
}
}

input.xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">

<head>
<title>JSF 2 h commandLink</title>
</head>
<body>
<f:view>
<h:form>
Enter Name : <h:inputText value="#{nameBean.name}"/>
<h:commandLink value="Find Name" action="output" title="Find Name" accesskey="c" />
</h:form>
</f:view>
</body>
</html>

output.xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">

<head>
</head>
<body>
<f:view>
<h:outputText value="Your Name is : #{nameBean.name}" />
</f:view>
</body>
</html>

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
<display-name>jsfHCommandLink</display-name>
<welcome-file-list>
<welcome-file>input.xhtml</welcome-file>
</welcome-file-list>
<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>/faces/*</url-pattern>
<url-pattern>*.jsf</url-pattern>
<url-pattern>*.xhtml</url-pattern>
</servlet-mapping>
<context-param>
<description>State saving method: 'client' or 'server' (=default). See JSF Specification 2.5.2</description>
<param-name>javax.faces.STATE_SAVING_METHOD</param-name>
<param-value>client</param-value>
</context-param>
<context-param>
<param-name>javax.servlet.jsp.jstl.fmt.localizationContext</param-name>
<param-value>resources.application</param-value>
</context-param>
<listener>
<listener-class>com.sun.faces.config.ConfigureListener</listener-class>
</listener>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.faces</url-pattern>
</servlet-mapping>
</web-app>

How To Run

Download the WAR file from the given link Download Source Code and import this war file into the eclipse or copy the above example code and paste them into the specified files as described in the Eclipse directory structure then start your web server and use the following link http://localhost:8181/jsfHCommandLink/input.jsf in the address bar of your web browser.

Output :

When you will execute the above code you will get the output as follows :

1. The main page will be as follows :

2. When you will hover the mouse pointer over the link then the tooltip will be displayed as follows :

3. When you will input the value in the given text box as I have given "Deepak" then the output will be as follows :

However this commandLink will also be activated by pressing the key combination Shift+Alt+c (I am using the Mozila browser) here 'c' is the value of the specified accesskey attribute and the 'Shift+Alt' is the browser compatible accesskey combination.

Besides all these things when you will use the commandLink tag in the JSF pages in the HTML output of JSF pages you will see that this tag is converted into a JavaScript code with the src= "/jsfHCommandLink/javax.faces.resource/jsf.js.xhtml?ln=javax.faces" here jsfHCommandLink is the application name. As well as containing the <a> tag with onclick and more other attributes, where onclick attribute is auto generated in the HTML output page of JSF page and j_idtX is randomly generated name value.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>JSF 2 h commandLink</title>
</head>
<body>
<form id="j_idt3" name="j_idt3" method="post" action="/jsfHCommandLink/input.xhtml" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="j_idt3" value="j_idt3" />

Enter Name : <input type="text" name="j_idt3:j_idt5" />
<script type="text/javascript" src="/jsfHCommandLink/javax.faces.resource/jsf.js.xhtml?ln=javax.faces"></script>
<a href="#" accesskey="c" title="Find Name" onclick="mojarra.jsfcljs(document.getElementById('j_idt3'),{'j_idt3:j_idt6':'j_idt3:j_idt6'},'');return false">Find Name</a><input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="H4sIAAAAAAAAAJVSz2sTQRR+3SStjVH6Q3LTUxEEnSASEIOYYBsa3NbAVrAI6mQz7U6c3R1n3iaTHgr+B4InoeLVgzf/AvEgFBT06P/g0bszm9j0oAcfzJvdmXnvfe993/ufUJJawfKADinJkAuySXW0RWVp4cfHT9Wn3wrgtaEsUtpv0xBT1YFFjBTTUSr6Rt5pgrPK6Iz1S3YVEOYHT3gfb2QKVh/5eV5Bk31yvzdgITZefn34dklfER6AkTagJK1lz+EQCu7vUAFxMYbs0ZBpEqaxTBOWIHnQufvne62rUskUju+xsYaprdiECs7PCm4kWXz6UiKUKaLivQyZ1q4kTPHP5/jdmkO4ZGsSnSVTBM4Lhpq0ul2/s7Fup1X/xwseS0HW2R7NBLYnh2stKcV4J33Gkl/vru4eNQfNisMyqkKlxhOZITERxsJWvnntePuxMXYC9f+bQFfxIUV2ulfX3ALChVm/OxHFlmKBxWmJmdHdUoqOfa7RvPh+8fVn+qYAcx0oan7Acn68UdF5G3T576gCtLU3rRqYCuiQqd3jD7dfHX3Z8sDzYTEUVOttGjOElVwMNcdNLbCwkv2GD2VtY/p5DoTq5AVPawFTnAp+QHuCNYyUQ9fQcs7ZqnT+rKOz5JR2/UQ8nrRn5ybqu5Vv9ZO7opOZ+Q1pVMo57wIAAA==" autocomplete="off" />
</form>
</body>
</html>