How to Customize Dates

16-2 Web User Interface Developers Guide for Oracle Application Development Framework

16.2 Displaying Output Text and Formatted Output Text

There are two ADF Faces components specifically for displaying output text on pages: outputText, which displays unformatted text, and outputFormatted, which displays text and can include a limited range of formatting options. To display simple text specified either explicitly or from a resource bundle or bean, you use the outputText component. You define the text to be displayed as the value of the value property. For example: af:outputText value=The submitted value was: Example 16–1 shows two outputText components: the first specifies the text to be displayed explicitly, and the second takes the text from a managed bean and converts the value to a text value ready to be displayed for more information about conversion, see Section 6.3, Adding Conversion . Example 16–1 Output Text af:panelGroupLayout af:outputText value=The submitted value was: af:outputText value={demoInput.date} af:convertDateTime dateStyle=long af:outputText af:panelGroupLayout You can use the escape attribute to specify whether or not special HTML and XML characters are escaped for the current markup language. By default, characters are escaped. Example 16–2 illustrates two outputText components, the first of which uses the default value of true for the escape attribute, and the second of which has the attribute set to false. Example 16–2 Output Text With and Without the escape Property Set af:outputText value=lt;h3output amp; headinglt;h3 af:outputText value=lt;h3output amp; headinglt;h3 escape=false Figure 16–1 shows the different effects seen in a browser of the two different settings of the escape attribute. Figure 16–1 Using the escape Attribute for Output Text You should avoid setting the escape attribute to false unless absolutely necessary. A better choice is to use the outputFormatted component, which allows a limited number of HTML tags. As with the outputText component, the outputFormatted component also displays the text specified for the value property, but the value can contain HTML tags. Use the formatting features of the outputFormatted component specifically when you want to format only parts of the value in a certain way. If you want to use the same styling for the whole component value, instead of using HTML within the Using Output Components 16-3 value, apply a style to the whole component. If you want all instances of a component to be formatted a certain way, then you should create a custom skin. For more information about using inline styles and creating skins, see Chapter 20, Customizing the Appearance Using Styles and Skins. Example 16–3 shows an outputFormatted component displaying only a few words of its value in bold. Example 16–3 Using outputFormatted to Bold Some Text af:outputFormatted value=lt;bThis is in bold.lt;b This is not bold Figure 16–2 shows how the component displays the text. Figure 16–2 Text Formatted Using the outputFormatted Component

16.2.1 How to Display Output Text

Before displaying any output text, decide whether or not any parts of the value must be formatted in a special way. To display output text: 1. In the Component Palette, from the Common Components panel, drag and drop an Output Text onto the page. To create an outputFormatted component, drag and drop an Output Formatted from the Component Palette.

2. Expand the Common section of the Property Inspector and set the value attribute

to the value to be displayed. If you are using the outputFormatted component, use HTML formatting codes to format the text as needed, as described in Table 16–1 and Table 16–2 . The outputFormatted component also supports the styleUsage attribute whose values are the following predefined styles for the text: ■ inContextBranding ■ instruction ■ pageStamp Figure 16–3 shows how the styleUsage values apply styles to the component. Tip: If parts of the value require special formatting, use an outputFormatted component. Tip: If you plan to support changing the text of the component through active data for example, data being pushed from the data source will determine the text that is displayed, then you should use the activeOutputText component instead of the outputText component. Create an activeOutputText component by dragging an Output Text Active from the Component Palette. 16-4 Web User Interface Developers Guide for Oracle Application Development Framework Figure 16–3 styleUsage Attribute Values 16.2.2 What You May Need to Know About Allowed Format and Character Codes in the outputFormatted Component Only certain formatting and character codes can be used. Table 16–1 lists the formatting codes allowed for formatting values in the outputFormatted component. Table 16–2 lists the character codes for displaying special characters in the values. Note: If the styleUsage and styleClass attributes are both set, the styleClass attribute takes precedence. Table 16–1 Formatting Codes for Use in af:outputFormatted Values Formatting Code Effect br Line break hr Horizontal rule ol...olul... ulli...li Lists: ordered list, unordered list, and list item p...p Paragraph b...b Bold i...i Italic tt...tt Teletype or monospaced big...big Larger font small...small Smaller font pre...pre Preformatted: layout defined by whitespace and line break characters preserved span...span Span the enclosed text a...a Anchor Table 16–2 Character Codes for Use in af:outputFormatted Values Character Code Character lt; Less than gt; Greater than amp; Ampersand reg; Registered copy; Copyright nbsp; Nonbreaking space quot; Double quotation marks