Hi there! Continuing on the same pace as in my last example, today we ‘ll see several easy mini examples according to link features. In JSF 2.0, we can use <h:link />, <h:commandLink /> and <h:commandLink /> tags to render an HTML anchor element.

To begin with, let’s assume that we already have our project root set, under /LinkExamplesJSF/.

1. h:link tag

It’s about a new tag in JSF 2.0, where the value attribute is rendered as the anchor text and outcome attribute stands for the URL target; similar to href in HTML.

link – with outcome

//JSF
<h:link value="Login page" outcome="login" />
 
//HTML output
<a href="/LinkExamplesJSF/faces/login.xhtml">Login page</a>

link – with outcome and a parameter

//JSF
<h:link value="Login page" outcome="login" >
	<f:param name="username" value="thodoris" />
</h:link>
 
//HTML output
<a href="/LinkExamplesJSF/faces/login.xhtml?username=thodoris">Login page</a>

link – with outcome and an image

//JSF
<h:link outcome="login" >
	<h:graphicImage library="img" name="logo.png" />
</h:link>
 
//HTML output
<a href="/LinkExamplesJSF/faces/login.xhtml">
	<img src="/LinkExamplesJSF/faces/javax.faces.resource/logo.png?ln=img" />
</a>

2. h:commandLink tag

This tag is released since JSF 1.x. It actually generates a link that behaves similar to a submit button (when the last is clicked). Here are some of its basic features:

• value attribute: rendered as the anchor text
• action attribute: defines the URL target of the page that will be called.
• this tag will generate a jsf.js file in the corresponding page, with an onclick event listener attached on the generated link.

In the following examples, j_idtx is a random value, generated from JSF.

commandLink

//JSF
<h:commandLink value="Login" />	
 
//HTML output
<script type="text/javascript" 
 src="/LinkExamplesJSF/faces/javax.faces.resource/jsf.js?ln=javax.faces&stage=Development">
</script>
 
<a href="#"
	onclick="mojarra.jsfcljs(document.getElementById('j_idt6'),
        {'j_idt6:j_idt16':'j_idt6:j_idt16'},'');
	return false">
	Login
</a>

commandLink – with action

//JSF
<h:commandLink action="#{user.login}" value="Login" />		
 
//HTML output
<script type="text/javascript" 
 src="/LinkExamplesJSF/faces/javax.faces.resource/jsf.js?ln=javax.faces&stage=Development">
</script>
 
<a href="#" 
	onclick="mojarra.jsfcljs(document.getElementById('j_idt6'),
	{'j_idt6:j_idt18':'j_idt6:j_idt18'},'');
	return false">
	Login
</a>

As you see, there isn’t any action value in the HTML output; but JSF knows where it goes

commandLink – with action and parameter

//JSF
<h:commandLink action="#{user.login}" value="Login">
	<f:param name="username" value="thodoris" />
</h:commandLink>
 
//HTML output
<script type="text/javascript" 
 src="/LinkExamplesJSF/faces/javax.faces.resource/jsf.js?ln=javax.faces&stage=Development">
</script>
 
<a href="#" 
	onclick="mojarra.jsfcljs(document.getElementById('j_idt6'),
	{'j_idt6:j_idt20':'j_idt6:j_idt20','username':'mkyong'},'');
	return false">
	Login
</a>

commandLink – with action and image

//JSF
<h:commandLink action="#{user.login}">
	<h:graphicImage library="img" name="logo.png" />
</h:commandLink>
 
//HTML output
<script type="text/javascript" 
 src="/LinkExamplesJSF/faces/javax.faces.resource/jsf.js?ln=javax.faces&stage=Development">
</script>
 
<a href="#" 
	onclick="mojarra.jsfcljs(document.getElementById('j_idt6'),
	{'j_idt6:j_idt23':'j_idt6:j_idt23'},'');
	return false">
	<img src="/LinkExamplesJSF/faces/javax.faces.resource/logo.png?ln=images" />
</a>

3. h:outputLink tag

This tag <h:outputLink> is also released since JSF 1.x. Here are some of its main features:

• tag’s body: rendered as the anchor text.
• value attribute: rendered directly as the corresponding HTML value of the href attribute.

outputLink

//JSF
<h:outputLink>Login</h:outputLink>
 
//HTML output
<a href="sample_page.xhtml">Login</a>

outputLink – with value

//JSF
<h:outputLink value="login.xhtml" >Login</h:outputLink>
 
//HTML output
<a href="login.xhtml">Login</a>

outputLink – with value, outputText, parameter

//JSF
<h:outputLink value="login.xhtml">
	<h:outputText value="Login" />
	<f:param name="username" value="thodoris" />
</h:outputLink>
 
//HTML output
<a href="login.xhtml?username=thodoris">Login</a>

outputLink – with value, outputText, image

//JSF
<h:outputLink value="login.xhtml">
	<h:graphicImage library="img" name="logo.png" />
</h:outputLink>
 
//HTML output
<a href="login.xhtml">
	<img src="/LinkExamplesJSF/faces/javax.faces.resource/logo.png?ln=images" />
</a>

4. Closing Points

h:link

• useful to generate a link that has to interact with JSF’s outcome
• doesn’t support action attribute, so we can’t use it if we want to generate a dynamic outcome

h:commandLink

• not recommended, as the generated Javascript is something that cannot be predicted
• supports action attribute, something that <h:link> is uncapable of

h:outputLink

• useful to generate a link that doesn’t require interaction with a JSF application

So, to sum up, we simply wait for <h:link> to support the action attribute; maybe in the next releases of JSF.

Happy Easter to you and your families!

This was an example of link, commandLink, outputLink Example in JSF 2.0.