What is an ADF Skin?

An ADF skin is a special type of cascading style sheet (CSS) that allows us to customize the appearance of these components. Instead of providing a style properties for each component, or inserting a style sheet on each page of the application, we create one ADF skin for the web application. Every component that renders in the user interface automatically uses the styles defined by the ADF skin. This means we do not have to make design-time changes to individual pages to change their appearance when you use an ADF skin. Skinning refers to the task of developing an ADF skin to apply to a web application that uses ADF Faces and ADF Data Visualization components in the user interface.

Requirement: The objective of this post is to show you how we can add an ADF Skin for the ADF Fusion Web Application.

Solution: For solution of the above requirement follow the steps as shown below:

Step 1: Create an ADF Fusion Web Application. Add some ADF Faces component like input text, button, panel box, etc.

Step 2: Now, we have to create Skin in the ViewController project. For that right click ViewController project > New > From Gallery

Select ADF Skin (JSF/Facelets) > Click OK

Step 3: Provide the File Name, Directory, and the Family.

Click Next.

Step 4: Select alta-v1.desktop > Click Finish

Step 5: Open trinidad-config.xml file and verify if the value inside the skin-family tag is skin1

Now, we can open skin1.css and go to the Source tab, and then write the CSS code and based on what CSS code we the look and feel of the UI components will be changed.

Sample CSS code inside the skin.css file is shown below:

Thus, this is how we can add ADF Skin in Oracle ADF application.

Hence, the solution to our requirement.

If you like the post please comment, share, and do join me on Facebook. Please subscribe to my YouTube Channel for video tutorials.

Thanks & Regards,
Susanto Paul

 417 total views,  2 views today