This chapter includes the following sections:
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 Working With Global Selector Aliases, which enable you to define style properties that you want to apply to multiple ADF Faces components.
Figure 10-1 shows an ADF skin with the nodes expanded for the different categories of style classes.
Each category of style class serves a purpose:
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 Selectors: 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 10-1. For detailed descriptions of the style classes in the ADF skins that Oracle ADF provides, see the Tag Reference for Oracle ADF Faces Skin Selectors.
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 in order to specify style properties for specific instances of ADF Faces components.
After you create a style class, you modify it to define the style properties that you want it to contain. See Modifying 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:
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 10-3.
Figure 10-3 Newly-Created Style Class
CSS syntax for the style class that you create appears in the source file of the ADF skin. The following example shows the entries that appear in the source file for the ADF skin in Figure 10-3.
.OrderOverdue { }
Modify a style class to change the style properties that apply to specific instances of ADF Faces components.
The process to modify a style class is the same for the different categories of style class that appear in the selectors 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 Properties window to set or override style properties for the style class.
You select the style class under the Style Classes node in the Selector Tree and modify its properties using the Properties window.
To modify a style class:
Once you have defined a style class with the style properties that you want to apply, you configure the instance of the ADF Faces component that you want to render using these style properties.
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 fuchsia the default background color for the header text that panelBox
components render, as shown in Figure 10-4.
Figure 10-4 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 header text 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. The following example shows the syntax that appears in the source file of the ADF skin to achieve the outcome just described.
.panelBoxInstanceClass af|panelBox::disclosure-link{display:none;} .panelBoxInstanceClass af|panelBox::header-text {background-color: Red;}
Note:
You cannot configure ADF skin properties in the style classes that you create for specific instances of a component. ADF skin properties allow you to customize the rendering of a component throughout the application, not specific instances of a component. For information about ADF skin properties, see Properties in the ADF Skinning Framework.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:
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 10-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 10-5, this is the panelBox
component labeled Second Panel Box.
Figure 10-5 Component Rendering with Style Properties Defined in Style Class