First page Back Continue Last page Text

oracle adf workshop


Skinning Keys

The ADF Faces skin style selectors support multiple options for skinning a component to give a custom look and feel to your application. Either global or component selectors may include one or more of these types of ADF Faces Skins selectors:

Standard selectors: Directly represent an element that can have styles applied to it. For example, af|body represents the af:body component. You can set CSS styles, properties, and icons for this type of element.

Selectors with pseudo-elements: Pseudo-elements are used to denote a specific area of a component that can have styles applied to it. Pseudo-elements are denoted by a double colon followed by the portion of the component the selector represents. For example, af|chooseDate::days-row provides the styles and properties for the appearance of the dates within the calendar grid.

Icon Selectors: Some components render icons (<img> tags) within them by using a set of base icons. These icons can be skinned even though they are not rendered with CSS in the same way as the background-image CSS property, for example. Instead the icons are registered with the Skin object for use by the renderer. Icon selectors are denoted by ­icon for component selectors and Icon:alias for global selectors. For example, the af:inputDate component has a changed icon that can be skinned by using the af|inputDate::changed-icon selector. The changed icon can also be globally set for all components using that icon with the AFChangedIcon:alias global selector.