How to Register a Custom Skin

20-16 Web User Interface Developers Guide for Oracle Application Development Framework

20.2.4 How to Configure an Application to Use a Custom Skin

You set an element in the trinidad-config.xml file that determines which skin to use, and if necessary, under what conditions. To configure an application to use a skin: 1. Open the trinidad-config.xml file.

2. In the trinidad-config.xml file, write entries to specify the value of the

skin-family element for the skin you want to use and, optionally, the skin-version element. Example 20–5 shows the configuration to use for the mySkin skin family. Example 20–5 Configuration to Use a Skin Family trinidad-config xmlns=http:myfaces.apache.orgtrinidadconfig skin-familymySkinskin-family skin-versionv2skin-version trinidad-config

3. To conditionally set the value, enter an EL expression that can be evaluated to

determine the skin to display. For example, if you want to use the German skin when the user’s browser is set to the German locale, and to use the English skin otherwise, you would have the following entry in the trinidad-config.xml file: skin-family{facesContext.viewRoot.locale.language==de ? german : english}skin-family

4. Save the file.

During development, after you make changes to the custom skin, you can see your CSS changes without restarting the server by setting the web.xml file parameter org.apache.myfaces.trinidad.CHECK_FILE_MODIFICATION to true, as shown in Example 20–6 . However, you must always restart the server to see icon and skin property changes. Example 20–6 web.xml Parameter to Check Skin Changes context-param param-nameorg.apache.myfaces.trinidad.CHECK_FILE_MODIFICATIONparam-name param-valuetrueparam-value context-param

20.3 Defining Skin Style Properties

The ADF Faces skin style selectors support multiple options for applying skins to a component to create a custom look and feel to your application. The af:goButton component skin style selectors are described in Table 20–1 . Note: If you do not see the skin, check to see whether or not the af:document tag has been added to the page. The af:document tag initializes the skin framework to create the CSS and link it to the page. Customizing the Appearance Using Styles and Skins 20-17 Figure 20–3 shows the application of the default fusion skin on the af:goButton component and the component icon. Figure 20–3 af:goButton Component Default Appearance Figure 20–4 shows the new appearance of the button and icon by setting the following style properties in a custom skin: af|goButton::access-key {color: red;} af|goButton::icon-style {border: 1px solid black;} Figure 20–4 af:goButton Component with Custom Skin Applied The ADF Faces skin style selectors used by the default skin 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. They are located in All Online Help Developing Oracle ADF Faces Applications. JDeveloper provides coding support while editing your CSS files. You can invoke the CSS code editor when editing your file directly or when editing an ADF Faces component in the JSP source editor. Code support is available for the following: ■ Code insight ■ Error highlighting ■ Preview of styles ■ Refactoring ■ Finding usages ■ Quick comment ■ Formatting Table 20–1 af:goButton Component Style Selectors Name Description af|goButton Style on the root element of the af:goButton component. You can use any valid CSS-2.1 pseudo-class, like :hover, :active, or :focus, as well as :disabled, to style the component for different states. Note that for buttons, the :active and :focus pseudo-classes do not work in Internet Explorer 7 IE7. IE7 also does not allow disabled buttons to be styled. You should use the .AFButton:alias selectors as a shortcut to apply a skin to all button components in the same manner. af|goButton::icon-sty le Style on the button icon, if the icon attribute is set on the af:goButton. af|goButton::access-k ey Style on the text of the button. This includes the .AFButtonAccessKeyStyle:alias style. 20-18 Web User Interface Developers Guide for Oracle Application Development Framework ■ Matching tag highlighting

20.3.1 How to Apply Skins to Text

In addition to using a CSS file to determine styles, skins also use a resource bundle to determine the text within a component. The text that ADF Faces components render can be translated and abstracted as a resource string. For example, af_chooseDate.LABEL_SELECT_YEAR is the resource string for the label of the field used to select the year using an af:chooseDate component. All the ADF Faces skins use the same resource bundle. To apply a skin to the text in ADF Faces components, create a custom resource bundle and override the default resource string values. Then, set the bundle-name property for your custom resource bundle in the trinidad-skins.xml file. To create and register a custom resource bundle: 1. In JDeveloper, create a new simple Java class: ■ In the Application Navigator, right-click where you want the file to be placed and choose New to open the New Gallery. ■ In the Categories tree, select Java, and in the Items list, select Java Class. ■ Enter a name and package for the class. The class must extend java.util.ListResourceBundle.

2. Add any keys to your bundle that you wish to override and set the text as needed.

Example 20–7 shows the SkinBundle custom resource bundle. Example 20–7 Resource Strings Set in Custom SkinBundle public class SkinBundle extends ListResourceBundle { Override public Object[][] getContents { return _CONTENTS; } static private final Object[][] _CONTENTS = { {af_tableSelectMany.SELECT_COLUMN_HEADER, Select A Lot}, {af_tableSelectOne.SELECT_COLUMN_HEADER, Select Just One}, {af_showDetail.DISCLOSED_TIP, Click to Hide} }; } Note: ADF Faces components provide automatic translation. The resource bundle used for the components’ skin is translated into 28 languages. If a user sets the browser to use the German Germany language, any text contained within the components will automatically be displayed in German. For this reason, if you create a resource bundle for a custom skin, you must also create localized versions of that bundle for any other languages the application supports. See Chapter 21, Internationalizing and Localizing Pages for more information. Customizing the Appearance Using Styles and Skins 20-19 3. Set the name of your custom resource bundle in the bundle-name parameter of the trinidad-skins.xml file. Example 20–8 shows the custom SkinBundle set in the trinidad-skins.xml file. Example 20–8 Custom SkinBundle Set in trinidad-skins.xml skin id purple.desktop id family purple family render-kit-id org.apache.myfaces.trinidad.desktop render-kit-id style-sheet-name skinspurplepurpleSkin.css style-sheet-name bundle-name org.apache.myfaces.trinidaddemo.resource.SkinBundle bundle-name skin Another option for applying skins to text is to use the translation-source parameter instead of bundle-name. The translation-source parameter is an EL binding that points to a Map or a ResourceBundle. The benefit of this option is that you can automatically change the translation value based on any logic that you want at runtime. The bundle-name tag takes precedence if both are set. Example 20–9 shows the code for using an EL expression to set the translation-source parameter in a bundle map. Example 20–9 Custom Resource Bundle Map public class SkinTranslationMapDemo { Test a skins translation-source EL pointing to a Map public MapString, String getContents { return _CONTENTS; } static private final MapString, String _CONTENTS = new HashMapString, String; static { _CONTENTS.putaf_inputDate.LAUNCH_PICKER_TIP, Launch PickerMap; _CONTENTS.putaf_showDetail.DISCLOSED_TIP, Hide Tip Map; _CONTENTS.putaf_showDetail.DISCLOSED, Hide Map; } } Example 20–10 shows setting the translation-source parameter for the resource map in the trinidad-skins.xml file. Example 20–10 Custom Resource Bundle Map Set in trinidad-skins.xml skin