This chapter includes the following sections:
The ADF skins provided by Oracle ADF define color schemes and reference images to provide a colorful look and feel for applications. Changing these colors and the images that your ADF skin references will make a significant difference to the appearance of the application that uses your ADF skin.
The simple
skin differs from the other skins provided by Oracle ADF in that it contains only minimal formatting.
Figure 7-1 illustrates this point by showing the same page from an application that renders using two different ADF skins (skyros
and simple
). The skyros
skin defines the look and feel of the application page in the upper part of Figure 7-1. It uses more color and images than the application page in the lower part that uses the simple
skin.
Figure 7-1 ADF Skin Using Images and Color
Among the selectors in the ADF skins provided by Oracle ADF that reference images are those in the following list. A short description of the role that the referenced images performs in skinning the web application also appears.
af|document::splash-screen-icon
This component-specific selector specifies the icon that appears within a splash screen when a web applications loads in a browser.
af|column::sorted-descending-icon-style
This component-specific selector specifies the icon that renders for the sorted descending indicator in a column.
.AFFatalIcon:alias
This global selector alias specifies the icon to appear if a fatal error occurs on a page
One example of color that the ADF skins provided by Oracle ADF define is the .AFHoverPrimaryColor:alias
global selector alias. This global selector alias defines the background color when, for example, a user hovers a cursor over a button
component. Another example is the .AFBackgroundColor:alias
global selector alias that defines the background color used for the main content area of your page.
The editor for ADF skins in JDeveloper provides features to help change the colors and images that your ADF skin uses. The availability of some or all of these features depends on the ADF skin that you extend, as described in the following list:
If your ADF skin extends the Skyros skin
JDeveloper enables the design editor where you can use various color pickers and other controls to change some of the more frequently used colors and images in an ADF skin. See Changing Images and Colors in the ADF Skin Design Editor.
If your ADF Skin extends from the Alta skin
Use the selectors editor to change images, as described in Changing an Image for a Component Selector.
Note:
Alternatively, use the Theme Editor described in Working with the Theme Editor, to change the colors and images in an ADF skin that extends from the Alta or Skyros skins.
Use the design editor to change images and colors referenced and defined in your ADF skin.
The design editor appears when you create an ADF skin that extends from the Skyros ADF skin. You access it by clicking the Design tab of the open ADF skin. For an overview of the design editor, see Working with the ADF Skin Design Editor.
Examples of tasks that you can carry out using this editor include the following:
Change the default text color in ADF skins that extend from Skyros
Change the background color that appears to highlight when you hover over components such as the button
component
Replace icons
You can change all or individual icons for components, status, and animation icons using the Replace Icons dialog that you invoke when you click one of the Status Icon, Animations, or Component buttons in the Images area of the General tab. Click Help for information on the Replace Icons dialog.
Figure 7-2 shows an ADF skin that extends from the Skyros ADF skin where the following changes have been made:
In the General tab
Note:
Red rectangles in Figure 7-2 identify the controls used to make the changes in the General tab. Red arrows point to a corresponding result in the sample page.
Change the main default text color to Fuchsia
This changes the color value of the AFTextColor
global selector alias which is an anchor color. This change also affects the global selector aliases (for example, AFTextPrimaryColor
and AFTextSecondaryColor
) that set color properties which derive their hue value from the AFTextColor
global selector alias. For information about this relationship, see Working with Anchor Colors in an ADF Skin.
Change the primary accent color to Black
This changes the color that renders when a cursor hovers over a component such as a button
component. The global selector aliases that sets this color property are AFHoverPrimaryColor
and AFButtonGradientStartHoverColor
. Other global selector aliases use the AFButtonGradientStartHoverColor
global selector alias to derive the hue value of the color properties that they set. Examples of global selector aliases that derive their color property from the AFButtonGradientStartHoverColor
global selector alias include AFButtonBorderBottomHoverColor
and AFButtonBorderHoverColor
. For information about this relationship, see Working with Anchor Colors in an ADF Skin.
Change one of the animated icons that indicate connection status
In this example, the animation icon referenced by the af|statusIndicator::idle-icon
was changed.
In the Branding Area tab
Change the color property that determines the background color for the branding area (AFBrandingBackgroundColor
global selector alias) to transparent
.
Change the image file that is used to render the logo in the branding area.
Figure 7-2 Changing Colors and Icons in ADF Skin Design Editor
ADF skins group colors into categories. The anchor category defines the base colors for your ADF skin, so changing these colors quickly changes the appearance of your web application.
An ADF skin that extends from the Alta or Skyros families of ADF skin defines global selector aliases that group colors into one of three categories, as illustrated in Figure 7-3. Changing the value of color
properties for global selector aliases categorized as anchor colors can help you to quickly change the color palette that your ADF skin defines.
Figure 7-3 Color Categories Skyros's Global Selector Aliases
Anchor Color: These global selector aliases define the base colors for your ADF skin. For example, the AFButtonGradientStartColor
global selector alias defines the start gradient color for a button.
Derivative Color: These global selector aliases derive the hue value for their color properties from anchor colors. The global selector aliases in Example 7-1 all derive their hue value from the AFButtonGradientStartActiveColor
global selector alias. JDeveloper propagates any change that you make to the anchor color to the derivative color. The derivative colors inherit any change that you make to an anchor color using the editor for ADF skins in JDeveloper.
Speciality Color: These global selector aliases define color properties that do not derive their hue value from anchor colors and are not anchor colors for other colors. For example, the AFCarouselFocusBorderColor
global selector alias that defines the border color when the carousel
component has focus.
Figure 7-4 shows the result of changing the default value of the AFButtonGradientStartActiveColor
global selector alias to red. The editor for ADF skins in JDeveloper also updates the values of the derivative colors that derive their hue value from the anchor color.
Figure 7-4 Modified Anchor Color and Effect on Derivative Colors
If you change the color property of a derivative color and later make a change to the associated anchor color, the editor for ADF skins in JDeveloper displays a Confirm Derivative Color Modification dialog to warn you that the change you make to the anchor color will override the change that you made to the derivative color, as illustrated in Figure 7-5 where a warning about the .AFButtonGradientEndActiveColor:alias
appears. Click OK to make the change to the anchor color and to override the already-defined value for the derivative color.
Figure 7-5 Overriding a Derivative Color
Example 7-1 shows entries from the Skyros ADF skin (skyros-v1-desktop.css
) that define the default values for the AFButtonGradientStartActiveColor
global selector alias and its associated derivative colors. These global selector aliases share the same hue value (209
) but specify different values for the saturation and lightness values.
Example 7-2 shows the same global selector aliases referenced in Example 7-1. In Example 7-2, an ADF skin extends from Skyros and changes the value of the color
property of the AFButtonGradientStartActiveColor
global selector alias to #6CD5A1
. The editor for ADF skins in JDeveloper modifies the color properties of the global selector aliases that derive their color value from the anchor color.
Example 7-1 Global Selector Aliases with Anchor and Derivative Colors in Skyros
/* Anchor, hsl(209, 56%, 63%), #6AA1D5 */ .AFButtonGradientStartActiveColor:alias { color: #6AA1D5; } /* Derivative of AFButtonGradientStartActiveColor, hsl(209, 32%, 54%), #648BAF */ .AFButtonBorderTopActiveColor:alias { color: #648BAF; } /* Derivative of AFButtonGradientStartActiveColor, hsl(209, 39%, 62%), #789FC4 */ .AFButtonBorderActiveColor:alias { color: #789FC4; } /* Derivative of AFButtonGradientStartActiveColor, hsl(209, 54%, 79%), #ACCAE6 */ .AFButtonGradientEndActiveColor:alias { color: #ACCAE6; }
Example 7-2 Modified Anchor and Derivative Colors
.AFButtonGradientStartActiveColor:alias { color: #6CD5A1; } .AFButtonBorderTopActiveColor:alias { color: #64AF8A; } .AFButtonGradientEndActiveColor:alias { color: #ADE6CA; } .AFButtonBorderActiveColor:alias { color: #79C39E; }
Many ADF Faces and ADF Data Visualization components reference images using selectors. These images display in the background of the component or render as icons or controls on the component.
When you create an ADF skin, the ADF skin that you extend from provides the values for these selectors, such as the relative path to an image and the sizes for height and width.
Figure 7-6 shows a runtime view of the table
component rendering a control that sorts the data in a table column in ascending order. The image that renders this control is referenced by the ADF Faces column
component's sort-ascending-icon-style
selector.
Figure 7-6 Image Referenced by the sort-ascending-icon-style Selector
Figure 7-7 shows a design-time view where an ADF skin inherits values for the column
component's sort-descending-icon-style
selector from the extended ADF skin. The values inherited include the file name for the image used as an icon (colSort_asc_ena.png
), the height, and the width for the image.
Figure 7-7 Inherited Values for the sort-descending-icon-style Selector
Other examples of ADF Faces and ADF Data Visualization components that expose selectors which reference images associated with the component include the following:
ADF Faces progressIndicator
component exposes the determinate-empty-icon-style
selector.
ADF Faces panelAccordion
component exposes the disclosed-icon-style
selector.
ADF Data Visualization mapToolbar
component exposes the zoomin-enable-icon
selector.
If you decide that you want to modify the image that is associated with a component selector, you need to modify the selector in your ADF skin and copy the image into the project for your ADF skin. You can copy images individually using the procedure in How to Copy an Image into the Project.
After you import an image into your project, the selector that references the image uses a URL in the source file of the ADF skin to refer to this image. Note that this URL is updated when you deploy your ADF skin (and associated files) in an ADF Library JAR, as described in Packaging an ADF Skin into an ADF Library JAR.
Tip:
Associate an image with a global selector alias. If multiple component selectors reference the global selector alias, you only need to make one change if you want to use a different image at a later time (change the image associated with the global selector alias). See Creating a Global Selector Alias.
If your ADF skin extends the Skyros ADF skin, you can change some of the more frequently used images in the design editor, as described in Changing Images and Colors in the ADF Skin Design Editor.
You use a context menu to copy an image that an extended ADF skin references into a directory of the project for your ADF skin. You then make the changes that you want to the image.
To copy an ADF skin image into your project:
The image is copied into a subdirectory that is generated in the project of your ADF skin. For example, if you decided to copy the image that the ADF Faces column
component's sort-ascending-icon-style
selector references, the colSort_asc_ena.png
file is copied to the following directory:
/public_html/skins/skin1/images/af_column
where af_column
refers to the ADF Faces column
component.
The relative URL value of the property in the Properties window is modified to reference the new location of the image. Figure 7-10 shows an example.
In addition, the Properties window indicates that the selector no longer inherits the image from the extended ADF skin by displaying a green icon to the left of the property label. Figure 7-10 shows the Properties window after importing the colSort_asc_ena.png
file into the project for the ADF skin using the Background Image property. Note that the ADF skin still inherits the values for the Height and Width properties from the extended ADF skin.
Figure 7-10 Properties Window After Importing an Image into an ADF Skin
Finally, CSS syntax appears in the source file of your ADF skin. Example 7-3 shows the CSS syntax that corresponds to the values shown in Figure 7-10.
Example 7-3 CSS Syntax in Source File of ADF Skin After Importing an Image
af|column::sorted-ascending-icon-style { background-image: url("images/af_column/colSort_des_ena.png"); }