Re: How to dynamically bind css class to tr (worepetition)

Hi Tony,

Am 01.08.2006 um 18:27 schrieb Tony Hoffman:

> I've been looking over the lists and documentation but I can't find  
> an answer to what I think is a simple question.
>
> I am in the process of converting a website from simple html to  
> css. The chief problem I am having is setting the background color  
> in WORepetition table rows. Previously, I created a  
> WOGenericContainer inside the WORepetition and bound the element  
> "TR" to the attribute "bgcolor" where the binding was set to a  
> method that returned a string (background color) based on the value  
> of an object. This worked swimmingly.
>
> Now, however, I would like to have the WOGenericContainer set the  
> background color based on my css stylesheet. I don't know if I  
> should (or how to) have the elementName / attribute / binding  
> settings work to insert a class tag on a table row, or if I should  
> reconfigure the Java code to somehow return a background string by  
> referring to my stylesheet.
>
> Does anyone have any advice on setting the background color of a  
> WORepetition based on an external CSS stylesheet?


You should probably just keep your WOGenericContainer for the "tr"  
and change the "bgcolor" binding to "class". Then set two css classes  
on the "tr"-container's "class" binding. That way you can use one  
class to set the general format on the rows and an additional css  
directive to set the color for even and odd rows etc.

A more involved setup than what you asked for, but this is what I had  
at hand right now: For marking different order states for two rows  
per order:

     protected int repetitionIndex;

     public String firstRowCssClass() {
         String cssClass = "first";
         return generateCssClass(cssClass);
     }

     public String secondRowCssClass() {
         String cssClass = "second";
         return generateCssClass(cssClass);
     }

     private String generateCssClass(String cssClass) {
         if (repetitionIndex % 2 == 0)
             cssClass = cssClass.concat(" even-state-");
         else
             cssClass = cssClass.concat(" odd-state-");
         return cssClass.concat(((Number) anOrder.orderStatus 
().valueForKey("id"))
                 .toString());
     }

And some corresponding css:

     tr.first td {
         padding-top: 8px;
     }

     tr.second {
         border-bottom: 1px solid #989898;
     }

     tr.second td {
         padding-top: 8px;
     }

     tr.odd-state-2 {
         background: #fdc;
         border-color: #e88;
     }

     tr.even-state-2 {
         background: #fed;
         border-color: #e99;
     }

     tr.odd-state-3 {
         background: #ffb;
         border-color: #eea;
     }

     tr.even-state-3 {
         background: #ffd;
         border-color: #dd8;
     }

HTH

Fabian