Switching ADF Skin at run time using trinidad-config.xml

Sharing is Caring

This post talks about switching ADF skin at runtime and uses a managed bean variable to change skin name at runtime. Sometimes we want to use multiple themes for our application and in that case, we need this.

Created an ADF application, 2 different skins and a page in view controller project

Learn more about creating ADF skin in JDeveloper 

This page has a button to switch between skins and an outputText. Create a variable in the managed bean to hold skin name and button action listener to change skin variable value.

Here goes the managed bean code

package switchadfskin.view.bean;

import javax.faces.application.ViewHandler;
import javax.faces.component.UIViewRoot;
import javax.faces.context.FacesContext;
import javax.faces.event.ActionEvent;

public class SwitchADFSkinBean {
    public SwitchADFSkinBean() {
    }

    //Set default skin name
    private String skinName = "RedButton";

    public void setSkinName(String skinName) {
        this.skinName = skinName;
    }

    public String getSkinName() {
        return skinName;
    }

    /**Method to change skin at runtime
     * @param actionEvent
     */
    public void switchSkinAction(ActionEvent actionEvent) {
        //Change skin name
        if (skinName.equalsIgnoreCase("RedButton")) {
            this.setSkinName("GreenButton");
        } else {
            this.setSkinName("RedButton");
        }
        //Reload page
        refreshPage();
    }

    /**Method to refresh/reload page
     */
    protected void refreshPage() {
        FacesContext fctx = FacesContext.getCurrentInstance();
        String page = fctx.getViewRoot().getViewId();
        ViewHandler ViewH = fctx.getApplication().getViewHandler();
        UIViewRoot UIV = ViewH.createView(fctx, page);
        UIV.setViewId(page);
        fctx.setViewRoot(UIV);

    }
}

The next step is to change trinidad-config.xml file, set skin-family variable to refer its value from managed bean so that when the user changes bean variable then skin (CSS) is updated in the application.

<?xml version="1.0" encoding="windows-1252"?>
<trinidad-config xmlns="http://myfaces.apache.org/trinidad/config">
  <skin-family>#{SwitchADFSkinBean.skinName}</skin-family>
</trinidad-config>

Now run and check application

The default skin is “RedButton” so it looks like this

Switching ADF Skin at runtime

and on click of the button

Green ADF Button Skinning

Sample ADF Application (JDeveloper 12.1.3) – Download

Cheers 🙂 Happy Learning

Related Posts

An Oracle ACE, Blogger, Reviewer, Technical Lead working on Oracle ADF

Leave a Reply

Your email address will not be published. Required fields are marked *