Skin Style Selectors Introduction to Skins, Style Selectors, and Style Properties

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} 20-10 Web User Interface Developers Guide for Oracle Application Development Framework } } af|someComponent {color: red; width: 10px; padding: 4px} For IE, we need to increase the width, so we override the width. We still want the color and padding; this gets merged in. We want to add height in IE. agent ie { af|someComponent {width: 25px; height: 10px} } For IE 7 and 8, we also need some margins. agent ie version: 7 and version: 8 { af|someComponent {margin: 5px;} } For Firefox 3 Gecko 1.9 use a smaller margin. agent gecko version: 1.9\ { af|someComponent {margin: 4px;} } The following selectors are for all platforms and all browsers. rounded corners on the top-start and top-end shows how to use :rtl mode pseudo-class. The start image in ltr mode is the same as the end image in the right-to-left mode. af|panelBox::medium af|panelBox::top-start, af|panelBox::medium af|panelBox::top-end:rtl { background-image: urlskinspurpleimagespanelBoxStart.png; width:8px; height:8px } af|panelBox::medium af|panelBox::top-end, af|panelBox::medium af|panelBox::top-start:rtl { background-image: urlskinspurpleimagespanelBoxEnd.png; height: 8px; width: 8px; } The selectors used to apply skins to the ADF Faces components are defined in the Skin Selectors for Fusion’s ADF Faces Components and Skin Selectors for Fusion’s Data Visualization Tools Components topics in JDeveloper’s online help. You can also apply themes as a way to implement look and feel at the component level. For information about themes, see Section 20.3.4, How to Apply Themes to Components . For information about defining skin style properties, see Section 20.3, Defining Skin Style Properties .

20.1.3 Component Style Properties

You can adjust the look and feel of any component at design time by changing the style-related properties, inlineStyle and styleClass, both of which render on the root DOM element. Any style-related property you specify at design time overrides the Customizing the Appearance Using Styles and Skins 20-11 comparable style specified in the application skin or CSS for that particular instance of the component. The inlineStyle attribute is a semicolon-delimited string of CSS styles that can set individual attributes, for example, background-color:red; color:blue; font-style:italic; padding:3px. The styleClass attribute is a CSS style class selector used to group a set of inline styles. The style classes can be defined using an ADF public style class, for example, .AFInstructionText, sets all properties for the text displayed in an af:outputText component. For information about applying component style properties, see Section 20.4, Changing the Style Properties of a Component . Given a specific selector, you can get style properties for a custom component by creating a class for a renderer. For more information, see Section 30.4.7, How to Create a Class for a Renderer .

20.2 Applying Custom Skins to Applications

Custom skins can change the colors, fonts, and even the location of portions of ADF Faces components to represent your company’s preferred look and feel. You build the skin by defining style selectors in a CSS file. After you create your custom style sheet, register it as a valid skin in the application, and then configure the application to use the skin. If you versioned multiple ADF skins in the same skin family, as described in Section 20.6, Versioning Custom Skins, use the skin-version element to identify the specific version that you want the application to use. By default, ADF Faces components use the fusion skin. Custom skins can extend to any of the ADF Faces skins, fusion, blafplus-rich, blafplus-medium, or simple. To create a custom skin, you declare selectors in a style sheet that override or inhibit the selectors in the style sheet being extended. Any selectors that you choose not to override will continue to use the style as defined in that skin. Extending the simple skin does not require inhibiting as many properties as you would if you extended the BLAF Plus skins. For example, the BLAF Plus skins use many different colors for style properties, including text, background, and borders. The simple skin uses the :alias pseudo-class, as in .AFDarkBackground:alias, instead of specific colors. Changing a color scheme would require overriding far fewer global skin selectors than component skin selectors that specify multiple colors. The text used in a skin is defined in a resource bundle. As with the selectors for the blafplus-rich skin, you can override the text by creating a custom resource bundle and declaring only the text you want to change. After you create your custom resource bundle, register it with the skin. You can create and apply multiple skins. For example, you might create one skin for the version of an application for the web, and another for when the application runs on a PDA. Or you can change the skin based on the locale set on the current user’s browser. Additionally, you can configure a component, for example an af:selectOneChoice component, to allow a user to switch between skins. While you can bundle the custom skin resources and configuration files with the application for deployment, you can also store skin definitions in a Java Archive JAR file and then add it to the deployed application. The advantages to using a JAR file are that the custom skin can be developed and deployed separately from the application, improving consistency in the look and feel, and that skin definitions and image files can be partitioned into their own JAR files, reducing the number of files that may have to be deployed to an application. 20-12 Web User Interface Developers Guide for Oracle Application Development Framework The steps to apply a custom skin to your application are the following: 1. Add a custom skin to your application. For details, see Section 20.2.1, How to Add a Custom Skin to an Application . 2. Register the custom skin. For details, see Section 20.2.2, How to Register the XML Schema Definition File for a Custom Skin and Section 20.2.3, How to Register a Custom Skin . 3. Configure the application to use the custom skin. For details, see Section 20.2.4, How to Configure an Application to Use a Custom Skin . 4. Deploy a custom skin in a JAR file. For details, see Section 20.7, Deploying a Custom Skin File in a JAR File .

20.2.1 How to Add a Custom Skin to an Application

To add a custom skin to your application, create a CSS file within JDeveloper, which places the CSS in a project’s source file for deployment with the application. To add a custom skin to an application: 1. In JDeveloper, make sure that CSS Level 3 and ADF Faces are selected. From the main toolbar, choose Tools Preferences CSS Editor. For Support Level, choose CSS Level 3 from the dropdown menu, and for Supported Components, select ADF Faces Extension .

2. In the Application Navigator, right-click the project that contains the code for the

user interface and choose New from the context menu. 3. In the New Gallery under Categories, expand Web Tier and select HTML. 4. Double-click the CSS File option. 5. In the Create Cascading Style Sheet dialog, enter a name and path for the CSS.

6. Click OK.

You can now open the CSS in the CSS editor and define styles for your application. For information about setting ADF Faces component style selectors, see Section 20.3, Defining Skin Style Properties . You can also create a CSS outside the context of Oracle JDeveloper and package the CSS with the skin resources into a JAR file. For information about this recommended option, see Section 20.7, Deploying a Custom Skin File in a JAR File .

20.2.2 How to Register the XML Schema Definition File for a Custom Skin

You need to register the trindidad-skins.xsd file with JDeveloper if you plan to register a custom skin, as described in Section 20.2.3, How to Register a Custom Skin . The trindidad-skins.xsd file defines the valid elements for a custom skin. To register an XML schema definition file: 1. In JDeveloper, select Tools Preferences. 2. In the Preferences dialog, select XML Schemas in the left pane and click Add. 3. In the Add Schema dialog, click Browse to navigate to the XML schemas included in your version of JDeveloper. The directory path to the XML schemas is similar to the following: Customizing the Appearance Using Styles and Skins 20-13 JDeveloper_Home jdevelopermodulesoracle.adf.view_ 11.1.1trinidad-impl.jarorgapachemyfacestrinidadinternal uilafxmlschemasskintrinidad-skins.xsd

4. Click OK.

20.2.3 How to Register a Custom Skin

Registering a skin involves creating a file named trinidad-skins.xml and populating it with values that identify the skin’s ID, family, location, and the custom resource bundle if you are using one. Before you begin: Register the XML schema definition file that defines valid elements for the trinidad-skins.xml file. For more information, see Section 20.2.2, How to Register the XML Schema Definition File for a Custom Skin . To register a custom skin: 1. In the Application Navigator, right-click the project and select New. 2. In the New Gallery, expand General and select XML. 3. Select XML Document from XML Schema and click OK. 4. In the Create XML from XML Schema - Step 1 of 2 dialog: ■ XML File : Enter trinidad-skins.xml. ■ Directory : Append \src\META-INF to the end of the Directory entry. ■ Select Use Registered Schemas, and click Next. 5. In the Create XML Schema - Step 2 of 2 dialog: ■ Target Namespace : Select http:myfaces.apache.orgtrinidadskin. ■ Root Element : Select skins. ■ Click Finish. The new file automatically opens in the XML Editor. 6. In the XML editor, enter values for the following elements: ■ id A skin is required to have a unique ID. You can also use an EL expression to reference the skin ID. For example, if you want to have different skins for different locales, create an EL expression that selects the correct skin based on its ID. The convention is to put a desktop or .pda or .portlet at the end of the ID, such as fusion.desktop. ■ family You configure an application to use a particular family of skins. This allows you to group skins together for an application, based on the render kit used. Note: In the Add Schema dialog, make sure the value in the Extension input field is .xml. If you change it to .xsd, when you later create XML files, you will not be able to use the XML schema you have created.