10 Applying the Finished ADF Skin to Your Web Application

This chapter provides information on how to test your ADF skin, package the completed ADF skin in an ADF Library JAR, and configure an ADF application so that it uses the completed ADF skin.

This chapter includes the following sections:

Section 10.1, "About Applying a Finalized ADF Skin to an Application"
Section 10.2, "Testing Changes in Your ADF Skin"
Section 10.3, "Packaging an ADF Skin into an ADF Library JAR"
Section 10.4, "Applying an ADF Skin to Your Web Application"

10.1 About Applying a Finalized ADF Skin to an Application

After you create an ADF skin where you define style properties for one or more ADF skin selectors, you may want to test the changes that you make in the ADF skin. Once you complete testing the changes in your ADF skin and are satisfied with the final ADF skin, you can package the ADF skin and associated files (images, resource bundles, and configuration files) into an ADF Library JAR to distribute for inclusion to the application projects that use the final ADF skin. Once you have distributed the final ADF skin, you configure the application to apply the ADF skin to it.

10.2 Testing Changes in Your ADF Skin

Once you have created an ADF skin and defined style properties that you want for one or more selectors, you may want to test how these style properties render at runtime in a browser. To do this, you apply the ADF skin to your application and run a page that renders the ADF Faces component which exposed the selector.

Consider using tools, such as Firebug for the Mozilla Firefox browser (or similar for your particular browser), when you run your application. These tools provide useful information that can help you as you iteratively develop your ADF skin. For example, in addition to inspecting changes that you have already made, these tools can help you identify the ADF skin selectors that correspond to a particular DOM element.

You can also configure context initialization parameters in the web.xml file of your application that allow you to:

View changes in an ADF skin without having to restart the application

Set the value of the following context initialization parameter to true:

org.apache.myfaces.trinidad.CHECK_FILE_MODIFICATION
Display the full uncompressed CSS style class name at runtime

Set the value of the following context initialization parameter to true:

org.apache.myfaces.trinidad.DISABLE_CONTENT_COMPRESSION

Note that not all changes that you make to an ADF skin in your Fusion web application appear immediately if you set the CHECK_FILE_MODIFICATION to true. You must restart the Fusion web application to view changes that you make to icon and ADF skin properties.

For more information about context initialization parameters, see the "ADF Faces Configuration" appendix in the Oracle Fusion Middleware Web User Interface Developer's Guide for Oracle Application Development Framework.

Figure 10-1 demonstrates how the name of a style class (fndGlobalSearchCategory) defined in an ADF skin, and applied to an ADF Faces commandLink component using the component's styleClass attribute, is compressed when it renders in a browser.

Figure 10-1 Compressed Style Class Name from an ADF Skin

Figure 10-2 shows how the browser renders the full uncompressed name of the style class and the ADF Faces component when you set the DISABLE_CONTENT_COMPRESSION parameter to true. In Figure 10-2, the uncompressed style class af_commandLink corresponds to the af|commandLink selector documented in the Oracle Fusion Middleware Tag Reference for Oracle ADF Faces Skin Selectors.

The uncompressed style classes that correspond to the pseudo-elements that an ADF skin selector exposes can also be identified. For example, the tab-end pseudo-element exposed by the af|panelTabbed selector (af|panelTabbed::tab-end) translates to the uncompressed af_panelTabbed_tab-end style class at runtime.

Similarly, changes that you make to the appearance of a component when it is in a specific state can also be identified or inspected using browser tools. For example, the following entry in the source file of an ADF skin allows you to define the style for the ADF Faces panelTabbed component when a user selects the right-hand side of the component:

af|panelTabbed::tab:selected af|panelTabbed::tab-end

At runtime, the uncompressed style class name translates to the following:

.af_panelTabbed_tab.p_AFSelected .af_panelTabbed_tab-end

Note that :selected translates to p_AFSelected although sometimes the generated CSS does not have a p_AFSelected equivalent because some browsers have built-in support for that particular state, as is the case for other pseudo-classes like :hover.

It is recommended that you only customize the ADF skin selectors, pseudo-elements, and pseudo-classes documented in the Oracle Fusion Middleware Tag Reference for Oracle ADF Faces Skin Selectors and the Oracle Fusion Middleware Data Visualization Tools Tag Reference for Oracle ADF Faces. Customizing other ADF skin selectors may result in unexpected or inconsistent behavior for your application.

Figure 10-2 Uncompressed Style Class Name from an ADF Skin

10.2.1 How to Set Parameters for Testing Your ADF Skin

You set the CHECK_FILE_MODIFICATION and DISABLE_CONTENT_COMPRESSION context initialization parameters to true in the web.xml file of your application.

To set parameters for testing your ADF skin:

In the Application Navigator, double-click web.xml to open the file.
Add the following context initialization parameter entries and set to true:
- org.apache.myfaces.trinidad.CHECK_FILE_MODIFICATION
- org.apache.myfaces.trinidad.DISABLE_CONTENT_COMPRESSION
Save and close the web.xml file.

10.2.2 What Happens When You Set Parameter for Testing Your ADF Skin

Entries appear in the web.xml file for your application, as illustrated in Example 10-1.

Example 10-1 web.xml Entry

<context-param>
  <param-name>org.apache.myfaces.trinidad.CHECK_FILE_MODIFICATION</param-name>
  <param-value>true</param-value>
</context-param>
<context-param>
  <param-name>org.apache.myfaces.trinidad.DISABLE_CONTENT_COMPRESSION</param-name>
  <param-value>true</param-value>
</context-param>

Changes that you make to a selector for an ADF Faces component (other than changes to icon and skin properties) render immediately when you refresh a Fusion web application's page that renders the ADF Faces component. Using Firebug if your browser is Mozilla Firefox or Google Chrome's developer tools, you can see the uncompressed style class names that render at runtime and establish what ADF skin selector it corresponds to. Remember that setting org.apache.myfaces.trinidad.DISABLE_CONTENT_COMPRESSION to true incurs a performance cost for your Fusion web application so set it to false when you finish testing your changes.

10.3 Packaging an ADF Skin into an ADF Library JAR

You can deploy an ADF skin and associated files (for example, image files, configuration files, and resource bundles) in an ADF Library JAR. This enables you to package files required to apply an ADF skin to an application. The benefits of packaging ADF skins into an ADF Library JAR as compared to bundling them into the application are the following:

An ADF skin can be deployed and developed separately from the application. This also helps to reduce the number of files to be checked in case some changes must be applied to the ADF skin.
The source files for an ADF skin and images can be separated into their own ADF Library JARs. Therefore, you can partition the image base into separate ADF Library JARs, so that not all files have to be deployed with all applications.

10.3.1 How to Package an ADF Skin into an ADF Library JAR

Create an ADF Library JAR file deployment profile to package the ADF skin into an ADF Library JAR.

To create an ADF Library JAR file deployment profile:

In the Application Navigator, right-click the project that contains the ADF skins and choose Deploy > New Deployment Profile.
In the Create Deployment Profile dialog, choose ADF Library JAR File in the Profile Type dropdown list.
Enter a name for the deployment profile in the Deployment Profile Name input field and click OK.
Review the options in the Edit ADF Library JAR Deployment Profile Properties dialog that appears. For more information at any time, click Help.
Click OK.

To package an ADF skin into an ADF Library JAR:

In the Application Navigator, right-click the project that contains the ADF skin and choose Deploy > deployment, where deployment is the name of the ADF Library JAR file deployment profile.
In the Deploy dialog Deployment Action page, click Next and then click Finish.

10.3.2 What Happens When You Package an ADF Skin into an ADF Library JAR

An ADF Library JAR file is written to the directory specified by the deployment profile. This ADF Library JAR contains the source file for the ADF skin, the trinidad-skins.xml file, image files, and any resource bundles that you created to define resource strings or to override the default strings defined for ADF Faces components. The ADF Library JAR file also contains other files from the ADF skin's project not related to skinning.

Example 10-2 shows the directory structure for a project that contains the following items for an ADF skin:

The trinidad-skins.xml file
An image file (sort_des_ena.png) copied into the ADF skin project
The source file for an ADF skin (skin1.css)
An .sva file (oracle.adf.common.services.ResourceService.sva) that is used to inspect the content of the ADF Library JAR when you import it into a project, as described in Section 4.7, "Importing ADF Skins from an ADF Library JAR."
A resource bundle (skinBundle.properties) that contains string values to override strings from the default resource bundle

For information about how to specify resource bundles that contain string values you define, see Section 7.2.1, "How to Specify an Additional Resource Bundle for an ADF Skin."

Example 10-2 Directory Structure for an ADF Library JAR Containing an ADF Skin

ADFLibraryJARRootDirectory
+---META-INF
|   |   MANIFEST.MF
|   |   oracle.adf.common.services.ResourceService.sva
|   |   trinidad-skins.xml
|   |   
|   +---adf
|   |   \---skins
|   |       \---skin1
|   |           \---images
|   |               \---af_column
|   |                       sort_des_selected.png
|   |                       
|   \---skins
|       \---skin1
|               skin1.css
|               
+---resources
|       skinBundle.properties
|       
\---WEB-INF
        faces-config.xml

The directory paths for images in the ADF skin that appear in the ADF Library JAR are modified to include the directory path from the ADF skin project. Example 10-3 demonstrates an example of the changes that occur:

Example 10-3 Modified Directory Path for Images in a Deployed ADF Skin

// Reference to an image in an ADF skin prior to deployment to an ADF Library JAR
af|column::sorted-descending-icon-style
{
  background-image: url("images/af_column/sort_des_selected.png"); 
}

// Reference to an image in an ADF skin after deployment to an ADF Library JAR
af|column::sorted-descending-icon-style
{
  background-image: url("/adf/skins/skin1/images/af_column/sort_des_selected.png"); 
}

10.4 Applying an ADF Skin to Your Web Application

You configure an application to use an ADF skin by specifying values in the application's trinidad-config.xml file. You specify a value for the <skin-family> element that identifies the ADF skin family the application uses at runtime. If you created more than one ADF skin in the skin family, you can version these ADF skins, as described in Section 4.5, "Versioning ADF Skins." If you versioned multiple ADF skins in the same skin family, use the <skin-version> element to identify the specific version that you want the application to use.

Note that you can also configure an application page for your end users to dynamically select the ADF skin that they want the application to use. For more information, see the "Enabling End Users to Change an Application's ADF Skin" section in the Oracle Fusion Middleware Web User Interface Developer's Guide for Oracle Application Development Framework.

10.4.1 How to Apply an ADF Skin to an Application

You apply an ADF skin to an application by modifying the application's trinidad-config.xml file. You do this by editing the application's trinidad-config.xml file to specify the ADF skin family to use.

To apply an ADF skin to an application:

In the Application Navigator, double-click the trinidad-config.xml file to open it in the source editor. By default, this file is in the Web Content/WEB-INF node.
In the trinidad-config.xml file, write entries to specify the value of the <skin-family> element and, optionally, the <skin-version> element as shown in Example 10-4.

10.4.2 What Happens When You Apply an ADF Skin to an Application

The values that you specify for the <skin-family> element and, optionally, the <skin-version> element in the trinidad-config.xml file determine the ADF skin that the Fusion web application uses at runtime, as shown in Example 10-4.

Example 10-4 trinidad-config.xml File

<?xml version="1.0" encoding="windows-1252"?>
<trinidad-config xmlns="http://myfaces.apache.org/trinidad/config">
    <skin-family>fusionFx</skin-family>
      <skin-version>v1.1</skin-version>
</trinidad-config>