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:outputFormat> renders simple text or an HTML "span" element
Common/basic usage in JSF (I) - using static value parameter
<?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"
xmlns:f="http://xmlns.jcp.org/jsf/core">
<h:head>
<title>JSF outputFormat examples</title>
</h:head>
<h:body>
<h:outputFormat
value="{0} Weblog">
<f:param value="OmniFaces"/>
</h:outputFormat>
</h:body>
</html>
Common/basic usage in JSF (II) - using dynamic
value parameter from properties file
<?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"
xmlns:f="http://xmlns.jcp.org/jsf/core">
<h:head>
<title>JSF outputFormat examples</title>
</h:head>
<h:body>
<h:outputFormat
value="{0} Weblog">
<f:param
value="#{msg.TITLE}"/>
</h:outputFormat>
</h:body>
</html>
The properties file has a single entry: TITLE =
OmniFaces
The above two examples will be rendered in HTML
as plain text:
Common/basic usage in JSF (III) - using dynamic value parameters from managed bean
<?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"
xmlns:f="http://xmlns.jcp.org/jsf/core">
<h:head>
<title>JSF outputFormat examples</title>
</h:head>
<h:body>
<h:outputFormat
value="Welcome {0}. You have {1} new messages.">
<f:param
value="#{playerBean.user}"/>
<f:param
value="#{playerBean.messages}"/>
</h:outputFormat>
</h:body>
</html>
The PlayerBean is very simple:
import javax.inject.Named;
import javax.enterprise.context.RequestScoped;
@Named
@RequestScoped
public class PlayerBean {
private
String user;
private
Integer messages;
public
PlayerBean() {
user =
"OmniFaces";
messages =
12;
}
public String
getUser() {
return user;
}
public void
setUser(String user) {
this.user =
user;
}
public
Integer getMessages() {
return
messages;
}
public void
setMessages(Integer messages) {
this.messages = messages;
}
}
The above example will be rendered in HTML as plain text:
Note The <h:outputFormat> is also rendered as a HTML <span> if you are using attributes like id, style, class.
More examples:
Styling output with inner CSS
<h:outputFormat value="{0}
Weblog" style="font-weight:bold;color:grey;">
<f:param value="OmniFaces"/>
</h:outputFormat>
Will be rendered in HTML as: <span style="font-weight:bold;color:grey;">OmniFaces Weblog</span>
Styling output with CSS class
<h:outputFormat
value="{0} Weblog" styleClass="outputFormat-css">
<f:param value="OmniFaces"/>
</h:outputFormat>
Will be rendered in HTML as: <span class="outputFormat-css">OmniFaces Weblog</span>
Styling individual value parameters with CSS using OmniFaces
Now, we may want to style around each value
parameter and display it slightly different using a little CSS. We may think
that one way of achieving this is by nesting one <h:outputFormat/> tag
in other <h:outputFormat/>
tag and adding some CSS, like below:
<h:outputFormat value="Welcome {0}. You have
{1} new messages." escape="false">
<h:outputFormat value="{0}"
class="grey">
<f:param
value="#{playerBean.user}"/>
</h:outputFormat>
<h:outputFormat value="{0}"
class="red">
<f:param
value="#{playerBean.messages}"/>
</h:outputFormat>
</h:outputFormat>
Unfortunately, <h:outputFormat/> is not capable to use its children as a value and
the above code will result in something like below:
As a solution, OmniFaces
<o:param/> tag has the capability to return the encoded output of
its children as a value, which means that the following code:
<h:outputFormat value="Welcome {0}. You have
{1} new messages." escape="false">
<o:param>
<h:outputFormat value="{0}" class="grey">
<f:param
value="#{playerBean.user}"/>
</h:outputFormat>
</o:param>
<o:param>
<h:outputFormat value="{0}" class="red">
<f:param
value="#{playerBean.messages}"/>
</h:outputFormat>
</o:param>
</h:outputFormat>
Will be rendered in HTML as:
Welcome <span
class="grey">OmniFaces</span>. You have<span
class="red">12</span> new messages.
Capture output and expose it into request scope using OmniFaces
The <h:outputFormat/> tag
is useful for rendering parameterized text, but a common drawback is
the fact that we can’t use its output further as input parameter for other
components. This can be accomplished with OmniFaces via the <o:outputFormat/> and making use of the var
attribute:
<o:outputFormat
value="{0}" var="_url">
<f:param
value="http://www.omnifaces-fans.org/"/>
</o:outputFormat>
More resources on
<h:outputLink value="#{_url}" title="#{_url}">
OmniFaces & JSF
Fans.
</h:outputLink>
Will be rendered in HTML as:
<a
title="http://www.omnifaces-fans.org/" href="http://www.omnifaces-fans.org/">
OmniFaces & JSF Fans. </a>
Complete source code on GitHub.
See also Mkyong.com.
More resources on Constantin Alin, ZEEF page.
OutputFormat in JSF Extension on JSF ShowCase ZEEF page.
See also Mkyong.com.
More resources on Constantin Alin, ZEEF page.
OutputFormat 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