Thodoris Bais

About Thodoris Bais

Thodoris Bais is currently working as a Junior Java Developer while on parallel, pursuing a diploma at Informatics & Telecommunications Engineering. He specializes in Java Core, Android and J2EE and looks forward to being a professional Software Engineer. He is also a quick learner and curious about new technologies.

Link, CommandLink, OutputLink Example with JSF 2.0

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.

Related Whitepaper:

Java Essential Training

Author David Gassner explores Java SE (Standard Edition), the language used to build mobile apps for Android devices, enterprise server applications, and more!

The course demonstrates how to install both Java and the Eclipse IDE and dives into the particulars of programming. The course also explains the fundamentals of Java, from creating simple variables, assigning values, and declaring methods to working with strings, arrays, and subclasses; reading and writing to text files; and implementing object oriented programming concepts. Exercise files are included with the course.

Get it Now!  

Examples Java Code Geeks and all content copyright © 2010-2014, Exelixis Media Ltd | Terms of Use | Privacy Policy
All trademarks and registered trademarks appearing on Examples Java Code Geeks are the property of their respective owners.
Java is a trademark or registered trademark of Oracle Corporation in the United States and other countries.
Examples Java Code Geeks is not connected to Oracle Corporation and is not sponsored by Oracle Corporation.

Sign up for our Newsletter

20,709 insiders are already enjoying weekly updates and complimentary whitepapers! Join them now to gain exclusive access to the latest news in the Java world, as well as insights about Android, Scala, Groovy and other related technologies.

As an extra bonus, by joining you will get our brand new e-books, published by Java Code Geeks and their JCG partners for your reading pleasure! Enter your info and stay on top of things,

  • Fresh trends
  • Cases and examples
  • Research and insights
  • Two complimentary e-books