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/.
 
 
 
 
 
 

Want to be a JSF Master ?

Subscribe to our newsletter and download the JSF 2.0 Programming Cookbook right now!

In order to get you prepared for your JSF development needs, we have compiled numerous recipes to help you kick-start your projects. Besides reading them online you may download the eBook in PDF format!

Download NOW!

Thank you!

We will contact you soon.

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.