Ajax
Beans
Callbacks
Components
Events
Exceptions
Faces
Facelets
JSON
Hacks
State 
JNDI
Platform
Utils
Messages
MapWrapper
Reflection
Renderers
ResourcePaths
XML
Servlets
Arrays
Converters
Dates
Numbers
Objects
Strings
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"
"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 outputLink
examples</title>
</h:head>
<h:body>
<!-- navigate to
an absolute URL -->
<h:outputLink
value="http://www.google.com">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>
</h:body>
</html>
The h:outputLink will
be rendered in HTML as:
<a
href="http://www.google.com">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:
<html>
<head>
<title></title>
<meta
charset="UTF-8">
<meta
name="viewport" content="width=device-width,
initial-scale=1.0">
</head>
<body>
<div>Welcome
!</div>
</body>
</html>
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"
"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 !<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>
</h:body>
</html>
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="http://xmlns.jcp.org/jsf/passthrough" for pass-through attributes
Add xmlns:pt="http://xmlns.jcp.org/jsf/passthrough" for pass-through attributes
Open linked document in the same page (default is _blank)
<h:outputLink target="_self" value="http://www.google.com">Google</h:outputLink>
<h:outputLink target="_self" value="http://www.google.com">Google</h:outputLink>
Value provided from a
managed bean
<h:outputLink
value="#{welcomeBean.page}">Welcome page</h:outputLink>
The WelcomeBean is very simple:
@Named
@RequestScoped
public class WelcomeBean implements Serializable {
private String page =
"welcome.xhtml";
public String
getPage() {
return page;
}
public void
setPage(String page) {
this.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"/>
</h:outputLink>
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"
"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.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>
</h:body>
</html>
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="mailto:leoprivacy@yahoo.com">
Send email
<f:param
name="Subject" value="JSF news"/>
</h:outputLink>
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" />
</h:outputLink>
Use HTML 5 'download'
attribute to download link
<h:outputLink value="welcome.xhtml"
pt:download="welcomePage">
<h:graphicImage
library="default" name="images/download.png" />
</h:outputLink>
<!-- this will download the content of welcome.xhtml page
as, welcomePage.xhtml -->
Complete
source code on GitHub.
See also Mkyong.com.
More resources on Constantin Alin, ZEEF page.
OutputLink in JSF Extension on JSF ShowCase ZEEF page.
More resources on Constantin Alin, ZEEF page.
OutputLink in JSF Extension on JSF ShowCase ZEEF page.
<h:inputText/> 
ZEEF JSF Beginner's Guide 
JSF 2 Tutorials at www.mkyong.com 
JavaServer Faces (JSF) Tutorial 
Postări
Niciun comentariu :
Trimiteți un comentariu