====== Integración con Bootstrap ====== Hay varias extensiones de Yii que permiten integrar Bootstrap en nuestras aplicaciones. Una de las más completas es [[http://yiibooster.clevertech.biz/site/index|YiiBooster]], que tiene múltiples widgets extra, y generador de código adaptado a Bootstrap integrado. Los pasos a seguir para instalarlo son: - Descarga la extensión desde [[http://yiibooster.clevertech.biz/site/index|YiiBooster|YiiBooster]] - Crea la carpeta **protected/extensions/booster** y descomprime dentro el fichero que has descargado - Modifica el fichero protected/config/main.php de la forma siguiente: 'components'=>array( 'booster'=>array( 'class'=>'ext.booster.components.Booster' ), ... Si únicamente vas a utilizar el tema bootstrap, se puede precargar el componente, para no hacerlo manualmente después: ... 'preload'=>array('log','booster') ... Si quieres utilizar el generador gii de booster, modifica también modules->gii: 'modules'=>array( 'gii'=>array( 'class'=>'system.gii.GiiModule', 'password'=>'PASSWORD', 'ipFilters'=>array('127.0.0.1','::1'), 'generatorPaths' => array( 'booster.gii' ) ), Si quieres mantener más de un tema de la aplicación, tal como se explica en [[http://www.yiiframework.com/doc/guide/1.1/es/topics.theming|Temas en Yii]], puedes permitir que el usuario elija el tema, o asignarlo en función de que acceda desde un móvil o desde un PC. Para ello, en el index.php de arranque de la aplicación podríamos hacer algo así: user->setstate('theme',$theme); } elseif(isset(Yii::app()->user->theme)){ $theme=$app->user->theme; }elseif(client()=='mobile') $theme='bootstrap'; else $theme='classic'; $app->theme=$theme; if($theme=='bootstrap') $app->getComponent("booster"); $app->run(); De esta forma, si el usuario ejecuta index.php?theme=bootstrap, se cambiará a ese tema durante toda la sesión, o hasta que se ejecute index.php?theme=classic Si ya tienes vistas creadas al estilo clásico, puedes adaptarlas a Bootstrap, o crear unas nuevas con el generador. Básicamente, los cambios más importantes para pasar del tema estándar al de bootstrap son los widgets. Por ejemplo, si el grid estándar es 'zii.widgets.grid.CGridView', al hacer una vista para bootstrap, pondremos 'booster.widgets.TbGridView'. En la vista **themes/bootstrap/views/layouts/main.php** el cambio principal es que utilizamos los widgets NavBar de Bootstrap . Un ejemplo de ese layout podría ser: createAbsoluteUrl('/site/logout',array('tout'=>1)).'">'; ?> <?php echo CHtml::encode($this->pageTitle); ?> widget('booster.widgets.TbNavbar',array( 'brand'=>'MI APLICACION', 'collapse'=>true, 'fixed'=>true, 'htmlOptions'=>array('style'=>'margin-bottom:1px'), 'items'=>array( array( 'class'=>'booster.widgets.TbMenu', 'type'=>'navbar', 'items'=>$items ), array( 'class'=>'booster.widgets.TbMenu', 'type'=>'navbar', 'items'=>array(array('label'=>'Salir ('.Yii::app()->user->name.')', 'icon'=>'off', 'url'=>array('/site/logout'), 'visible'=>!Yii::app()->user->isGuest)) ), ), )); ?> breadcrumbs)) //echo TbHtml::breadcrumbs($this->breadcrumbs); $flashMessages = Yii::app()->user->getFlashes(); if ($flashMessages) { echo ''; if(!$static) Yii::app()->clientScript->registerScript( 'myHideEffect', '$(".info").animate({opacity: 1.0}, 2000).fadeOut("slow");', CClientScript::POS_READY ); } echo $content; ?>
Cambiar a vista Escritorio
Los items del menú se han sacado a un fichero externo llamado _menu.php para que sea más cómodo editarlos: //_menu.php $items=array( array('label'=>'Inicio', 'url'=>array('/site/index')), array('label'=>'Títulos', 'url'=>array('/titulos/index')), array('label'=>'Autores', 'url'=>array('/autores/index')), ... array('label'=>'Login', 'url'=>array('/site/login'), 'visible'=>Yii::app()->user->isGuest), array('label'=>'Mi perfil', 'url'=>array('/usuarios/miperfil','visible'=>!Yii::app()->user->isGuest)), array('label'=>'Logout ('.Yii::app()->user->name.')', 'url'=>array('/site/logout'), 'visible'=>!Yii::app()->user->isGuest) ); Si utilizamos roles en la aplicación y los menús de cada rol son muy diferentes, podríamos crear un fichero _menuXX.php por cada rol y cargar el que corresponda