OutputText Example with JSF 2.0

Thodoris BaisMarch 10th, 2014Last Updated: May 9th, 2019

0 154 2 minutes read

Hi there, pretty short time since my last example! I’ ll firstly try to give a short explanation about the connection of my last example with this. So, let’s give it a try!

The reason that we ‘re now won’t have a full example of multiple selectable dropdown list, as we used to in the last few examples, is that the nested elements are not displayed consistently in different browsers.

We could of use the <h:selectManyMenu /> to render a multiple selectable dropdown list, but just take a look of how this JSF element could be rendered across Internet Explorer, Mozilla Firefox and Google Chrome. That is, this case is one of the worst nightmares of a developer, so please avoid using it.

Back to this example and according to output text in JSF, I’ll try to get you deep into the meaning of it, by showing a multiple case example.

The useable tag is obvious as you might thought, just give a tag of <h:outputText /> to render an output text element.

1. Managed Bean

A demonstration bean to contain two sample strings:

UserBean.java

package com.javacodegeeks.enterprise.jsf;

import java.io.Serializable;
import java.util.Arrays;
import java.util.LinkedHashMap;
import java.util.Map;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

@ManagedBean
@SessionScoped
public class UserBean implements Serializable{

	private static final long serialVersionUID = 4256272866128337548L;

	public String text = "Hello Java Code Geeks!" ;
	public String htmlInput = "<input type='text' size='20' /> " ;
	
	public String getText() {
		return text;
	}
	public void setText(String text) {
		this.text = text;
	}
	public String getHtmlInput() {
		return htmlInput;
	}
	public void setHtmlInput(String htmlInput) {
		this.htmlInput = htmlInput;
	}	
}

2. Our JSF Page

index.xhtml

<?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://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core" >
 
    <h:body>
    	<h1>JSF 2.2 OutputText Example</h1>
    	<ol>
    		<li>#{user.text}</li>
    		<li><h:outputText value="#{user.text}" /></li>
    		<li><h:outputText value="#{user.text}" styleClass="sampleClass" /></li>
    		<li><h:outputText value="#{user.htmlInput}" /></li>
    		<li><h:outputText value="#{user.htmlInput}" escape="false" /></li>
        </ol>	
    </h:body>
</html>

And if you didn’t make it so clear, this is what is being generated to HTML:

<!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">
   <body> 
    	<h1>JSF 2.2 OutputText Example</h1> 
    	<ol> 
    	   <li>Hello Java Code Geeks!</li> 
           <li>Hello Java Code Geeks!</li> 
           <li><span class="sampleClass">Hello Java Code Geeks!</span></li> 
           <li><input type='text' size='20' /></li> 
           <li><input type='text' size='20' /></li> 
	</ol>
   </body> 
</html>

And a little bit of more analysis:

Cases 1 and 2: we don’t have to really use the h:outputText tag, since this can be achieved using the value expression "#{user.text}".
Case 3: if we have any tag of kind styleClass, style, dir or lang, just render the text and wrap it around a span element.
Case 4 and 5: we use the escape attribute in h:outputText tag in order to convert sensitive HTML and XML markup to the corresponding valid HTML characters (i.e. “<” is converted to “<“); escape attribute is set to true by default.