This chapter describes how to work with style classes. Information on how to create, modify, and apply a style class is provided in addition to describing how to configure a style class for a specific instance of a component.
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 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.
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 9-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 (for the release that pertains to the application you are skinning).
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."
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.
In the Selector Tree of the selectors editor, select New Style Class from the dropdown list, as shown in Figure 9-2.
The Create Style Class dialog opens.
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.
Click OK.
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.
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.
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.
In the Selector Tree, navigate to the style class that you want to modify.
In the Properties window, make changes to the properties that you want to configure for the style class.
Click the Refresh icon to update the Preview Pane after you make changes to the style class.
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 9-4.
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. 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::header-text {background-color: Red;}
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:
Create a style class, as described in Section 9.2, "Creating a Style Class."
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 Developing Web User Interfaces with Oracle ADF Faces (for the release that pertains to the application you are skinning).
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.