|Oracle® Fusion Middleware Skin Editor User's Guide for Oracle Application Development Framework
11g Release 1 (18.104.22.168.0)
Part Number E21420-02
This chapter provides information to help you if you make changes in the source file of an ADF skin or in the configuration files that control the usage of ADF skins. The chapter also lists the ADF skins provided by Oracle ADF.
This chapter includes the following sections:
An ADF skin's CSS file typically uses a URL to refer to a resource that is external to the file. For example, an image that an application uses to render with an error message. You can refer to a URL from an ADF skin's CSS file in a number of different formats. The supported formats are:
You specify the complete URL to the resource. For example, a URL in the following format:
You can specify a relative URL if the URL does not start with
/ and no protocol is present. A relative URL is based on the location of the ADF skin's CSS file. For example, if the ADF skin's CSS file directory is
WebApp/Skin/skin1/ and the specified URL is
img/errorIcon.gif, the final URL is
This format of URL is resolved relative to the context root of your web application. You start a context relative root with
/. For example, if the context relative root of a web application is:
and the specified URL is:
the resulting URL is:
A server relative URL is resolved relative to the web server. This differs to the context relative URL in that it allows you reference a resource located in another application on the same web server. You specify the start of the URL using
//. For example, write a URL in the following format:
The format of URL that you use may be important if you create a Java Archive (JAR) file to package and distribute your ADF skin and its associated files. For more information, see Chapter 10, "Packaging an ADF Skin into an ADF Library JAR."
The ADF skinning framework supports the creation of ADF skins for the following render kits:
You can use the visual editor in the ADF Skin Editor to create ADF skins for the following render kit:
You can create an ADF skin for the following render kit using the source editor in the ADF Skin Editor:
ADF Faces components delegate the functionality of the component to a component class, and the display of the component to a renderer. By default, all tags for ADF Faces combine the associated component class with an HTML renderer, and are part of the HTML render kit. HTML render kits are included with ADF Faces for display on both desktop and PDA. You cannot customize ADF Faces renderers. However, you can customize how components display using ADF skins.
The following list describes the configuration files associated with the project for an ADF skin. You modify values in these files while you develop your ADF skin or when you finish development and want to apply the finished ADF skin to an application.
This file registers the ADF skins that you create, as described in Section 4.4, "Creating an ADF Skin File." For more information about this file, see the "Configuration in trinidad-skins.xml" section in the Oracle Fusion Middleware Web User Interface Developer's Guide for Oracle Application Development Framework.
You configure the
<skin-family> element in this configuration file to tell the application what ADF skin to use, as described in Section 10.4, "Applying an ADF Skin to Your Web Application."
For more information about this file, see the "Configuration in trinidad-config.xml" section in the Oracle Fusion Middleware Web User Interface Developer's Guide for Oracle Application Development Framework.
You can configure context initialization parameters in this file to facilitate the development and testing of your ADF skin, as described in Section 10.2, "Testing Changes in Your ADF Skin."
For more information about the
web.xml file and context initialization parameters, see the "Configuration in web.xml" section in the Oracle Fusion Middleware Web User Interface Developer's Guide for Oracle Application Development Framework.
Oracle ADF provides a variety of ADF skins from which you can extend when you create a new ADF skin. It is recommended that you extend the latest version of the Fusion Simple family of ADF skins (
N.N) when you create a new ADF skin, as described in Section 4.4, "Creating an ADF Skin File." In 11g Release 1 (22.214.171.124.0) of Oracle ADF, the Fusion Simple family of ADF skin is available in the following versions:
If you target your ADF skin project at another release of Oracle ADF, as described in Section 4.2, "Creating ADF Skin Applications and ADF Skin Projects," all ADF skins described here will not be available for you to extend from.
The following list describes the differences between each ADF skin that Oracle ADF provides:
simple: Contains only minimal formatting.
blafplus-medium: Provides a modest amount of styling. This style extends the
blafplus-rich: This skin extends the
blafplus-medium skin. Provides more styling than the
blafplus-medium skin. For example, graphics in the
blafplus-rich skin have rounded corners.
blafplusskins are deprecated.
fusion: Defines the default styles for ADF Faces components. This skin provides a significant amount of styling. This skin extends the
fusion-126.96.36.199.0: Modifies the
fusion skin to make the hierarchy structure in certain components that render tabs clearer. These components are
decorativeBox. This skin also defines a more subtle background image for disclosed
panelAccordion component panes to make text that appears in these panes easier to read.
fusionFx-v1: This skin extends from the
fusion-188.8.131.52.0 skin. If you create an ADF skin that extends the
fusionFx-v1 skin, register it in the
trinidad-skins.xml file using the following values:
<skin> <id>yourSkin.desktop</id> <family>yourSkinFamily</family> <extends>fusionFx-v1.desktop</extends> ... </skin>
Use the following value in the
trinidad-config.xml file if you want your application to use the
fusionFx-v1 skin contains design improvements and changes to address a number of issues. Specifically, it adds:
A background color to the
.AFMaskingFrame global style selector to prevent the display of content from an underlying frame when an inline popup displays in certain browsers.
A boolean ADF skin property,
-tr-stretch-dropdown-table, for the
inputComboboxListOfValues component. This property determines whether the table in the list stretches to show the content of the table columns or limits the width of the table to the width of the input field in the
inlineFrame component displays an image that serves as a loading indicator until the browser determines that the frame's contents have been loaded.
You can implement this functionality in a ADF skin that you create. The
af|inlineFrame selector has "
busy" and "
flow" pseudo-classes that enable you to do this. The
inlineFrame component only generates an IFrame element when the parent component does not stretch the
inlineFrame component (the
inlineFrame component is flowing). Use
af|inlineFrame:busy:flow to define a background-image style that references a loading indicator. When the parent component stretches the
inlineFrame component, the generated content is more complex. This complexity allows you define a content image URL using the
af|inlineFrame::status-icon and an optional additional background-image using the
af|inlineFrame::status-icon-style. It also allows you to reuse images that other component selectors use. For example, the
af|carousel::status-icon-style selectors. Use skinning aliases to reuse these images.
The following global selectors have also been introduced that you can use if you implement this functionality in your ADF skin:
.AFBackgroundImageStatus:alias: use to reference the background image used in
.AFStatusIcon:alias use to reference the
.AFStatusIconStyle:alias use to reference the
A resource key (
af_inlineFrame.LABEL_FETCHING) defines the string to display for the
inlineFrame component's loading icon.
fusionFx-v1.1: This skin extends from the
fusionFx-v1 skin. It adds support for the ability to clear Query-By-Example (QBE) filters in an
If you create an ADF skin that extends the
fusionFx-v1.1 skin, register it in the
trinidad-skins.xml file. Use the following values in the
trinidad-skins.xml file if you want to do this:
<skin> <id>yourSkin.desktop</id> <family>yourSkinFamily</family> <extends>fusionFx-v1.1.desktop</extends> … </skin>
Use the following value in the
trinidad-config.xml file if you want your application to use the
fusionFx-simple skin is the same as the
fusion skin, but with a simplified color palette. This makes changing the color scheme for ADF skins that extend the
fusionFx-simple skin easier than changing the color scheme for skins that extend the
fusion skin. You can change a small number of color aliases in an ADF skin that extends the
fusionFx-simple skin to make significant changes to the color scheme. In addition, you can use the Images window to change the color scheme of your ADF skin when you extend
fusionFx-simple skin. For more information about the Images window, see Section 6.3, "Working with the Images Window."
Projector skins: ADF Faces provides projector skins that you can download from the Oracle Technology Network (OTN) web site. These skins define styles for an application that you want to demonstrate to an audience using a projector. Each projector skin modifies a number of elements in a parent skin so that an application renders appropriately when displayed using table-top projectors (particularly older models of projector). These skins are useful if the audience is present at the same location as the projector. They may not be appropriate for an audience that views an application online through a web conference. ADF Faces provides the following projector skins:
fusion-projector: This skin modifies a number of elements in the
fusion skin so that an application renders appropriately on a projector.
fusion-184.108.40.206.0-projector: This skin modifies a number of elements in the
fusion-220.127.116.11.0 skin so that an application renders appropriately on a projector.
You can apply any of the previously listed ADF skins to your web application. For more information, see Section 10.4, "Applying an ADF Skin to Your Web Application." For a diagram that illustrates the inheritance relationship between the ADF skins, see Section 1.4, "Inheritance Relationship of the ADF Skins Provided by Oracle ADF."