Create dojo tab cotainer in Zend Framework

Try online: Tab Container
In my previous posts I discussed how to create accordion container holding accordion panes and border container having content panes.
In this article I am going to show you how easy it is to create tab continer that hold contents panes. Each content pane having different contents. Contents in one tab pane are shown at a time. when use click on the tab pane's title, contents in that tab pane are shown.
Before reading this post, you better read and implement what I have discussed in my article "Zend Framework and Dojo: configuration". Before creating tab continer and panes, you will need to understand and perform necessary configuration.I assume that you have read the post I have mentioned and have done the necessary configuration. Now let's get started.
First of all, you will need to create your controller as

<?php
class ContainerController extends Zend_Controller_Action
{
 public function tabAction()
 {
  
 }
}

In the code above we have defined our ContainerController extending it from Zend_Controller_Action, and then we have defined our tabAction.
Now, the next step is to create tab.phtml in /application/views/scripts/container/ and place the following code in it.

<?php

$this->tabContainer()->captureStart('main-container',
                                    array('design' => 'headline'),
                                    array(
                                            'style'=>'height:400px;width:800px'
                                     ));

echo $this->contentPane(
 'home',
 'This is home page',
 array('region' => 'top','title'=>'Home'),
 array('style' => 'background-color: white;')
);

echo  $this->contentPane(
 'gallery',
 'Contents of gallery here',
 array('region' => 'left', 'title'=>'Gallery'),
 array('style' => 'width: 200px; background-color: white;')
);
                             
echo $this->contentPane(
 'Blog',
 'Blog post here',
 array('region' => 'center','title'=>'Blog'),
 array('style' => 'background-color: white;')
);

echo $this->contentPane(
 'about',
 'Information about your company etc',
 array('region' => 'bottom', 'title'=>'About Us'),
 array('style' => 'background-color: white;')
);

echo $this->tabContainer()->captureEnd('main-container');
?>

Here we first call captureStart() method of tabContainer() dojo view helper, giving it an id, and array containing tab container special attributes. Next we define content panes. Each content pane holds the data. The contents panes in the tab container will become tab panes.
each content pane is defined as

echo $this->contentPane(
 'home',
 'This is home page',
 array('region' => 'top','title'=>'Home'),
 array('style' => 'background-color: white;')
);

Here "home" is the id of the content page, Next "string" is the contents that will appear in the tab pane. Next we have defined the array of the special attributes of the contents. Here title is the most important attribute. This title will appear on the tab. The last array contain css related attributes.
That's it. we have now written all necessary code for creating nice and beautiful Tab container.
Cheers.