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

Skinning ADF Dialog box inside popup component

 In this post, we'll see how to change the look n feel of popup component by skinning the ADF dialog box using CSS code in ADF Application. Skinning plays important role in designing a better user interface, You can read more about ADF Skinning here.

Default ADF dialog component inside popup looks like this

And here I'll show you how to customize the look of dialog box using ADF Skin (CSS Code), I hope you all know about creating ADF Skin file. After creating the Skin file put the CSS script mentioned below in that file.

See ADF Skin code used to customize ADF dialog box.

/**Change background color and border color of dialog**/
af|dialog {
    background-color: White;
    border-color: #4267b2;
}

/**Change dialog header style**/
af|dialog::header, af|dialog::header-end, af|dialog::header-start, af|dialog::title {
    color: #FFFFFF;
    text-align: center;
    background-color: #45619d;
    background-image: none;
    font-family: Arial;
    padding: 3px;
}

/**Change dialog button styler**/
af|dialog af|button {
    background-color: #4267b2;
    text-align: center;
    vertical-align: middle;
    color: White;
    background-image: none;
    border: #4267b2 1.5px solid;
    width: 60px;
}

af|dialog af|button::link {
    background-color: #4267b2;
    text-align: center;
    vertical-align: middle;
    color: White;
    background-image: none;
    border: #4267b2 1.5px solid;
    font-family: Arial;
}

/**Set hover event properties for dialog button**/
af|dialog af|button:hover {
    background-color: red;
    text-align: center;
    vertical-align: middle;
    color: White;
    background-image: none;
    border: #528cff 1.5px solid;
    width: 60px;
}

af|dialog af|button::link:hover {
    background-color: #528cff;
    text-align: center;
    vertical-align: middle;
    color: White;
    background-image: none;
    border: #528cff 1.5px solid;
    font-family: Arial;
}

/**Change default close icon of dialog**/
af|dialog::close-icon-style {
    background: none;
    background-image: url("../../lblue_cross_16.png");
    height: 17px;
}

af|dialog::close-icon-style:hover {
    background: none;
    background-image: url("../../red_cross_16.png");
    height: 17px;
}

And after skinning, ADF dialog box looks like this

Cheers :) Happy Learning

Change Style of ADF TreeTable, Column, Data Cell, Selected Row using ADF Skin

Hello Everyone

In this tutorial, We'll learn to change look n feel of ADF tree table component using Oracle ADF Skin
Here I am using Departments and Employees table HR Schema to prepare the model and created tree Table using view link between Departments and Employees View Object

Increase Icon size of af:panelSpringBoard using ADF Skin

ADF Faces af:panelSpringBoard component shows af:showDetailItem in a fancy view using icons as the notation of showDetailItem

From Oracle Docs

The panelSpringboard control can be used to display a group of contents that belongs to a showDetailItem. An icon strip with icons representing the showDetailItem children along with the item's contents are displayed when in strip mode, and a grid of icons with no contents shown is displayed in grid mode. When the user selects an icon while the panelSpringboard is in strip mode, the panelSpringboard discloses the associated showDetailItem. When the user selects an icon while the panelSpringboard is in grid mode, this automatically causes the panelSpringboard to display in strip mode. Typically you would put one or more showDetailItem components inside of the panelSpringboard but you may also alternatively place a facetRef, group, iterator, or switcher inside of the panelSpringboard as long as these wrappers provide showDetailItem components as a result of their execution

I have added a panel springboard on the page and by default, it looks like this

Resize FacesMessage, Change look n feel of Message Box using ADF Skin

We all must have used FacesMessage somewhere in ADF application, FacesMessage is used to show any notification like error, warning or confirmation
Here you can read more about FacesMessage

Previously I have posted about changing default icon of FacesMessage using ADF Skin now this post is about resizing FacesMessage dialog and changing it's look and feel

Styling Input components inside af:query using ADF Skin

This another post is about af:query skinning, previously I have posted about changing the style of af:query buttons

ADF Skinning : Change color and style of af:query buttons in ADF Faces (Jdev 12.1.3)

Now this post is about styling input components inside af:query, Sometimes we need to change color, width, fonts of inputText, selectOneChoice that are inside af:query and that time simple skin selector doesn't do the job

ADF Skinning: Change Style of ADF Table, Column, Header, Data Cell and pagination bar

After a long vacation I'm back to work :)
This post is about changing look n feel of ADF Faces af:table component

I have seen many questions related to changing table column header style , selected row style, changing row banding styles etc

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 Skinning : Change label, content, design and 'Update' button style of af:inputFile

This post is about skinning af:inputFile, see how default inputFile looks on page

See how ADF Skin changes it's appearance :)
Change basic inline style of af:inputFile (background color and design) :

/**Skin Selector to change inline style of af:inputFile**/

af|inputFile {
    background-color: Green;
    border-radius: 20px 20px 20px 20px;
    padding: 5px;
}

Output on page-

Change label style of af:inputFile :

/**Skin Selector to change label style of af:inputFile**/
af|inputFile::label {
  font-weight:bold;
  color:white;
  font-family: cursive;
}

Output on page-

Change content style of af:inputFile (background color, design of content only) :

/**Skin Selector to change content style of af:inputFile**/
af|inputFile::content {
    color: #ff6363;
    font-weight: bold;
    border-color: #79bc79;
    border-style: solid;
    border-width: thin;
    border-radius: 15px 15px 15px 15px;
    padding: 5px;
    background-color: #d6ffd6;
    font-family: cursive;
}

Output on page-

After selecting a file, update button appears -

On click of update button a popup with af:inputFile appears-

Change update button style of af:inputFile:

/**Skin Selector to change style of update button of af:inputFile**/
af|inputFile af|commandButton {
    color: white;
    font-weight: bold;
    background: #00b55a;
    border-radius: 15px 15px 15px 15px;
    font-family: cursive;
}

/**Skin Selector to change style of update button of af:inputFile in case of hover**/
af|inputFile af|commandButton:hover {
    color: white;
    font-weight: bold;
    background: #940000;
    border-radius: 15px 15px 15px 15px;
    font-family: cursive;
}

Output on page-

On hover-

Cheers :) Happy Learning
o

ADF Basics: Using contentStyle and inlineStyle property to change basic styling of component in ADF Faces

Hello All,
Again a post about ADF Basics for beginners
I have seen lots of thread on OTN about changing basic styles of component . for example,

How to change font size of inputText ?
How to change color of inputText/outputText ?
How to change color of link or button ?

and everyone starts creating a css/skin for these minor changes but there is no need of that
Skin should be used for complex styles or you have apply same style to all components of your application

If you will read API docs then you will know this, See what docs says about inlineStyle property-

The CSS styles to use for this component. This is intended for basic style changes; you should use the skinning mechanism if you require any complex style changes. The inlineStyle is a set of CSS styles that are applied to the root DOM element of the component. Be aware that because of browser CSS precedence rules, CSS rendered on a DOM element takes precedence over external stylesheets like the skin file. Therefore skins will not be able to override what you set on this attribute.

Difference between contentStyle and inlineStyle -

contentStyle property used to style content part of component like if you want to change color of inputText or any other input component then you have to specify this in contentStyle property of that component

inlineStyle is about whole component and also available in output (outputText) or collection (table, tree etc) component's property where contentStyle is not there. This can be use to set width, height ,border or color of output components etc.

So this is enough about theory , no one likes theory ;) , Everyone is looking for some code that is ready to use
Let's see some practical usage of both properties -

Change font, color, size(width), padding of input components (af:inputText, af:inputDate, af:selectOneChoice etc)-

Used this in contentStyle property of components
width:150px;color:white;font-weight:bold;font-size:small;background-color:red;padding:5px;
and check the output

you can also change input text to uppercase , lowercase, Initcap using contentStyle property, just use any of this -
text-transform:uppercase; // To change in uppercase
text-transform:lowercase; //To change in lowercase
text-transform:capitalize; //To change in initcap

Change properties of output components , color of link/button -

Output components doesn't have contentStyle property as there is not content part in component , here we make use of inlineStyle property
See what happens on applying same style in outputText and link using inlineStyle

It looks good :) , but same style doesn't work for button because button has multiple root element (we can only change width, color of text and font of button but background color and other styling can not be changed using inlineStyle property)
For more detail about button skinning check - Customize af:button (font, shape, size, color etc) using skinning -Oracle ADF (12.1.3)

Change data collection components (af:table, af:treeTable,etc) height, width -

just write in inlineStyle property like this
width:600px;height:200px;background-color:lightyellow;color:red;
background color will be applied on empty area of table and color will be applicable on column header and EmptyText
Remember to set table's height using inlineStyle ensure that autoHeightRows should be set to -1

In same way we can change color of columns too, see i have used different background colors (set background-color:colorName; in inlineStyle of af:column) for columns and it looks like this

Now it's your turn , try more combination on different components. you can do a lot using contentStyle and inlineStyle property. Remember all these changes can be done using skin also but if have some minor changes then why use skin , when framework provides these wonderful properties

Cheers :) Happy Learning