Re: Re: Barracuda: dynamically setting the value of the class-attribute

As a follow-up to Andras' suggestion, for doing alternating row colors, I 
would modify his example to look like this...

<tr class="Dir::Iterate_Start.MyModel Dir::Iterate_Next.MyModel rowColorOdd">
         <td class="Dir::Get_Data.MyModel.MyKey">[dummy MyKey data]</td>
</tr>
<tr class="Dir::Iterate_Next.MyModel rowColorEven">
         <td class="Dir::Get_Data.MyModel.MyKey">[more dummy MyKey data]</td>
</tr>
<tr class="Dir::Iterate_End.MyModel Dir::Discard rowColorOdd">
         <td>[even more dummy MyKey data]</td>
</tr>


Notice the "rowColorOdd" and "rowColorEven" class names.  Those are classes 
meant purely for css and they won't be stripped out by BTemplate.  So, you 
can do your styling 100% outside of your java code.  It is all in the html 
template.  Modify the css stylesheet to change the colors associated with 
the two class names.

Alternatively, if you are ok with enforcing minimum browser standards of 
Mozilla/IE5.5 (IE5 may also work?), you could forget having to bother with 
this at all and let javascript do the styling for you.  Then, you wouldn't 
have such verbose templating.  You could change the above to this...

<tr class="Dir::Iterate_Start.MyModel Dir::Iterate_Next.MyModel">
         <td class="Dir::Get_Data.MyModel.MyKey">[dummy MyKey data]</td>
</tr>
<tr class="Dir::Iterate_End.MyModel Dir::Discard">
         <td>[even more dummy MyKey data]</td>
</tr>

notice the removal of both the Iterate_Next directive row and the the css 
class names.  Now add this...

tablecontrol.js...

function TableControlObject(tblElt) {
     this.table = tblElt;
     this.rowColors = new Array();
     this.doRowColors = __tco_alternateRowColor;
}

function __tco_alternateRowColor() {
     //if ((this.table == null) || (this.table && (!this.table == 
HTMLTableElement)) || (this.rowColors.length == 0)) return;
     if ((this.table == null) || (this.table && !this.table.tBodies) || 
(this.rowColors.length == 0)) return; // check to make sure the object is a 
table element
     var tblbElts = this.table.tBodies; // tbody elements
     var tblbrElts;                     // tr elements (only within tbody 
elements)
     var rcCnt = 0;                     // counter for rowColors Array
     var rcLen = this.rowColors.length; // length of the rowColors array

     for (i=0; i<tblbElts.length; i++) { // loop over tbody elements
         tblbrElts = tblbElts[i].rows; // get a reference to the current 
tbody row array
         for (j=0; j<tblbrElts.length; j++) { // loop over tbody row elements
             //alert((document.all) ? tblbrElts[j].currentStyle.display : 
document.defaultView.getComputedStyle(tblbrElts[j], 
'').getPropertyValue('display'));
             if ((document.all && tblbrElts[j].currentStyle.display == 
'none') || (document.defaultView && 
document.defaultView.getComputedStyle(tblbrElts[j], 
'').getPropertyValue('display') == 'none')) continue; // not concerned with 
non-displayble rows
             tblbrElts[j].style.backgroundColor = this.rowColors[rcCnt]; // 
set the appropriate color based on the current value of the row counter
             (rcCnt < rcLen-1) ? rcCnt++ : rcCnt = 0; // increment 
displayable row counter
         }
     }
}

pagespecificscript.js...

function init() {
     var tco = new TableControlObject(document.getElementById('Account'));
     tco.rowColors = ['#f7f7f7', '#dedede'];
     tco.doRowColors();
}
window.onload = init;


You can see this in action here...
http://www.visi.com/~hoju/barracuda/donations.html

See the scripts at...
http://www.visi.com/~hoju/barracuda/tablecontrol.js
http://www.visi.com/~hoju/barracuda/donations.js

Note, you don't necessarily need to create the table control object in an 
init upon page load.  You could just do it inline in your html at the end 
of the table in question.  Also note that this doesn't limit you to 2 
colors.  You could have any number of colors alternating.

Assuming that the user's browser has javascript enabled, this technique 
keeps the separation of content and style more clear and clean than ever!

Jake



At 04:17 PM 3/3/2003 +0200, you wrote:




>----- Original Message -----
>From: "Jan Marten Visser" <[email protected]>
>To: <[email protected]>
>Sent: Monday, March 03, 2003 16:05
>Subject: Barracuda: dynamically setting the value of the class-attribute
>
>
> > Hi,
> >
> > I got this HTML template:
> >
> > <html>
> > ...
> > <table>
> >   <tr>
> >     <td class="ThisIsMyProblem" id="Name">Some text</td>
> >   </tr>
> > </table>
> > ...
> > </html>
> >
> > I want to be able to change the class-attribute dynamically, when the
> > row is even, I want the class attribute to be "even", when it is odd I
> > want the attribute to be "odd". For clairity: I am using the class
> > attribute as a reference to a stylesheet class, the id-attribute refers
> > to the directives file.
> >
> > Ik know of course how to populate the tags between the <td>'s, but I
> > don't know how to set the tag-attributes themselves dynamically.
> >
> > Any tips?
> >
>
>
>Hi,
>
>I can't answer you question, but i would suggest using an Iterative Model to
>build your
>cells.
>Something like this:
>..
><td class="Dir::Iterate_Start.YourModel Dir::Iterate_Next.YourModel
>oddstyle" >Some text</td>
><td class="Dir::Iterate_Next.YourModel evenstyle" >Some text</td>
><td class="Dir::Iterate_End.YourModel Dir::Discard" >[End]</td>
>
>Like this you don't mix your stylesheet logic in your code.
>You can check out the Examples too to see how the Iterative Models work.
>
>
>_______________________________________________
>Barracuda mailing list
>[email protected]
>http://barracudamvc.org/lists/listinfo/barracuda