Greetings fellow monks,

I have an interesting style question that may belong more under Meditations than Seekers, but since it's a question, here it is: I've been using HTML::Template both independantly and along with CGI::Application for a while now in our organization. I love it. (If you haven't played around with it, I strongly recommend it.) One of the things I love about this is loop context style. If I'm generating a report that'll get dumped into a table, I use loop context to alternate the background shade color of each row. (I got this idea from the old TSR AD&D books.)

Here's my question: I've come up with three options for doing this, and I'm not sure which is the "best" or if there's another that's "better" still. I've been using the first option up 'til now. The idea is to setup a CSS to define the table cell background colors, then reference each definition using the loop context var "__ODD__".

Example code, option #1

<STYLE type="text/css"><!--
TD.odd  { background-color: #c0c0c0; }
TD.even { background-color: #e0e0e0; }
--></style>

<TABLE border=0 cellspacing=0 cellpadding=3>
  <TMPL_LOOP name="some_loop">
    <TMPL_IF name="__ODD__">
      <TR>
        <TD class=odd><TMPL_VAR name="content_column_1"></td>
        <TD class=odd><TMPL_VAR name="content_column_2"></td>
      <TR>
    <TMPL_ELSE>
      <TR>
        <TD class=even><TMPL_VAR name="content_column_1"></td>
        <TD class=even><TMPL_VAR name="content_column_2"></td>
      <TR>
    </TMPL_IF>
  </TMPL_LOOP>
</table>

[download]

OK, fairly straight forward. I've been using this option for quite a while, but the thing that's always annoyed me has been the fact that I've had to repeat the same HTML code. So option #2 tries to get around that by defining the TMPL_IF .. TMPL_ELSE for the loop context inside the TD tag.

Example code, option #2

<TABLE border=0 cellspacing=0 cellpadding=3>
  <TMPL_LOOP name="some_loop">
    <TR>
      <TD <TMPL_IF name="__ODD__">class=odd<TMPL_ELSE>class=even</TMPL
+_IF>>
        <TMPL_VAR name="content_column_1">
      </td>
      <TD <TMPL_IF name="__ODD__">class=odd<TMPL_ELSE>class=even</TMPL
+_IF>>
        <TMPL_VAR name="content_column_2">
      </td>
    <TR>
  </TMPL_LOOP>
</table>

[download]

Now this is much better, I think, except for a couple things: First off, the line with the TD is a little difficult to read. The whole reason I started using HTML::Template in the first place was to let inexperienced coders maintain our sites. I know Perl, but few others in my group do. (They're learning, of course.) They know HTML, though, so they can support sites that are coded with HTML::Template and look fairly straight forward. The other thing I don't like about the above code is that it requires TMPL_IF .. TMPL_ELSE logic to happen for every single cell in every single row. Seems like there's a better way.

Example code, option #3

<STYLE type="text/css"><!--
TD.loop1 { background-color: #c0c0c0; }
TD.loop  { background-color: #e0e0e0; }
--></style>

<TABLE border=0 cellspacing=0 cellpadding=3>
  <TMPL_LOOP name="some_loop">
    <TR>
      <TD class=loop<TMPL_VAR name="__ODD__">>
        <TMPL_VAR name="content_column_1">
      </td>
      <TD class=loop<TMPL_VAR name="__ODD__">>
        <TMPL_VAR name="content_column_2">
      </td>
    <TR>
  </TMPL_LOOP>
</table>

[download]

So this code assumes that the loop context var "__ODD__" returns a 1 or nothing. So I just define the names of the TD style definitions to match what's expected. If ever "__ODD__" changes to return, say, a 1 or 0, then I'd have a very little recoding to do. Other than that, I think this is the best option.

So, what do you think?

-gryphon
code('Perl') || die;

In reply to Loop Context Style with HTML::Template by gryphon

Title:
Use:  <p> text here (a paragraph) </p>
and:  <code> code here </code>
to format your post, it's "PerlMonks-approved HTML":


  • Posts are HTML formatted. Put <p> </p> tags around your paragraphs. Put <code> </code> tags around your code and data!
  • Titles consisting of a single word are discouraged, and in most cases are disallowed outright.
  • Read Where should I post X? if you're not absolutely sure you're posting in the right place.
  • Please read these before you post! —
  • Posts may use any of the Perl Monks Approved HTML tags:
    a, abbr, b, big, blockquote, br, caption, center, col, colgroup, dd, del, details, div, dl, dt, em, font, h1, h2, h3, h4, h5, h6, hr, i, ins, li, ol, p, pre, readmore, small, span, spoiler, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, tr, tt, u, ul, wbr
  • You may need to use entities for some characters, as follows. (Exception: Within code tags, you can put the characters literally.)
            For:     Use:
    & &amp;
    < &lt;
    > &gt;
    [ &#91;
    ] &#93;
  • Link using PerlMonks shortcuts! What shortcuts can I use for linking?
  • See Writeup Formatting Tips and other pages linked from there for more info.