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

Configure ADF Skin in Jdeveloper 11.1.1.7

In Jdeveloper 11.1.1.7 there is no option to create ADF Skin declaratively
In order to apply skin we have to create a simple CSS file and then configure application to use this CSS file as skin. Jdeveloper doesn't do this for us :( we have to do it manually

So first step is to enable Skin Selectors for ADF Faces, Without enabling this CSS editor doesn't show ADF Faces component tags
CSS files by default supports HTML tags  only

Go to Tools > Preferences > CSS Editor and set CSS level to level 3 and check the box to support ADF Faces Components

ADF Basics: Using CSS to change appearance of application (Skins and Styles in ADF Faces)

Hello All
This is a basic post about using CSS in ADF applications, how can you change appearance of ADF application using Skins (.css file)
See the steps to create and apply css in your ADF applications

• Create a Fusion Web Application and create a page
• Add Some ADF Faces component (input text,button,panel box, panel collection etc)
• Now to change appearance of default ADF Faces components , create an ADF Skin
•  Right click on ViewController--->New--->Web Tier--->JSF/Facelets--->ADF Skin 





• By default ADF Skin name is like skin1,2 etc




• After creating ADF Faces skin open it and, on left you will see all components as Button, Layouts, Output text and so on. this is ADF Skin Editor





• Now expand the components that you want to change , change it's color(on active, focus , hover etc) and other properties. See in image below





• After creating your ADF Skin ,open trinidad-config.xml file in Jdeveloper editor and your will see like this



<skin-family>skin1</skin-family>

This means that skin1 is applied on Application

• now if you another ADF Skin file- skin2 then in trinidad-config.xml, it will be changed to



<skin-family>skin2</skin-family>



• ADF automatically choose the most recent skin, so here this is done , now create and configure your ADF Skin and customize appearance of application
• For more details see Oracle Docs- http://docs.oracle.com/cd/E16764_01/web.1111/b31973/af_skin.htm

Cheers :-) Happy Learning