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");
Comments (4)
this is nice, but it doesn't say where to put it...perhaps that is very obvious to everyone else, but I have no idea.
Posted by Anonymous | May 27, 2008 3:09 PM
Posted on May 27, 2008 15:09
To apply an existing custom style for the login (i.e., before the user is logged in): <skin-family>#{sessionScope.skinFamily eq null?'myCustomStyle':sessionScope.skinFamily}</skin-family>
Note: using '==' instead of 'eq' will lead to an oracle error.
Posted by Anonymous | May 27, 2008 4:11 PM
Posted on May 27, 2008 16:11
Hello,
I was trying to set the skin in the BeforePhase of the view and is not working:
public void BeforePhase(PhaseEvent phaseEvent)
{
// Add event code here...
if (phaseEvent.getPhaseId().getOrdinal() == 6)
{
if (!isPostback())
{
FacesContext ctx = FacesContext.getCurrentInstance();
Map sessionState = ctx.getExternalContext().getSessionMap();
sessionState.put("skinFamily", "myskinfamily_green");
}
}
}
Changeing the skin after login using a menu is working fine, but I want to load personalized skin per user.
Where to set the skin loaded initially?
Thanks,
Viorel
Posted by viorel | September 14, 2008 6:00 PM
Posted on September 14, 2008 18:00
In my loginAction, which is implemented in a managed bean at application scope, I have some hard wired styles assigned to the current session. The style assignments are based on the role of the user. You can do the same on a per user base as well.
Posted by Olaf Heimburger | September 16, 2008 9:20 AM
Posted on September 16, 2008 09:20