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

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. 20-14 Web User Interface Developers Guide for Oracle Application Development Framework For example, you can define the blafplus-rich.desktop skin and the blafplus-rich.pda skin to be part of the richDemo family and the system automatically chooses the right skin based on the render-kit-id. skin idrichdemo.desktopid familyrichDemofamily extendsblafplus-rich.desktopextends render-kit-idorg.apache.myfaces.trinidad.desktoprender-kit-id style-sheet-nameskinsrichdemorichdemo.cssstyle-sheet-name skin skin idrichdemo.pdaid familyrichDemofamily extendsblafplus-rich.pdaextends render-kit-idpdarender-kit-id style-sheet-nameskinsrichdemorichdemo.cssstyle-sheet-name skin ■ extends You extend a custom skin by using this element. The default value for this element is simple.desktop. However, you can extend any skin by using this element. For example, you can easily change the font of the entire skin by extending the skin and creating a CSS with the font alias. For example, extend the fusion.desktop family as follows: extendsfusion.desktopextends style-sheet-nameskinsfod_skin.cssstyle-sheet-name In the CSS, set the alias to change the font for the entire skin: .AFDefaultFontFamily:alias {font-family: Tahoma} .AFDefaultFont:alias {font-size: 16px} ■ render-kit-id This value determines which render kit to use for the skin. You can enter one of the following: – org.apache.myfaces.trinidad.desktop: The skin will automatically be used when the application is rendered on a desktop. – org.apache.myfaces.trinidad.pda: The skin will be used when the application is rendered on a PDA. ■ style-sheet-name This is the URL of the custom style sheet. The style sheet name file is retrieved as a URL object using the following methods: – For nonstatic URLs, those that could change after the server has started, the URL is created by calling new java.new.URLstyle-sheet-name if style-sheet-name starts Note: If you create more than one skin in a particular family of skins, you can version the skins that you create. For more information, see Section 20.6, Versioning Custom Skins.