17 Implementing Skinning

This chapter describes how to change the look and feel of your application by changing the skin. This chapter deals specifically with skinning as applied to Oracle Fusion applications and the UI Shell.

This chapter includes the following sections:

• Section 17.1, "Implementing Skinning"

• Section 17.2, "Creating and Implementing a Custom Skin"

• Section 17.3, "Changing the Skin of an Application"

For general information about skinning, see "Customizing the Appearance Using Styles and Skins" in the Oracle Fusion Middleware Web User Interface Developer's Guide for Oracle Application Development Framework.

For information about the UI Shell, see Chapter 14, "Implementing the UI Shell."

17.1 Implementing Skinning

Skinning lets you change the look and feel of your application without changing the content.

The goals of skinning include:

• Allow business managers to update branding rather than a software developer.

• Allow all Oracle Fusion applications to be updated through a single source of information.

• Allow different branding for partners or groups of partners accessing the same application.

• Generate a nice look and feel, such as rounded corners and color gradations, rather than a flat box-like look, unless that is desired.

• Keep the process manageable and keep the rebranding through future patches and upgrades.

17.1.1 Before You Begin

Before you can implement skinning, you need to accomplish these actions:

• Install the ADF Skin Editor. Follow the directions in the Oracle Fusion Middleware Installation Guide for Oracle Application Development Framework Skin Editor.

• Launch the skin editor. See the Oracle Fusion Middleware Skin Editor User's Guide for Oracle Application Development Framework.

  The first time you run, you may be prompted to locate the path to your Java executable:

  Type the full pathname of a J2SE installation (or Ctrl-C to quit), the path will be stored in ~/.skineditor_jdk 
  

  Note: If the Java executable is in the bin subdirectory, do not add bin to the path you enter. /bin is added automatically to the end of the string you enter.

• Check for updates. Select Help > Check for Updates.

17.2 Creating and Implementing a Custom Skin

Follow these basic steps to create a custom skin and implement it in your application.

• Create a skin using the ADF Skin Editor. See Section 17.2.1, "How to Create the Skin Project."

• Add the skin to your application. See Section 17.3, "Changing the Skin of an Application."

• Set the FND_CSS_SKIN_FAMILY profile option.

• Restart your application.

17.2.1 How to Create the Skin Project

The first step to create a custom skin is to create the skin project. Follow these steps.

1. Launch the ADF Skin Editor.

2. Create a new application. Select File > New > ADF Skin Application. The Create ADF Skin Application wizard launches and displays the ADF Skin Application dialog, as shown in Figure 17-1.

   Figure 17-1 Naming the Skin Application

   
   

   • Application Name

     Enter a name for the application. By default, an application name in the form Applicationn is shown, where n is a number that increases sequentially from 1. This is the filename that will be used for the application control file within the file system. The extension .jws is assumed, but not displayed.

   • Directory

     Enter a directory for the application or click Browse to locate one. The default directory location is its own subdirectory beneath skineditor/, such as skineditor/Application_Name.

   Click Next to display the ADF Skin Project dialog, shown in Figure 17-2.

   Figure 17-2 Naming the Skin Project

   
   

   • Project Name

     Enter a name for the project. By default, a project name in the form Projectn is shown, where n is a number that increases sequentially from 1. This is the filename that will be used for the project within the file system. The extension .jpr is assumed, but not displayed.

   • Directory

     Enter a directory for the application or click Browse to locate one. The default directory location is skineditor/Application_Name/Project_Name.

   • Target Application Release

     Choose 11.1.1.4.0. This determines which skin families are available for your release and the values that will be available for the Extends option when you create a new ADF Skin file, as shown in Figure 17-3.

     You can select an earlier release, but the number and contents of the available skin families may be different.

   Click Finish.

3. Select File > New > ADF Skin File to launch the Create ADF Skin File wizard, shown in Figure 17-3.

   Figure 17-3 Creating a Skin File

   
   

   An ADF skin is a type of CSS file that you can use to define the look and feel of your application. Oracle Application Development Framework (ADF) provides a number of ADF skins that you can extend when you create a new ADF skin. The recommended ADF skin to extend depends on the release of Oracle ADF that you use.

   • File Name

     Enter a file name for the new ADF skin. The example uses GPS.

   • Directory

     Enter the directory path to the CSS source file for the ADF skin. You can accept the default path shown in the Directory field specify a different path.

   • Family

     This value automatically is populated with the root of the File Name you entered.

     If necessary, enter a different value for the family name of your ADF skin. Later, you will set this value in your application's configuration file (for example, the trinidad-config.xml file) to apply the ADF skin to the application.

     • Use as the default skin family for this project

       Clear this checkbox if you do not want to make the ADF skin the default for your project. Later, you can set a value in your project's configuration file to make the ADF skin the default.

   • Extends

     This field lets you select from the list of available skin families. The selection depends on the value selected for the Target Application Release, as shown in Figure 17-2.

     From the drop-down list, select fusionFx-simple-v1.desktop.

     Compared to the complex Oracle-specific skin, this skin is optimized to make it easy to create a new style.

     • Simplified color selection

     • Better aliases

     • Images that can be colored automatically

     The difference between extending and adding is that, by adding, you are still referencing the base skin family (such as Fusion-Fx in the Trinidad-config file) but the styles in the addition also are picked up. Extending is when you extend and then override.

   • Skin ID

     This read-only value automatically is populated with the root of the File Name you entered and the extension of the value selected in the Extends field.

     The trinidad-skins.xml file uses the value of Skin Id to identify ADF skins.

   Click OK to create the .css file (GPS.css in this example).

17.2.2 How to Customize the Skin

When you click to display the Design view, the styles display in the Style Classes list and a sample view is displayed, as shown inFigure 17-4.

Figure 17-4 Showing Style Classes in a Skin CSS File

Click another Theme tab, such as Medium Theme, to show how the text display changes, as shown in Figure 17-5.

Figure 17-5 Displaying a Different Theme

To customize the colors of the CSS style, click the Images tab. The display will change to resemble Figure 17-6.

Figure 17-6 Displaying a Scheme's Colors

To change a style's color, click the icon to the right of the style name to display the color picker, shown in Figure 17-7.

Figure 17-7 Displaying the Color Picker

You also can change all style colors by clicking the Adjust Hue/Saturation/Brightness link at the bottom of the styles list. All the styles and their current colors will be listed. You can change all by clicking and dragging the sliders, as shown in Figure 17-8.

Figure 17-8 Adjusting the Hue, Saturation and Brightness

17.2.3 How to Deploy the Skin Profile

You need to deploy the skin project to a JAR file that can be included in an application. There are three steps to deploying the skin project:

• Create the skin deployment profile.

• Deploy the skin profile.

• Deploy the skin profile to a JAR file.

To deploy the skin project:

• Right-click the skin project and select Deploy > New Deployment Profile to display the Create Deployment Profile dialog, shown in Figure 17-9.

  Figure 17-9 Creating the Skin Deployment Profile

  
  

  • Profile Type

    Select ADF Library JAR File.

  • Deployment Profile Name

    The name must begin with Xx_. The example uses Xx_ plus the name of the project.

• Click OK.

• Right-click the skin project and select Deploy > profile_name to display the Deploy profile_name dialog.

• Click Finish.

• Right-click the skin project and select Deploy > profile_name to JAR file.

The skin profile JAR now is ready to be added to an application's Libraries and Classpath.

17.3 Changing the Skin of an Application

You can change the skin of an existing deployed application or you can add a skin within JDeveloper to a development project.

To change the skin of a deployed application:

• Add these three JAR files to your application's WEB-INF/Lib directory:

  • Your new skin, Xx_GPS in this example.

  • The fusion-simple-skin.jar that is located on the Oracle Technology Network (OTN)

  • The Xx_ApplCoreStyles.jar (located on OTN)

• Stop and restart your application.

To use a skin within JDeveloper:

• Add the directory to which the skin JAR file (Xx_GPS in the examples) was deployed, into the Resource pallet, as shown in Figure 17-10.

  Figure 17-10 Creating Skinning File System Connection

  
  

  • Right-click the library and choose Add to Project, as shown in Figure 17-11.

    Figure 17-11 Adding Skin Library to JDeveloper Project

    
    

  • Click OK when prompted to add the library to the View Controller project. It will show in your project as "ADF Library."

• Redeploy your application.

Set your profile option (PO) to the new skin. (You can create a PO for the skin associated to a single user when developing a skin so others are not affected.) After changing the PO, reload a page using the PO and you should see your changes immediately.

To change the PO:

• Deploy the fndSetup application.

• In the Tasklist, select Profiles > Manage Administrator Profile Values.

• In the Search: Profile Option section, enter FND_CSS_SKIN_FAMILY (or FND_CSS%) in the Profile Option Code field and click Search. The complete Profile Option values dialog is shown in Figure 17-12.

  Figure 17-12 Changing the Skin Using Profile Option

  
  

• Change the value to the new skin family your skin is using. For instance, if you were using the name RICH, you would change the Profile Value from fusionFx to Xx_GPS.

• Click Save. A simple change in the skin profile option does not require you to restart the server or redeploy the application, but it does require the user to log off and back on to see the new skin.

If you log out of the fndSetup application and then back in, you'll see that the simple Xx_GPS skin has changed how the application looks, as shown in Figure 17-13.

Figure 17-13 Showing the Effect of the New Skin