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
and on click of the button
Sample ADF Application (JDeveloper 12.1.3) – Download
Cheers 🙂 Happy Learning