ADF Skin

Introduction
Oracle ADF Faces skinning enables developers to change an application’s look and feel—including color scheme, font size and style, component borders, default label text, images, and more—without changing the application's UI code.

Earlier in "Oracle JDeveloper 11g Release 11.1.2", "Oracle ADF Faces skin editor" was introduced & was coming embedded. So in that release, we can simply create new skin file in our Fusion web application & all configurations were done automatically.

But for all latest releases embedded "Oracle ADF Faces skin editor" is obsolete & we need to download standalone "Oracle ADF Faces skin editor" from OTN.

"Oracle ADF Faces skin editor" can be downloaded from http://www.oracle.com/technetwork/developer-tools/adf/downloads/index.html.

Approaches
For developing skin, we have two approaches:

• Develop ADF Skin application in skin editor & deploy it as ADF library.
• Develop ADF skin application in editor & make relevant changes in fusion web application.

Approach 1: ADF Skin application deployed as ADF Library
Suppose we need to have page with below appearance:

In Oracle ADF Faces skin editor:
Create a new ADF skin application with skin project.

Create a new skin file inside the project.

The most-common selectors are 

• Global selector aliases. Global skin selectors apply CSS definitions to all or a group of components. Global selector names are suffixed with the :alias string, as in.AFDefaultFont:alias.
• Component type selectors. Component selectors apply to all instances of a specific component type, such as af:inputText or af:commandButton. The component type selector name is similar to the tag name of the component that it skins. The difference is that the type selector uses a pipe symbol, whereas the component tag name has a colon. For example, the component type selector for the af:inputText component tag is af|inputText.
• Component pseudo-elements. Pseudo-elements point to specific areas in a component. For example, to style the data portion of a text input field, you use the af|inputText::content selector and element.
• Descendant selectors. To style a component based on its location on a page, you use descendant selectors. For example, to apply a different style to an af:goButton located in a toolbar, you use the af|toolbar af|goButton descendant selector.
• Pseudo-classes. To visually indicate component state (such as disabled) or behavior state (such as mouse hover), you use standard CSS pseudo-classes. The skin editor helps you discover and style pseudo-classes for the component you are skinning.
• Resource selectors. In addition to changing a component’s look and feel, you can change its default labels. In this instance, Oracle ADF Faces skinning goes beyond what is possible in traditional CSS. For example, to change the OK label in af:dialog to Accept, you addaf_dialog .LABEL_OK : Accept to the resource properties file.

Open CustomSkin.css from design overview, expand “Input Text” from Faces Component Selectors. From Pseudo_elements, select content & from properties change background color.

Similarly, select “label” & from properties change background color.

Optionally you can check all the components/pseudo elements for which default properties are updated. To check, select “Updated Selectors” from dropdown.

From Source, you can see the changes made.

/**ADFFaces_Skin_File / DO NOT REMOVE**/
@namespace af "http://xmlns.oracle.com/adf/faces/rich";
@namespace dvt "http://xmlns.oracle.com/dss/adf/faces";

af|inputText::content
{
  background-color: Fuchsia; 
}
af|inputText::label
{
  background-color: Orange; 
}

So after making changes, we need to create deployment profile for our skin project. Right click project & from deploy menu select “New Deployment Profile”.

Select the profile type as "ADF Library JAR File".

As we have created deployment profile, the next step is to deploy project as ADFLibrary.

Click Finish & note the location of JAR file.

In Jdeveloper

we have already created ADF Fusion Web Application with jspx page as shown below:

So the earlier ADF library JAR “CustomSkinJAR”, is imported in ADF web application. So the page appearance is changed as seen below.

But we wanted custom appearance only one component.
For this we need to modify CustomSkin project- CustomSkin.css as shown below:

/**ADFFaces_Skin_File / DO NOT REMOVE**/
@namespace af "http://xmlns.oracle.com/adf/faces/rich";
@namespace dvt "http://xmlns.oracle.com/dss/adf/faces";

.lspCustomSkin af|inputText::content
{
  background-color: Fuchsia; 
}
.lspCustomSkin af|inputText::label
{
  background-color: Orange; 
}

In ADF application, we need to modify the property of component for which we want to see changes. So the StyleClass property is changed.

So finally, we achieved the custom css changes applied to specific component.

Approach 2: ADF Skin changes imported to ADF application

• Copy the “trinidad-skins.xml” file in “WEB-INF” directory of ADF project.
• Copy the css file in “public_html” directory.
• Open the previously copied “trinidad-skins.xml” file & correct the path of css file. i.e. “<style-sheet-name>” value.
• Open the “trinidad-config.xml” & correct the <skin-family> value. (ref value can be found from “trinidad-skins.xml”.

By this approach, subsequent changes can be done directly into css file.