Tuesday, July 3, 2012

Defining multiple layouts in YII Frameworks

Most applications use a single layout for all their views. However, there are situations when
multiple layouts are needed. For example, an application can use different layouts at different
pages: Two additional columns for blog, one additional column for articles, and no additional
columns for portfolio.
Getting ready
Set up a new application using yiic webapp.
How to do it...
1. Create two layouts in protected/views/layouts: blog and articles. Blog will
contain the following code:
<?php $this->beginContent('//layouts/main')?>
<div>
<?php echo $content?>
</div>
<div class="sidebar tags">
<ul>
<li><a href="#php">PHP</a></li>
<li><a href="#yii">Yii</a></li>
</ul>
</div>
<div class="sidebar links">
<ul>
<li><a href="http://yiiframework.com/">Yiiframework</a></li>
<li><a href="http://php.net/">PHP</a></li>
</ul>
</div>
<?php $this->endContent()?>
2. Articles will contain the following code:
<?php $this->beginContent('//layouts/main')?>
<div>
<?php echo $content?>
</div>
<div class="sidebar toc">
<ul>
<li><a href="#intro">1. Introduction</a></li>
<li><a href="#quick-start">2. Quick start</a></li>
</ul>
</div>
<?php $this->endContent()?>
3. Create three controllers named BlogController, ArticleController, and
PortfolioController with index actions in both:
class BlogController extends Controller
{
function actionIndex()
{
$this->layout = 'blog';
$this->render('//site/index');
}
}
class ArticleController extends Controller
{
function actionIndex()
{
$this->layout = 'articles';
$this->render('//site/index');
}
}
class PortfolioController extends Controller
{
function actionIndex()
{
$this->render('//site/index');
}
}
4. Now try http://example.com/blog, http://example.com/article, and
http://example.com/portfolio.
How it works...
We defined two additional layouts for blog and articles. As we don't want to copy-paste
common parts from the main layout, we apply additional layout decorators using $this-
>beginContent and $this->endContent, as shown on the following diagram:
So, we are using a view rendered inside articles layout as main's $content.

1 comment: