Have you noticed how most template system are too restrictive and need some genius ways to get around them. Not so with Eazyii (kind of easy with yii).
For starters, let me introduce you to the components making up the Eazyii template system.
CompositionWidget: Has a property layout. It identifies the layout a view will be using.
DefineWidget: Has a property name: It defines a region where views will insert their content into the layout. This is used to divide layout into regions.
InsertWidget: Has a property name: Identifies which of the defined regions in the layout to put the widget’s content.
Controller: Extends yii’s CController by overriding the render method, and adding some additional methods.
Lets get down to how it is used.
layout main.php
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<html>
<head>
<title>
<?php $this->beginWidget('application.components.DefineWidget',array('name'=>'title'));?>
Default title
<?php $this->endWidget();?>
</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<?php $this->beginWidget('application.components.DefineWidget', array('name' => 'meta-description')); ?>
<meta name="description" content="Default Meta Description" />
<?php $this->endWidget();?>
<?php $this->widget('application.components.DefineWidget', array('name' => 'javascript')); ?>
<link rel="stylesheet" type="text/css" href="/css/style.css" />
<?php $this->widget('application.components.DefineWidget', array('name' => 'css')); ?>
</head>
<body>
<div id="container">
<div>
<?php $this->beginWidget('application.components.DefineWidget',array('name'=>'A'));?>
Default content for A
<?php $this->endWidget();?>
</div>
<div>
<?php $this->widget('application.components.DefineWidget', array('name' => 'B')); ?>
</div>
<div>
<?php $this->widget('application.components.DefineWidget', array('name' => 'C')); ?>
</div>
<div>
Our footer content
</div>
</div>
</body>
</html>
The layout has been divided into regions title, meta-description, css, javascript, A, B, and C using a DefineWidget. Let consider, the DefineWidget with name property name assigned title. It provides a default title which will be used in views if it is not overridden. Some of the DefinedWidget do not have default content and a view has the choice of inserting some content at the region or leaving it empty. This pattern can be seen through out the layout.
Lets see how it will be used.
page1.php
<?php $this->beginWidget('application.components.CompositionWidget',array('layout'=>'main')); ?>
<?php $this->beginWidget('application.components.InsertWidget', array('name' =>'css')); ?>
<link rel="stylesheet" type="text/css" href="/css/form.css" />
<?php $this->endWidget(); ?><!-- end insert -->
<?php $this->beginWidget('application.components.InsertWidget',array('name'=>'B')); ?>
<p>Content for region B </p>
<?php $this->endWidget(); ?><!-- end insert -->
<?php $this->beginWidget('application.components.InsertWidget',array('name'=>'C')); ?>
<p>Content for region C </p>
<?php $this->endWidget(); ?><!-- end insert -->
<?php $this->endWidget(); ?> <!-- end composition -->
The content of page1.php is enclosed in a CompositionWidget which defines the layout we will use as main.php. It inserts its custom content at the regions css, B and C. Any default content at other regions in the layout will be inserted.
In your Controller, you will use
$this->render('page1',$dataForView);
Here is the html output
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<html>
<head>
<title>
Default title
</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="Default Meta Description" />
<link rel="stylesheet" type="text/css" href="/css/style.css" />
<link rel="stylesheet" type="text/css" href="/css/form.css" />
</head>
<body>
<div id="container">
<div>
Default content for A
</div>
<div>
<p>Content for region B </p>
</div>
<div>
<p>Content for region C</p>
</div>
<div>
Our footer content
</div>
</div>
</body>
</html>
Read through the next example and I am sure you will get the concept as it is easy.
page2.php
<?php $this->beginWidget('application.components.CompositionWidget',array('layout'=>'main')); ?>
<?php $this->beginWidget('application.components.InsertWidget',array('name'=>'A')); ?>
<p>Overriding default content for A </p>
<?php $this->endWidget(); ?>
<?php $this->beginWidget('application.components.InsertWidget', array('name' => 'javascript')); ?>
<script language="javascript" type="text/javascript" >
function a() {
}
</script>
<?php $this->endWidget(); ?>
<?php $this->beginWidget('application.components.InsertWidget', array('name' => 'title')); ?>
Overriding default title
<?php $this->endWidget(); ?>
<?php $this->beginWidget('application.components.InsertWidget', array('name' => 'meta-description')); ?>
<meta name="description" content="Overriding Meta Description" />
<?php $this->endWidget();?>
<?php $this->beginWidget('application.components.InsertWidget', array('name' =>'C')); ?>
<p>Our content for C </p>
<?php $this->endWidget(); ?>
<?php $this->endWidget(); ?> <!-- end composition -->
Here is the html output
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<html>
<head>
<title>
Overriding default title
</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="Overriding Meta Description" />
<script language="javascript" type="text/javascript" >
function a() {
}
</script>
<link rel="stylesheet" type="text/css" href="/css/style.css" />
</head>
<body>
<div id="container">
<div>
<p>Overriding default content for A </p>
</div>
<div><div>
<div>
<p>Our content for C </p>
</div>
<div>
Our footer content
</div>
</div>
</body>
</html>
I hope I have been able to convince you that Eazyii is the most flexible and easy template.