Skin Changing in ADF /Webcenter by clicking links

Those who are constantly working in adf/webcenter framework,then are acquainted with skin changing by selecting some kind of drop down list.Steps and some sort of code is documented by Oracle in the following link http://docs.oracle.com/cd/E21764_01/web.1111/b31973/af_skin.htm (To conditionally configure a component to set the skin family:) Now this is the base of what I am going to show you.
Skins will be changing based on user clicks on link.

Step 1:Under WEB-INF folder,create trinidad-skins.xml. where you will mention your skins.
just like below -(Assuming you have two skins redSkin.css and yellowSkin.css in your application.
<?xml version="1.0" encoding="ISO-8859-1"?>
<skins xmlns="http://myfaces.apache.org/trinidad/skin">
  <skin>
    <id>redSkin.desktop</id>
    <family>redSkin</family>
    <extends>blafplus-rich.desktop</extends>
    <render-kit-id>org.apache.myfaces.trinidad.desktop</render-kit-id>
    <style-sheet-name>skins/redSkin.css</style-sheet-name>
  </skin>
  <skin>
    <id>yellowSkin.desktop</id>
    <family>yellowSkin</family>
    <extends>blafplus-rich.desktop</extends>
    <render-kit-id>org.apache.myfaces.trinidad.desktop</render-kit-id>
    <style-sheet-name>skins/yellowSkin.css</style-sheet-name>
  </skin>
</skins>

Step 2 :Create a managed bean to change skins dynamically and register the managed bean in adfc-config.xml or faces-config.xml (whatever you prefer).This bean will populate list of skins in trinidad-config.xml.

1. package hoque.skin;
2. import javax.faces.context.FacesContext;
3.  
4. public class SkinBean {
5.     private String[] skins = new String[] {"redSkin","yellowSkin","Portal" };
6.     private String currentSkin = null;
7.     public String[] getSkins() {
8.         return skins;
9.     }
10.     public void setCurrentSkin(String currentSkin) {
11.         this.currentSkin = currentSkin;
12.     }
13.     public String getCurrentSkin() {
14.         if(currentSkin==null){
15.             FacesContext ctx = FacesContext.getCurrentInstance();
16.             String skinPreference=(String)ctx.getApplication().evaluateExpressionGet(ctx, "#{preferenceBean.defaultTrinidadSkin}", Object.class);
17.             currentSkin = skinPreference;
18.         }
19.         return currentSkin;
20.     }
21. }

Step 3:Change the default skin preferencebean in trinidad-config.xml.

?xml version="1.0" encoding="windows-1252"?>
<trinidad-config xmlns="http://myfaces.apache.org/trinidad/config">

  <skin-family>#{SkinBean.currentSkin}</skin-family>
  <skin-version>v1.1</skin-version>
</trinidad-config>

Step 4: Add CommandLinks with actionListeners in jspx page.

<af:commandLink text="Red"
                              id="cl1"
                              actionListener="#{skinChangeBean.change}"/>

<af:commandLink text="Yellow"
                              id="cl2"
                              actionListener="#{skinChangeBean.change}"/>

Step 5: Create SkinChangeBean managed bean to change the skins and register it in adfc-config.xml or faces.xml.

 

1. package hoque.skin;
2.  
3. import javax.faces.context.FacesContext;
4. import javax.faces.event.ActionEvent;
5.  
6. public class SkinChangeBean{
7.  
8. private SkinSelectorBean preferencebean;
9.  
10. public void change(ActionEvent actionEvent) {
11.             FacesContext ctx = FacesContext.getCurrentInstance();
12.                String skinvalue="redSkin";
13.             preferencebean =
14.                     (SkinBean )ctx.getApplication().evaluateExpressionGet(ctx, "#{SkinBean }", Object.class);
15.             if(preferencebean!=null){
16.                 if(skinvalue.equalsIgnoreCase(preferencebean.getCurrentSkin())){
17.                     skinvalue = "yellowSkin";
18.                 }
19.                 preferencebean.setCurrentSkin(skinvalue);
20.                          
21.             }
22.             // Add event code here...
23.         }
24. }

Step 6:Run you application and observe the changes.