Una de las cosas importantes en toda aplicación web es la estética. Yii implementa o mejor dicho nos da la opción para que podamos usar temas, eso es muy útil ya que dicho framework por defecto trae un tema muy simple que está basado en blueprint.
En este tutorial les quiero mostrar como utilizar temas en Yii y como ejemplo usaremos el tema Bootstrap (Twitter) con YiiBooster (Trae todos los widgets, componentes,etc adaptado para usar con Bootstrap.
1- Primero deben de descargar YiiBooster y deben de ponerlo dentro de la carpeta extensions con el nombre de bootstrap.
2- Luego nos vamos a el archivo de configuración main.php y agregamos lo siguiente:
return array(
'basePath'=>dirname(__FILE__).DIRECTORY_SEPARATOR.'..',
'name'=>'JuzgadoSys',
'language'=>'es',
'sourceLanguage'=>'en',
'charset'=>'utf-8',
'theme'=>'bootstrap', //Linea a agregar, el resto es solo para que lo tengan como referencia, lo que hace esta linea es usar la carpeta bootstrap que está en la carpeta themes.
// preloading 'log' component
'preload'=>array('log','bootstrap'), //Esto también deben de dejarlo así
//Generador de codigo basado en bootstrap (deben de reemplazar por el que ya tienen)
'gii'=>array(
'class'=>'application.gii.GiiModule',
'password'=>'123456',
'ipFilters'=>array('127.0.0.1','::1'),
'generatorPaths' => array(
'bootstrap.gii'
),
),
//Luego en el array components agregamos lo siguiente
'bootstrap' => array(
'class' => 'ext.bootstrap.components.Bootstrap',
'responsiveCss' => true, //Esto para que tengamos un diseño responsive, adaptable a cualquier dispositivo!
),
3- Ahora deben de irse a la carpeta themes que está en la raíz de APP y crear una carpeta que se llame bootstrap, dentro de esa carpeta deben de crear otra carpeta que se llame views y dentro de la carpeta views deben de crear la carpeta layouts.
4- Dentro de la carpeta layouts debe de haber 3 archivos .php: column1 , column2 y main
Archivo column1.php
<?php $this->beginContent('//layouts/main'); ?>
<?php echo $content; ?>
<?php $this->endContent(); ?>
Archivo column2.php
<?php $this->beginContent('//layouts/main'); ?>
<div class="row">
<div class="span3">
<?php
$this->widget('bootstrap.widgets.TbBox', array(
'title'=>'Operaciones',
'headerIcon' => 'icon-th-list',
'content'=> $this->widget('zii.widgets.CMenu', array(
'items'=>$this->menu,
),true),
));
?>
</div>
<div class="span9">
<?php echo $content; ?>
</div>
</div>
<?php $this->endContent(); ?>
Archivo main.php (Este si tienen que adaptarle según sus necesidades)
<!DOCTYPE html>
<html lang="<?php echo Yii::app()->language;?>">
<head>
<title><?php echo CHtml::encode($this->pageTitle); ?></title>
<meta charset="<?php echo Yii::app()->charset;?>">
</head>
<body>
<header>
<?php
$this->widget('bootstrap.widgets.TbNavbar', array(
'type'=>'inverse', // null or 'inverse'
'brand'=>CHtml::encode(Yii::app()->name),
'brandUrl'=>array('/site/index'),
'collapse'=>true, // requires bootstrap-responsive.css
'items'=>array(
array(
'class'=>'bootstrap.widgets.TbMenu',
'items'=>array(
array('label'=>'Aviso Legal', 'url'=>array('/site/page', 'view'=>'disclaimer')),
array('label'=>'Contáctenos', 'url'=>array('/site/contact')),
array('label'=>'FAQs' , 'url'=>array('/faqs/index'), 'visible'=>!Yii::app()->user->isGuest),
),
),
array(
'class'=>'bootstrap.widgets.TbMenu',
'htmlOptions'=>array('class'=>'pull-right'),
'items'=>array(
array('label'=>'Iniciar sesión'
, 'url'=>Yii::app()->user->ui->loginUrl
, 'visible'=>Yii::app()->user->isGuest),
array('label'=>Yii::app()->user->name,
'url'=>array('/cruge/ui/editprofile/'),
'visible'=>!Yii::app()->user->isGuest),
array('label'=>'Cerrar sesión ('.Yii::app()->user->name.')'
, 'url'=>Yii::app()->user->ui->logoutUrl
, 'visible'=>!Yii::app()->user->isGuest),
// array('label'=>'Logout', 'url'=>array('/site/logout'), 'visible'=>!Yii::app()->user->isGuest, 'htmlOptions'=>array('class'=>'btn'))
),
),
),
));
?>
</header>
<div class="container" id="main">
<?php if(isset($this->breadcrumbs)):?>
<?php $this->widget('bootstrap.widgets.TbBreadcrumbs', array(
'links'=>$this->breadcrumbs,
)); ?>
<?php endif?>
<?php echo $content; ?>
<hr>
<footer>
Copyright © <?php echo date('Y'); ?> <?php echo CHtml::encode(Yii::app()->params['empresa']); ?> | <?php echo CHtml::encode((Yii::app()->name).' '.Yii::app()->params['version']); ?> - All Rights Reserved.<br/>
<?php echo Yii::powered(); ?>
</footer>
</div>
</body>
</html>
Con todo eso ya podrán generar CRUDs basados en Bootstrap, y también se les cargará automáticamente los CSS y archivos JavaScript de Bootstrap.
Si quieren agregar un tema que descargaron de algún sitio web, nada más deben de poner ese tema en la carpeta themes de Yii y en el main.php del config deben de agregar esta linea al comienzo (Ver el punto 2 de este artículo para tener referencia):
‘theme’=>’nombredeltema’,
Espero que les sea de utilidad este artículo ya que yo lo considero como un tema muy importante.
