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 Packaging an ADF Skin into an ADF Library JAR.
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 Creating an ADF Skin File. The following example demonstrates how to register a number of ADF skins that extends from a sample of the ADF skins described in Table 13-1.
<!-- Use the following values in the trinidad-skins.xml file if you want to extend the alta-v1 skin. --> <skin> <id>yourSkin.desktop</id> <family>yourSkinFamily</family> <extends>alta-v1.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 Configuration in trinidad-skins.xml in Developing Web User Interfaces with Oracle ADF Faces.
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 Applying an ADF Skin to Your Web Application. The following example demonstrates how to configure your web application to use some of the ADF skins listed in Table 13-1.
<!-- Use the following value in the trinidad-config.xml file if you want your application to use the Alta skin. --> <skin-family>alta</skin-family> <skin-version>v1<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 Configuration in trinidad-config.xml in Developing Web User Interfaces with Oracle ADF Faces.
web.xml
You can configure context initialization parameters in this file to facilitate the development and testing of your ADF skin, as described in 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 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 Configuration in web.xml in Developing Web User Interfaces with Oracle ADF Faces.
Oracle ADF provides a number of ADF skins from which you can extend when you create a new ADF skin. Table 13-1 describes the differences between each of these ADF skins.
The Base Skin page of the Create ADF Skin dialog that appears when you create an ADF skin, as described in Creating an ADF Skin File, recommends the appropriate ADF skin to extend from.
You can apply any of the ADF skins listed in Table 13-1 to your web application. For more information, see Configuration Files for an ADF Skin. For a diagram that illustrates the inheritance relationship between the ADF skins, see Inheritance Relationship of the ADF Skins Provided by Oracle ADF .
Table 13-1 ADF Skins Provided by Oracle ADF
| ADF Skin | Description |
|---|---|
|
|
Contains only minimal formatting. |
|
|
Extends the |
|
|
The For more information about the Oracle Alta UI system, see http://www.oracle.com/webfolder/ux/middleware/alta/index.html. |
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 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.
To version an ADF skin:
trinidad-skins.xml file. By default, this is in the Web Content/WEB-INF node.<skin-version> element of the trinidad-config.xml file, as described in Applying an ADF Skin to Your Web Application.v1 if this is the first version of the ADF skin.Example 13-1 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 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 13-1, the last ADF skin to be defined is skin3.desktop.
Example 13-1 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>