2009/04/18

RichFaces and Background Gradient

I do not know whose idea it was. Maybe it is there just to demonstrate some advanced RichFaces' abilities but I (in all the humbleness) hate it. I am talking about the background gradient which is by default present at table headers and toolbars. The background is a dynamically generated image and its presence in a web page is caused by XML snippets like the following one (part of richfaces-ui.jar:/org/richfaces/skin.xcss).

<u:style name="background-image">
  <f:resource xmlns:f="http:/jsf.exadel.com/template" f:key="org.richfaces.renderkit.html.GradientA"/>
</u:style>

A friend of mine would call such a beatiful thing a funfair or a fly-by. Apart from the hardcoded gradient background I miss only one thing in RichFaces.

A scrolling text that blinks in Firefox and Opera.

It took me couple of hours to get over the problem, yet I'm not satisfied with either solution I found.

Solution no. 1: Override the default behavior

Your CSS style can be loaded later and override the background you are not satisfied with. This is even "oficially" recommended. The linked page speaks about rich:dataTable so I am adding my part for rich:Toolbar.

.rich-toolbar, .rich-toolbar-item {
    background-image:none;
    background-color:transparent;
}     

You can of course set more convenient background color. The big issue here is that you still have the gradient style configured and loaded by your browser, and the background image generated at the server.

Solution no. 2: Update richfaces-ui.jar

You can grep through all .xcss files inside richfaces-ui.jar and remove the gradient from whatever place you want. You get tinier CSS and less work on the server side. But you have to repeate the procedure every time you want to upgrade RichFaces version. And you also must be careful about your richfaces-ui-without-gradient.jar.

I like neither of the solutions. For my project I went with no. 1 and I hope that there will be a new gradient style to configure in my skin.properties: gradientStyle=NONE.

4 comments:

. .