Functino » PHP

cakePHP cycle-helper: alternating row colors with cake

Andreas — Sat, 18 Jul 2009 15:09:15 +0000

It’s been a long time since my last posting. Today I’m going to show you my cycle-helper for cakePHP. If you haven’t read my other posts on alternating row colors, do so now: Alternate Table Rows in CakePHP (and ZF, Rails, Smarty)

The cycle-helper is easy to use and install and if your familiar with the rails cycle-helper you already know how it works…. So: how does it look when you use my helper for alternating row colors:

 foreach($rows as $row):?>
	 echo $cycle->cycle('', ' class="altrow"');?>>
		 endforeach ?>

 echo $row['rowdata'];?>

I think it’s pretty nice and a more beautiful approach then what cake bake produces.

Of course you can also use it with css-classes “even” and “odd”:

 foreach($rows as $row):?>
	echo$cycle->cycle('odd','even');?>">
		 endforeach ?>

    echo $row['rowdata'];?>

If you have nested loops you have the possibility to give your cycle a name via the “name”-option:

 $animals = array("Dogs" => array("Santa's Little Helper", "Beethoven", "Lassie", "Pluto", "Brian"),
				 "Cats" => array("Snowball", "Snowball II", "Snowball III", "Garfield"),
				 "Monkeys" => array("Mojo", "Lazlo", "King Kong"),
				 "Frogs" => array("Kermit", "Ed Bighead"),
				 "Kangaroos" => array("Skippy", "Jack"));?>
 foreach($animals as $key => $value): ?>
	 echo $key;?> ( echo $cycle->cycle("1", "2");?>)

	 foreach($value as $v):?>
		 echo $cycle->current();?>
		 echo $cycle->cycle("1", "2", "3", array("name" => "test"));?>  echo $v;?> 

	 endforeach;?>
	
 endforeach ?>

The helper code contains comments that should explain how it all works. The code for the helper itself looks like this:

 
/*
 * Cycle Helper for cakePHP
 * Copyright (c) 2009 Andreas
 * http://functino.com
 *
 * @author      andreas
 * @version     1.0
 * @license     MIT
 *
 */
 
 /**
 * The CycleHelper is used to cycle through the provided strings. 
 * You can use it for example to set alternate classes for table rows.
 * Usage is simple: 
 * 
 *    
 *   
 *     "">
 *       
 *     
 *     
 *  
 * 
 * This will create rows where the class alternates between "odd" and "even".
 * 
 * If you need more than one cycle you can use named cycles:
 * 
 *    array("VW", "Fiat", "Ford"), "Food" => array("Pizza", "Hotdog"), "..." => array("..."));?> 
 *   
 
 *    $aliases):?>
 *     "">
 *       
 *     
 *     
 *   
 *         : 
 * 	       
 *            "second_cycle"));?>">
 * 				
 *           
 *           
 *      

 * 
 *
 */
class CycleHelper extends AppHelper {
 
 /**
  * @var    array
  * @access private
  */	
	private $cycles = array();
 
 
/**
 * Creates a Cycle object. Cycles through elements of an array everytime it is called. This is useful for example if you want to
 * use alternate classes for table rows etc. 
 * This method takes an arbitrary number of strings to cycle through. The last parameter can be an array with options. 
 * If you pass in an options array with the key "name" you create a named cycle. 
 * If you don't pass in this name the name "default" is used. You can use named cycles to use more than one cycle in a loop.
 * @param string $name aribtrary number of strings to cycle through
 * @param array $options Options is an array. Currently only array("name" => "xyz") is implemented
 * @return string $options Link attributes e.g. array('id'=>'selected')
 * @access public 
 */    
    public function cycle()
    {
		$params = func_get_args();
		if(is_array(end($params)))
		{
			$options = array_pop($params);
			$name = $options["name"];
		}
		else
		{
			$name = "default";
		}
		$cycle = $this->getCycle($name);
		if($cycle)
		{
			return $cycle;
		}
		return $this->setCycle($name, $params);	
	}
 
/**
 * Resets a cycle. If you reset a cycle it starts form the first element again. 
 * If you don't pass in a name the default cycle is reset. To reset a named cycle pass in it's name. 
 * @param  string $name Name of the cycle to reset
 * @return Cycle
 * @access public 
 */	
	public function reset($name = "default")
	{
		$this->cycles[$name]->reset();
		return $this;
	}
 
/**
 * Returns the current cycle string. Normally you simply call the cycle() method to get the current cycle string. This current()
 * method is useful if you need to get the current cycle string more than one times. 
 * Pass in a name to get the value of a named cycle.  
 * @param  string $name Name of the cycle
 * @return string The current cycle string
 * @access public 
 */	
	public function current($name = "default")
	{
		return $this->cycles[$name]->current();
	}	
 
/**
 * Creates a ViewCycle and stores it in the cycle array by it's name 
 * @param  string $name Name of the cycle
 * @param  array $params array of cycle strings 
 * @return ViewCycle
 * @access public
 */ 	
	public function setCycle($name, $params)
	{
		$this->cycles[$name] = new ViewCycle($params);
		return $this->cycles[$name];
	}	
 
/**
 * Returns a cycle by it's name 
 * @param  string $name Name of the cycle
 * @return mixed ViewCycle or false
 * @access private
 */ 	
	private function getCycle($name)
	{
		if(!isset($this->cycles[$name]))
		{
			return false;	
		}	
		return $this->cycles[$name];
	}
} 
 
 
/**
 * ViewCycle is used by the Cycle helper to cycle through an array of elements (in most cases: strings)
 */
class ViewCycle
{
/**
 * Holds the name of this Cycle
 * @var    string
 * @access private
 */		
	private $name;
 
/**
 * Holds an array of strings
 * @var    array
 * @access private
 */	
	private $cycle;
 
/**
 * number of cycle strings
 * @var    integer
 * @access private
 */		
	private $count;
 
/**
 * iteration counter
 * @var    string
 * @access private
 */		
	private $i;
 
/**
 * Takes an array of strings to cycle through 
 * @param  array $cycle
 * @return void
 * @access public
 */ 		
	public function __construct($cycle)
	{
		$this->assign($cycle);
	}
 
/**
 * Returns the current cycle string and then sets the next cycle string
 * @return string current cycle string
 * @access public
 */ 		
	public function __toString()
	{
		$this->current = $this->cycle[$this->i % $this->count];
		$this->i++;
		return $this->current;
	}
 
/**
 * Returns the current cycle string 
 * @return string
 * @access public
 */ 		
	public function current()
	{
		return $this->current;
	}
 
/**
 * Resets this cycle
 * @return void
 * @access public
 */ 		
	public function reset()
	{
		$this->i = 0;
	}
 
/**
 * Set an array of strings to cycle through 
 * @param  array $cycle array of strings
 * @return void
 * @access public
 */ 		
	public function assign($cycle)
	{
		$this->cycle = $cycle;
		$this->count = count($this->cycle);
		$this->reset();		
	}
}



If you want to use this helper just copy the code to a file “cycle.php” in app/view/helpers and add it in your app_controller.php to the $helpers array:


class AppController extends Controller {
	var $helpers = array('Html', 'Form', 'Cycle');
}

That’s it!



Zebra Tables: How to alternate table row colors
Andreas — Tue, 14 Apr 2009 14:17:23 +0000
What is a “Zebra Table”? It’s a striped table with alternating row colors like this:




 
A simple Zebra Table
You can achieve this with very different approaches:
CSS only
With CSS 3 you can achieve such a table with the pseudo class nth-child. The rules are extremly simple and no additonal markup is required. Just add these lines to your CSS:

tr:nth-child(even) {background-color: #FFF}
tr:nth-child(odd) {background-color: #FFCC00}

But since not all browsers understand this CSS 3 selector this is perhaps not the best solution.

Instead of relying on Browsers CSS 3 support you can also use JavaScript to achieve the same result.

There is a great article on the jQuery-Blog with examples for all major JS-Framework. Take a look:  http://blog.jquery.com/2006/10/18/zebra-table-showdown/
Using PHP to add classes
If you don’t want to use the CSS-only or the JavaScript solution you can use one of the following solutions. The basic idea is to add classes to your rows that indicate if it is an even or an odd row.  You can do this by adding an “odd” class to odd rows and an “even” class to even rows.  Or if you want a more minimalistic approach: Just add an “altrow” class to odd rows. It could look like this:
Or:


  
    
  
  
    
  
  
    
  
  
    
  


And style it with CSS like this:

.even { background-color:#FFF; }
.odd { background-color:#FFCC00;}

or

tr { background-color:#FFF; }
tr.altrow{ background-color:#FFCC00;}

So how do we add those class names with PHP.  I assume we have the following array with animals and want to print them out to a table:


$animals = array("Dogs", "Cats", "Monkeys", "Frogs", "Kangaroos");
?>

You can use the modulo operator % to determine wether a row is even or odd:

 for($i = 0; $i < count($animals); $i++): 
    if($i % 2 == 0)
    {
      $class = "even";
    }
    else
    {
      $class = "odd";
    }
  ?>
  echo$class;?>">
     endfor;?>

    echo $animals[$i];?>
  


Or if we use the handy ternary operator:

 for($i = 0; $i < count($animals); $i++): ?>
    echo($i%2==0) ? "even":"odd";?>">
       endfor;?>
  
            echo $animals[$i];?>
    
  
Or if you use the "altrow" instead of "even" and "odd":
 for($i = 0; $i < count($animals); $i++): ?>
    echo($i%2==0) ? '',' class="altrow"';?>>
       endfor;?>

           echo $animals[$i];?>
    
  

If you use classnames like “row_0″ and “row_1″ instead of even and odd it comes down to this:

 for($i = 0; $i < count($animals); $i++): ?>
    echo($i%2);?>">
       endfor;?>

        echo $animals[$i];?>
    
  

Instead of the modulo operator you can also use a simple bit operation like this:

 for($i = 0; $i < count($animals); $i++): ?>
    echo($i&1) ? 'odd','even';?>">
       endfor;?>

         echo $animals[$i];?>
    
  
 
If you don't need the row number ($i) you can also do something like this:
 $even = 0; 
  foreach($animals as $animal):
    $even = 1 - $even; ?>
    echo$even ? 'even','odd';?>">
       endfor;?>

       echo $animal;?>
    
  

There is another solution with PHPs next() and reset() functions:

 $classes = array("even", "odd");
  foreach($animals as $animal):
    $class = next($classes) or reset($classes); ?>
    echo$class;?>">
       endfor;?>

      echo $animal;?>
    
  

With this solution you can also use more than two different styles like this:

 
$colors = array("#f00", "#0f0", "#00f");
while(loopingThroughWhatever())
{
  $color = next($colors) or reset($colors);
  //use it somewhere
  echo $color;
}
?>

Or another simple example:


$class = "odd";
while(loopingThroughWhatever())
{
  $class = ($class == 'even') ? 'odd' : 'even';
}
?>

However I find it kind of annoying when I have to initalize $class evrytime. Well, if you don’t need both classes (even and odd) you can simply do something like this:


while(loopingThroughWhatever())
{
  $class = empty($class) ? 'odd' : '';
  //use it somewhere
  echo $class;
}
?>

With this last approach you can simplify things a lot. Take a look at this code generated by CakePHP’s bake generator:


$i = 0;
foreach ($animals as $animal):
        $class = null;
        if ($i++ % 2 == 0) {
                $class = ' class="altrow"';
        }
?>
 echo $class;?>>

This would become something like this:

 foreach($animals as $animal):?>
   echo $class = empty($class) ? ' class="altrow"' : '';?>>

(Note that there is a little difference in the behaviour of this two: The latter one adds the altrow class to the first, third, fifth, … row while the first one adds the altrow class to the second, fourth, …)
I know there are other solutions out there and you can easily combine different approaches (for example use if(){} instead of the ternary operator ?:, or create a function, use a switch, etc… )). So what do you use?
In my next posting I’ll take a look at how this is handled in Smarty, Zend Framework, Rails and in CakePHP – and I’ll come up with my own CakePHP-Helper to achieve Zebra Tables.