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
VDL / HTMLOutputFormat / HTML Reference

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.
la

Niciun comentariu:

Trimiteți un comentariu