Create ADF Skin for styling your adf applications

For styling ADF applications, you need to create Skin CSS file and associated trinidad configuration files. In this blog post, i will explain steps necessary to get started with ADF Skin.

Download and install ADF Skin Editor from OTN.

Start Skin Editor (skineditor.exe).

Create new Skin Application.

 

Make sure to target for particular version of your ADF application's Runtime environment. (Target Application Release)

 

 Create New Skin using Wizard.

 

Select your base skin. You would start with skin provided by Oracle (Skyros, Fusion, Alta UI etc) and build styles specific to brand of your company. 

 

Now let's modify CSS file to update color of button. (It is not a good idea to change Layout of your ADF application using Skin, it will create issues).

Skin editor provides many features to control properties of various ADF components. For example, in this case we are changing color of Button text to Red. CSS code would look like below.

af|button {
    color: red;
}

This is not quite CSS syntax, ADF framework will modify this at runtime to generate CSS file with af_button class with properties inherited from base skin and color value set to red. Please refer to Skin Editor documentation for more details.

Now, let's deploy this Skin for use by ADF application. This is done by creating ADF Library Jar file. 

Go to Project Properties - Deployment for your Skin project. Create new Deployment Profile. Select ADF Library Jar File as Profile Type. 

Run Deployment Profile (right click on Project - Deploy and then select Deployment Profile name.)

This will create ADF Library JAR file. You can reference this file from your ADF application using Resources view. You can share ADF Library JAR file storing it on shared file system or by versioning it is SubVersion or other source control system. In my case, i have placed file in libraries sub-folder of my ADF Application and created File System connection to that folder.

Now, Select your Web Project in Applications explorer in JDeveloper, right click on ADF Library in Resources and select Add to Project... 

This skin file is now available to your ADF application, but it is not yet configured to use it. You must configure trinidad-config.xml file to reference specific skin, othewise it will default to skyros, fusion etc depending on your ADF version.

Create trinidad-config.xml, if it's not present in WEB-INF folder. And modify it to refer to Skin you have created and added to this project.

Now your application is ready with your custom skin file. Run and you will see button text color as Red.