How to Use Declarative Components in JSF Pages What Happens When You Use a Declarative Component on a JSF Page

Creating and Reusing Fragments, Page Templates, and Components 19-31 can be added to the page during any page request, but they must be added before the document component is rendered. The resource tag can be used with PPR. During PPR, the following requirements apply: ■ URL resources are compared on the client before being added to the page. This ensures duplicates are not added. ■ CSS resources are removed from the page during a PPR navigation. The new page will have the new CSS resources.

19.5.1 How to Add Resources to Page Templates and Declarative Components

You use the af:resource tag to define the location of the resource. The resource will then be added to the document header of the consuming page. To add resources: 1. From the Operations section of the Component Palette, drag and drop a Resource tag anywhere onto the consuming page.

2. In the Insert Resource dialog, select either css or javascript.

3. In the Property Inspector, enter the URI of the resource as the value for the

source attribute. Start the URI with a single forward slash if the URI should be context relative. Start the URI with two forward slashes if the URI should be server relative. If you start the URI with something other than one or two slashes, the URI will be resolved relative to URI location in the browser

19.5.2 What Happens at Runtime: Adding Resources to the Document Header

During JSP tag execution, the af:resource tag only executes if its parent component has been created. When it executes, it adds objects to a set in the RichDocument component. RichDocument then adds the specified resources CSS or JavaScript to the consuming page. 19-32 Web User Interface Developers Guide for Oracle Application Development Framework 20 Customizing the Appearance Using Styles and Skins 20-1 20 Customizing the Appearance Using Styles and Skins This chapter describes how to change the appearance of your application by changing style properties using ADF Faces skins and component style attributes. This chapter includes the following sections: ■ Section 20.1, Introduction to Skins, Style Selectors, and Style Properties ■ Section 20.2, Applying Custom Skins to Applications ■ Section 20.3, Defining Skin Style Properties ■ Section 20.4, Changing the Style Properties of a Component ■ Section 20.5, Referring to URLs in a Skin’s CSS File ■ Section 20.6, Versioning Custom Skins ■ Section 20.7, Deploying a Custom Skin File in a JAR File

20.1 Introduction to Skins, Style Selectors, and Style Properties

JDeveloper supports two options for applying style information to your ADF Faces components: ■ Build a skin and a cascading style sheet CSS using defined style selectors and configure your ADF application to use the skin and style sheet. ■ Use style properties to override the style information from the skin CSS to set specific instances of component display. ADF Faces components delegate the functionality of the component to a component class, and the display of the component to a renderer. By default, all tags for ADF Faces combine the associated component class with an HTML renderer, and are part of the HTML render kit. HTML render kits are included with ADF Faces for display on both desktop and PDA. You cannot customize ADF Faces renderers. However, you can customize how components display using skins. If you do not wish to change ADF Faces components throughout the entire application, you can choose to change the styles for the instance of a component on a page. You can also programmatically set styles conditionally. For example, you may want to display text in red only under certain conditions. For more information, see Section 20.4, Changing the Style Properties of a Component . The File Explorer application allows you to select several skins from a dropdown list. It provides several CSS files to support skin selection. For more information, see Section 1.4.3, Overview of the File Explorer Application .