My JSF Books/Videos My JSF Tutorials OmniFaces/JSF PPTs
JSF 2.3 Tutorial
JSF Caching Tutorial
JSF Navigation Tutorial
JSF Scopes Tutorial
JSF Page Author Beginner's Guide
OmniFaces 2.3 Tutorial Examples
OmniFaces 2.2 Tutorial Examples
JSF Events Tutorial
OmniFaces Callbacks Usages
JSF State Tutorial
JSF and Design Patterns
JSF 2.3 New Features (2.3-m04)
Introduction to OmniFaces
25+ Reasons to use OmniFaces in JSF
OmniFaces Validators
OmniFaces Converters
JSF Design Patterns
Mastering OmniFaces
Reusable and less-verbose JSF code

My JSF Resources ...

Java EE Guardian
Member of JCG Program
Member MVB DZone
Blog curated on ZEEF
OmniFaces is an utility library for JSF, including PrimeFaces, RichFaces, ICEfaces ...

[OmniFaces Utilities] - Find the right JSF OmniFaces 2 utilities methods/functions

Search on blog

Petition by Java EE Guardians


vineri, 9 octombrie 2015

[JSF Page Author Beginner's Guide] JSF <outputLink> / HTML5 <a> [hyperlink]

The <h:outputLink> renders a HTML "a" element

Common/basic usage in JSF:

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns=""     
  <title>JSF outputLink examples</title>        
  <!-- navigate to an absolute URL -->
  <h:outputLink value="">Google</h:outputLink>

  <!-- navigate to a local HTML page, welcome.html -->
  <h:outputLink value="welcome.html">Welcome page (HTML)</h:outputLink>

  <!-- navigate to a local JSF page, welcome.xhtml -->
  <h:outputLink value="welcome.xhtml">Welcome page (JSF)</h:outputLink>

The h:outputLink will be rendered in HTML as:
<a href="">Google</a>
<a href="welcome.html">Welcome page (HTML)</a>
<a href="welcome.xhtml">Welcome page (JSF)</a>

The welcome.html page is just a dummy HTML page that cannot interact with JSF:
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <div>Welcome !</div>

The welcome.xhtml page is just a JSF page:

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns=""
  Welcome !<br/>

  <a href="http://localhost:8080/JSFOutputLinkExamples/">Back</a> <br/>
  <!--  will not work because this view will not interact with JSF -->
  <h:outputLink value="http://localhost:8080/JSFOutputLinkExamples">Back</h:outputLink>

But the value attribute of <h:outputLink> is "directly" linked  to URL and the content of the tag represents the link text. With other words, this component cannot be used with navigation rules, but it can be used for direct and external links. However, we can actually "force" <h:outputLink> to interact with JSF - for example, let's suppose that we are using a servlet mapping prefix (e.g. /faces) for FacesServlet, and we write the following:

<h:outputLink value="faces/welcome.xhtml">Welcome page (JSF)</h:outputLink>

Then the welcome.xhtml page will interact with JSF. Nevertheless, <h:outputLink> is not intended for such cases, since we have hard-coded the servlet mapping prefix. For such cases we have <h:link>.

Data flow in image:
More examples:

Add xmlns:pt="" for pass-through attributes

Open linked document in the same page (default is _blank)

<h:outputLink target="_self" value="">Google</h:outputLink> 

Value provided from a managed bean

<h:outputLink value="#{}">Welcome page</h:outputLink>

The WelcomeBean is very simple:

public class WelcomeBean implements Serializable {

 private String page = "welcome.xhtml";

 public String getPage() {
  return page;

 public void setPage(String page) { = page;

Disabled link (rendered as a "span" element)

<h:outputLink value="welcome.xhtml" disabled="true">Welcome page</h:outputLink>

Link to the same page (the "value" attribute is omitted)

<h:outputLink>Link to the same page</h:outputLink>

 Call a JavaScript function

<h:outputLink value="javascript:alert('Hello World!');">Say "hello" !</h:outputLink>

Using id attribute to render <a id="the_id" name="the_id" ... >

<h:outputLink id="welcomeId" value="welcome.xhtml">Welcome page (anchor)</h:outputLink>
<!-- this can be used as a HTML anchor, via h:link -->
<h:link value="Welcome Anchor" fragment="welcomeId"/>

Add a hard-coded URL query string

<h:outputLink value="welcomewithparams.xhtml?name1=Rafael">Welcome page</h:outputLink>

Link: http://localhost:8080/JSFOutputLinkExamples/welcomewithparams.xhtml?name1=Rafael

Add an URL query string with <f:param>

<h:outputLink value="welcomewithparams.xhtml">
 Welcome page
 <f:param name="name1" value="Roger"/>
 <f:param name="name2" value="Rafa"/>

Link: http://localhost:8080/JSFOutputLinkExamples/welcomewithparams.xhtml?name1=Roger&name2=Rafa

The welcomewithparams.xhtml is:

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns=""    
  Welcome #{param.name1}, #{param.name2} ! <br/>       

  <a href="http://localhost:8080/JSFOutputLinkExamples/">Back</a> <br/>
  <!--  will not work because this view will not interact with JSF -->
  <h:outputLink value="http://localhost:8080/JSFOutputLinkExamples">Back</h:outputLink>

Notice that Welcome #{param.name1}, #{param.name2} !  will be displayed ad litteram, since the page doesn't interact with JSF! So, you have to access the query string parameters without EL support (e.g. via plain JS, jQuery, etc).

Create a mailto link

<h:outputLink value="">
 Send email
 <f:param name="Subject" value="JSF news"/>

Use a CSS class to style link

<h:outputLink value="welcome.xhtml" styleClass="linkcss">Welcome page</h:outputLink>

Use inline CSS to style link

        <strong>Example 13:</strong> Use inline CSS to style link <hr/>
        <h:outputLink value="welcome.xhtml" style="color: red; background-color: black;">Welcome page</h:outputLink>

Use image link

<h:outputLink value="welcome.xhtml">
 <h:graphicImage library="default" name="images/welcome.gif" />

Use HTML 5 'download' attribute to download link

<h:outputLink value="welcome.xhtml" pt:download="welcomePage">
 <h:graphicImage library="default" name="images/download.png" />
<!-- this will download the content of welcome.xhtml page as, welcomePage.xhtml -->

Complete source code on GitHub.
See also
More resources on Constantin Alin, ZEEF page.
OutputLink in JSF Extension on JSF ShowCase ZEEF page.

Niciun comentariu :

Trimiteți un comentariu


Postări populare

OmniFaces/JSF Fans

Follow by Email

Visitors Starting 4 September 2015

Locations of Site Visitors