CSS Diferentes en LAYOUT - MODULAR

Cuando se cuenta con una estructura modular todos los Bootstrap de la aplicación  son ejecutados en el proceso de inicialización, así  el módulo no sea solicitado. De esta forma no se podría hacer independencia para vincular de forma exclusiva CSS o JS o el nombre de cada módulo. la solución a este inconveniente lo puede realizar un Plugin.

class Plugins_Layouts extends Zend_Controller_Plugin_Abstract
{ 
 private $_nombreModulo;
 public function preDispatch(Zend_Controller_Request_Abstract $request) 
 { 
    //Obtener view de esta forma porque se encuentra definida en
    //resources.view[] dentro de application.ini 
    $view = Zend_Controller_Front::getInstance()        ->getParam('bootstrap')        ->getResource('view');
    $this->_nombreModulo = $request->getModuleName(); 
    $layout = Zend_Layout::getMvcInstance();
    switch ($this->_nombreModulo)
 { 
   case 'admin':                $layout->setLayout('admin'); 
   $view->headLink()->appendStylesheet($view->baseUrl("css/menuAdmin.css"));
   $view->headLink()->appendStylesheet($view->baseUrl("css/templateAdmin.css"));
   $view->headScript()->appendFile($view->baseUrl("js/menuAdmin.js"));
   $view->headTitle('Zona de Administración','APPEND');
   break; 
   case 'biblioteca':                $layout->setLayout('biblioteca');
   break; 
   default:                $layout->setLayout('default');
               $view->headLink()->appendStylesheet($view->baseUrl("css/menuDefault.css"));
               $view->headLink()->appendStylesheet($view->baseUrl("css/templateDefault.css"));  
               $view->headScript()->appendFile($view->baseUrl("js/menuDefault.js")); 
               $view->headTitle('Default','APPEND');
               break;
 } } }

Layout para cada Módulo

En nuestra estructura  modular se han diseñado 3 módulos, default, admin y bibloteca, para facilitar el cambio del layout se ha creado un Front Controller Plugin.

Que es un Front Controller Plugin

Es un clase que extiende de Zend_Controller_Plugin_Abstract que permite mejorar el comportamiento y la versatilidad de nuestra aplicación, ahorrando muchas lineas de código a través de los controllers. El Front Controller Plugin permite interceptar a través de seis eventos o hooks y ejecutar ciertas acciones que nos facilitaran el trabajo.

• routeStartup () : antes de la solicitud de enrutamiento
• routeShutdown () : después de la solicitud de enrutamiento
• dispatchLoopStartup () : antes de entrar en el bucle de envío
• preDispatch () : antes de despachar una acción individual
• postDispatch () : tras el envío de una acción individual
• dispatchLoopShutdown () : después de completar el bucle de envío

Registro de plugins application.ini

;Registrar Plugins

autoloaderNamespaces[] = "Plugins_"

resources.frontController.plugins.Layouts = "Plugins_Layouts"

Indica que en el directorio de library se creará una carpeta Plugins y que la clase se llamará Layouts.php. Con la linea resource.frontController.plugins, registramos y activamos el plugin, aunque tambien lo podemos hacer en el Bootstrap

Crear la clase Layouts

class Plugins_Layouts extends Zend_Controller_Plugin_Abstract {

private $_nombreModulo;

public function preDispatch(Zend_Controller_Request_Abstract $request)
{
$this->_nombreModulo = $request->getModuleName();
$layout = Zend_Layout::getMvcInstance();

switch ($this->_nombreModulo)
{
case 'admin':
$layout->setLayout('admin');
break;

case 'biblioteca':
$layout->setLayout('biblioteca');
break;

default:
$layout->setLayout('default');
break;
}
}
}

La clase será utilizada en el evento preDispatch

Activar de plugin en Bootstrap

protected function _initRegisterPlugins()

    {

      $front = Zend_Controller_Front::getInstance();

      $front->registerPlugin(new Plugins_Layouts());  

        

    }

Con esta funcionalidad al cambiar de modulo, automáticamente se cambiará el layout de la aplicación. Adicional a éste podríamos organizarlo para detectar el perfil del usuario y mostrar un layout especifico.

School2.0 - Software de Notas

Ante el incremento de aplicaciones en la nube, el área educativa es una de las más favorecidas, abarcando un sinnúmero de componentes que pretenden mejorar el aprendizaje de los alumnos o mejorar los servicios administrativos en las entidades educativas. Desde este blog pretendo involucrar el proyecto "School2.0" que será de gran utilidad para la administración de calificaciones de los alumnos de instituciones educativas.

El proyecto será desarrollando en Zend Framework 1.11 y en la medida que se avance, podrá ser visualizado en linea, espero sus comentarios o aportes a esta cruzada.

School2.0

Dentro de la estructura de School2.0 se establece una zona publica que podría ser el Website de la institución educativa y la zona administrativa donde según el rol asignado al usuario podría realizar ciertas tareas permitidas.

Comenzaré con la zona administrativa y para ello tendré un login que permitirá detectar que tipo de usuario ha ingresado al sistema. Nuestra estructura del proyecto debe ser modular, en el anterior post se aclaro el tema

http://aprendiendophp5.blogspot.com/2012/06/zend-framework-modular-netbeans.html

El Sitio de prueba en linea estará en el subdominio http://school2.0.armeniadigital.com, espero sea de gran interés.

Zend Framework Modular - Netbeans

A través de los diferentes post se ha trabajado sin estructura modular, todos los controladores se encuentran dentro de la carpeta CONTROLLERS,  dentro de las ventajas de utilizar una aplicación modular  se encuentran: ejecutar ciertas acciones por modulo mediante su propio Bootstrap, reutilizar modelos, mejor entendimiento de aplicaciones grandes y/o complejas y aplicaciones flexibles y escalables.

Utilizando Netbeans seria de la siguiente forma


1. Click derecho sobre el proyecto y buscamos zend  para utilizar comandos.

2. Digitamos en Filter module y aparecerá la sintaxis del comando para crear el modulo, en parametros escribimos el nombre del módulo

3. de forma automatica Zend Tools creará el modulo y adicionará lineas de configuración en application.ini

4. Al crear el módulo la carpeta controllers esta vacia, crearemos el controller index y la vista del indexAction

5. adicionamos lineas de configuración en application.ini, para determinar el módulo por defecto.

En application.ini

[production]

….

resources.frontController.moduleDirectory = APPLICATION_PATH "/modules"

resources.frontController.params.prefixDefaultModule = "1"

resources.frontController.defaultModule = "default"

resources.modules[] = ""

6. estructura modular, reorganizando los controllers que estaban por fuera de los modulos, se puede dejar models por fuera para reutilizar código. 

Se crean los Bootstrap de los módulos.

El Bootstrap del modulo  default será:

class Default_Bootstrap extends Zend_Application_Module_Bootstrap{

    

     

}

7. En el nombre de los controllers, a excepción del módulo default todos deben tener como primer nombre, el del módulo.

Con estos pasos nuestra estructura modular estará funcionando sin inconvenientes, mucha suerte

Layout II - Twitter Bootstrap

Cuando activamos el layout como maqueta para organizar, dar una mejor presentación a nuestra aplicación y reutilizar estructuras html (zf enable layout) , se adicionará en application.ini las líneas de configuración por defecto

resources.layout.layout = “layout”
resources.layout.layoutPath = APPLICATION_PATH "/layouts/scripts/"


La primera nos indica el nombre por defecto del archivo  .phtml en este caso es “layout.phtml” y la segunda el path de ubicación del layout. Inicialmente el archivo “layout” creado contiene lo siguiente:


<?php  echo $this->layout()->content; ?>

content  hace referencia al contenido del  VIEW  que corresponde al ACTION del CONTROLLER  que estamos ejecutando, nuestro layout puede ser “armado” con otros archivos .phtml , miremos  la gráfica para tener una idea de las posibles opciones a vincular.

Accediendo al objeto Layout

Cuando se registra en application.ini las líneas de configuración del layout (resources) esto nos permitirá tener acceso a una instancia de Zend_Layout, bien sea con los Action o los View Helper, la siguiente tabla muestra las diferentes formas de obtener la instancia de la clase.

En las Vistas o layout	En los Action	En el Bootstrap
<?php $layout = $this->layout(); ?>	$layout = $this->_helper->layout();	$this->bootstrap('layout');        $layout = $this->getResource('layout');

Metodos

Despues de recuperar la instancia de Zend_Layout podemos utilizar los siguientes métodos

Desactivar el layout por defecto

• $this->_helper->layout()->disableLayout();

Activar el layout

• $this->_helper->layout()->enableLayout()

Cambiar el layout por defecto


//desde el controlador

• $this->_helper->layout()->setLayout('main');

//desde la vista

• <?php $this->layout()->setLayout('footer'); ?>

Asignar variables


//en el  Action

• $this->_helper->layout()->assign('footer', 'footer.phtml');

O

• $this->_helper->layout()->usuario = 'carlos Fernando';

En el layout

• echo $this->layout()->usuario;

Diseñar el Layout

Cuando nos enfrentamos al diseño de nuestro layout comienza el tiempo a hacer de las suyas, fácilmente perdemos tiempo valioso que puede ser “invertido” en temas propios del desarrollo. Aquí aparecen algunos aliados importantes, al igual que nuestro Zend Framework  en PHP, en el diseño de  CSS aparecen varios framework  como un kit de poderosas herramientas para desarrollo rápido de aplicaciones y sitios web, aportando la magnífica idea de recopilar un sinnúmero de clases que nos permitirán en corto tiempo tener una estructura organizada, limpia y de fácil configuración, en mi caso particular me llamo mucho la atención Twitter Bootstrap( less css http://lesscss.org), desarrollado  por  ingenieros de Ttwitter , utilizando  la semántica de  HTML 5 y bajo la modalidad de open source. La versión actual es la 2.0.3 que trabaja sobre diseños fijos, fluidos o basados sobre porcentajes y sensibles (responsive) a dispositivos móviles

Descarga de libreria
https://github.com/twitter/bootstrap.


Inicializar CSS en nuestro Bootstrap


protected function _initTwitterBootstrap()
   {
       $this->bootstrap('View');
       $view = $this->getResource('View');
       $view->headMeta()->appendName('viewport', "width=device-width, initial-scale=1.0");
       $view->headLink()->appendStylesheet($view->baseUrl("css/bootstrap.css"));
       $view->headLink()->appendStylesheet($view->baseUrl("css/bootstrap-responsive.css"));
}


bootstrap.css librería básica
bootstrap-responsive.css nos permite generar sitios sensibles a las dimensiones de los dispositivos que navegan nuestra aplicación.


Como usarla
Para que Twitter Bootstrap funcione adecuadamente nuestra estructura del layout HTML debe ser igual a :

1. <!DOCTYPE html>
2. <html lang="es">
3.   ...
4. </html>

Plantilla básica Fija

Por defecto la plantilla básica de Twitter Bootstrap tiene 940 pixel de ancho (.container) en 12 columnas, además contiene 4  variantes para dispositivos móviles que veremos más adelante, como primera medida y facilidad de aprendizaje debemos tener  en cuenta la siguiente tabla y así darle organización a nuestro layout

.span12	.span11	.span10	.span9	.span8	.span7	.span6	.span5	.span4	.span3	.span2	.span1
940px	860px	780px	700px	620px	540px	460px	380px	300px	220px	140px	60px

Además para Twitter Bootstrap la clase .row  crea FILAS  y la clase .span  crea COLUMNAS.  Vamos a la practica!
Comenzare por el layout más simple una sola FILA y una sola  COLUMNA


<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8" />
<title>Layout ZendFramework</title>
<link href="css/bootstrap.css" rel="stylesheet">
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="row">
<div class="span12">
….
</div>
<div>
</div>
</body>
</html>


El siguiente ejemplo tiene una FILA y 2 COLUMNAS y así podríamos hacer varias modificaciones, lo más importante a tener en cuenta es que la suma de los números utilizados en  el elemento SPAN (.spanX) no supere las 12 columnas que tiene por defecto la plantilla fija.
las siguientes combinaciones de .span válidas


.span6    y  .span6  (6+6)     = 2 Columnas a 460 Pixel
.span4    y  .span 8    (4+8)  = 2 Clumnas  300 y 620 Pixel
.span10 y  .span2   (10+2)  = 2 Columnas 780 y 140 Pixel


<div class="container">
<div class="row">
<div class="span6">
<h1>una FILA, DOS COLUMNA </h1>
</div>
<div class="span6">
<h1>una FILA, DOS COLUMNA </h1>
</div>
</div>
</div>
Tambien podrías hacer
<div class="row">
<div class="span12">
Una FILA que contiene otra FILA dividida en DOS Columnas
<div class="row">
<div class="span6">COLUMNA 1</div>
<div class="span6">COLUMNA 2</div>
</div>
</div>
</div>

El solo hecho de tener    <div class="container"> esta clase nos indica que nuestra aplicación será visualizada a 940Pixel y si el dispositivo donde se visualiza no tiene esta resolución aparecerá la barra horizontal inferior para hacer el scroll, algo que no es bien visto de nivel profesional.

Plantilla básica flexible

Para evitar los inconvenientes de las plantillas fijas podemos trabajar con base en los porcentajes según lo permita el dispositivo de visualización, para eso simplemente cambiamos

<div class="container">
<div class="row">
Por
<div class="container-fluid">
<div class="row-fluid">


Plantilla básica Sensitiva
Con esta alternativa nuestro layout  será visualizado en diferentes dispositivos y resoluciones de pantallas de una forma adecuada, facilitando la navegabilidad por la aplicación o sitio Web. Como primera medida  se debe incluir


<meta name="viewport" content="width=device-width, initial-scale=1.0">


Además de:
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap/bootstrap-responsive.min.css" rel="stylesheet">


Herramientas
El incremento de uso del framework ha permitido la aparición de herramientas que nos permiten configurar la apariencia de fondos, botones, colores,etc

http://charliepark.org/bootstrap_buttons/
http://www.eyecon.ro/colorpicker-and-datepicker-for-twitter-bootstrap.htm
http://stylebootstrap.info/
http://blueimp.github.com/Bootstrap-Image-Gallery/