14.2 Changing the Style Properties of a Component

ADF Faces components use the CSS style properties, based on the Cascading Style Sheet 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. It is beyond the scope of this document to explain the concepts of CSS. Visit the W3C web site (www.w3c.org) for extensive information on style sheets, including the official specification.

You can change a style property to alter a component's appearance. ADF Faces components use both inline style properties that can set individual attributes (such as font-size and font-color), as well as style classes used to group a set of inline styles. For example, the style class .AFFieldText sets all properties for the text displayed in an inputText component.

14.2.1 How to Set a Component's Style Attributes

You can set inline styles or you can declare a style class for an ADF Faces component on a page.

To set the style:

In the Structure window, select the component you wish to style.
In the Property Inspector, expand the Core node. This node contains all the attributes related to how the component displays.
To set a style class for the component, click in the StyleClass field and click the ellipses (...) button. In the StyleClass dialog, enter a style class for use on this component. For additional help in using the dialog, click Help.
To set an inline attribute, expand the InlineStyle node. Click in the field for the attribute to set, and use the dropdown menu to choose a value.

You can also use EL expressions for the InlineStyle attribute itself to conditionally set inline style attributes. For example, in the SRSearch page of the SRDemo application, the date in the Assigned Date column displays red if a service request has not yet been assigned. Example 14-1 shows the code on the JSF page for the outputText component.
Example 14-1 EL Expression Used to Set a Style Attribute
```
<af:outputText value="#{row.assignedDate eq null?res['srsearch.highlightUnassigned']:row.assignedDate}"
           binding="#{backing_SRSearch.outputText6}"
           id="outputText6"
            inlineStyle="#{row.assignedDate eq null?'color:red;':''}"/>
```

14.2.2 What Happens When You Format Text

As Example 14-1 shows, when you use the Property Inspector to set a style, JDeveloper adds the corresponding code for the component to the JSF page.