Smarty Forum Index Smarty
WARNING: All discussion is moving to https://reddit.com/r/smarty, please go there! This forum will be closing soon.

A tip a day - {cycle} tag in Smarty for color banding

 
This forum is locked: you cannot post, reply to, or edit topics.   This topic is locked: you cannot edit posts or make replies.    Smarty Forum Index -> Article Discussions
View previous topic :: View next topic  
Author Message
bimal
Smarty Elite


Joined: 19 Apr 2007
Posts: 423

PostPosted: Thu Jun 11, 2009 5:32 pm    Post subject: A tip a day - {cycle} tag in Smarty for color banding Reply with quote

I plan to contribute the forum readers with some beautiful tips, whenever I have enough time. Normally, I will be taking out a tips from my realtime projects, which Smarty community might find useful. These tips are nothing new from Smarty's manual, but I try to compile them with some examples and explations.

Today, here is a {cycle} tips in printing out attractive color bands in rows of information. Normally, it may be an HTML/TR row, but can support any other tag.

Ok, to begin with, you need to make a list of at least two css styles, named A and B for TR tag. Here is the declaration:

Code:
tr.A
{
   background-color:#D8EACB;
}

tr.B
{
   background-color:#D0FBB2;
}


Each of the row will be later noted by A, and followed by B, and again A, B, ... as long as the loop runs.
Below is a code sample that uses {section} loop over a variable. Please note carefully, the {cycle} tag.

Code:
<table border="0" cellspacing="1" cellpadding="5">
  <tr>
    <th>&nbsp;</th>
    <th><a href="?sort=sn">Student</a></th>
    <th>SLC</th>
    <th>Entrance</th>
    <th><a href="?sort=rs">Rank (SLC)</a></th>
    <th><a href="?sort=re">Rank (Entrance)</a></th>
  </tr>
  {section name='r' loop=$ranks}
  <tr class="{cycle name='ranking' values='A,B'}">
    <td>{$smarty.section.r.index_next}.</td>
    <td id="s{$ranks[r].sid}" class="s">{$ranks[r].sn}</td>
    <td>{$ranks[r].sp}</td>
    <td>{$ranks[r].es}</td>
    <td>{$ranks[r].rs|ordinal:true:'slc'}</td>
    <td>{$ranks[r].re|ordinal:true:'entrance'}</td>
  </tr>
  {sectionelse}
  <tr>
    <td>&nbsp;</td>
    <td>No student records</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  {/section}
</table>


In each loop, it produces a different band of <TR> with <tr class="{cycle name='ranking' values='A,B'}">.
This means, the browser will get:
<tr class="A">..
<tr class="B">...
<tr class="A">...
<tr class="B">...

Unless we define the proper styles for tr.A and tr.B, we may not see the effects.

Tips:
If you would like to do multiple cycles within a loop, you MUST give a unique name to the cycle.
For example: <tr class="{cycle name='ranking' values='A,B'}">
Even if you do not need to take benefits of named cycles, better, use them.

This helps you, clearly, allow a css designer take control on the look and feel.

Enjoy all the color bands now.


Last edited by bimal on Wed Jun 17, 2009 5:19 pm; edited 1 time in total
Back to top
View user's profile Send private message Visit poster's website
jLix
Smarty Regular


Joined: 01 Apr 2009
Posts: 59
Location: Lowlands, EU

PostPosted: Thu Jun 11, 2009 9:38 pm    Post subject: Reply with quote

Good to see you don't follow the official Smarty documentation or Smarty book in which they put the make-up straight into the markup: <tr bgcolor="{cycle values="#eeeeee,#d0d0d0"}">. How's that for separation of content and style?
Of course that's just an example of how {cycle} works, but it sets a bad example. And I think those should be avoided or else at least tagged as such with waving red flags Twisted Evil

Better to use classNames like you did, although I'd personally do something like this:
Code:
<tr{cycle values=' class="odd",'}>...</tr>
Which would give:
Code:
<tr class="odd">...</tr>
<tr>...</tr>
<tr class="odd">...</tr>
<tr>...</tr>
<tr class="odd">...</tr>
It saves some unnecessary characters.
In CSS you'd then write:
Code:
tr {
    background-color: #d8eacb;
}

tr.odd {
    background-color: #d0fbb2;
}


Just my 2 cents.
_________________
http://jlix.net/extensions/smarty
Back to top
View user's profile Send private message Visit poster's website
bimal
Smarty Elite


Joined: 19 Apr 2007
Posts: 423

PostPosted: Fri Jun 12, 2009 1:59 pm    Post subject: Reply with quote

Quote:
<tr{cycle values=' class="odd",'}>...</tr>

It is one more trick to use blank values in the loop, yet good for the css. This helps to write few css selectors.

About the manual:
Even if we feel, the examples in the manual are not so good, I have some good feelings with these works. The core Smarty team should have produced them in a shorter timespan, and for free. Plus, they aimed at the learners of Smarty only. Learners might confuse with the advanced examples we like to use in our applications. And, again, it is the factor of time to revise the manual.

The manual is too old, but still supports / describes many things of the recent releases.
Back to top
View user's profile Send private message Visit poster's website
mohrt
Administrator


Joined: 16 Apr 2003
Posts: 7368
Location: Lincoln Nebraska, USA

PostPosted: Fri Jun 12, 2009 2:49 pm    Post subject: Reply with quote

I updated the example in SVN, it will get updated on the site at some point.
Back to top
View user's profile Send private message Visit poster's website
jLix
Smarty Regular


Joined: 01 Apr 2009
Posts: 59
Location: Lowlands, EU

PostPosted: Fri Jun 12, 2009 6:40 pm    Post subject: Reply with quote

mohrt wrote:
I updated the example in SVN, it will get updated on the site at some point.


That's just great. Thanks!
_________________
http://jlix.net/extensions/smarty
Back to top
View user's profile Send private message Visit poster's website
Display posts from previous:   
This forum is locked: you cannot post, reply to, or edit topics.   This topic is locked: you cannot edit posts or make replies.    Smarty Forum Index -> Article Discussions All times are GMT
Page 1 of 1

 
Jump to:  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum


Powered by phpBB © 2001, 2005 phpBB Group
Protected by Anti-Spam ACP