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 textaction
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 anonclick
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 thehref
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.