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 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 10, "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 visual editor 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.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 (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 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 (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 10.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 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).
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-v
N.N
) when you create a new ADF skin, as described in Section 4.4, "Creating an ADF Skin File." In 11g Release 2 (11.1.2.2.0) of Oracle ADF, the Fusion Simple family of ADF skin is available in the following versions:
fusionFx-simple-v1
fusionFx-simple-v1.1
fusionFx-simple-v1.2
fusionFx-simple-v2
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-v1.2
: This skin extends from the fusionFx-v1.1
skin. It contains a number of user interface enhancements, including optimizations for when your application renders in a touch screen device.
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 value in the trinidad-config.xml
file if you want your application to use the fusionFx-v1.2
skin:
<skin-family>fusionFx</skin-family> <skin-version>v1.2<skin-version>
fusionFx-v2
: This skin extends from the fusionFx-v1.1
skin. It makes 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.
If you create an ADF skin that extends the fusionFx-v2
skin, register it in the trinidad-skins.xml
file. Use the following values in the trinidad-skins.xml
file to do this:
<skin> <id>yourSkin.desktop</id> <family>yourSkinFamily</family> <extends>fusionFx-v2.desktop</extends> ... </skin>
Use the following value in the trinidad-config.xml
file if you want your application to use the fusionFx-v2
skin:
<skin-family>fusionFx</skin-family> <skin-version>v2</skin-version>
fusionFx-simple-v
N.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.
fusionFx-v2-projector
: This skin modifies a number of elements in the fusionFx-v2
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.5, "Inheritance Relationship of the ADF Skins Provided by Oracle ADF."