How to Set an Inline Style

Customizing the Appearance Using Styles and Skins 20-27 skin-version element of the trinidad-config.xml file, as described in Section 20.2, Applying Custom Skins to Applications. 4. Enter a value in the name field. For example, enter v1 if this is the first version of the custom skin.

5. Click OK.

20.6.2 What Happens When You Version Custom Skins

Example 20–19 shows an example trinidad-skins.xml that references three source files for custom skins skin1.css, skin2.css, and skin3.css. Each of these custom skins have the same value for the family element test. The values for the child elements of the version elements distinguish between each of these custom skins. At runtime, an application that specifies test as the value for the skin-family element in the application’s trinidad-config.xml file uses skin3 because this custom skin is configured as the default skin in the trinidad-skins.xml file defaulttruedefault. You can override this behavior by specifying a value for the skin-version element in the trinidad-config.xml file, as described in Section 20.2, Applying Custom Skins to Applications. Example 20–19 trinidad-skins.xml with versioned custom skin files ?xml version=1.0 encoding=windows-1252? skins xmlns=http:myfaces.apache.orgtrinidadskin skin idskin1.desktopid familytestfamily extendssimple.desktopextends render-kit-idorg.apache.myfaces.trinidad.desktoprender-kit-id style-sheet-nameskinsskin1skin1.cssstyle-sheet-name version namev1name version skin skin idskin2.desktopid familytestfamily extendsfusionFx-v1.desktopextends render-kit-idorg.apache.myfaces.trinidad.desktoprender-kit-id style-sheet-nameskinsskin2skin2.cssstyle-sheet-name version namev2name version skin skin idskin3.desktopid familytestfamily extendsfusion.desktopextends render-kit-idorg.apache.myfaces.trinidad.desktoprender-kit-id style-sheet-nameskinsskin3skin3.cssstyle-sheet-name version defaulttruedefault namev3name version skin skins 20-28 Web User Interface Developers Guide for Oracle Application Development Framework

20.7 Deploying a Custom Skin File in a JAR File

You may want to store skin definitions in a Java Archive JAR file and then add it to the deployed application. The benefits of packaging skins into a JAR file as compared to bundling them into the application are the following: ■ A skin can be deployed and developed separately from the application. This also helps to reduce the number of files to be checked in case some changes must be applied to the skin. Foremost is that using a skin definition contained in a JAR file improves consistency in the look and feel of the application. ■ Skin definitions and images can be separated into their own JAR files. Therefore, you can partition the image base into separate JAR files, so that not all files have to be deployed with all applications. To deploy a skin into a JAR file, follow these rules: ■ The trinidad-skins.xml file that defines the skin and that references the CSS file must be within the META-INF directory. ■ All image resources and CSS files must also be under the META-INF directory. The images must be in a directory that starts with an adf root directory or any directory name that is mapped in the web.xml file for the resource servlet, as shown in Example 20–20 . ■ The JAR file must be placed in the WEB-INFlib directory of the view layer project of the application to deploy or use a shared library at the application-server level. Example 20–20 web.xml File with Paths servlet-mapping servlet-nameresourcesservlet-name url-patternadfurl-pattern servlet-mapping servlet-mapping servlet-nameresourcesservlet-name url-patternafrurl-pattern servlet-mapping To deploy a skin into a JAR file: 1. Create a directory structure similar to the following: c:\temp\META-INF\adf\oracle\skin\images META-INF\skins\fusion.css META-INF\trinidad-skins.xml 2. Confirm that the directory in the META-INF directory starts with adf. The images directory contains all the images used within the oracleblaf.css skin. The CSS reference to the images should have a path similar to this: af|inputColor::launch-icon:rtl { content:url..adforacleskinimagescfsortl.png; width: 12; height: 12; left:-7px; position:relative; right:-7px; top:5px; }