Oracle® Fusion Middleware Skin Editor User's Guide for Oracle Application Development Framework 11g Release 2 (11.1.2.2.0) Part Number E17456-05 |
|
|
PDF · Mobi · ePub |
This chapter describes how to completes tasks that you need to do once you finish your ADF skin. Information is provided 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.3, "Packaging an ADF Skin into an ADF Library JAR"
Section 10.4, "Applying an ADF Skin to Your Web 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.
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 (for the release that pertains to the application you are skinning).
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-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 (for the release that pertains to the application you are skinning).
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 (for the release that pertains to the application you are skinning). Customizing other ADF skin selectors may result in unexpected or inconsistent behavior for your application.
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.
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.
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.
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.
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");
}
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 Oracle Fusion Middleware Web User Interface Developer's Guide for Oracle Application Development Framework (for the release that pertains to the application you are skinning).
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. Alternatively, you can select the ADF skin family from a list in the ADF View options of JDeveloper's Project Properties dialog.
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.
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.