Customizing BLAF for ADF Faces – easier than Skins for influencing colors and fonts

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:

Customizing BLAF for ADF Faces - easier than Skins for influencing colors and fonts blafCustom3 

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:

Customizing BLAF for ADF Faces - easier than Skins for influencing colors and fonts blafCustom2 

....
 

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:

Customizing BLAF for ADF Faces - easier than Skins for influencing colors and fonts blafCustom1

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:

Customizing BLAF for ADF Faces - easier than Skins for influencing colors and fonts blafCustom4 

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>
....

26 Comments

  1. ruba September 9, 2009
  2. Manolis Nikiforakis July 18, 2008
  3. Arun May 15, 2008
  4. microraptor March 11, 2008
  5. microraptor March 4, 2008
  6. Michael A. Fons February 7, 2008
  7. new2adf September 27, 2007
  8. new2adf September 27, 2007
  9. Eric September 22, 2007
  10. Warzak August 28, 2007
  11. Warzak August 27, 2007
  12. Mardy July 12, 2007
  13. Lucas Jellema July 12, 2007
  14. Mardy July 12, 2007
  15. englyn February 16, 2007
  16. englyn February 16, 2007
  17. Adrian January 23, 2007
  18. Santiago January 18, 2007
  19. site admin December 29, 2006
  20. loveadf December 29, 2006
  21. Lucas Jellema December 19, 2006
  22. Haripriya December 18, 2006
  23. fethiscode December 14, 2006
  24. fethiscode December 13, 2006
  25. Lucas Jellema December 12, 2006
  26. fethiscode December 11, 2006