Olaf Heimburger's Blog

One nice and impressive end user feature of ADF Faces is the Dynanic Skin Switching. To visualize the different user roles in a particular application I've implemented a skin change during the login phase of the application.

1. Get Skins

To use different skins, you need to have different skins available. The easiest way to get them is via the JDeveloper 10.1.3 "Additional ADF Faces Skins" Extension. This is available for free through Help -> Check for Updates.

2. Copy the Skins to Your Application

To use them in your application you have to copy them to the web directory (per default public_html) in your project. Simply create a skins subdirectory and copy them from $JDEV_HOME/jdev/extensions/skins into it.

3. Create adf-faces-skins.xml

To use the skins you to create a file called WEB-INF/adf-faces-skins.xml. This file needs some names for the specific skins. Here is an example:
<?xml version="1.0" encoding="ISO-8859-1"?>
<skins xmlns="http://xmlns.oracle.com/adf/view/faces/skin">
 <skin>
  <id>srdemo.desktop</id>
  <family>srdemo</family>
  <render-kit-id>oracle.adf.desktop</render-kit-id>
  <style-sheet-name>skins/srdemo/srdemo.css</style-sheet-name>
 </skin>
 <skin>
  <id>mycompany.desktop</id>
  <family>mycompany</family>
  <render-kit-id>oracle.adf.desktop</render-kit-id>
  <style-sheet-name>skins/mycompany/myCompanySkin.css</style-sheet-name>
 </skin>
 <skin>
  <id>limerine.desktop</id>
  <family>limerine</family>
  <render-kit-id>oracle.adf.desktop</render-kit-id>
  <style-sheet-name>skins/limerine/limerine.css</style-sheet-name>
 </skin>
</skins>

4. Configure ADF Faces to Use the Skin You Want

By default the oracle skin family will be used in ADF Faces (even if the value of the <skin-family> tag is empty). To make ADF Faces aware of a different skin, you must modify the WEB-INF/adf-faces-config.xml to have line like this:
 <skin-family>#{sessionScope.skinFamily}</skin-family>

With this line we're able to change the skin on the fly simply by setting the skinFamily session attribute.

5. Set the Session Attribute

In your loginAction method you can set the value for the user by calling this code sequence (with the mycompany skin for a particular role):
 FacesContext ctx = FacesContext.getCurrentInstance();
 Map sessionState =
   ctx.getExternalContext().getSessionMap();
 sessionState.put("skinFamily", "mycompany");

6. Resetting the Session Attribute

To make the appearance of your application reproducable and recognizable, you should have a common skin for the login page. This means that you should reset the skin of your application. In my sample I reset the skin to the oracle skinFamily to leverage the default behaviour and to have neutral skin just for the login page. The code is as easy as in point 5:
 FacesContext ctx = FacesContext.getCurrentInstance();

 Map sessionState =

   ctx.getExternalContext().getSessionMap();

 sessionState.put("skinFamily", "oracle");