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

 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

1. package switchadfskin.view.bean;
3. import javax.faces.application.ViewHandler;
4. import javax.faces.component.UIViewRoot;
5. import javax.faces.context.FacesContext;
6. import javax.faces.event.ActionEvent;
8. public class SwitchADFSkinBean {
9. public SwitchADFSkinBean() {
10. }
12. //Set default skin name
13. private String skinName = "RedButton";
15. public void setSkinName(String skinName) {
16. this.skinName = skinName;
17. }
19. public String getSkinName() {
20. return skinName;
21. }
23. /**Method to change skin at runtime
24. * @param actionEvent
25. */
26. public void switchSkinAction(ActionEvent actionEvent) {
27. //Change skin name
28. if (skinName.equalsIgnoreCase("RedButton")) {
29. this.setSkinName("GreenButton");
30. } else {
31. this.setSkinName("RedButton");
32. }
33. //Reload page
34. refreshPage();
35. }
37. /**Method to refresh/reload page
38. */
39. protected void refreshPage() {
40. FacesContext fctx = FacesContext.getCurrentInstance();
41. String page = fctx.getViewRoot().getViewId();
42. ViewHandler ViewH = fctx.getApplication().getViewHandler();
43. UIViewRoot UIV = ViewH.createView(fctx, page);
44. UIV.setViewId(page);
45. fctx.setViewRoot(UIV);
47. }
48. }

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.

1. <?xml version="1.0" encoding="windows-1252"?>
2. <trinidad-config xmlns="http://myfaces.apache.org/trinidad/config">
3. <skin-family>#{SwitchADFSkinBean.skinName}</skin-family>
4. </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