How to Apply Themes to Components

20-24 Web User Interface Developers Guide for Oracle Application Development Framework skin-family{sessionScope.skinFamily}skin-family

20.4 Changing the Style Properties of a Component

ADF Faces components use the CSS style properties based on the Cascading Style Sheet CSS specification. Cascading style sheets contain rules, composed of selectors and declarations, that define how styles will be applied. These are then interpreted by the browser and override the browser’s default settings.

20.4.1 How to Set an Inline Style

Set an inline style for a component by defining the inlineStyle attribute. You can use inline style to specify the style of a component for that instance of the component. For more information, see Section 8.3, Arranging Contents to Stretch Across a Page . To set an inline style: 1. Set the inlineStyle attribute of the component to the inline style you want to use.

2. If you use the Property Inspector to set a style, you can select the style features you

want from dropdown lists, as shown in Figure 20–5 . Figure 20–5 Setting an inlineStyle WARNING: Do not use styles to achieve stretching of components. Using styles to achieve stretching is not declarative and, in many cases, will result in inconsistent behavior across different web browsers. Instead, you can use the geometry management provided by the ADF Faces framework to achieve component stretching. For more information about layouts and stretching, see Section 8.2.1, Geometry Management and Component Stretching. . Customizing the Appearance Using Styles and Skins 20-25 JDeveloper adds the corresponding code for the component to the JSF page. Example 20–15 shows the source for an af:outputText component with an inlineStyle attribute. Example 20–15 InlineStyle in the Page Source af:outputText value=outputText1 inlineStyle=color:Red; text-decoration:overline; 3. You can use an EL expression for the inlineStyle attribute itself to conditionally set inline style attributes. For example, if you want the date to be displayed in red when an action has not yet been completed, you could use the code similar to that in Example 20–16 . Example 20–16 EL Expression Used to Set an inlineStyle Attribute af:outputText value={row.assignedDate eq null?res[srsearch.unassignedMessage]:row.assignedDate} inlineStyle={row.assignedDate eq null?color:rgb255,0,0;:} 4. The ADF Faces component may have other style attributes not available for styling that do not register on the root DOM element. For example, for the af:inputText component, set the text of the element using the contentStyle property, as shown in Example 20–17 . Example 20–17 Using the contentStyle Property af:inputText value=outputText1 contentStyle=color:Red;

20.4.2 How to Set a Style Class

You can define the style for a component using a style class. You create a style class to group a set of inline styles. To set a style using a style class: 1. Set the styleClass attribute of the component to the style class you want to use. Example 20–18 shows an example of a style class being used in the page source. Example 20–18 Page Source for Using a Style Class af:outputText value=Text with a style class styleClass=overdue 2. You can also use EL expressions for the styleClass attribute to conditionally set style attributes. For example, if you want the date to be displayed in red when an action has not yet been completed, you could use code similar to that in Example 20–16 .

20.5 Referring to URLs in a Skin’s CSS File

You can refer to a URL from a skin’s CSS file in a number of different formats. The supported formats are: ■ Absolute