Introduction to Output Text, Image, Icon, and Media Components

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 Using Output Components 16-5 The attributes class, style, and size can also be used in the value attribute of the outputFormatted component, as can href constructions. All other HTML tags are ignored.

16.3 Displaying Icons

ADF Faces provides a set of icons used with message components, shown in Figure 16–4 . Figure 16–4 ADF Faces Icons If you want to display icons outside of a message component, you use the icon component and provide the name of the icon type you want to display. When you use messages in an ADF Faces application, the icons are automatically added for you. You do not have to add them to the message component. However, you can use the icons outside of a message component. To display one of the standard icons defined in the skin for your application, you use the icon component. To display a standard icon: 1. In the Component Palette, from the Common Components panel, drag and drop an Icon onto your page.

2. Expand the Common section and set Name to the name of one of the icon

functions shown in Figure 16–4 . For example, if you want to display a red circle with a white X, you would set Name to error. 3. Expand the Appearance section, and set ShortDesc to the text you want to be displayed as the alternate text for the icon.

16.4 Displaying Images

To display an image on a page, you use the image component and set the source attribute to the URI where the file is located. The image component also supports accessibility description text by providing a way to link to a long description of the image. Note: For security reasons, JavaScript is not supported in output values. Note: The images used for the icons are determined by the skin the application uses. If you want to change the image, create a custom skin. For more information, see Chapter 20, Customizing the Appearance Using Styles and Skins.