Oracle E-Business Suite applications are currently shipped with Oracle's corporate Browser Look-and-Feel (BLAF), which supplies a rich set of components for web-based applications. Although OA Personalization Framework provides you with the ability to change the look of a page by changing user interface (UI) component properties, adding UI components, and so on, it does not allow you to create and apply an entirely new Look-and-Feel to an application.

The Customizing Look-and-Feel (CLAF) feature addresses this issue by providing a self-service based UI to modify the Look-and-Feel of an application. The feature enhances OA Personalization Framework by allowing personalization administrators to:

• Create a new Look-and-Feel (LAF).

• Register the new LAF.

• Apply the LAF at the Application, Responsibility, Site, Organization or User levels.

• Update a custom LAF.

UIX currently provides OA Framework with the following LAFs, which can be used directly in web applications:

• Browser Look-and-Feel (BLAF) - the default LAF that conforms to Oracle's corporate UI guidelines.

• Minimal Look-and-Feel (MLAF) - a simplified version of BLAF with a lightweight UI.

• Base Look-and-Feel - the root of all LAF implementations.

• Simple Look-and-Feel (SLAF) - a LAF built on top of Base Look-and-Feel to offer more customization features, and to serve as an illustration of how to create LAF extensions on top of a base LAF.

You can build custom LAFs by extending Base LAF, Simple LAF, or another custom LAF.

Infrastructure of a Look-and-Feel

A Look-and-Feel is defined by three major components: style sheets (XSS), icons, and renderers.

Style Sheets

A style sheet document (.xss extension) lists the styles for the Look-and-Feel. Styles control the color and font of HTML components. For a complete discussion of style sheets and styles, please refer to the Style Sheets topic in this chapter. Style sheets are located in /OA_HTML/cabo/styles.

See also the list of global styles provided by UIX later in this chapter.

Icons

Some web beans are composed of one or more icons that control the web bean's Look-and-Feel. Icons are identified by a name. For example, the Hide/Show web bean consists of the "disclosed" icon. Icons are present in the LAF configuration file. For additional information, refer to the Icons topic in this chapter.

Renderers

A renderer controls how a web bean lays out its children and generates HTML. If the layout of the LAF you wish to create is different from the standard layout provided by Oracle, you will have to write new renderers for those components that differ in their layout. You define renderers declaratively as templates (.uit extension). Following is an example template definition for a sidebar component:

<!-- Template used by sample LAF for side bar. -->
<templateDefinition
      xmlns="http://xmlns.example.com/uix/ui"
      xmlns:ui="http://xmlns.example.com/uix/ui"
      xmlns:html="http://www.w3.org/TR/REC-html40"
      targetNamespace="http://www.example.org/demo/templates"
      localName="sidebar">
  <content>
  ...
  </content>
</templateDefinition>

You should have one template renderer for each component that has a custom layout. The section between the <content> and </content> tags contains the desired UI layout and any references to other UI components. The UI layout is represented in uiXML and HTML.

Look-and-Feel Extension (Custom Skins)

When you define a new Look-and-Feel, you can also alter the layout of its inherited Look-and-Feel, thereby creating what is called a custom skin. To complete the creation of a custom skin, you must register any custom renderers, custom facet renders, and custom icons for that skin, on your custom Look-and-Feel using the Customizing Look-and-Feel UI.

For more information, see Custom Renderer and Custom Icon Standards.

The following code is an example of content in a LAF extension XML that defines a new skin. This example represents a LAF identified by a family called customlaf. Since it extends the simple.desktop LAF, it inherits all the styles from the UIX Simple Look-and-Feel (SLAF). This custom LAF overrides the renderer for page layout by providing its own template-based renderer for page layout. It also provides a custom printable facet page layout renderer (which is initiated to render the page when you run the page in printable page mode) and some custom icons.

<lookAndFeel xmlns="http://xmlns.example.com/uix/ui/laf"
             xmlns:ui="http://xmlns.example.com/uix/ui"
             id="customlaf.desktop"
             family="customlaf"
             extends="simple.desktop"
             styleSheetName="customlaf-desktop.xss">

  <!-- Custom Renderers -->
  <renderers>
    <!-- Register a custom pageLayout Renderer -->
    <renderer name="ui:pageLayout">
      <template name="pageLayout.uit"/>
    </renderer>
  </renderers>

  <!-- Facet custom Renderers -->
  <renderers facets="printable">
    <!-- Register a custom pageLayout Renderer -->
    <renderer name="ui:pageLayout">
      <template name="printablePageLayout.uit"/>
    </renderer>
  </renderers>

  <!-- Custom Icons -->
  <icons>
    <!-- Provide some icon -->
    <icon name="ui:tabBarStart">
    <contextImage uri="images/laf/customlaf/tbs.gif" 
      width="8" height="26"/>
    </icon>
  </icons>

Customizing Look-and-Feel (CLAF) User Interface

The Customizing Look-and-Feel feature provides a self-service user interface that allows you to create a new Look-and-Feel, as well as update an existing Look-and-Feel. It does not, however, provide a user interface to create custom template renderers. You must first create/write any custom template renderers that you require before you can create the look and feel.

Prerequisites

• You should have a good knowledge of UIX web beans and be able to identify which specific UIX component maps to a given component in your web site.

• You should have a good understanding of UIX XSS infrastructure and be able to identify what color and font styles are associated with each component. Refer to the Style Sheets topic and the Global Styles table for additional information.

• You must ensure that you have write permission on the file system where OA Personalization Framework is running. If write permission is not granted before you attempt to create or update a Look-and-Feel, the UI will throw an exception.

• You need to write a template renderer only if a component has a layout and children that are different from that of the Browser Look-and-Feel (BLAF). If you need to register a new template renderer, follow these steps before proceeding to the Accessing the CLAF UI section following:

  1. Name your custom template renderer file as <webBeanType>.uit. For example: sideBar.uit, tabBar.uit, or pageLayout.uit.

  2. Create a folder named <lookandFeelId> under $HTML_TOP/cabo/templates, where <lookandFeelId> would be a LAF name, such as custom-desktop.

  3. Place the <webBeanType>.uit file in the folder $HTML_TOP/cabo/templates/<lookandFeelId>. For example to register a new template renderer for tabBar, move tabBar.uit so that resides as $HTML_TOP/cabo/templates/custom-desktop/tabBar.uit, where custom-desktop is the <lookandFeelId> folder.

  4. Continue with the Accessing the CLAF UI and Creating a New LAF sections to create new LAF.

  Attention: To ensure that your template renderer registers properly, make sure the new LAF you create has the same LAF name as the <lookandFeelId> folder you created in the second step.

  To update an already registered template renderer, first replace the old <webBeanType>.uit file with your new modified version of the <webBeanType>.uit file. Next, proceed to the Accessing the CLAF UI and Updating a LAF sections. Make sure you replace <webBeanType>.uit in the appropriate <lookandFeelId> folder.

Accessing the CLAF UI

The Customizing Look-and-Feel user interface can be accessed in one of two ways:

• Using the Oracle E-Business Suite Users window, add the responsibility FND_CLAF_ADMINISTRATOR to the user who should be given permission to create new LAFs. Make sure you bounce your web server after saving the change so that the setting takes effect. A Customizing Look and Feel Administrator responsibility should now be available for the user. After selecting that responsibility, the user should then select Customizing Look and Feel Administrator to navigate to the first page of the CLAF UI.

• In the Page Hierarchy Personalization page of the Admin Personalization UI, the Page Hierarchy HGrid displays a column called Customize Look and Feel. A Customize Look and Feel (pen) icon appears in the column if the following two conditions are met:

  • The application page's current Look-and-Feel is customizable. For example if the current Look-and-Feel is BLAF, an icon will never appear because BLAF is not customizable.

  • The component is LAF customizable. This means that only a component associated with a style or icon can have the Customize Look and Feel icon enabled. If a personalization administrator does not have access to the Customizing Look and Feel Administrator responsibility when he or she selects the icon, OA Framework returns an error.

When you select the Customize Look and Feel icon in the HGrid for a specific page element, you navigate to the second page of the CLAF UI (Customize Styles and Icons ) for that page element.

Creating a New LAF

Aside from creating custom template renderers yourself, the CLAF UI provides all the other features needed to create a new look and feel. The UI allows you to:

• Specify the new Look-and-Feel identifier or name. The identifier must be unique, all lower case, and must follow the standard <lookAndFeelFamilyName>-<device> naming convention, where <device> is either desktop or pda.

• Specify the family under which the Look-and-Feel belongs (in all lower case). Multiple LAFs for different devices can exist under the same family. For example, myclaf-desktop and myclaf-pda both exist under the myclaf family. The family name should be unique for a particular Look-and-Feel.

• Specify the base Look-and-Feel that your new custom Look-and-Feel shall extend. All styles, icons, and renderers are inherited from this base look and feel, and can be overridden.

• Modify the styles inherited from the base Look-and-Feel to suit the colors and fonts of the new Look-and-Feel you want to create.

• Modify the icons inherited from the base Look-and-Feel to suit the new look and feel you want to create.

• Get immediate feedback on the changes being made to styles and icons using the preview page.

• Register any custom template renderers you define for any web beans.

The following steps outline how to create a new custom LAF or skin using the CLAF user interface:

1. Evaluate a good sampling of pages in the web site for which you want to create a new Look-and-Feel or skin. Determine whether the overall layout and component order as specified in BLAF is sufficient for the new skin. If it is, then you do not need to create a new LAF, but simply need to modify certain styles or icons. If it is not, that is, the layout and component order differs from that of BLAF, you will need to define renderers for each of those components.

2. Log in as a user with access to the Customizing Look and Feel Administrator responsibility. Select the menu option Customizing Look and Feel Administrator to initiate the CLAF UI.

3. In the Look and Feel Configuration page, select the Create Look and Feel radio button.

4. Specify values for the following parameters, then select Next:

   • Name - (Required) A unique name for the LAF, in all lower case, following the naming standard <lookAndFeelFamilyName>-<device>.

     Caution: The name of your new LAF must not contain upper case letters. Although you can enter a name with upper case letters, the OA Personalization Framework converts them to lower case in the filename when saving the LAF. If you try to update this LAF later, the system will not be able to find it, and will generate an error.

     OA Framework automatically generates an internal .xml file and an .xss file using this name. For example, if you name your LAF custom-desktop, OA Framework automatically generates the Look-and-Feel configuration file $HTML_TOP/cabo/lafs/custom-desktop.xml, and the stylesheet file $HTML_TOP/cabo/styles/custom-desktop.xss.

   • Family - (Required) The family under which this LAF is being created. Specify the family as all lower case. For example, the custom LAF family can have two LAFs named custom-desktop and custom-pda.

   • Description - (Optional) Enter text to describe the LAF that you are creating.

   • Base Look and Feel - (Required) The base LAF that the LAF you are creating will extend. The set of existing LAFs in your environment is displayed in the poplist.

   Note: You cannot extend the Oracle corporate BLAF (Browser Look-and-Feel) or the MLAF (Minimal Look-and-Feel).

5. In the Customize Styles and Icons page that appears, the set of global named styles is displayed by default. The Component poplist also displays global by default to indicate that the page is currently displaying the global named styles that affect more than one component. You can also choose the Selectors or Icons sub tabs to display any global selectors or global icons.

6. Modify named styles or selectors - In the Named Styles or Selectors sub tabs, identify the style you want to change. Styles control color or font properties. You can add a new custom style by selecting Add Style or delete a custom style by selecting the Delete icon.

   Select Show to expand the detail region for a style or selector to make any of the following modifications:

   • Add a new property or included style to a style or selector by choosing Add Property and using the Type poplist to specify the type of property to add.

   • Change the value of any existing property.

   • Delete any property or included style from a style or selector .

   Note: You cannot directly update an included style. To replace an included style, delete the existing one, then add a new one using the Add Property button.

7. Modify icons (icons may either be text-based or GIF image-based). Select the Icons sub-tab and identify the icon you want to modify. Select Show to expand the detail region for the icon to make any of the following modifications:

   • Alter the icon's properties, such as height or width.

   • Replace the existing icon with a different icon (such as replacing a text icon with an image icon).

8. If you wish to add or modify named styles, selectors or icons that are specific to a component, use the Component poplist to select the component you wish to customize. Once you select a component, the page refreshes with a preview of the component beneath the Component poplist.

   Repeat Step 6 if you wish to modify the component's named styles/selectors or Step 7 to modify the components named icons. Repeat this step for all the components you want to customize. Select Next when you are done.

   Note: Any custom template renderers you defined are registered here.

9. In the Review and Submit page, select Go if you wish to preview your new custom LAF against the Toolbox Tutorial Home Page that is shipped with OA Framework.

   Alternatively, you may specify your own page to preview, using the format OA.jsp?param1=value1&param2=value2&... in the Page Preview URL field and selecting Go.

10. If you are satisfied with the previewed changes, select Finish to save your changes and create/register your new custom LAF, otherwise select Back to return to the previous pages in the CLAF flow to make additional modifications.

11. To run your Oracle E-Business Suite applications pages with your custom LAF, log in to the Oracle E-Business Suite and set the profile option Oracle Applications Look and Feel (APPS_LOOK_AND_FEEL) to the custom LAF that you created, as it appears in the poplist.

12. Bounce your web server, then run your application pages to see the new LAF take effect.

Updating a LAF

You can also use the CLAF UI to update an existing Look-and-Feel. The UI allows you to:

• Modify any styles or icons defined in the Look-and-Feel.

• Change any renderers registered with the Look-and-Feel.

The following steps outline how to update a LAF or skin using the CLAF user interface:

1. Access the CLAF UI using one of these two methods:

   • Log in as a user with access to the Customizing Look and Feel Administrator responsibility, and select the menu option Customizing Look and Feel Administrator to initiate the CLAF UI.

   • In the Page Hierarchy Personalization page of the Admin Personalization UI, select the Customize Look and Feel (pen) icon in the Customize Look and Feel column of the Page Hierarchy HGrid. You can access the CLAF UI using this method if the appropriate conditions are met.

2. In the Look and Feel Configuration page, select the Update Look and Feel radio button.

3. Specify the name of the Look-and-Feel that you want to update, then click Next.

4. Refer to Steps 5 and on in the Creating a New LAF section for the remaining steps that are also common to updating a LAF.

Deleting a LAF

You can use the CLAF UI to delete an existing custom Look-and-Feel.

To delete a custom Look-and-Feel:

1. Access the CLAF UI using one of the following methods:

   • Log in as a user with access to the Customizing Look and Feel Administrator responsibility, and select the menu option Customizing Look and Feel Administrator to initiate the CLAF UI.

   • In the Page Hierarchy Personalization page of the Admin Personalization UI, select the Customize Look and Feel (pen) icon in the Customize Look and Feel column of the Page Hierarchy HGrid. You can access the CLAF UI using this method if the appropriate conditions are met.

2. On the Look and Feel Configuration page, select the Delete Look and Feel radio button.

3. Select the name of the custom Look-and-Feel that you want to delete, then click Delete.

4. On the Confirmation page that appears, click OK.

Custom Renderer and Custom Icon Standards

The following naming and directory standards must be followed:

• All custom template renderer files should be named as <webBeanType>.uit. For example: sideBar.uit, tabBar.uit, or pageLayout.uit.

• All template renderer files should reside under $HTML_TOP/cabo/templates/<lookandFeelId>/ where <lookandFeelId> would be a LAF name, such as custom-desktop.

• All custom icon files should reside under $HTML_TOP/cabo/images/<lookandFeelId>/ where <lookandFeelId> would be a LAF name, such as custom-desktop.

Global Styles

The following tables list description of the global styles that are provided by UIX.

Global alignment styles provided by UIX

Global color styles provided by UIX

Global font styles provided by UIX

Customizable Components

The following is a list of components whose Look-and-Feel may be customized using the CLAF UI:

• applicationSwitcher

• breadCrumbs x train

• button

• colorField

• contentContainer

• dateField

• footer

• globalButton

• globalHeader

• hGrid

• header

• hideShow

• lovInput

• messageBox

• sidebar

• sortableHeader

• tabBar

• table

• train

Known Issues

See a summary of key CLAF issues with suggested workarounds if available.

Personalization FAQ

The Personalization FAQ includes a number of entries that cover Customizing Look-and-Feel issues.