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


marți, 17 februarie 2015

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

The <h:outputText> is used in JSF to display plain text 
(depending on how is used, it produces a <span> tag or no extra HTML markup)
 Common/basic usage in JSF:

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns=""     
  <title>JSF outputText examples</title>        
  <h:outputText value="#{}"/>
  <!-- in this case, you can simply use #{} -->

The <h:outputText> will be rendered in HTML as (there is no HTML markup):

Rafael Nadal

The PlayerBean will be:

package beans;

import javax.enterprise.context.SessionScoped;
import javax.inject.Named;

public class PlayerBean implements Serializable{
 private String name="Rafael Nadal";
 private String coolname="<font face=\"verdana\" color=\"green\">Rafael Nadal</font>";

 public String getName() {
  return name;

 public void setName(String name) { = name;

 public String getCoolname() {
  return coolname;

 public void setCoolname(String coolname) {
  this.coolname = coolname;

Data flow in image:
More examples:

Basic/common usage (the presence of id produce <span> markup)

<h:outputText id="nameId" value="#{}"/>
<!-- this will render <span id="nameId">Rafael Nadal</span> -->

Styling text with styleClass (the presence of styleClass produce <span> markup)

<h:outputText value="#{}" styleClass="my_class"/> 
<!-- this will render <span class="ot">Rafael Nadal</span> -->

Styling text with style (the presence of style produce <span> markup)

<h:outputText value="#{}" style="color:green;"/> 
<!-- this will render <span style="color:green;">Rafael Nadal</span> -->

Indicate text direction dir (the presence of dir produce <span> markup)

<h:outputText lang="LTR" value="#{}"/> 
<!-- this will render <span dir="RTL">Rafael Nadal</span> -->

Escape HTML

<h:outputText escape="true" value="#{playerBean.coolname}"/>
<!-- this will render &lt;font face="verdana" color="green"&gt;Rafael Nadal&lt;/font&gt; -->         

No escape HTML

<h:outputText escape="false" value="#{playerBean.coolname}"/> 
<!-- this will render <font face="verdana" color="green">Rafael Nadal</font> -->

Note If any of attributes id, styleClass, style, dir, lang, title is present or pass-through attributes are present, the <h:outputText> will be rendered as HTML, <span> tag. Otherwise it will not produce HTML markup.
Note Pay attention when you are using the escape attribute set to false. The XSS attacks are implicitly prevented by JSF through the escape attribute, which is set to true by default.

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

Niciun comentariu :

Trimiteți un comentariu


Postări populare

OmniFaces/JSF Fans

Follow by Email

Visitors Starting 4 September 2015

Locations of Site Visitors