What Happens at Runtime: Adding Resources to the Document Header

20-2 Web User Interface Developers Guide for Oracle Application Development Framework It is beyond the scope of this guide to explain the concept of CSS. For extensive information on style sheets, including the official specification, visit the W3C web site at: http:www.w3.org

20.1.1 ADF Faces Skins

A skin is a style sheet based on the CSS 3.0 syntax specified in one place for an entire application. Instead of providing a style sheet for each component, or inserting a style sheet on each page, you can create one skin for the entire application. Every component automatically uses the styles as described by the skin. You do not have to make design-time changes to JSF pages to change their appearance when you use a skin. The skin allows you to globally change the appearance of ADF Faces components. Existing ADF Faces applications use the skin that the application was configured to use when the application was created. For example, if you created an application using Oracle ADF 11g 11.1.1.2.0, the application uses the fusion skin. Applications created with subsequent releases use skins that extend this skin. If you upgrade an application, the application continues to use the skin that it was configured to use when first created. You edit the trinidad-config.xml file, as described in Section 20.2.4, How to Configure an Application to Use a Custom Skin, if you want your application to use another skin. You can create your own custom skin by extending one of the skins provided by ADF Faces. For more information, see Section 20.2.1, How to Add a Custom Skin to an Application. Create or edit the trinidad-skins.xml file, as described in Section 20.2.3, How to Register a Custom Skin, in addition to editing the trinidad-config.xml file if you want your application to use a custom skin that you created. ADF Faces provides the following skins for use in your applications: ■ 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. ■ fusion: Defines the default styles for ADF Faces components. This skin provides a significant amount of styling. Note: The 11g Release 2 11.1.2.0.0 introduced the ADF Skin Editor. Using this standalone product, you can visually create and modify skins for ADF Faces applications built using this release 11.1.1.5.0. The ADF Skin Editor provides a range of features that simplify the process of creating a skin. For more information, including how to install the ADF Skin Editor, see the Release Downloads for Oracle ADF 11g page at http:www.oracle.comtechnetworkdeveloper-toolsad fdownloadsindex.html . For information about using the ADF Skin Editor, see the Oracle Fusion Middleware Skin Editor Users Guide for Oracle Application Development Framework. Customizing the Appearance Using Styles and Skins 20-3 ■ 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 a custom skin that extends any of the skins provided by ADF Faces, you need to register it in the trinidad-skins.xml file. Use the following values in the trinidad-skins.xml file if you extend the fusionFx-v1 skin: skin idyourSkin.desktopid familyyourSkinFamilyfamily extendsfusionFx-v1.desktopextends … skin Use the following value in the trinidad-config.xml file if you want your application to use the fusionFx-v1 skin: skin-familyfusionFxskin-family The fusionFx-v1 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 dropdown 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 frames contents have been loaded. You can implement this functionality in a custom 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 components 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: 20-4 Web User Interface Developers Guide for Oracle Application Development Framework .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 supports for the ability to clear Query-By-Example QBE filters in an af:table component. If you create a custom skin that extends any of the skins provided by ADF Faces, you need to register it in the trinidad-skins.xml file. Use the following values in the trinidad-skins.xml file if you want to extend the fusionFx-v1.1 skin: skin idyourSkin.desktopid familyyourSkinFamilyfamily extendsfusionFx-v1.1.desktopextends … skin Use the following value in the trinidad-config.xml file if you want your application to use the fusionFx-v1.1 skin: skin-familyfusionFxskin-family skin-versionv1.1skin-version ■ Projector skins: ADF Faces provides skins that 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 its parent skin so that an application renders appropriately when displayed using table-top projectors particularly older models of projector. For example, the fusion-projector skin modifies a number of elements in the fusion skin. 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 projector skins as a download from the Oracle Technology Network OTN web site. Figure 20–1 shows the default fusion skin applied to the File Explorer Application index page. Note: The syntax in a skin style sheet is based on the CSS 3.0 specification. However, many browsers do not yet adhere to this version. At runtime, ADF Faces converts the CSS to the CSS 2.0 specification.