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:

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:

&lt;?xml version=&quot;1.0&quot; encoding=&quot;windows-1252&quot;?&gt;<br />&lt;adf-faces-config xmlns=&quot;http://xmlns.oracle.com/adf/view/faces/config&quot;&gt;<br />  &lt;skin-family&gt;oracle&lt;/skin-family&gt;<br />&lt;/adf-faces-config&gt; <br />

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!

    <p>&lt;?xml version=&quot;1.0&quot;?&gt;<br /><br />&lt;!-- <br />  The oracle-desktop.xss style sheet defines the styles that are <br />  specific to the desktop implementation of the Oracle Browser<br />  Skin.  The styles defined here are automatically layered<br />  on top of the styles defined by simple-desktop.xss.  As such, this<br />  style sheet should only contain new BLAF-specific styles that are not <br />  defined by base-desktop.xss, or BLAF-specific overrides of styles<br />  that are defined by base-desktop.xss.<br />--&gt;<br /><br />&lt;styleSheetDocument xmlns=&quot;http://xmlns.oracle.com/uix/style&quot;<br />                    version=&quot;2.0&quot;&gt;<br /><br />&lt;!-- The base style sheet for the Browser Look And Feel --&gt;<br />&lt;styleSheet&gt;<br /><br />  &lt;!-- <br />     Global Color Styles:  oracle-desktop inherits most of the named<br />     color styles from base-desktop, but needs to override some of<br />     the styles to change the color ramps from green/grey to blue/tan.<br />  --&gt;<br /><br />  &lt;!-- Change core color ramp to red --&gt;<br />  &lt;style name=&quot;AFDarkBackground&quot;&gt;<br />    &lt;property name=&quot;background-color&quot;&gt;#aa273d&lt;/property&gt;<br />  &lt;/style&gt;<br /><br />  &lt;!-- Change the accent color ramp to yellow --&gt;<br />  &lt;style name=&quot;AFDarkAccentBackground&quot;&gt;<br />    &lt;property name=&quot;background-color&quot;&gt;#ffcc00&lt;/property&gt;<br />  &lt;/style&gt;<br /><br />  &lt;!-- Change the extra accent color ramp to black --&gt;<br />  &lt;style name=&quot;AFDarkExtraAccentBackground&quot;&gt;<br />    &lt;property name=&quot;background-color&quot;&gt;#000000&lt;/property&gt;<br />  &lt;/style&gt;<br /><br />  &lt;style name=&quot;AFMediumAccentBackground&quot;&gt;<br />    &lt;includeStyle name=&quot;AFDarkAccentBackground&quot;/&gt;<br />    &lt;property name=&quot;background-color&quot;&gt;#fedb4d&lt;/property&gt;<br />  &lt;/style&gt;<br /><br />  &lt;!-- Change the light accent offset.  base-desktop uses<br />       &quot;+#1D1C1C&quot;, we want &quot;+#251f37&quot;. (2b2b4e was when the <br />       darkAccent was cccc99.) The absolute color we want is f7f7e7--&gt;<br />  &lt;style name=&quot;AFLightAccentBackground&quot;&gt;  <br />    &lt;includeStyle name=&quot;AFDarkAccentBackground&quot;/&gt;<br />    &lt;property name=&quot;background-color&quot;&gt;#feea9b&lt;/property&gt;<br />  &lt;/style&gt;<br />.... <br /></p>