Requirement: Let assume we have got two ADF Skins: greenSkin.css and redSkin.css. Now, I have a demo.jspx page. On the demo.jspx page I have a button with the name as “Swap ADF Skin” and an inputText components.

Initially, the background-color of the button and the label will be Green. Now, when User clicks on the “Swap ADF Skin” button, the color of the background-color of the button and the label will change to Red.

Thus, the default look and feel of the demo.jspx page when the page loads initially is shown below:

Now, click on the “Swap ADF Skin” button, and will that the ADF skin will get swapped, and the appearance of the demo.jspx page will be as shown below:

Solution: For solution of the above requirement follow the steps as shown below

Step 1: Create an Oracle ADF Fusion Web Application.

Step 2: Create a demo.jspx page. Drag and drop a button and an inputText on the demo.jspx page.

Create an actionListener for the button. Please note, the managed bean that we will create will be of sessionScope.

Thus, the complete code for the demo.jspx is shown below:

<?xml version='1.0' encoding='UTF-8'?>
<jsp:root xmlns:jsp="" version="2.1" xmlns:f=""
          xmlns:af="">
    <jsp:directive.page contentType="text/html;charset=UTF-8"/>
    <f:view>
        <af:document title="demo.jspx" id="d1">
            <af:form id="f1">
                <af:panelGroupLayout id="pgl1" layout="vertical">
                    <af:inputText label="Label" id="it1"/>
                    <af:spacer width="10" height="10" id="s1"/>
                    <af:button text="Swap ADF Skin" id="b1" actionListener="#{MyBean.switchADFSkin}"/>
                </af:panelGroupLayout>
            </af:form>
        </af:document>
    </f:view>
</jsp:root>

And the complete code for the MyBean.java is shown below:

package com.susanto;

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

public class MyBean {

    //Setting default skin value
    private String skinName = "greenSkin";

    public MyBean() {
    }

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

    public String getSkinName() {
        return skinName;
    }

    //Method to swicth the Skin
    public void switchADFSkin(ActionEvent actionEvent) {
        if (skinName.equalsIgnoreCase("greenSkin")) {
            this.setSkinName("redSkin");
        } else {
            this.setSkinName("greenSkin");
        }
        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);
    }
}

Step 3: Let me create two ADFSkin files with the name as greenSkin.css, and redSkin.css.

Thus, the code in the greenSkin.css file is as below:

@charset "UTF-8";

/**ADFFaces_Skin_File / DO NOT REMOVE**/
@namespace af "";
@namespace dvt "";

af|button {
    background-color: Green;
    color: White;
    width: 150px;
    text-align: center;
    background-image: none !important;
    border: Green 2.0px solid;
}

af|inputText {
    font-size: x-large;
    font-weight: bold;
    background-color: Green; 
    
}

af|inputText::label {
    color: White; 
}

And, the code in the redSkin.css file is as below:

@charset "UTF-8";

/**ADFFaces_Skin_File / DO NOT REMOVE**/
@namespace af "";
@namespace dvt "";

af|button {
    background-color: red;
    color: White;
    width: 150px;
    text-align: center;
    background-image: none !important;
    border: Red 2.0px solid;
}

af|inputText {
    font-size: x-large;
    font-weight: bold;
    background-color: Red;
}

af|inputText::label {
    color: White;
}

Just for reference, the folder structure of the Application is shown below:

Step 4: Change the skin-family value to #{MyBean.skinName} in the trinidad-config.xml. Thus, the complete code for the trinidad-config.xml file is shown below:

<?xml version="1.0" encoding="windows-1252"?>
<trinidad-config xmlns="">
    <skin-family>#{MyBean.skinName}</skin-family>
</trinidad-config>

Save all and run the application. Thus, the ran application is shown below:

Now, click on the “Swap ADF Skin” button, and will that the ADF skin will get swapped, and the appearance of the demo.jspx page will be as shown below:

Hence, the solution to our requirement.

If you like the post please comment, share, and do join me on Facebook. Please subscribe to my YouTube Channel for video tutorials.

Thanks & Regards,
Susanto Paul

 7,224 total views,  13 views today