ADF Skinning

Using JDeveloper we can change every ADF Rich faces component's look and feel with CSS.

(1)Creating a New ADF Skin and Changing the Skin Configuration 

 

(a) In the Application Navigator, Right-click the ViewController project and select New from the context menu. In the New Gallery, expand the Web Tier node, select JSF/Facelets and in the right hand pane, select ADF Skin as the item. 

 

 

(b)In the Create ADF Skin File dialog, change the file name to mySkinCustom.css. Append \mySkinCustom to the existing skins directory path. Check the Use as the default skin family for this project checkbox and in the Extends field choose to extend the fusionFx-simple-v2.desktop skin from the list of values. 

 

 

(c)The new skin file appears in the Application Navigator under the Web Content | skins | mySkinCustom nodes. It also updates trinidad-skins.xml and trinidad-config.xml with the newly created skin. 

 

 

(d)mySkinCustom.css opens by default in the design editor with a selector tree of components that you can navigate to.

 

 

(e)Go to property Inspector panel and make the required changes to the properties like background color, margin, text properties etc.

 

NOTE: Whenever we create a new skin , first start by changing the Global Selector Aliases. A global selector alias defines style properties in one location in the ADF skin that you can apply to multiple ADF Faces and ADF Data Visualization components. We can also create new aliases (just like .AFStretchWidth) and later apply it to Components.

 

 

(2)Dynamically changing skins at Runtime:

The trinidad-skins.xml file is a registry file of all custom skins available to an application The source shows that your skin file, mySkinCustom.css has been added to other existing skins automatically when you create the CSS. These skins are registered skins and available for use by your project.

 

 

Create a managed bean to handle the skin change at runtime.(Code given at the end of blog.)

Modify trinidad-config.xml so that we can change the skins at runtime.

You set the CHECK_FILE_MODIFICATION and DISABLE_CONTENT_COMPRESSION context initialization parameters to true in the web.xml file of your application. (Recommended only for Development phase, Unset it during production phase)

1. <context-param>
2. <param-name>org.apache.myfaces.trinidad.CHECK_FILE_MODIFICATION</param-name>
3. <param-value>true</param-value>
4. </context-param>
5. <context-param>
6. <param-name>org.apache.myfaces.trinidad.DISABLE_CONTENT_COMPRESSION</param-name>
7. <param-value>true</param-value>
8. </context-param>

Changes that you make to a selector for an ADF Faces component (other than changes to icon and skin properties) render immediately when you refresh a Fusion web application's page that renders the ADF Faces component.

Add a menu on the page to select the skin at runtime. Change the Selected property of the Menu Item to #{YourBeanName.skinFamily} and provide an ActionListener to process the skin change.

After we run the page, we can see the changes on selecting different skins from the Menu we'd provided.

Bean class Code:

1. package sampleApp1.view;
2. import java.io.IOException;
3. import javax.faces.event.ActionEvent;
4. import java.util.Locale;
5. import javax.faces.application.ViewHandler;
6. import javax.faces.component.UIViewRoot;
7. import javax.faces.context.ExternalContext;
8. import javax.faces.context.FacesContext;
9. import javax.faces.event.ActionEvent;
10. import javax.faces.event.PhaseEvent;
11. import javax.faces.event.ValueChangeEvent;
12. import javax.servlet.http.HttpServletResponse;
13. import javax.servlet.http.HttpSession;
14. import oracle.adf.share.ADFContext;
15. import oracle.adf.view.rich.component.rich.nav.RichCommandMenuItem;
16. public class SampleSkinBean {
17. public SampleSkinBean() {
18. }
19. Locale preferredLocale;
20. private String skinFamily = _RICH_DEMO_SKIN;
21. static private final String _SKIN_TEST_DIRECTORY_INPUT = "/skinningKeys/input";
22. static private final String _SKIN_TEST_DIRECTORY_SELECT = "/skinningKeys/select";
23. static private final String _SKIN_TEST_DIRECTORY = "/skinningKeys";
24. static private final String _TEST_SKIN_INPUT_SELECT = "demoComponentsInputSelect";
25. static private final String _TEST_SKIN_INPUT_OTHER = "demoComponentsOther";
26. static private final String _RICH_DEMO_SKIN = "Default"; // 'Default' skin is loaded at start.
27. public String getSkinFamily()
28. {
29. // If we're in the skin component tests, return the skinComponentTest skin.
30. FacesContext context = FacesContext.getCurrentInstance();
31. UIViewRoot viewRoot = context.getViewRoot();
32. if ((viewRoot != null) &&
33. (viewRoot.getViewId().indexOf(_SKIN_TEST_DIRECTORY) >= 0))
34. {
35. String viewId = viewRoot.getViewId();
36. if (viewId != null && viewId.indexOf(_SKIN_TEST_DIRECTORY) >= 0)
37. {
38. if ((viewId.indexOf(_SKIN_TEST_DIRECTORY_INPUT) >=0) ||
39. (viewId.indexOf(_SKIN_TEST_DIRECTORY_SELECT) >=0))
40. return _TEST_SKIN_INPUT_SELECT;
41. else
42. return _TEST_SKIN_INPUT_OTHER;
43. }
44. }
45. return skinFamily;
46. }
47. public void change(String language) {
48. Locale newLocale = new Locale(language);
49. FacesContext fctx = FacesContext.getCurrentInstance();
50. fctx.getViewRoot().setLocale(newLocale);
51. ExternalContext ectx = FacesContext.getCurrentInstance().getExternalContext();
52. UIViewRoot uiViewRoot = FacesContext.getCurrentInstance().getViewRoot();
53. setPreferredLocale(uiViewRoot.getLocale());
54. }
55. public void changeLocale(ValueChangeEvent valueChangeEvent) throws NoSuchFieldException {
56. change(valueChangeEvent.getNewValue().toString());
57. }
58. public void setSkinFamily(String family)
59. {
60. skinFamily = family;
61. }
62. public void skinMenuAction(ActionEvent ae)
63. {
64. RichCommandMenuItem menuItem = (RichCommandMenuItem) ae.getComponent();
65. setSkinFamily(menuItem.getText());
66. reloadThePage();
67. }
68. public void afterload(PhaseEvent phaseEvent) {
69. System.out.println("User:"+ ADFContext.getCurrent().getSecurityContext().getUserPrincipal().getName() );
70. if (ADFContext.getCurrent().getSecurityContext().getUserPrincipal().getName().equals("super1")) {
71. setSkinFamily("Default");
72. }
73. }
74. public static void reloadThePage()
75. {
76. FacesContext fContext = FacesContext.getCurrentInstance();
77. String viewId = fContext.getViewRoot().getViewId();
78. String actionUrl = fContext.getApplication().getViewHandler().getActionURL(fContext, viewId);
79. try
80. {
81. ExternalContext eContext = fContext.getExternalContext();
82. String resourceUrl = actionUrl; //eContext.encodeResourceURL(actionUrl);
83. // Use the action URL directly since the encoding a resource URL will NPE in isEmailablePage()
84. eContext.redirect(resourceUrl);
85. }
86. catch (IOException ioe)
87. {
88. System.err.println("Problem trying to reload the page:");
89. ioe.printStackTrace();
90. }
91. }
92. public void refreshpage(ActionEvent actionEvent) {
93. FacesContext fc = FacesContext.getCurrentInstance();
94. String refreshpage = fc.getViewRoot().getViewId();
95. ViewHandler ViewH =
96. fc.getApplication().getViewHandler();
97. UIViewRoot UIV = ViewH.createView(fc,refreshpage);
98. UIV.setViewId(refreshpage);
99. fc.setViewRoot(UIV);
100. }
101. public void setPreferredLocale(Locale preferredLocale) {
102. this.preferredLocale = preferredLocale;
103. }
104. public Locale getPreferredLocale() {
105. return preferredLocale;
106. }
107. }