9 Working with Style Classes

This chapter describes how to work with style classes.

This chapter includes the following sections:

9.1 About Style Classes

A style class allows you to specify a number of style properties in one location in an ADF skin that you want to apply to specific instances of ADF Faces or ADF Data Visualization components. The style properties that you define for a style class take precedence over the style properties that you define for the component's selectors. Application developers can specify a style class as a value for the styleClass and inlineStyle attributes that many ADF Faces components expose. At runtime, the style properties that you defined in the style class get applied to the ADF Faces component rather than other style properties defined in the ADF skin. Style classes differ from the global selector aliases, described in Chapter 8, "Working With Global Selector Aliases," which enable you to define style properties that you want to apply to multiple ADF Faces components.

Figure 9-1 shows an ADF skin with the nodes expanded for the different categories of style classes.

Figure 9-1 Categories of Style Class

Categories of Shared Style Class

Each category of style class serves a purpose:

  • Component Group: Menu: Style classes inherited from the extended ADF skins that affect menu items.

  • Component Group: PanelBox and Region: Style classes inherited from the extended ADF skins that affect panelBox and region components.

  • Component Group: PanelHeader: Style classes inherited from the extended ADF skins that affect panelHeader components.

  • Descendant Selectors: Style classes inherited from the extended ADF skins for descendant selectors.

  • Miscellaneous: Miscellaneous style classes inherited from the extended ADF skins. For example, this category includes the .AFBrandingBar style class that can be used for a branding bar containers.

  • Note Window: Style classes inherited from the extended ADF skins that affect the noteWindow component.

  • Popup: Style classes inherited from the extended ADF skins that affect the popup component.

  • Text: Style classes inherited from the extended ADF skins that determine the appearance of various types of text (for example, address fields and instruction text).

Style classes that you or other users define appear under the Style Classes node as shown by the entry for the .UserDefined style class in Figure 9-1. For detailed descriptions of the style classes in the ADF skins that Oracle ADF provides, see the Oracle Fusion Middleware Tag Reference for Oracle ADF Faces Skin Selectors.

9.2 Creating a Style Class

You can create a new style class in your ADF skin or override a style class that your ADF skin inherits from the ADF skin that it extends.

After you create a style class, you modify it to define the style properties that you want it to contain. For more information, see Section 9.3, "Modifying a Style Class."

9.2.1 How to Create a Style Class

You can create a style class that defines the style properties you want an application developer to apply to an ADF Faces or ADF Data Visualization component using the component's styleClass or inlineStyle attribute.

To create a style class:

  1. In the Selector Tree of the visual editor, select New Style Class from the Plus icon's list, as shown in Figure 9-2.

    Figure 9-2 New Style Class Option in the Selector Tree

    New Shared Style Class Option in the Skinning Navigator

    The Create Style Class dialog opens.

  2. Choose the appropriate option:

    • Enter a new name if you want to create a new style class that does not inherit style properties from an ADF skin that your ADF skin extends.

      Tip:

      Enter a name for the style class that indicates the purpose it serves.
    • Enter the name of a style class that inherits style properties from an ADF skin that your ADF skin extends and for which you want to override style properties in your ADF skin.

  3. Click OK.

9.2.2 What Happens When You Create a Style Class

The style class appears under the Style Classes node in the Selector Tree and a visual representation as it applies to a component appears in the Preview Pane, as shown in Figure 9-3.

Figure 9-3 Newly-Created Style Class

Newly-Created Shared Style Class

CSS syntax for the style class that you create appears in the source file of the ADF skin. Example 9-1 shows the entries that appear in the source file for the ADF skin in Figure 9-3.

Example 9-1 CSS Syntax for a Newly-Created Style Class

.OrderOverdue
{
}

9.3 Modifying a Style Class

The process to modify a style class is the same for the different categories of style class that appear in the visual editor. You select the style class in the Selector Tree and use the menus in the Preview Pane to add or remove pseudo-classes to the style class or use the Property Inspector to set or override style properties for the style class.

9.3.1 How to Modify a Style Class

You select the style class under the Style Classes node in the Selector Tree and modify its properties using the Property Inspector.

To modify a style class:

  1. In the Selector Tree, navigate to the style class that you want to modify.

  2. In the Property Inspector, make changes to the properties that you want to configure for the style class.

  3. Click the Refresh icon to update the Preview Panel after you make changes to the style class.

9.4 Configuring a Style Class for a Specific Instance of a Component

You can define a style class where you define style properties to apply to a specific instance of a component. Consider, for example, a panelBox component that application developers use to show or hide content on a page. One page can render multiple instances of a panelBox component. You decide to make white the default background color for panelBox components, as shown in Figure 9-4

Figure 9-4 Setting Background Color for a panelBox Component

Setting Background Color for a panelBox Component

However, you decide that you want to render one or more instances of the panelBox component without the disclosure link control that allows end users to show and hide the content in the component. Additionally, you decide that you want the background color of these instances of the panelBox component to render with the background color set to red. To achieve this, you define style properties for a style class in the ADF skin. You then specify the style class as the value for the styleClass attribute for each instance of the panelBox component that you want to render using these style properties. Example 9-2 shows the syntax that appears in the source file of the ADF skin to achieve the outcome just described.

Example 9-2 Syntax for a Style Class in an ADF Skin

.panelBoxInstanceClass af|panelBox::disclosure-link{display:none;}
.panelBoxInstanceClass af|panelBox::content{background-color:red}

9.4.1 How to Configure a Style Class for a Specific Instance of a Component

You specify the style class as the value for the styleClass attribute for each instance of a component that you want to render using the style class.

To configure a style class for a specific instance of a component:

  1. Create a style class, as described in Section 9.2, "Creating a Style Class."

  2. In JDeveloper, set the component's styleClass attribute to the name of the style class you created in step 1.

    For more information about setting the component's styleClass attribute, see the "How to Set a Style Class" section of the Oracle Fusion Middleware Web User Interface Developer's Guide for Oracle Application Development Framework.

9.4.2 What Happens When You Configure a Style Class for a Specific Instance of a Component

At runtime, instances of the component for which you do not specify instance-specific style properties using a style class render using the style properties defined in the component-specific selectors and global selector aliases. In Figure 9-5, this is the panelBox component labeled First Panel Box. Instances of the component for which you specify a style class as a value for the styleClass attribute render using the style properties defined in this style class. In Figure 9-5, this is the panelBox component labeled Second Panel Box.

Figure 9-5 Component Rendering with Style Properties Defined in Style Class

Component with Styles Defined in Shared Style Class