How to Style Activities

15-18 Web User Interface Developers Guide for Oracle Application Development Framework Example 15–4 Date Customizer Class public class MyDateCustomizer extends DateCustomizer { public String formatDate date, String key, Locale locale, TimeZone tz { if af|calendar::month-grid-cell-header-misc.equalskey { return appropriate string } else if af|calendar::month-grid-cell-header-day-link.equalskey { return appropriate string } return null; } } 2. In a managed bean, create an instance of the DateCustomizer class, for example: private DateCustomizer _dateCustomizer = new DemoDateCustomizer; 3. In the calendar component, bind the dateCustomizer attribute to the DateCustomizer instance created in the managed bean. 16 Using Output Components 16-1 16 Using Output Components This chapter describes how to display output text, images, and icons using ADF Faces components, and how to use components that allow users to play video and audio clips. This chapter includes the following sections: ■ Section 16.1, Introduction to Output Text, Image, Icon, and Media Components ■ Section 16.2, Displaying Output Text and Formatted Output Text ■ Section 16.3, Displaying Icons ■ Section 16.4, Displaying Images ■ Section 16.5, Using Images as Links ■ Section 16.6, Displaying Images in a Carousel ■ Section 16.7, Displaying Application Status Using Icons ■ Section 16.8, Playing Video and Audio Clips

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

ADF Faces provides components for displaying text, icons, and images, and for playing audio and video clips on JSF pages. Read-only text can be displayed using the outputText or outputFormatted components. The outputFormatted component enables you to add a limited set of HTML markup to the value of the component, allowing for some very simple formatting to the text. Many ADF Faces components can have icons associated with them. For example, in a menu, each of the menu items can have an associated icon. You identify the image to use for each one as the value of an icon attribute for the menu item component itself. Information and instructions for adding icons to components that support them are covered in those components’ chapters. In addition to providing icons within components, ADF Faces also provides icons used when displaying messages. You can use these icons outside of messages as well. To display an image on a page, you use the image component. Images can also be used as links including image maps or to depict the status of the server. You can display a collection of images in a carousel, which allows the users to spin through the collection to view each image. The media component can play back an audio clip or a video clip. These components have attributes so that you can define how the item is to be presented on the page. 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