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