If you compare the look-n-feel of our new panel after step #2 and the one on the richfaces-demo, you can see one important difference. Our new panel misses the gradient in the header background.
Let's try to find a solution using JSF 2.0 PDL.
RichFaces components have one important peculiarity. They are skinnable based on the predefined set of skin paramaters. Most graphic images used in the components, such as the gradient background image of the rich panel, are not static, but generated with the java classes using the same set of skin-parameters.
In the JSF 2.0 PDL, we can refer to a resource such as an image using the following expression:
#{resources['foo/bar/foobar.gif']}
According to the Mojarra spurce code, it reads only the static resource from the classpath and hardcodded folder 'resources' from the web root. Mojarra does not presume that resource can be generated dynamically. Thus, for the sake of simplicity, let's drop the idea of skinnability for now and take the gradient for default blueSky skin.
We have drop the static image to the {webroot}/resources/img/ folder and add just three lines to the css file:
.rich-panel-header{
.......
background-position:left top;
background-repeat:repeat-x;
background-image: url(#{resource['rich/img/panel_header.png']})
}
That is it. We can see the gradient in the panel header background now. The new panel after step #3 looks like that:
