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:
valueattribute: rendered as the anchor textactionattribute: defines the URL target of the page that will be called.- this tag will generate a
jsf.jsfile in the corresponding page, with anonclickevent 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.
valueattribute: rendered directly as the corresponding HTML value of thehrefattribute.
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
actionattribute, 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
actionattribute, 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.
