Main Tutorials

JSF 2 link, commandLink and outputLink example

In JSF, <h:link />, <h:commandLink /> and <h:outputLink /> tags are used to render a HTML “a” anchor element, see below examples to understand the different among them.

Note
In below examples, assume “/JavaServerFaces/” is the root of your project context URL.

1. JSF h:link example

The “h:link” tag is a new tag in JSF 2.0, the “value” attribute is rendered as the anchor text, “outcome” attribute is determined the target URL of the HTML “href” attribute. See examples :

1. link + “outcome”


//JSF
<h:link value="Login page" outcome="login" />

//HTML output
<a href="/JavaServerFaces/faces/login.xhtml">Login page</a>

2. link + “outcome” + parammeter


//JSF
<h:link value="Login page + Param " outcome="login" >
	<f:param name="username" value="mkyong" />
</h:link>

//HTML output
<a href="/JavaServerFaces/faces/login.xhtml?username=mkyong">Login page + Param</a>

3. link + “outcome” + image


//JSF
<h:link outcome="login" >
	<h:graphicImage library="images" name="sofa.png" />
</h:link>

//HTML output
<a href="/JavaServerFaces/faces/login.xhtml">
	<img src="/JavaServerFaces/faces/javax.faces.resource/sofa.png?ln=images" />
</a>

2. JSF h:commandLink example

The “h:commandLink” tag is released since JSF 1.x, which is generate a link act like a submit button when clicked. The “value” attribute is rendered as the anchor text, “action” attribute is determined the target URL of the HTML “href” attribute. In addition, the “h:commandLink” will include a “jsf.js” file in the page and attached an “onclick” event to the generated link, see examples :

Note
The “j_idtx” is a random value generated by JSF.

1. commandLink


//JSF
<h:commandLink value="Login page" />	

//HTML output
<script type="text/javascript" 
 src="/JavaServerFaces/faces/javax.faces.resource/jsf.js?ln=javax.faces&amp;stage=Development">
</script>

<a href="#"
	onclick="mojarra.jsfcljs(document.getElementById('j_idt6'),
        {'j_idt6:j_idt16':'j_idt6:j_idt16'},'');
	return false">
	Login page
</a>

P.S if the “action” attribute is omitted, it will reload current page while the button is clicked.

2. commandLink + action


//JSF
<h:commandLink action="#{user.goLoginPage}" value="Login page" />		

//HTML output
<script type="text/javascript" 
 src="/JavaServerFaces/faces/javax.faces.resource/jsf.js?ln=javax.faces&amp;stage=Development">
</script>

<a href="#" 
	onclick="mojarra.jsfcljs(document.getElementById('j_idt6'),
	{'j_idt6:j_idt18':'j_idt6:j_idt18'},'');
	return false">
	Login page
</a>

P.S You can’t even find the action value in the HTML output, only JSF will know where it goes.

3. commandLink + action + parameter


//JSF
<h:commandLink action="#{user.goLoginPage}" value="Login page + Param ">
	<f:param name="username" value="mkyong" />
</h:commandLink>

//HTML output
<script type="text/javascript" 
 src="/JavaServerFaces/faces/javax.faces.resource/jsf.js?ln=javax.faces&amp;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 page + Param 
</a>

4. commandLink + action + image


//JSF
<h:commandLink action="#{user.goLoginPage}">
	<h:graphicImage library="images" name="sofa.png" />
</h:commandLink>

//HTML output
<script type="text/javascript" 
 src="/JavaServerFaces/faces/javax.faces.resource/jsf.js?ln=javax.faces&amp;stage=Development">
</script>

<a href="#" 
	onclick="mojarra.jsfcljs(document.getElementById('j_idt6'),
	{'j_idt6:j_idt23':'j_idt6:j_idt23'},'');
	return false">
	<img src="/JavaServerFaces/faces/javax.faces.resource/sofa.png?ln=images" />
</a>

3. JSF h:outputLink example

The “h:outputLink” tag is released in JSF 1.x, the body of the tag is rendered as the anchor text, “value” attribute is rendered as the value of the HTML “href” attribute directly, see examples :

1. outputLink


//JSF
<h:outputLink>Login page</h:outputLink>

//HTML output
<a href="currentpage.xhtml">Login page</a>

P.S if the “value” attribute is omitted, it will put the current page URL as the value of the “href” attribute.

2. outputLink + “value”


//JSF
<h:outputLink value="login.xhtml" >
	Login page
</h:outputLink>

//HTML output
<a href="login.xhtml">
	Login page
</a>

3. outputLink + “value” + outputText + parameter


//JSF
<h:outputLink value="login.xhtml">
	<h:outputText value="Login page" />
	<f:param name="username" value="mkyong" />
</h:outputLink>

//HTML output
<a href="login.xhtml?username=mkyong">Login page</a>

4. outputLink + “value’ + outputText + image


//JSF
<h:outputLink value="login.xhtml">
	<h:graphicImage library="images" name="sofa.png" />
</h:outputLink>

//HTML output
<a href="login.xhtml">
	<img src="/JavaServerFaces/faces/javax.faces.resource/sofa.png?ln=images" />
</a>

My thought…

Some review of above three link tags :

  1. The “h:link” tag is useful to generate a link which requires to interact with the JSF “outcome” , but lack of “action” support make it hard to generate a dynamic outcome.
  2. The “h:commandLink” tag is suck, the generated JavaScript is really scary! Not recommend to use this tag, unless you have a solid reason to support. But it supports the “action” attribute, which is what “h:link” lack of.
  3. The “h:outputLink” is useful to generate a link which does not require to interact with the JSF program itself.

At last, it will be perfect if the “action” attribute is added into the “h:link“.

Download Source Code

Reference

  1. JSF <h:link /> JavaDoc
  2. JSF <h:commandLink /> JavaDoc
  3. JSF <h:outputLink /> JavaDoc

About Author

author image
Founder of Mkyong.com, love Java and open source stuff. Follow him on Twitter. If you like my tutorials, consider make a donation to these charities.

Comments

Subscribe
Notify of
16 Comments
Most Voted
Newest Oldest
Inline Feedbacks
View all comments
Vinicius
8 years ago

command link is useful when you don’t want something like _details.xhtml?idPRoduc=62390&layer=DOSAGE

on your url

Sid
10 years ago

Mate, I think I should contribute some decent amount towards your work, as you have made most of questions answered in the most simple way, yet quite techincal.
Thanks.

Len
2 years ago

how would you read values in h:outputLink from resource bundles with “{0} blah”; (ie your one other message blog) but using h:outputLink component?

Denis Duval
4 years ago

Hello,
I’m using Primefaces in a web project.
If I use p: commandLink (with ajax = false) or h: commandLink to display a next page,
a blank page appears quickly, and then displays correctly.
How to remove this blank page ?
Is there a solution ?
THANK YOU!

jesus israel perales martinez
8 years ago

2015 and action is not add to h:link :/

Luis
10 years ago

Muchas gracias por el post, me ha sido de mucha utilidad…. Saludos desde Ecuador

henry
10 years ago

Thanks designed for sharing such a good thinking, piece of
writing is good, thats why i have read it fully

mark
10 years ago

Hello There. I found your blog using msn.
This is a very well written article. I will be sure to bookmark it and
return to read more of your useful info. Thanks for the
post. I’ll definitely comeback.

Joao Paulo Bossoni
10 years ago

thank you very much!!!

nnnn
11 years ago

jhkjhkhjk

WemnPneulkLem
11 years ago

I do believe all the ideas you’ve introduced on your post. They are very convincing and will definitely work. Nonetheless, the posts are too brief for beginners. May you please lengthen them a little from subsequent time? Thank you for the post.

vaibhav
11 years ago

i want to intergrate jsf with struts2 please help me i am beginner in jsf

Martin
11 years ago

as I can make a link to a page within a folder ie / WEB-INF/front/example.xhtml

but does not work

thank you very much!!!

Robert
12 years ago

Hey guys.
Im making a web 100% based on JSF and i found a problem when i want to do this:
My index:
**

Parallelized Bioinformatics Algorithms built on Multicore Processors

#{controlWeb.getContenido()}

**
All zones except one are always the same. The zone (id = content) I want that when you click a link in any parts of the website all links back to the index.xhtml and in that area the name change to the appropiate webpage. My idea was create a ManagedBean with a String and if you click on a link, that link modify somehow the variable of ManagedBean and when the link return to index that will read from the variable and it will change the web.
The problem is i cant use a setter function called #{controlWeb.setContenido(“STRING”)} because that command is executed in compile time and doesnt work.
I need one solution or another idea for make that please.

Robert
12 years ago
Reply to  Robert

Sorry bad comment.

Here is the link to the question:

http://javanullpointer.com/questions/129/jsf-20-need-idea-for

thanks.

Vikas Kumar
12 years ago

Very good stuff