May 6, 2013

Using multiple skins in an ADF application



To use multiple skin files in an ADF application, follow the below procedure.
  • Create different css files for the application. (In this example, I have created css files under the folder css)
  • Configure all these skins in trinidad-skins.xml file. The file would be like below
<?xml version="1.0" encoding="windows-1252"?>
<skins xmlns="http://myfaces.apache.org/trinidad/skin">
  <skin>
    <id>skin.desktop</id>
    <family>abc</family>
    <extends>blafplus-medium.desktop</extends>
    <render-kit-id>org.apache.myfaces.trinidad.desktop</render-kit-id>
    <style-sheet-name>css/style.css</style-sheet-name>   
  </skin>
  <skin>
    <id>skin1.desktop</id>
    <family>xyz</family>
    <extends>blafplus-medium.desktop</extends>
    <render-kit-id>org.apache.myfaces.trinidad.desktop</render-kit-id>
    <style-sheet-name>css/style1.css</style-sheet-name>
  </skin>
  <skin>
    <id>test.desktop</id>
    <family>test</family>
    <extends>blafplus-medium.desktop</extends>
    <render-kit-id>org.apache.myfaces.trinidad.desktop</render-kit-id>
    <style-sheet-name>css/test.css</style-sheet-name>   
  </skin>
</skins>

  • Make an entry in the trinidad-config.xml file as below with a variable to replace skin family name. Here “currentSkin” is a String variable configured in adfc-config.xml under session scope. In this example, skin-family is provided a default value “test”. If no value is passed to the variable “currentSkin” then the page will be loaded by the skin “test”.
<?xml version="1.0" encoding="windows-1252"?>
<trinidad-config xmlns="http://myfaces.apache.org/trinidad/config">
  <skin-family>#{sessionScope.currentSkin!=null?sessionScope.currentSkin : "test"}</skin-family>
  <skin-version>default</skin-version>
</trinidad-config>

  • And write a method in a manage bean and define with below java code. In this example, the new skin value is taken from a value change listener.
public void valueChangeListener(ValueChangeEvent valueChangeEvent) {
/*Code to change the skin value in session variable*/
       String currentSkin=valueChangeEvent.getNewValue().toString();
        FacesContext context = FacesContext.getCurrentInstance();
        Map sessionMap = context.getExternalContext().getSessionMap();
        sessionMap.put("currentSkin", currentSkin);
/*Code to refresh the page with new affects*/      
                String currentView = context.getViewRoot().getViewId();
                ViewHandler vh = context.getApplication().getViewHandler();
                UIViewRoot viewRoot = vh.createView(context,currentView);
                context.setViewRoot(viewRoot);
}