Technical Articles relating to Oracle Development Tools and Frameworks
-
ADF
July 25, 2014
Per-Component Instance Skinning
A question that comes up from time to time happened to be raised twice three times this week, so I though it would be good to write the answer down. The question is this; How can I override the visual properties of a single instance of a component?
Now in many cases you can simply use inlineStyle or, (better) assign a styleClass to the component instance and associate a CSS file with the page using <af:resource>. This will work in the simple case where, for example, it's a basic component such as an <af:spacer> or <af:panelGroupLayout layout="vertical">. However, in the case of a more complex component you may not get the fidelity through inlineStyle, styleClass or even contentStyle.
In these cases you will need to extend the skin to create a instance selector for the component type. This will allow you to change any skinning slector, but rather than doing so for every instance of the component, you will end up with a sub-type that can be applied to just those instances that require it.
All you have to do here is to extend the skin as per normal (just create a new skin in 12.1.3 and all the metadata will be set up for you in the trinidad-skins.xml file). In the skin you define a custom style class and then append the selector that you want to change. So for example, here's a custom version of one of the commandMenuItem selectors that sets a specific background:
.saveMenu af|commandMenuItem::menu-item-icon-style {
background-image:url("images/save.png");
background-repeat:no-repeat;
} And that's then applied to the menu item in question:
<af:commandmenuitem text="save" styleclass="saveMenu">
That's it, pretty simple but can be useful
For those who want a video demoing this technique - https://blogs.oracle.com/shay/entry/styling_specific_adf_components_with