JSF 2 OutputFormat Example

JavaServer Faces (JSF 2) provides a number of user interfaces components that cover the most common requirements, one of the most important component is a <h:outputFormat/> component. The outputFormat tag renders parameterized text, in that the text itself containing a placeholders to be replaced by actual values that are passed at rendering phase. “h:outputFormat” tag is similar with “h:outputText” tag, but with extra function to render parameterized message. If you are looking for the configuration of complete application, please read our JSF 2 Setup Tutorial.

Also Read:

JSF 2 Tutorials

JSF Tutorials

Introduction to JSF

1. Managed Bean

package net.javabeat.jsf;

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

@ManagedBean
@SessionScoped
public class HelloBean {
	private String userName;

	public String getUserName() {
		return userName;
	}

	public void setUserName(String userName) {
		this.userName = userName;
	}

	public String sayHello(){
		return "outputFormat";
	}

}

The managed bean contains a property a user name property.
Once the user has clicked on the sayHello button, the action sayHello shall be executed.
The navigation handler of the JavaServer Faces implementation shall compute the next coming view based on the returned value of sayHello action.
The action returns an outputFormat token, so the next coming veiw will be outputFormat.xhtml.

2. The Views

hello.xhtml view

<!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:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core">
<f:view>
	<h:form>
		<h1>
			<h:outputText value="JavaBeat JSF 2.2 Examples" />
		</h1>
		<h2>
			<h:outputText value="OutputFormat Example" />
		</h2>
		<h3>Say Hello For :</h3>
		<h:inputText value="#{helloBean.userName}"></h:inputText>
		<h:commandButton value="Say Hello" action="#{helloBean.sayHello}"></h:commandButton>
	</h:form>
</f:view>
</html>

The user will use the hello.xhtml for saying hello for a certain name.
The user must click the sayHello action for seeing the next coming view.
The next coming view is determined by JavaServer Faces (JSF) navigation handler.

outputFormat.xhtml view

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
	<title>JavaBeat JSF OutputText</title>
</h:head>
<f:view>
	<h:form>
		<h1>
			<h:outputText value="JavaBeat JSF 2.2 Examples" />
		</h1>
		<h2>
			<h:outputText value="OutputFormat Example"/>
		</h2>
		<h:outputFormat value="Hello Mr. {0}">
			<f:param value="#{helloBean.userName}"/>
		</h:outputFormat>
	</h:form>
</f:view>
</html>

The user will see the hello concatenated with the name that has entered.

3. JSF 2 OutputFormat Demo

See the below snapshots that show you the JSF 2 OutputFormat scenario that implemented.

1. Managed Bean

2. The Views

3. JSF 2 OutputFormat Demo

About Amr Mohammed