Showing posts with label Skinning. Show all posts
Showing posts with label Skinning. Show all posts

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);
}

April 19, 2013

Adding Custom Skins to the application



If you want to add your own style files (CSS files) to a ADF application, please follow the below steps.

  • Create css file under the webcontent folder (css can put under subfolder also)
  • Create a trinidad-skins.xml under WEB-INF folder and create the content like below
<?xml version="1.0" encoding="windows-1252"?>
<skins xmlns="http://myfaces.apache.org/trinidad/skin">
  <skin>
    <id>skin1.desktop</id>
    <family>skin1</family>
    <extends>blafplus-medium.desktop</extends>
    <render-kit-id>org.apache.myfaces.trinidad.desktop</render-kit-id>
    <style-sheet-name>skins/style.css</style-sheet-name>
    <bundle-name>resources.skinBundle</bundle-name>
  </skin>
</skins>

  • Open trinidad-config.xml file under WEB-INF folder and replace the value of the tag <skin-family> with the value of <family> tag in trinidad-skins.xml
Now you can use your CSS file in the application.