Working with Component-Specific Selectors 5-3
ADF skins change the appearance of ADF Faces and ADF Data Visualization components. For more information, navigate to
http:www.oracle.comtechnetworkdeveloper-toolsadfovervie windex.html
5.2 Changing ADF Faces Components’ Selectors
ADF Faces components render user interface controls such as command buttons, command 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 more information about ADF Faces
components and the functionality that they provide, see the Oracle Fusion Middleware Web User Interface Developers Guide for Oracle Application Development Framework.
You can change the runtime appearance of ADF Faces components by editing the properties that each ADF Faces skin selector exposes. 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 5–2
and Figure 5–3
take the goButton component as an example and illustrate how you can customize the appearance of this
component using pseudo-elements and the component’s selector. Figure 5–2
shows the application of the default ADF Faces’ fusion skin on the goButton component and
the component icon.
Figure 5–2 goButton Component Default Appearance with Fusion ADF Skin
Figure 5–3 shows the appearance of the component after you set values for the
following pseudo-elements on the component’s selector:
■
access-key : The Color property is set to red
■
icon-style : The Border property is set to 1px solid black
Figure 5–3 goButton Component with Modified Selectors
Reference information about the selectors that ADF Faces components expose can be found in the Oracle Fusion Middleware Tag Reference for Oracle ADF Faces Skin Selectors.
5-4 Skin Editor Users Guide for Oracle Application Development Framework
5.3 Changing ADF Data Visualization Components’ Selectors
