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 and describes 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:
Absolute
You specify the complete URL to the resource. For example, a URL in the following format:
http://www.mycompany.com/WebApp/Skin/skin1/img/errorIcon.gif
Relative
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 /WebApp/Skin/mySkin/img/errorIcon.gif
Context relative
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:
/WebApp
and the specified URL is:
/img/errorIcon.gif
the resulting URL is:
/WebApp/img/errorIcon.gif
Server relative
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:
//WebApp/Skin/mySkin/img/errorIcon.gif
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 11, "Packaging an ADF Skin into an ADF Library JAR."
The ADF skinning framework supports the creation of ADF skins for the following render kits:
org.apache.myfaces.trinidad.desktop
org.apache.myfaces.trinidad.pda
You can use the design and selectors editors in the ADF Skin Editor and in JDeveloper to create ADF skins for the following render kit:
org.apache.myfaces.trinidad.desktop
You can create an ADF skin for the following render kit using the source editor in the ADF Skin Editor or in JDeveloper:
org.apache.myfaces.trinidad.pda
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.
trinidad-skins.xml
This file registers the ADF skins that you create, as described in Section 4.3, "Creating an ADF Skin File." Example 12-1 demonstrates how to register a number of ADF skins that extends from a sample of the ADF skins described in Table 12-1.
Example 12-1 Registering an ADF Skin in the trinidad-skins.xml File
<!-- Use the following values in the trinidad-skins.xml file if you want to extend the fusionFx-v1.2 skin. --> <skin> <id>yourSkin.desktop</id> <family>yourSkinFamily</family> <extends>fusionFx-v1.2.desktop</extends> ... </skin> <!-- Use the following values in the trinidad-skins.xml file if you want to extend the skyros-v1 skin. --> <skin> <id>yourSkin.desktop</id> <family>yourSkinFamily</family> <extends>skyros-v1.desktop</extends> ... </skin>
For more information about this file, see the "Configuration in trinidad-skins.xml" section in Developing Web User Interfaces with Oracle ADF Faces (for the release that pertains to the application you are skinning).
trinidad-config.xml
You configure the <skin-family> element in this configuration file to tell the application what ADF skin to use, as described in Section 11.4, "Applying an ADF Skin to Your Web Application." Example 12-2 demonstrates a number of examples that show how to configure your web application to use some of the ADF skins listed in Table 12-1.
Example 12-2 Configuring an Application's trinidad-config.xml File to Use an ADF Skin
<!-- Use the following value in the trinidad-config.xml file if you want your application to use the fusionFx-simple-v2 skin --> <skin-family>fusionFx-simple</skin-family> <skin-version>v2</skin-version> <!-- Use the following value in the trinidad-config.xml file if you want your application to use the fusionFx-v2.1 skin. --> <skin-family>fusionFx</skin-family> <skin-version>v2.1<skin-version> <!-- Use the following value in the trinidad-config.xml file if you want your application to use the skyros skin. --> <skin-family>skyros</skin-family> <skin-version>v1<skin-version>
For more information about this file, see the "Configuration in trinidad-config.xml" section in Developing Web User Interfaces with Oracle ADF Faces (for the release that pertains to the application you are skinning).
web.xml
You can configure context initialization parameters in this file to facilitate the development and testing of your ADF skin, as described in Section 11.2, "Testing Changes in Your ADF Skin." You can also configure a context initialization parameter (org.apache.myfaces.trinidad.skin.MAX_SKINS_CACHED) to specify the maximum number of unique ADF skins (for example, fusion or fusionFx-simple) for which you store information in memory about the generated CSS files. Using this context initialization parameter can help maintain the performance of your application if you use many different skins.
For more information about the web.xml file and context initialization parameters, see the "Configuration in web.xml" section in Developing Web User Interfaces with Oracle ADF Faces (for the release that pertains to the application you are skinning).
Oracle ADF provides a variety of ADF skins from which you can extend when you create a new ADF skin. Table 12-1 describes the differences between each of these ADF skins. The value you choose for the Target Application Release property, as described in Section 4.2, "Creating ADF Skin Applications and ADF Skin Projects," determines the ADF skins available to you to extend from. Not all ADF skin listed in Table 12-1 will be available to you. For example, if you choose 11.1.1.4.x as the value for the Target Application Release property the skyros skin is not available to extend.
The Base Skin page of the Create ADF Skin dialog that appears when you create an ADF skin, as described in Section 4.3, "Creating an ADF Skin File," recommends the appropriate ADF skin to extend from based on the release of Oracle ADF for which you want to create an ADF skin. For example, if you choose 12.1.2.0.x as the value for the Target Application Release property, the recommended ADF skin to extend from is skyros-v1.desktop.
You can apply any of the ADF skins listed in Table 12-1 to your web application. For more information, see Section 12.3, "Configuration Files for an ADF Skin." 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."
Table 12-1 ADF Skins Provided by Oracle ADF
| ADF Skin | Description |
|---|---|
|
|
Contains only minimal formatting. |
|
|
Extends the You can provide a simpler DOM structure alternative for image borders in non-skyros skins by setting values for a |
|
|
Extends the |
|
|
Extends the |
|
|
Extends the |
|
|
Extends the
|
|
|
Extends the |
|
|
Extends the |
|
|
Extends the |
|
|
Extends from the |
|
|
Extends from the |
|
|
Extends from the |
|
|
The In 12c (12.1.2) of Oracle ADF, the Fusion Simple family of ADF skin is available in the following versions:
|
|
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:
|
You can specify version numbers for your ADF skins in the trinidad-skins.xml file using the <version> element. Use this optional capability if you want to distinguish between ADF skins that have the same value for the <family> element in the trinidad-skins.xml file. Note that when you configure an application to use a particular ADF skin, you do so by specifying values in the trinidad-config.xml file, as described in section Section 11.4, "Applying an ADF Skin to Your Web Application."
You specify a version for your ADF skin by entering a value for the <version> element in the trinidad-skins.xml file.
In the Applications window, double-click the trinidad-skins.xml file. By default, this is in the Web Content/WEB-INF node.
In the Structure window, right-click the skin node for the ADF skin that you want to version and choose Insert inside skin > version.
In the Insert version dialog, select true from the default list if you want your application to use this version of the ADF skin when no value is specified in the <skin-version> element of the trinidad-config.xml file, as described in Section 11.4, "Applying an ADF Skin to Your Web Application."
Enter a value in the name field. For example, enter v1 if this is the first version of the ADF skin.
Click OK.
Example 12-3 shows an example trinidad-skins.xml that references three ADF skins (skin1.desktop, skin2.desktop, and skin3.desktop). Each of these ADF skins have the same value for the <family> element (test). The values for the child elements of the <version> elements distinguish between each of these ADF skins. At runtime, an application that specifies test as the value for the <skin-family> element in the application's trinidad-config.xml file uses skin1.desktop because this ADF skin is configured as the default skin in the trinidad-skins.xml file (<default>true</default>). You can override this behavior by specifying a value for the <skin-version> element in the trinidad-config.xml file, as described in Section 11.4, "Applying an ADF Skin to Your Web Application." For example, if you specify v2 as a value for the <skin-version> element in the trinidad-config.xml file, the application uses skin2.desktop instead of skin1.desktop that is defined as the default in the trinidad-skins.xml file.
If you do not specify the skin version to pick (using the <skin-version> element in the trinidad-config.xml file), then the application uses the skin that is defined as the default using the <default>true</default> element in the trinidad-skins.xml file. If you do not specify a default skin, the application uses the last ADF skin defined in the trinidad-skins.xml file. In Example 12-3, the last ADF skin to be defined is skin3.desktop.
Example 12-3 trinidad-skins.xml File with Versioned ADF Skin Files
<?xml version="1.0" encoding="windows-1252"?>
<skins xmlns="http://myfaces.apache.org/trinidad/skin">
<skin>
<id>skin1.desktop</id>
<family>test</family>
<extends>skyros-v1.desktop</extends>
<render-kit-id>org.apache.myfaces.trinidad.desktop</render-kit-id>
<style-sheet-name>skins/skin1/skin1.css</style-sheet-name>
<version>
<default>true</default>
<name>v1</name>
</version>
</skin>
<skin>
<id>skin2.desktop</id>
<family>test</family>
<extends>skin1.desktop</extends>
<render-kit-id>org.apache.myfaces.trinidad.desktop</render-kit-id>
<style-sheet-name>skins/skin2/skin2.css</style-sheet-name>
<version>
<name>v2</name>
</version>
</skin>
<skin>
<id>skin3.desktop</id>
<family>test</family>
<extends>skin2.desktop</extends>
<render-kit-id>org.apache.myfaces.trinidad.desktop</render-kit-id>
<style-sheet-name>skins/skin3/skin3.css</style-sheet-name>
<version>
<name>v3</name>
</version>
</skin>
</skins>