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 the trinidad-config.xml file, set skin-family variable to refer to its value from managed bean so that when the user changes the 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