<skin-family>minimal</skin-family> in Java

Creation Data Matrix in Java <skin-family>minimal</skin-family>

Re-running the application presents it in its minimal look and feel, as shown in Figure B-8

Creating a Custom Look and Feel (Skin)

It is possible to build upon the minimal look and feel (skin), shown in Figure B-8, and create a new, custom look and feel Here is how the process works First, create a new file, adf-faces-

FIGURE B-7

Appendix B:

FIGURE B-8

skinxml, in the WEB-INF directory The contents of this file will define the new custom skin It s shown next (This skin is named custom but could be any name you define)

< xml version="10" encoding="ISO-8859-1" > <skins xmlns="http://xmlnsoraclecom/adf/view/faces/skin"> <skin> <id> customdesktop </id> <family> custom </family> <render-kit-id> oracleadfdesktop </render-kit-id> <style-sheet-name> skins/custom/customcss </style-sheet-name> </skin> </skins>

Now that a new adf-faces-skinsxml has been created, the skin-family defined inside must be referenced in the main adf-faces-configxml, as shown in the following:

The final step is to place the referenced custom files that are in the skin-family definition in the adf-faces-skinsxml onto the file system so they are accessible at runtime This involves

Part V:

creating a skins subdirectory along with a child custom directory under the HTML root The custom directory will contain a style sheet named customcss that will hold all of the styles of the individual elements of the user interface, such as button appearance, foreground font, and so on Since images are often referred to in the styles, a corresponding images directory containing any referred images is usually added in this location Taking a closer look at the example customcss file, you will see style entries such as:

AFDefaultFontFamily:alias { font-family:Tahoma,Arial,Helvetica,Geneva,sans-serif; } AFLinkForeground:alias {color:#003399}

These entries apply visual attributes to the default font family as well as for the foreground link color The following is an example of using styles to apply images to the front and back portions of a button:

AFButtonEndIcon:alias { content:url(/skins/custom/images/btnEndgif); width:7px; height:18px } AFButtonEndIcon:alias:rtl { content:url(/skins/custom/images/btnStartgif); width:7px; height:18px }

To determine which stylable elements can be referred to in the customcss style sheet, check the global styles definition file, adf-faces-skins-docxml, which is provided by ADF Faces This file provides a complete set of definitions for the named styles, icons, and components that can be referred to in the adf-faces-skinsxml file It has the following form:

< xml version='10' encoding='ISO-8859-1' > <skinMetadata xmlns="http://xmlnsoraclecom/adf/faces/view/skin/metadata" xmlns:html="http://wwww3org/TR/REC-html40" id="minimal-desktop" name="Minimal Skin keys" > <globalMetadata> <styles> <namedStyle id="AFDefaultFontFamily:alias"> <description> Specifies the default font family list ("font-family" property) for the skin </description> </namedStyle> (more global style definitions) </styles> <icons> <icon id="af|panelBox::dark-header-start-icon"> <description> This icon is rendered at the start of the header region for dark panelBoxes </description> </icon>

Appendix B:

(more global icon definitions) </icons> </globalMetadata> <componentMetadata> <component name="af:selectInputDate"> <icons> <icon id="af|selectInputDate::launch-icon"> <description> The button icon which is used to launch the secondary date picker dialog </description> </icon> </icons> </component> </component> (more component definitions) </componentMetadata> </skinMetadata>

The previous code example shows single items from the globalMetadata group (styles and icons) and a single component group from the componentMetadata After the customcss has been edited with new/updated styles for the different UI elements, the custom look and feel will take on a different appearance from the base minimal look and feel from which it extends Figure B-9 shows the new custom skin at runtime The following list summarizes the steps necessary to create a custom skin 1 Create a CSS (30) style sheet (such as customcss)

FIGURE B-9 A custom look and feel (skin)

Part V:

2 Add any referenced external resources in the style sheet, such as a directory of referenced images 3 Reference style sheet and external resources in a skin-family declaration in an adf-faces-skinsxml file 4 Reference the custom skin-family in the main adf-faces-configxml file