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.png
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.
nice