ADF Faces Skins Introduction to Skins, Style Selectors, and Style Properties

Customizing the Appearance Using Styles and Skins 20-5 Figure 20–1 Index Page Using the Fusion Skin ADF Faces also provides the simple skin, shown in Figure 20–2 as applied to the File Explorer Application index page. Figure 20–2 Index Page Using the Simple Skin Skins provide more options than setting standard CSS styles and layouts. The skins CSS file is processed by the skin framework to extract skin properties and icons and register them with the Skin object. For example, you can customize the skin file using rules and pseudo classes that are supported by the skinning framework. Supported rules and pseudo classes include platform, agent, accessibility-profile, :rtl, and locale. For more information, see Section 20.1.2, Skin Style Selectors . 20-6 Web User Interface Developers Guide for Oracle Application Development Framework

20.1.2 Skin Style Selectors

Style sheet rules include a style selector, which identifies an element, and a set of style properties, which describe the appearance of the components. ADF Faces components include two categories of skin style selectors: ■ Global selectors Global selectors determine the style properties for multiple ADF Faces components. If the global selector name ends in the :alias pseudo-class, then the selector is most likely included in other component-specific selectors and will affect the skin for more than one component. For example, most, if not all, components use the .AFDefaultFontFamily:alias definition to specify the font family. If your skin overrides this selector with a different font family, that change will affect all the components that have included it in their selector definition. Example 20–1 shows the global selector for the default font family for ADF Faces components in an application. Example 20–1 Global Selector for Default Font Family .AFDefaultFontFamily:alias { font-family: Tahoma, Verdana, Helvetica, sans-serif; } ■ Component selectors Component-specific selectors are selectors that can apply a skin to a particular ADF Faces component. Example 20–2 shows the selector set to red as the background color for the content area of the af:inputText component. Example 20–2 af:inputText Component Selector af|inputText::content { background-color: red; } Each category may include one or more of these types of ADF Faces skin selectors: ■ Standard selectors Standard selectors are those that directly represent an element that can have styles applied to it. For example, af|body represents the af:body component. You can set CSS styles, properties, and icons for this type of element. ■ Selectors with pseudo-elements Pseudo-elements are used to denote a specific area of a component that can have styles applied. Pseudo-elements are denoted by a double colon followed by the portion of the component the selector represents. For example, af|chooseDate::days-row provides the styles and properties for the appearance of the dates within the calendar grid. ■ Icon selectors Some components render icons img tags using a set of base icons. These icons can have skins applied even though no entries appear in the CSS source file for the icons in the way, for example, that entries appear for the background-image CSS property. Instead, the icons are registered with the Skin object for use by the renderer. As no entries for an icon selector appear in the CSS source file that a browser interprets, you cannot create containment selector definitions for an icon definition. You can only create a containment selector definition for items that have an entry in the CSS source file. Customizing the Appearance Using Styles and Skins 20-7 Icon selectors are denoted by -icon for component selectors and Icon:alias for global selectors. For example, the af:inputDate component has a changed icon that can have a skin using the selector af|inputDate::changed-icon. The changed icon can also be globally set for all components using that icon with the global selector .AFChangedIcon:alias. For more information, see Section 20.3.2, How to Apply Skins to Icons . ■ Resource strings The text rendered by ADF Faces components is translatable. The text is abstracted as a resource string that has skins applied. For example, af_dialog.LABEL_OK is a resource string for the text label of an af:dialog component when the OK button has been configured. Resource strings do not have skins in the CSS skin file, but in a resource bundle referenced from the skin definition file in the trinidad-skins.xml file using the bundle-name parameter. You can also use the translation-source parameter for an EL binding to point to a Map or ResourceBundle. For more information, see Section 20.3.1, How to Apply Skins to Text . ■ Selectors with style properties Skin style properties allow you to customize the rendering of a component throughout the application. A CSS property is stored with a value in the Skin object and is available when the component is being rendered. For example, in af|breadCrumbs{-tr-show-last-item: false}, the skin property -tr-show-last-item is set to hide the last item in the af:breadCrumbs navigation path. The CSS specification defines pseudo-classes such as :hover and :active that can apply to almost every component. ADF Faces provides additional pseudo-classes for specialized functions. Pseudo-classes are denoted in the selector by a colon followed by the class definition. The following are common pseudo-classes used by ADF Faces style selectors: ■ Alias: The :alias pseudo-class is a special type of class that serves as a syntax aid to organize code in your skin file. You can, for example, use it to set styles for more than one component or more than one portion of a component. You can also create your own alias classes that you can then include on other selectors. For example, you can define an alias pseudo-class .AFLabel:alias where you define label colors for a number of form components. Subsequent changes to the alias pseudo-class impact all components referenced by the alias pseudo-class. af|inputText::label, af|inputChoice::label, af|selectOneChoice::label {-tr-rule-ref: .AFLabel:alias} .AFLabel:alias { color: blue } The .AFLabel:alias pseudo-class has color set to blue, but you can change all the component’s label color to red by simply changing .AFLabel:alias: .AFLabel:alias {color: red} For more information, see Section 20.3.5, How to Create a Custom Alias . ■ Drag and drop: The two pseudo-classes available are :drag-source applied to the component initiating the drag and removed once the drag is over, and :drop-target applied to a component willing to accept the drop of the current drag. ■ Standard: In CSS, pseudo-classes like :hover, :active, and :focus are considered states of the component. This same concept is used in applying skins to 20-8 Web User Interface Developers Guide for Oracle Application Development Framework components. Components can have states like read-only or disabled. When states are combined in the same selector, the selector applies only when all states are satisfied. ■ Right-to-left: Use this pseudo-class to set a style or icon definition when the browser is in a right-to-left language. Another typical use case is asymmetrical images. You will want the image to be flipped when setting skin selectors that use the image in a right-to-left reading direction. Be sure to append the :rtl pseudo-class to the very end of the selector and point it to a flipped image file. For example, the end image of the panelBox component will be the panelBoxStart.png file when the browser is set to right-to-left. The panelBox end image in right-to-left is the same as the flipped left-to-right panelBox start image. af|panelBox::medium af|panelBox::top-end:rtl { background-image: urlskinspurpleimagespanelBoxStart.png; width:8px; height:8px } You can also use :rtl to apply to skin icons. For more information, see Section 20.3.2, How to Apply Skins to Icons . ■ Inline editing: This pseudo-class is applied when the application activates a component subtree for editing in the browser. For example, :inline-selected is a pseudo-class applied to currently selected components in the active inline-editable subtree. ■ Message: This pseudo-class is used to set component-level message styles using CSS pseudo-classes of :fatal, :error, :warning, :confirmation, and :info. For more information, see Section 20.3.3, How to Apply Skins to Messages . You may not want your selectors CSS properties to be applied to all browsers, all platforms, all locales, and both reading-directions. For example, you may need to add some padding in Internet Explorer that you do not need on any other browser. You may want the font style to be different on Windows than it is on other platforms. To style a selector for a particular user environment, put that skinning information inside a skinning framework rule or :rtl pseudo-class. The skinning framework picks the styles based on the HTTP request information, such as agent and platform, and merges them with the styles without rules. Those CSS properties that match the rules get merged with those outside of any rules. The most specific rules that match a users environment take precedence. The skinning framework currently supports these rules and pseudo-classes: ■ platform and agent Define platform styles using platform and browser styles using agent. The supported values to set a platform-specific style are windows, macos, linux, solaris, and ppc. For a browser agent-specific style, the supported values are ie, mozilla, gecko, webkit maps to safari, ice, and email. In this example, the content area of the af:inputText component is set to the color pink for versions 7 and 8 of Internet Explorer, and set to version 1.9 of gecko on Windows and Linux platforms: platform window, linux { agent ie and version: 7 and version: 8, gecko and version: 1.9 { af|inputText::content {background-color:pink } Customizing the Appearance Using Styles and Skins 20-9 } } Note that the following syntax examples results in the same behavior: agent ie and version: 7. agent ie and version: 7 In order to specify only version 7.0.x of Internet Explorer, use the following syntax: agent ie and version: 7.0 There is currently no syntax to specify a range of versions. ■ accessibility-profile Define accessibility-profile, which defines styles for high-contrast and large-fonts accessibility profile settings from the trinidad-config.xml file. The high-contrast value would be for cases where background and foreground colors need to be highly contrasted with each other. The large-fonts value would be for cases where the user must be allowed to increase or decrease the text scaling setting in the web browser. Defining large-fonts does not mean that the fonts are large, but rather that they are scalable fonts or dimensions instead of fixed pixel sizes. -- Enable both high-contrast and large-fonts content -- accessibility-profilehigh-contrast large-fontsaccessibility-profile ■ :rtl Use the :rtl pseudo-class to create a style or icon definition when the browser is displaying a right-to-left language. ■ locale ■ Suppress skin styles with the -tr-inhibit skin property. Suppress or reset CSS properties inherited from a base skin with the -tr-inhibit skin property. For example, the -tr-inhibit:padding property will remove any inherited padding. Remove clear all inherited properties with the -tr-inhibit:all property. The suppressed property name must be matched exactly with the property name in the base skin. ■ Merge styles with the -tr-rule-ref property. Create your own alias and combine it with other style selectors using the -tr-rule-ref property. For more information, see Section 20.3.5, How to Create a Custom Alias . ■ Alter themes of child components with the -tr-children-theme property. For more information, see Section 20.3.4, How to Apply Themes to Components . Example 20–3 shows several selectors in the CSS file that will be merged together to provide the final style. Example 20–3 Merging of Style Selectors For IE and Gecko on Windows, Linux and Solaris, make the color pink. platform windows, linux, solaris { agent ie, gecko { af|inputText::content {background-color:pink}