ADF: Skinning: Applying ALTA UI Skin to an ADF Application

Oracle’s new ALTA UI (introduced in 12c) provides a modern look to your ADF application. It is simple, clean and at the same time very sleek. Let me share with you how you applying the out of the box ALTA Skin to your application.

• Note: You do not need to perform these steps when using the latest release of Oracle JDeveloper 12.2.1  as ALTA UI is extended by default when you create a new skin file.

Applying the ALTA Skin

Create a custom skin file MyDemoSkin.css within your ADF application. Refer to my prior post for the detail steps on how to do this.

Your trinidad-config.xml file looks like this:

<?xml version="1.0" encoding="windows-1252"?>

<trinidad-config xmlns="http://myfaces.apache.org/trinidad/config">

<skin-family>myDemoSkin</skin-family>

</trinidad-config>

Update the Trinidad-config.xml and add a version number for your skin-family. 

• Best Practice - "Always version your skin families"

<?xml version="1.0" encoding="windows-1252"?>

<trinidad-config xmlns="http://myfaces.apache.org/trinidad/config">

<skin-family>myDemoSkin</skin-family>

<skin-version>v1</skin-version>

</trinidad-config>

Your trinidad-skins.xml looks like this:

<?xml version="1.0" encoding="windows-1252"?>

<skins xmlns="http://myfaces.apache.org/trinidad/skin">

<skin>

<id>myDemoSkin.desktop</id>

<family>myDemoSkin</family>

<extends>skyros-v1.desktop</extends>

<render-kit-id>org.apache.myfaces.trinidad.desktop</render-kit-id>

<style-sheet-name>skins/myDemoSkin/myDemoSkin.css</style-sheet-name>

<bundle-name>com.demo.view.skinBundle</bundle-name>

</skin>

</skins>

Notice that your skin (MyDemoSkin) extends the out of the box skyros skin (skyros-v1.desktop). We will update this to extend ALTA skin.


Update the trinidad-skins.xml to modify the <extends> property:

<?xml version="1.0" encoding="windows-1252"?>

<skins xmlns="http://myfaces.apache.org/trinidad/skin">

<skin>

<id>myDemoSkin.desktop</id>

<family>myDemoSkin</family>

<!--extends>skyros-v1.desktop</extends-->

<extends>alta-v1.desktop</extends>

<render-kit-id>org.apache.myfaces.trinidad.desktop</render-kit-id>

<style-sheet-name>skins/myDemoSkin/myDemoSkin.css</style-sheet-name>

<bundle-name>com.demo.view.skinBundle</bundle-name>

</skin>

</skins>

Now your ADF UI will follow the ALTA look and feel. Furthermore, you can create custom classes within your MyDemoSkin.css and enhance the appearance of your UI.

Learn how to define custom style classes and apply them to ADF Faces components here.


Hope you find this information useful. Please share your feedback below. I would love to hear from you. 

CaptiveCode