11 Advanced Topics

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:

• Section 11.1, "Referring to URLs in an ADF Skin's CSS File"

• Section 11.2, "ADF Skinning Framework and Supported Render Kits"

• Section 11.3, "Configuration Files for an ADF Skin"

• Section 11.4, "ADF Skins Provided by Oracle ADF"

11.1 Referring to URLs in an ADF Skin's CSS File

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 10, "Packaging an ADF Skin into an ADF Library JAR."

11.2 ADF Skinning Framework and Supported Render Kits

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 visual editor in the ADF Skin Editor 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:

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.

11.3 Configuration Files for an ADF Skin

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.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.

• 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 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.

• 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 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.

11.4 ADF Skins Provided by Oracle ADF

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 (fusionFx-simple-vN.N) when you create a new ADF skin, as described in Section 4.4, "Creating an ADF Skin File." In 11g Release 1 (11.1.1.5.0) of Oracle ADF, the Fusion Simple family of ADF skin is available in the following versions: fusionFx-simple-v1 and fusionFx-simple-v1.1.

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 simple skin.

• 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.

  Note:

  The blafplus skins are deprecated.

• fusion: Defines the default styles for ADF Faces components. This skin provides a significant amount of styling. This skin extends the simple skin.

• fusion-11.1.1.3.0: Modifies the fusion skin to make the hierarchy structure in certain components that render tabs clearer. These components are panelTabbed, navigationPane (attribute hint="tabs"), and 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-11.1.1.3.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:

  <skin-family>fusionFx</skin-family>
  

  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 inputComboboxListOfValues component.

  • 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 carousel component's af|carousel::status-icon and 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 af|inlineFrame::busy:flow.

    • .AFStatusIcon:alias use to reference the af|carousel::status-icon and af|inlineFrame::status-icon.

    • .AFStatusIconStyle:alias use to reference the af|carousel::status-icon-style and af|inlineFrame::status-icon-style.

    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 af:table component.

  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-v1.1 skin:

  <skin-family>fusionFx</skin-family>
    <skin-version>v1.1<skin-version>
  

• fusionFx-simple-vN.N: 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-11.1.1.3.0-projector: This skin modifies a number of elements in the fusion-11.1.1.3.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."