Creating a Look and Feel Configuration File

To create the look and feel configuration file for a custom look and feel:

In the Application Navigator, select the project that will contain the look and feel configuration file.
From the main menu, choose File | N ew to display the New Gallery. In the Categories tree, expand General and select XML. In the Items list, select XML Document , and then click OK.
In the Create XML File dialog, enter any file name with the .xml extension (e.g., mycompany-laf.xml) and click Browse... to select the WEB-INF directory. The look and feel configuration file usually resides in the WEB-INF directory. Note that the look and feel configuration file can also be packaged in a JAR file, along with other custom resources.
Click OK.
A new XML document appears in the Code Editor.
Insert the root element <look-and-feel> using the http://xmlns.oracle.com/uix/ui/laf namespace. Then specify the following attributes:
- extends - (Required) Specify the id of the parent look and feel that this custom look and feel is extending. For example:
  - Enter simple.desktop if extending Simple Look and Feel.
  - Enter base.desktop if extending the Base Look and Feel.
- family - (Required) Specify a name that identifies the look and feel family to which this custom look and feel implementation belongs. This family name is used to specify the preferred look and feel for an application in the UIX configuration (uix-config.xml) file.
- id - (Required) Specify a unique string that identifies this custom look and feel implementation.
- style-sheet-name - Specify the name of the .xss custom style sheet that defines the styles for this custom look and feel. Depending on how you package the custom look and feel resources, specify the custom style sheet in one of the following ways:
  - For look and feels that are packaged in a JAR file, specify the location of the custom style sheet as well as the file name, e.g., org/example/laf/custom/styles/mycompany-dekstop.xss. This should be a resource location that can be resolved using ClassLoader.getResource().
  - If the look and feel is not packaged in a JAR file, then specify the style sheet file name only, e.g., mycompany-dekstop.xss. In this case, the custom style sheet must be installed in the location as defined by the styles-directory configuration property in the UIX configuration file (uix-config.xml). The default location is <jdev_install> /jdev/mywork/<Workspace_dir>/<Project_dir> /public_html/cabo/styles. Otherwise, specify a path relative to the web application's context root, (e.g., /laf/styles/mycompany-dekstop.xss) because if UIX can't find the style sheet in the default location, it will look under the public_html/ directory.
To add custom renderers, do the following:
1. Insert the <renderers></renderers> section, specifying the attribute:
  - facets - By default custom renderers are registered on all supported facets. To specify only those facets that the renderers should be registered with, use a whitespace separated list of one or more facet names. Supported facet names are: default, printable, portlet, email.
2. In the <renderers> section, insert a single custom renderer using the <renderer> element, specifying the following attribute and one of the child elements:
  - name attribute- (Required) Specify the qualified name of the component for which the renderer should be registered, e.g., "ui:tabBar" or "tabBar". If no namespace prefix is specified, the component is assumed to belong to the UIX user interface components namespace (i.e., "http://xmlns.oracle.com/uix/ui"). The namespace prefix is bound via an xmlns: attribute on <look-and-feel> .
  - <class> element - (For a Java-based renderer only) Specify the name attribute, which should be the fully qualified class name of the renderer that is being registered, e.g., org.example.laf.custom.TabBarRenderer.
  - <template> element - (For a template-based renderer only) Specify the name attribute, which should be the name of the UIX XML template that is being registered. UIX uses two mechanisms to locate template files. First, UIX will look for the template relative to the context root by calling ServletContext.getResource(). If the template is not found under the servlet context root, UIX will then use the current context ClassLoader to load the template via a call to ClassLoader.getResource(). This second approach allows templates to be bundled in a JAR file.
3. Repeat step 6b to add the desired number of <renderer> elements.
4. Repeat steps 6a and 6b to add other <renderers> sections, if desired.
To add custom icons, do the following:
1. Insert the <icons></icons> section.
2. In the <icons> section, insert a single custom icon using the <icon> element, specifying the following attribute and one of the child icon elements:
  - name attribute - (Required) Specify the qualified name of the icon to replace, e.g., "ui:error" or "error". If no namespace prefix is specified, the icon is assumed to belong to the UIX user interface components namespace (i.e., "http://xmlns.oracle.com/uix/ui"). The namespace prefix is bound via an xmlns: attribute on <look-and-feel> .
  - <config-image> element - Specify an image icon using a URI that is relative to the URI defined by the images-directory configuration property (typically /cabo/images/). See step 7c for the attributes to use.
  - <context-image> element - Specify an image icon using a URI that is relative to the servlet context path. See step 7c for the attributes to use.
  - <resource-image> element - Specify an image icon that is loaded from the class path using ClassLoader.getResource(). Resource image icons do not need to be installed as a loose file in the application. Instead, resource image icons can be packaged inside a JAR file and loaded directly from the class path. The uri attribute must be the path to an image file that is available on the class path. See step 7c for the attributes to use.
  - <uri-image> element - Specify an image icon using a full URI. See step 7c for the attributes to use.
  - <text> element - Specify a text-based icon, using these attributes:
    - styleClass - Specify a style class that is to be applied to the icon's text.
    - text - (Required) Enter the icon's text.
  - <null> element - Use this element to specify that no icon should be rendered.
  - <instance> element - Specify a Java Icon instance, using these attributes:
3. Use the following attributes for <config-image> , <context-image>, <resource-image> , and <uri-image> elements only:
  - uri - (Required) Specify the icon image URI.
  - height - Specify the height of the image icon.
  - rtl-uri - Specify the URI for the right-to-left version of the icon. The right-to-left version of the
    icon is used for languages with right-to-left reading directions such as Arabic and Hebrew. If the rtl-uri attribute is not specified, the uri attribute value will be used for both left-to-right and right-to-left reading directions.
  - styleClass - Specify the style class that is to be applied to the icon's image.
  - width - Specify the width of the image icon.
4. Repeat steps 7b and 7c to add the desired number of <icon> elements.
Make sure you validate your XML file. Right-click in the code editor and choose Validate XML. This should report any validation errors that might prevent your look and feel from being registered by UIX.

Note: <renderers> and <icons> sections must be specified in this order in the look and feel configuration file.

For more details about the above elements and other elements used in look and feel configuration documents, see " UIX Look and Feel" of the UIX Element Reference.

Example

The following example shows a look and feel configuration file defining a custom look and feel that extends the Simple Look and Feel.


Example in XML:

<?xml version="1.0" encoding="windows-1252"?>

<look-and-feel xmlns="http://xmlns.oracle.com/uix/ui/laf"
               xmlns:ui="http://xmlns.oracle.com/uix/ui"
               id="mycompany.desktop"
               family="mycompany"
               extends="simple.desktop"
               style-sheet-name="mycompany-desktop.xss">

  <!-- Custom Renderers -->

  <renderers>

    <!-- Replace the pageLayout Renderer with a custom template-based renderer -->

    <renderer name="ui:pageLayout">
      <template name="templates/laf/mycompany/pageLayout.uit"/>
    </renderer>
    
    <!-- Replace the tabBar Renderer with a custom Java-based Renderer -->

    <renderer name="ui:tabBar">
      <class name="org.example.laf.custom.TabBarRenderer"/>
    </renderer>

  </renderers>

  <!-- A printable-facet Renderer -->

  <renderers facets="printable">

    <!-- Replace the printable pageLayout Renderer with our own template-based Renderer -->

    <renderer name="pageLayout">
      <template name="templates/laf/custom/printablePageLayout.uit"/>
    </renderer>

  </renderers>

  <!-- Custom Icons -->

  <icons>

    <!-- globalHeader icons -->

    <icon name="ui:globalHeaderStart">
      <context-image uri="images/laf/sample/ghl.gif"
                     width="7"
                     height="28"/>
    </icon>

    <icon name="ui:globalHeaderEnd">
      <context-image uri="images/laf/sample/ght.gif"
                     width="7"
                     height="28"/>
    </icon>

    <icon name="ui:globalHeaderBackground">
      <context-image uri="images/laf/sample/ghb.gif"
                     width="7"
                     height="28"/>
    </icon>

    <!-- Define a custom MYCOMPANY icon -->

    <icon name="mycompany:logo">
      <context-image uri="images/laf/mycompany/logo.gif"
                     width="171"
                     height="19"/>
    </icon>
												  
  </icons>

</look-and-feel>