RF 4 rich:dataTable rendering: same styling for header cells and sub header cells by default?

[kwutzke]

I realized the following in RichFaces 4: the default dataTable rendering for sub header cells (and the datascroller) seems to be different than what it was in RichFaces 3.

Please have a look at the RichFaces 3 demo, editable table "Cars Store" example:

http://livedemo.exadel.com/richfaces-demo/richfaces/dataTable.jsf?tab=editDataTable&s=classic

You can see the table header cell ("Cars Store") has a gradient and the column sub header cells are a lot brighter. The datascroller buttons also get rendered like the column sub header cell styles (<f:facet name="header"> on each <rich:column>), also seen here: http://livedemo.exadel.com/richfaces-demo/richfaces/dataTable.jsf?tab=dataModel&s=classic

Then if you compare the "Cars Store" example (editable table with VINs) to RichFaces 4 here

http://richfaces-showcase.appspot.com/richfaces/component-sample.jsf?demo=dataTable&sample=dataTableEdit&skin=classic

you'll notice that the sub header cells as well as the datascroller buttons are styled with a gradient instead of just a plain lighter color, even though they were defined to be column sub header cells (see source code! they are sub header cells - with gradients here).

Is this a bug? Has no one ever realized it?

Is it a coincidence that the "Data Table Edit" example is missing its table header facet?:

{code}<rich:dataTable value="#{carsBean.allInventoryItems}" var="car"
    iterationStatusVar="it" id="table" rows="15">
    <rich:column>
        <f:facet name="header">#</f:facet>
        #{it.index}
    </rich:column>
    ...
</rich:dataTable>{code}

The above should probably have been:

{code}<rich:dataTable value="#{carsBean.allInventoryItems}" var="car"
    iterationStatusVar="it" id="table" rows="15">
    <f:facet name="header">Cars Store</f:facet>
    <rich:column>
        <f:facet name="header">#</f:facet>
        #{it.index}
    </rich:column>
    ...
</rich:dataTable>{code}

I'm not sure if this is just an accident (bug?) or intended.

In any case, I really dislike table header cells being rendered the same as the column sub header cells by default. Maybe no one ever realized this because the person who compiled the RichFaces 4 demo forgot to include the dataTable header facet? The strange thing is that there really **is** not a single example in the RichFaces 4 demo that shows how table header cells and column header sub cells can be rendered differently...

So, is this a bug? Or is there a new way of configuring things like that? After all, that color is skin-dependent...

This surely can be worked around, but IMHO column sub header cells and datascroller buttons should render without a gradient in brighter color by default. Rendering gradients on the table header cells, column header sub cells, and datascroller buttons is just soo... unattractive.

Please comment.

Karsten

[kwutzke]

Finally found some time to investigate. It looks like the skin-dependent values in richfaces-core-impl-<version>.jar/META-INF/resources/org.richfaces/datatable.ecss, ... define colors differently than they were defined in RF 3.

I've reported a bug here: https://issues.jboss.org/browse/RF-11723

As a workaround you can use the following custom ECSS file to restore RF 3 datatable and other looks:

{code}
@charset "UTF-8";
.rf-dt-hdr-c
{
    color: '#{richSkin.headerTextColor}';
    background-image: "url(#{resource['org.richfaces.images:gradientA.png']})";
}
.rf-dt-shdr-c, .rf-ds-btn
{
    background-color: '#{richSkin.additionalBackgroundColor}';
    background-image: none;
}
.rf-dt-shdr-c
{
    color: '#{richSkin.generalTextColor}';
}
.rf-pick-src-cptn, .rf-pick-tgt-cptn
{
    color: '#{richSkin.generalTextColor}';
}
.rf-pick-sel
{
    color: '#{richSkin.headerTextColor}';
}
{code}

The above is far from being complete. Note, the selected item in the pickList is explicitly set with colors, so it might overall be better to use the same colors as with the HTML selects... (implicit, that is browser-dependent?)

You probably have to put the h:outputStylesheet reference to that ECSS file into h:body instead of h:head due to https://issues.jboss.org/browse/RF-11734. Read more here: http://community.jboss.org/thread/163588

Karsten