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

Twitter

sâmbătă, 21 februarie 2015

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

The <h:link> 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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"     
      xmlns:h="http://xmlns.jcp.org/jsf/html">
 <h:head>
  <title>JSF link examples</title>        
 </h:head>
 <h:body>
  <h:link value="Welcome page" outcome="welcome" />
 </h:body>

</html>

The <h:link> will be rendered in HTML as:

<a href="/JSFLinkExamples/faces/welcome.xhtml">Welcome page</a>

The outcome can be supplied from a managed bean also:

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"     
      xmlns:h="http://xmlns.jcp.org/jsf/html">
 <h:head>
  <title>JSF link examples</title>        
 </h:head>
 <h:body>
  <h:link value="Welcome page" outcome="#{welcomeBean.page}" />
 </h:body>
</html>

The WelcomeBean will be:

package beans;

import java.io.Serializable;
import javax.enterprise.context.RequestScoped;
import javax.inject.Named;

@Named
@RequestScoped
public class WelcomeBean implements Serializable {

 private String page = "welcome";

 public String getPage() {
  return page;
 }

 public void setPage(String page) {
  this.page = page;
 }
}

The welcome.xhtml page is (notice that we have added here a <h:link> to generate a HTML link for returning in index.xhtml page):

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"    
      xmlns:h="http://xmlns.jcp.org/jsf/html">
 <h:head>
  <title></title>        
 </h:head>
 <h:body>
  Welcome #{param.name} !!!  <br/>                 
  <h:link value="Back" outcome="index" />
 </h:body>
</html>

The <h:link> will be rendered in HTML as:

<a href="/JSFLinkExamples/faces/index.xhtml">Back</a>

Data flow in image:
More examples:

Add xmlns:pt="http://xmlns.jcp.org/jsf/passthrough" for pass-through attributes

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

<h:link id="welcomeId" value="Welcome page (anchor)" outcome="welcome" />
<!-- this can be used as a HTML anchor -->

Use HTML anchor link:

<h:link value="Welcome Anchor" fragment="welcomeId"/>

Add a query string without <f:param>

<h:link value="Welcome page" outcome="welcome?name=Rafael" />

Add a query string with <f:param>

<h:link value="Welcome page" outcome="welcome">
 <f:param name="name" value="Roger"/>
</h:link>

Use a CSS class to style link

<h:link value="Welcome page" outcome="welcome" styleClass="linkcss" />

Use inline CSS to style link

<h:link value="Welcome page" outcome="welcome" style="color: red; background-color: black;" />

Use image link

<h:link outcome="welcome" >
 <h:graphicImage library="default" name="images/welcome.gif" />
</h:link>

Use HTML 5 download attribute to download link

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

More <h:link> examples good to know:

·         include view parameters in the link
...
<f:metadata>
 <f:viewParam name="playernameparam" value="#{playersBean.playerName}"/>
 <f:viewParam name="playersurnameparam" value="#{playersBean.playerSurname}"/>
</f:metadata>
...
<h:body>
 <h:link value="Send" outcome="results?faces-redirect=true" includeViewParams="true"/>
</h:body>
...

·         propagate the conversation context over a link

<h:link outcome="/link.xhtml" value="Conversation Propagation">
 <f:param name="cid" value="#{conversation.id}"/>
</h:link>

·         enter in a flow

<h:link id="..." value="enter flow" outcome="flow">
 <f:attribute name="to-flow-document-id" value="unique"/>
</h:link>

·         enable/disable client window

<h:link value="Enable Client Window" outcome="index" disableClientWindow="false"/>
<h:link value="Disable Client Window" outcome="index" disableClientWindow="true"/>

Some <h:link> headlines:
·         The <h:link> is part of preemptive navigation
·         The <h:link> will navigate via a bookmarkable GET request and aren't capable of form submissions
·         The outcome of <h:link> is evaluated during the Render Response phase; therefore, the URLs are available right from the start of the corresponding view

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

Niciun comentariu :

Trimiteți un comentariu

JSF BOOKS COLLECTION

Postări populare

OmniFaces/JSF Fans

Follow by Email

Visitors Starting 4 September 2015

Locations of Site Visitors