JSF Standard Formatted Output Component

See Also | Tutorials

You can drag the Standard JavaServer Faces Formatted Output component formatted output icon from the Palette to the Visual Designer to create an output text field that is formatted. The Formatted Output component provides similar functionality to the Output Text component, but adds the ability to substitute localized parameters when the component is rendered. As with Output Text, Formatted Output renders as an HTML <span> tag.

This component is an advanced one because it requires direct editing of JSP code and understanding of resource bundles. You can edit this component's properties in its Properties window and bind it to a data provider by right-clicking the component in the Visual Designer and choosing the Bind to Data option.

Here is a brief explanation of how to use this component:

In the Source view of your page, a Formatted Output component is the JavaServer Faces component tag <h:outputFormat>, which treats its value as input to a java.text.MessageFormat object. You can also nest <f:param> tags inside the <h:outputFormat> tag to specify replacements for the parameters {0}, {1}, and so on.

For more information on valid message syntax, see the Javadoc pages for java.text.MessageFormat at

For information on localization and resource bundles, see the  section on localization.

Simple Example

You do not have to use a resource bundle to use a Formatted Output component, although you could use this example in conjunction with <f:loadBundle> to get the message string.

The following example assumes that you have created an integer property in the session bean named count that picks up the number of items in the user's shopping cart (see the session bean description in Navigator Window for more information). The Formatted Output component displays the number of items in the shopping cart.

   <h:outputFormat binding="#{Page1.formattedOutput1}" 
                   id="formattedOutput1" 
                   style="left: 216px; top: 360px; position: absolute"
                   value="You have {0} items in your shopping cart.">
      <f:param value="#{SessionBean1.count}"/>
   </h:outputFormat>

Resource Bundle Example

If you had the string from the previous example in a resource bundle under key itemCount, you might use the following code:

   <f:loadBundle basename="webapplication1.Bundle"
                 var="messages"/>
   ...
   <h:outputFormat binding="#{Page1.formattedOutput1}" 
                   id="formattedOutput1" 
                   style="left: 216px; top: 360px; position: absolute"
                   value="#{messages.itemCount}">
      <f:param value="#{SessionBean1.count}"/>
   </h:outputFormat>

For the code in this example to work, or any other case where you want to provide a resource bundle inside the application, you must create a properties file to contain the messages, as described in Creating and Deleting a Resource Bundle.

After you create a new properties file, it opens in the Property Editor. For each property you want to add, click New Property and, in the New Property dialog box, enter a key and a value. For example, the property for the previous example would have a key named itemCount and the text would be, "You have {0} items in your shopping cart."

When you deploy your application, the properties file is copied to the WEB-INF/classes/project-name directory for you, so that it is available for the <f:loadBundle> tag to load. For more information, see Load Bundle Component.

See Also
Working With Components
Component Tasks: Quick Reference
About the Visual Web Palette
Tutorials

Legal Notices