This chapter includes the following sections:
Customize the appearance of ADF Faces or ADF Data Visualization components by defining style properties for the selectors that the components expose.
To achieve the appearance you want, you need to become familiar with the component-specific selectors that the ADF Faces and ADF Data Visualization components expose, plus the global selector aliases and descendant selectors that a component-specific selector may reference. The ADF skins that you extend from when you create an ADF skin define many global selector aliases and descendant selectors. You also need to become familiar with the component itself and how it relates to other components. For example, customizing the appearance of the ADF Faces table
component shown in Figure 6-1 requires you to define style properties for the row-header-cell
and column-filter-cell
selectors exposed by the af:column
component in addition to selectors exposed by the ADF Faces table
component. You may also need to modify the style properties for one or more of the icon or message global selector aliases that the ADF skin you extend defines.
Note:
Consider using the design editor, as described in Working with the ADF Skin Design Editor, if you want to change the properties of some of the most frequently used selectors in an ADF skin that extends from the Skyros ADF skin. This editor appears by default if your ADF skin extends from the Skyros ADF skin. The design editor provides a variety of controls to quickly change your ADF skin.
Figure 6-1 Selectors for an ADF Faces table Component
Use the tools that the selectors editor for ADF skins provides to customize the appearance of the ADF Faces components and ADF Data Visualization components. See Working with ADF Skins in JDeveloper.
Other sources of information that may help you as you change the selectors of ADF Faces and ADF Data Visualization components include the following:
Images: An ADF skin can reference images that render icons and logos, for example, in a page. For information about how to work with images in an ADF skin, see Working with Images and Color in Your ADF Skin.
Text: An ADF skin does not include text strings that render in your page. However, you can specify a resource bundle that defines the text strings you want to appear in the page. See Working With Text in an ADF Skin.
Global selector aliases: A global selector alias specifies style properties that you can apply to multiple ADF Faces components simultaneously. For information about global selector aliases, see Working With Global Selector Aliases.
Style Classes: A style class in an ADF skin specifies a number of style properties that an ADF Faces component can reference as a value if it exposes a style-related attribute (styleClass
and inlineStyle
). For information about style classes, see Working with Style Classes.
ADF Faces Rich Client Components Hosted Demo: The Oracle Technology Network (OTN) web site provides a link to an application that demonstrates how ADF skins change the appearance of ADF Faces and ADF Data Visualization components. Navigate to http://www.oracle.com/technetwork/developer-tools/adf/overview/index.html
Change the runtime appearance of ADF Faces components by editing the properties that each ADF Faces skin selector exposes.
ADF Faces components render user interface controls, such as buttons, links and check boxes in your web application. ADF Faces components also include components that render calendars, panels to arrange other user interface controls and tables in your web application. For information about ADF Faces components and the functionality that they provide, see ADF Faces Components in Developing Web User Interfaces with Oracle ADF Faces.
The number of selectors that an ADF Faces component exposes varies by component. For example, the ADF Faces components, af:image
and af:popup
, expose one selector each. In contrast, the ADF Faces component, af:panelHeader
, exposes a variety of selectors that enable you to change the appearance of different parts of the user interface of that component. There are, for example, selectors that allow you to change the af:panelHeader
component's instruction text, help icons, and titles.
The process to follow to change the runtime appearance of an ADF Faces component is the same for each component; the only difference is the number of selectors that each ADF Faces component exposes. Figure 6-2 and Figure 6-3 take the button
component as an example and illustrate how you can customize the appearance of this component using pseudo-elements and the component's selector. Figure 6-2 shows the application of the skyros
skin on the button
component and the component icon.
Figure 6-2 Button Component Default Appearance with Skyros ADF Skin
Figure 6-3 shows the appearance of the component in the selectors editor after you set values for the following pseudo-elements on the component's selector:
access-key: The Color property is set to red
dropdown-icon-style: The Border property is set to 2px solid black
Figure 6-3 Button Component with Modified Selectors
Reference information about the selectors that ADF Faces components expose can be found in the Tag Reference for Oracle ADF Faces Skin Selectors.
Change the runtime appearance of ADF Data Visualization components by editing the properties that each ADF Data Visualization component selector exposes.
The ADF Data Visualization components are a set of components that provide functionality to represent data in graphical and tabular formats. Examples of the ADF Data Visualization components include the following: graph, gantt, pivot table, and hierarchy viewer. For information about ADF Data Visualization components and the functionality that they provide, see Introduction to ADF Data Visualization Components in Developing Web User Interfaces with Oracle ADF Faces.
The number of selectors exposed by an ADF Data Visualization component varies by component.
Figure 6-4 , for example, shows an ADF skin in the selectors editor with the nodes expanded to show the selectors that you can customize for the ADF Data Visualization gauge
component.
Figure 6-4 ADF Data Visualization Component Selectors
You customize the appearance of ADF Data Visualization components by defining style properties for the selectors that each ADF Data Visualization component exposes. Using the tools provided by JDeveloper's selectors editor for ADF skins, you customize the appearance of the ADF Data Visualization components. See Working with ADF Skins in JDeveloper.
To achieve the appearance you want, you need to become familiar with the selectors that the ADF Data Visualization component exposes, the global selector aliases that the component may reference and which are defined in the ADF skin that you extend when you create an ADF skin. You also need to become familiar with the component itself and how it relates to other components. For example, customizing the appearance of the ADF Data Visualization pivotTable
component shown in Figure 6-5 requires you to define style properties for this selector's pseudo-elements. You may also need to modify the style properties for one or more of the global selector aliases that the ADF skin you extend defines.
Figure 6-5 ADF Data Visualization pivotTable Component
Many ADF Data Visualization component selectors, such as the selectors for the graph
and hierarchyViewer
components, expose pseudo-elements for which you configure ADF skin properties. These ADF skin properties modify the appearance of the area specified by the pseudo-element. The characters -tr-
preface the names of ADF skin properties. For example, Figure 6-6 shows the properties of the hierarchy viewer's lateral-navigation-button
selector, all of which are prefaced by -tr-
.
Figure 6-6 Properties for the hierarchyViewer Component lateral-navigation-button Pseudo-Element
In contrast, the gantt
component's summary-task-left
selector, shown in Figure 6-7, exposes only four ADF skin properties (-tr-rule-ref
, -tr-inhibit-
, -tr-enable-themes
, and -tr-children-theme
) as the majority of the properties that you configure for this selector are CSS properties.
For information about ADF skin properties, see Properties in the ADF Skinning Framework.
Figure 6-7 Properties for the gantt Component summary-task-left Pseudo-Element
Reference information about the selectors, pseudo-elements, and pseudo-classes that ADF Data Visualization components expose can be found in the Tag Reference for Oracle ADF Data Visualization Tools Skin Selectors.
Expand the appropriate node in the Selector Tree of the selectors editor, choose the selector, and set values using the Properties window.
The process to change a component-specific selector is the same for both the ADF Faces and ADF Data Visualization components. In the Selector Tree of the selectors editor, you expand the Faces Components Selectors or Data Visualization Selectors node to select the selector of the component you want to modify. You then set values for this selector using the Properties window. You can also set properties for any pseudo-elements, component style classes, component selector aliases, or descendant selectors that the selector you select references. In addition, you can add pseudo-classes that the component-specific supports. For information about pseudo-classes, see Pseudo-Classes in the ADF Skinning Framework. Figure 6-8 shows a view of the skin selector for the ADF Faces table
component in the Selector Tree of the selectors editor with the different pseudo-elements that you can configure for this skin selector.
Figure 6-8 Selector for the table Component
Figure 6-9 shows a runtime view of an ADF Faces table
component that renders data using the style properties provided by the ADF Faces simple
skin.
Figure 6-9 ADF Faces table Component Rendered By the simple Skin
You change a component-specific selector by selecting the selector in the Selector Tree and setting values for the selector, its pseudo-elements, or descendant selectors in the Properties window. In addition, you can add a pseudo-class if the component-specific selector supports one.
To change a component-specific selector:
The selectors editor displays the changes that you make to the selector after you click the Refresh icon in the Preview Pane. If you add a pseudo-class to the selector, the Preview Pane also displays an entry for the selector with the added pseudo-class. For example, Figure 6-10 shows an entry for a selector with the :hover
pseudo-class added.
Note:
The Preview Pane for the af|document
selector only displays one entry even if you add a pseudo-class to this selector.
Figure 6-10 Preview Pane with a Component Specific Selector and a Pseudo-Class
The selectors editor also writes the values that you specify for the selectors in the Properties window to the source file for the ADF skin. The following example shows the changes that appear in the source file after making some of the changes described in How to Change a Component-Specific Selector.
af|column::column-header-cell { color: Black; background-color: Olive; font-weight: bold; }
When a web application uses an ADF skin that contains the values shown in the previous example, header rows in the columns of a table rendered by the ADF Faces table
component appear as illustrated by Figure 6-11 where the table uses a skin that extends the simple
skin.
Figure 6-11 ADF Faces table with a Header Row Skinned
Apply styles to ADF Faces input components based on whether or not the components have certain types of message associated with them.
When a message of a particular type is added to a component, the styles of that component are automatically modified to reflect the new status. If you do not define styles for the type of message in question, the component uses the default styles defined in the ADF skin.
The types of message property are:
:fatal
:error
:warning
:confirmation
:info
Figure 6-12 shows an inputText
component rendered using the simple
ADF skin. In Figure 6-12, the simple
ADF skin defines style values for the :warning
message property to apply to the inputText
component when an end user enters values that generate a warning.
Figure 6-12 inputText Component Displaying Style for :warning Message Property
Figure 6-13 shows the same inputText
component as in Figure 6-12. In Figure 6-13, the end user entered a value that generated an error. As a result, the inputText
component renders using the style properties configured for the :error
message property.
Figure 6-13 inputText Component Displaying Style for :error Message Property
The ADF skinning framework defines a number of global selector aliases that define style properties to apply to messages. Figure 6-14 shows a list of global selector aliases under the Message node in the Selector Tree of the selectors editor. The Preview Pane, on the right of Figure 6-14, shows how the style properties defined for the global selector alias (.AFFormComponentOutlineFatal:alias
) currently selected in the Selector Tree render the component selected from the View as list.
Figure 6-14 Global Selector Aliases for Messages
You can customize the global selector aliases that the ADF skinning framework provides for messages by defining style properties in your ADF skin. The style properties that you define for the global selector alias affect all ADF Faces components that reference the global selector alias. For example, if you change the border color for the global selector alias shown in Figure 6-14 to green, all the ADF Faces components shown in the View as list render with a border that is green. For information about global selector aliases, see Working With Global Selector Aliases.
The af|message
and af|messages
selectors also expose pseudo-elements that enable you to change the icons that appear in the message dialogs at runtime. In addition, these selectors define resource strings that determine the text to appear in tool tips when an end user hovers over a message dialog. You can override these resource strings by specifying alternative values in a resource bundle, as described in Working With Text in an ADF Skin. For information about configuring messages for ADF Faces components, see Displaying Tips, Messages, and Help in Developing Web User Interfaces with Oracle ADF Faces.
You add a pseudo-class to the component's selector for the message type that you want to configure. You then define style properties for the pseudo-class using the Properties window.
To configure an ADF skin property to apply to a message:
The selectors editor writes the values that you specify for the selector's pseudo-class in the Properties window to the source file for the ADF skin. For example, assume that you set the value of the Border property to orange
for the content
pseudo-element of the af|inputText
selector's error
pseudo-class. Figure 6-15 shows the syntax entries that appear in the source file of the ADF skin and the change in the Preview Pane of the selectors editor.
Figure 6-15 Style Properties for an inputText Component's Error Message
Oracle ADF provides application accessibility support to make applications developed using ADF Faces components usable for persons with disabilities.
You can define style properties in your ADF skin specifically for persons with disabilities as part of efforts to make your application accessible. You preface these style properties with the @accessibility-profile
rule.
The @accessibility-profile
rule allows you to define style properties for the high-contrast
and large-fonts
accessibility profile settings that you can specify in the trinidad-config.xml
file. For information about the trinidad-config.xml
file, see Configuration Files for an ADF Skin.
Define style properties for the high-contrast
accessibility profile where you want background and foreground colors to contrast highly with each other. Define style properties for the large-fonts
accessibility profile for cases where the user must be allowed to increase or decrease the text scaling setting in the web browser. Defining large-fonts does not mean that the fonts are large, but rather that they are scalable fonts or dimensions instead of fixed pixel sizes.
Example 6-1 shows style properties that get applied to the af|column::sort-ascending-icon
pseudo-element when an application renders using the high-contrast
accessibility profile.
For information about developing accessible ADF Faces pages and accessibility profiles, see Developing Accessible ADF Faces Pages in Developing Web User Interfaces with Oracle ADF Faces.
Example 6-1 Style Properties Defined Using the @accessibility-profile
@accessibility-profile high-contrast { af|calendar::calendar-icon-reminder-style, af|calendar::calendar-icon-recurring-style, af|calendar::calendar-icon-recurring-change-style { -tr-inhibit: all; } }
You define style properties for the selector or selectoŕs pseudo-elements that you want to configure and preface these style properties with the @accessibility-profile
rule.
To configure an ADF skin for accessibility:
@accessibility-profile
rule, as illustrated in Example 6-1.