Referring to URLs in a Skin’s CSS File

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; } Customizing the Appearance Using Styles and Skins 20-29 Note the two leading periods in front of the image path ..adforacleskinimagescfsortl.png. This allows the search for the META-INF root to start one directory above the META-INFskin directory in which the CSS is located. 3. Check that the trinidad-skins.xml file is located in the META-INF directory and that it contains content in a format similar to this: ?xml version=1.0 encoding=ISO-8859-1? skins xmlns=http:myfaces.apache.orgtrinidadskin skin idrichdemo.desktopid familyrichDemofamily extendsfusion.desktopextends render-kit-idorg.apache.myfaces.trinidad.desktoprender-kit-id style-sheet-nameskinsrichdemorichdemo.cssstyle-sheet-name skin skins This example defines the skin as richdemo.desktop in the richDemo family. The trinidad-skins.xml file can have more than one skin definition. The richdemo.css file or your custom CSS file is referenced from the style-sheet-name element. 4. To create the JAR file, issue the following command from the c:\temp directory: jar -cvf customSkin.jar META-INF 5. Copy the resulting customSkin.jar file to the WEB-INFlib directory of the consuming ADF project. Configure the trinidad-skins.xml file located on the WEB-INF directory of the ADF project. ?xml version=1.0 encoding=windows-1252? trinidad-config xmlns=http:myfaces.apache.orgtrinidadconfig skin-familyoracleblafskin-family trinidad-config Because the skin can be discovered at runtime, you do not need to code the skin family name. Note: The skin definition in the JAR file is not displayed in the JDeveloper visual editor. You may see a message in the log window that the skin family could not be found. You can ignore this message.