One fairly common remark on ADF Faces applications is their Look and Feel. The default look and feel is the Oracle BLAF, and either you love it or you hate it or so it seems. I get people hardly looking at the functionality of the application, the wild richness of the UI widgets and the flashy Ajax style partial page refresh but immediately starting to complain about those vague greenish/brownish/blueish/Oracle-ish colors. Another frequently heard comment is that a BLAF interface has so little useful real estate, as the BLAF components take up so much space. A typical Oracle BLAF User Interface would be something like the following:
Oracle has some excellent articles on the internet that describe how you can define your own custom look and feel through the use of Skins. So if you do not like Oracle BLAF – skins are your solution. Custom skins take the Simple look and feel as starting point, that custom skins extend from or override.
However, creating a custom Skin can be a quite elaborate task. The Oracle BLAF has quite a number of cool features – such as dynamic button generation, a well thought out set of icons in tree, tree-table and other complex components, etc. – that can be quite cumbersome to recreate in a custom skin . Besides, not all ADF Faces components can be customized using a custom Skin, for example the Tree component’s icons can not be set.
If all you want to customize in the ADF Faces look and feel are Fonts and Colors and you would like to benefit from all other Oracle BLAF features, you do not need to take the long road of creating a custom skin. This article demonstrates how you can easily achieve an Oracle BLAF based UI with your own color-scheme and font selection. With minimal effort, we turned the above application into this one:
The Oracle BLAF – or any other Skin such as Minimal or Simple or any Skin you create yourself – is configured in the WEB-INF\adf-faces-config.xml file:
<?xml version="1.0" encoding="windows-1252"?>
<adf-faces-config xmlns="http://xmlns.oracle.com/adf/view/faces/config">
<skin-family>oracle</skin-family>
</adf-faces-config>
If we want to change the Skin, this is where to do it. However, we want to modify the Oracle skin itself but still use it as a starting point, so the setting shown above should not be changed. It turns out that ADF Faces has separate render classes for the three major skins – Minimal, Simple and Oracle. To benefit from for example the icons in the tree-component, we have no choice but to leverage the Oracle skin as only the render-classes associated with the that skin render these icons. I was surprised to find out how large distinction between the three skins is in terms of code. I naively had expected each Skin to basically consist of a set of configurations, icons and a stylesheet. But apparently there are many specific classes tied in with each specific core Skin. Note that any custom skin builds from Simple and therefore automatically leverages the "code fork" for Simple.
The Oracle skin can be configured to a certain extent from the file oracle-desktop.xss. This file can be found in the jar adf-faces-impl.jar.
The first step to customizing the Oracle skin is extracting oracle-desktop.xss from the jar-file. Save this file in a directory called WEB-INF\lib\META-INF\adf\styles, like this:
Now when you run your ADF Faces application, it will use this file to dynamically generate a CSS, at runtime. In this file, we can specify colors and fonts, thereby influencing the Oracle BLAF. Here is a fragment from the oracle-desktop.xss that we customized in order to give our application an AMIS look and feel:
Note: when you rerun the application, you should Clear the Browser Cache, as it is likely to retain the old CSS file based on the original Oracle BLAF configuration!
<?xml version="1.0"?>
<!--
The oracle-desktop.xss style sheet defines the styles that are
specific to the desktop implementation of the Oracle Browser
Skin. The styles defined here are automatically layered
on top of the styles defined by simple-desktop.xss. As such, this
style sheet should only contain new BLAF-specific styles that are not
defined by base-desktop.xss, or BLAF-specific overrides of styles
that are defined by base-desktop.xss.
-->
<styleSheetDocument xmlns="http://xmlns.oracle.com/uix/style"
version="2.0">
<!-- The base style sheet for the Browser Look And Feel -->
<styleSheet>
<!--
Global Color Styles: oracle-desktop inherits most of the named
color styles from base-desktop, but needs to override some of
the styles to change the color ramps from green/grey to blue/tan.
-->
<!-- Change core color ramp to red -->
<style name="AFDarkBackground">
<property name="background-color">#aa273d</property>
</style>
<!-- Change the accent color ramp to yellow -->
<style name="AFDarkAccentBackground">
<property name="background-color">#ffcc00</property>
</style>
<!-- Change the extra accent color ramp to black -->
<style name="AFDarkExtraAccentBackground">
<property name="background-color">#000000</property>
</style>
<style name="AFMediumAccentBackground">
<includeStyle name="AFDarkAccentBackground"/>
<property name="background-color">#fedb4d</property>
</style>
<!-- Change the light accent offset. base-desktop uses
"+#1D1C1C", we want "+#251f37". (2b2b4e was when the
darkAccent was cccc99.) The absolute color we want is f7f7e7-->
<style name="AFLightAccentBackground">
<includeStyle name="AFDarkAccentBackground"/>
<property name="background-color">#feea9b</property>
</style>
....
Hello
How can I edit this file to change the icon of component?
url(/skins/mycompany/skin_images/panelBoxTopBackgroundLight.png)
1px
15px
for example the above code did not work
Tried what the article says, without luck.
WORKING ALTERNATIVE SOLUTION FOUND: I returned the modified xss files in to the JAR (using winrar or winzip), restarted OC4J and it worked!
We have searched so long for exactly this. Finally i got. I tried this. But there is no change while executing the things.
I will listout what i have done.
1)I extract the adf-faces-impl.jar
2)i created a folder structre as you have mentiond (WEB-INF\lib\META-INF\adf\styles) and pasted the xss file here.
3) i made changes in xss file(oracle-desktop.xss)
4)I cleared the cache.
5)I excecuted the page.
But there is no change. Please help me out regardsing this.
Thanks & Regards,
Arun
Hmmm, just one follow-up issue … We occasionally get the Oracle BLAF images making a comeback, i.e finding their way into the browser cache to spoil the look of our customised version. I guess because the image file names are not changed, different customisations can’t coexist cleanly in the same browser instance with the original BLAF or with each other. The first version of an image that gets into the browser cache will dictate the look of that image until such time as the user clears the browser cache. Do you perhaps have a Cunning Plan to get around this? E.g. force bypassing of the cache, or somehow rename the image files, etc?
Lucas, you are THE MAN! We have searched so long for exactly this. I should have known to look at AMIS after the excellent Ajax tutorial. Thank you.
How is 4. above done? Is this same process also doable for the embedded oc4j? I am not getting any results from this exercise. 4. is not suggesting we change the adf-faces-impl.jar file, is it?
What I actually meant is I dont want to change the existing oracle.desktop file. So can i make the changes in a new file and use that instead of oracle.desktop.
Hi,can u tell me if i can make a new new-desktop.xss file and make the changes in that.If I can do that please tel me what to change in the config file.Should i set hte skin-family name to new instead of oracle?
Hi Lucas,
Interesting trick here. I’m having difficulty to set let’s say af:column, NoWrap and HeaderNoWrap property to true.
Anyone know how to do it?
2nd, How to have extra space (padding) on each column on left and right. Thus the table looks nice.
I couldn’t find extensive documentation on all these attributes.
Regards
Eric
Hi, I found a solution, I hope it’s not the best, in the jsp in #MyColor &
#0D3F96 in . Then, :), I modified adf-faces-impl-ea17\oracle\adfinternal\view\faces\ui\laf\oracle\desktop\cImages\cctts.gif with a paint-like to replace the transparent zone with #MyColor.
Then re-make the .jar, delete the (tomcat cache -> …/work), give a kick in the cat and you have a panel box with the good color. I realy hope there’s an other solution…
Hi, I have the same problem with englyn to define a color for the rounded top-left corner panelBox different from the AFDarkAccentBackground, if someone as the solution please email me.
Thanks.
There is a responsibility provided by Oracle ‘Custom Look and Feel’ using which we can change the appearance .i.e. define the custom fonts and colours etc. These changes are sotred in .xss files in the server.
Is this same as ‘skins’ or skins is a different technology?
Mardy
What exactly do you mean with Custom LAF responsibility? It is term I have not heard before. Lucas
Hi,
We are customisating the look n feel for oracle web module. Which methdod is the better and latest do achieve this? We can achieve this using ‘skins’ or we can also achieve using ‘Custom LAF’ responsibility provided by ORacle. Pls suggest
– mardy
Adrian, you’ll need to copy the styles you want from base-desktop.xss into oracle-desktop.xss and modify them there.
Santiago, you’ll want to do the same as Adrian, copying AFTableCellDataBackgroundColor and AFTableCellDataBandedBackgroundColor.
I have had some serious problems with this approach. It seems like some ADF components in the oracle skin don’t use the colours as you’d expect. Here are the ones I’ve found:
– panelBox has an image for the rounded top-left corner that seems to be generated from AFDarkAccentBackground plus #251f37 instead of from the background you specify for the panelBox. This is fine with the Oracle colours as it’s the same thing by default, but causes very undesirable results if you want to change the offset for AFLightAccentBackground.
– ‘messages’ panel seems to ignore the background set on its body completely and just use AFDarkAccentBackground.
This works great but I also want to override base-desktop.xss as well do that I can override base styles like AFFieldText
when I modify it there I see no change. Any suggestions ? what am I doing wrong?
Great Tips. Thank you all.
But does anyone knows, which colors are to change for the table-background in the banding rows of the table.
Does comment number 4 help perhaps?
I just implemented the changes that was posted here and i cannot see the change that i made to the xss file. I cleared the cache. What do i have to do to see the changes
No, I do not believe this will work for JSP files. It will work for JSP(X) with JSF components, but not for JSP plain.
Hi,
I am using jsp not uix. Will this work with jsp? I have this confusion because I saw a line in oracle-desktop.css. Here is the line.
And while using this do I have to use the ‘Styleclass’ field in my jsp to specify the class that I use or it will be automaticallty done?
Please let me know.
Thanks,
Haripriya.S
hi!
i resolve the problem make a deploy replace the oracle-desktop.xss inside the jar.
thanks(for everything).
hi!
i deploy my app in tomcat and the skin not charge.
the xss in the tomcat is in
—-> webapps\myapp\WEB-INF\lib\META-INF\adf\styles\oracle-desktop.xss.
it´s ok???
thanks
Yes you can. Please study the oracle-desktop.xss and base-desktop.xss to find the proper styles to override. Alternatively, look in the On Line Help for JDeveloper at “Selectors for Skinning ADF Faces Components” . You will find af:panel… selectors and af:table selectors that should help you get what you want.
is possible change de color of the tables or the panelbox.
I dont know
thanks