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

luni, 9 noiembrie 2015

[JSF Page Author Beginner's Guide] JSF <outputFormat> / HTML5 <span>

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.

Data flow in image:
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 &amp; 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.

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