Bootstrap en Symfony2.1 con Twig

Ahora vamos a crear un Bundle para configurar una especie de tema con Bootstrap de twitter, primero vamos a definir que es un Bundle, para esto les dejo este link Bundle.

Crearé un Bundle dentro de una carpeta src/themes, donde integraré con el framework front-end Bootstrap para armar una vista de un portal de eventos con HTML5, CSS3 y aplicando Responsive Design.

Debo recordar que Symfony trabaja con un sistema moderno de motor de plantillas llamando twig, es necesario leer un poco de esto.

Paso 1: Creación de un Bundle.

nos dirigimos a través de nuestra consola a la carpeta de nuestro proyecto generado, que se llama colegio, para los que quieren ver los post anterior para que entren en contexto.
1. Crear proyecto con Symfony2.1
2. YUI Compressor con Symfony2.1

Ejecutamos el comando:

php app\console generate:bundle

Al ejecutar esto nos dará la bienvenido al generador de Bundle en consola y nos pedirá el namespace ahí escribiremos: Themes/BootstrapBundle

Esto quiere decir que creará una carpeta llamada themes dentro de la carpeta src/ y dentro de la carpeta Themes/ creará una carpeta llamada BootstrapBundle que es nuestro nuevo Bundle.

Enter y después nos pedirá un nombre para nuestro nuevo Bundle:

En la imagen anterior el generador nos recomiendo un nombre, así que le damos enter aceptando la sugerencia. Ahora nos pedirá donde es que se creará los directorios de los Bundles, el generador nos recomendará dentro de la carpeta src/ asi que haciendo ENTER lo aceptamos.

Ahora nos pedirá el formato que deseamos que tenga nuestro nuevo Bundle, el generador nos recomienda Anotaciones y haciendo enter también lo aceptamos.

Ahora nos pedirá si queremos generar todo el conjunto de directorios escribimos "yes", por que mas adelante también querremos usar las traducciones.

Luego nos pide confirmación y le damos entes al "yes",  también nos pide si queremos que actualicemos el kernel y le damos enter al "yes,  de ahí nos pide para actualizar el routing y también le daremos enter al yes

Ahora vemos nuestra estructura de nuestro nuevo Bundle:

Ahora por que he creado una carpeta Themes y dentro recién crear un Bundle para Bootstrap, bueno sucede q es un tema de orden, si desarrollo un Bundle para  solo pintar entonces lo empaqueto dentro de Themes y así puedo organizar mis Bundles por tipos, algunos colegas no piensan que esa es la funcionalidad de un Bundle, pero en temas de análisis me parece que es la mejor forma.

Paso 2: Descargamos Bootstrap

Descargamos las librerías de Bootstrap  y descomprimimos y ahí veremos 3 carpetas css, js, img, el contenido de cada uno de estas carpetas lo copiamos y lo pegamos dentro de la carpeta public de nuestro Bundle que coincidente mente también tiene carpetas con los mismos nombres excepto con la carpeta img no existe para ello creamos la carpeta img y pegamos el contenido debería quedar así la estructura:

En la imagen anterior vemos la estructura con los archivos del bootstrap añadidos y he seleccionado los archivos con extensión .min ello pueden borrarla no los necesitamos, por que? bueno por que seguramente editaremos y ademas contamos con el YUI Compressor para comprimir nuestros CSS y JS, esto lo explique en mi post anterior.

Paso 3: Editamos la base.html.twig

Este archivo se encuentra en app/Resources/views/base.html.twig Este archivo es la base de nuestra plantilla y la llenaremos de codigo HTML5 con bloques de twig. Vemos que ya tiene los bloques por defecto así que lo dejamos tal cual pueden agregar los metas que crean necesarios le agregué el lang y un meta por mi parte.

Ahora vamos a crear el layout.html.twig en esta ruta:  verán que esta dentro de la carpeta views y fuera de la carpeta Default.

En la imagen anterior señalamos un archivo que estará vacío y lo codificamos y dejamos de la siguiente manera:

En la imagen anterior definimos 3 bloques principales una para los css el otro para el contenido html y el tercero para archivos js, también vemos el uso de los YUI Compressor para comprimir todos los archivos que usemos, también vemos en la linea 17 que agregué el jquery descargate el código no compreso y pégalo en la carpeta public/js/jquery.js, ahora dentro de la carpeta Default está un archivo llamado index.html.twig
este archivo solo tiene un saludo con una variable lo editarems y quedará así mas o menos:

En la imagen anterior vemos como estoy heredando el layout.html.twig que está fuera y dentro del bloque body pongo la variable que estaba.

Paso 4: Ejecutando nuestro controlador

Cuando creamos nuestro Bundle por defecto crea un controlador Default en la carpeta Controller y sus vistas por controlador en la carpeta views/Default/, el controlador tiene su metodo index que envía un saludo y para problar todo Bundle recién creado lo hacemos con la siguiente ruta:
 http://local.colegio.com/app_dev.php/hello/Johnny

por que hello/Johnny, bueno si recuerdan cuando creamos un Bundle dijimos que por el formato anotaciones, bueno esto hace que sobre cada método se indique la forma de como llegar a ese metodo vemos el indexAction de nuestro controlador Default:

En la imagen anterior vemos que para llegar a este metodo tiene que ser concatenando al nuestra URL http://local.colegio.com/app_dev.php + /hello/Johnny, en este caso {name} es variable puede ir cualquier texto. Ahora vayamos al navegador y vemos que sale con esa URL.

Ahora vemos el código fuente como lo ha comprimido :

Vemos en la imagen anterior que solo ha creado un archivo CSS y un archivo JS apesar que usamos varios, sucede que el YUI Compressor lo comprimió todos mis assets a un solo archivo respectivamente.

Ahora ya tenemos el bootstrap integrado en un Bundle listo para usar todos sus componentes, haré algo para probar el estilo y el responsive design.

Después de repasar el código de Bootstrap en primera instancia obtengo esto:

El código es el siguiente:

{% extends 'ThemesBootstrapBundle::layout.html.twig' %}

{% block body -%}
<div class="container">
<div class="row">
<div class="span12">
LOGO
</div>
</div>
   <div class="navbar navbar-inverse">
   <div class="navbar-inner">
   <div class="container">
   
   <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
   <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
   <span class="icon-bar"></span>
   <span class="icon-bar"></span>
   <span class="icon-bar"></span>
   </a>
   
   <!-- Be sure to leave the brand out there if you want it shown -->
   <a class="brand" href="#">Project name</a>
   
   <!-- Everything you want hidden at 940px or less, place within here -->
   <div class="nav-collapse collapse">
   <!-- .nav, .navbar-search, .navbar-form, etc -->
   <ul class="nav">
   <li class="active">
   <a href="#">Home</a>
   </li>
   <li><a href="#">Link</a></li>
   <li><a href="#">Link</a></li>
   </ul>  
   </div>
   
   </div>
   </div>
   </div>
   <div class="row">
    <div class="span12">
   <div id="myCarousel" class="carousel slide">
   <!-- Carousel items -->
   <div class="carousel-inner">
   <div class="active item">
    <img src="http://lorempixel.com/800/250/nature/1/">
   </div>
   <div class="item"><img src="http://lorempixel.com/800/250/nature/2/"></div>
   <div class="item"><img src="http://lorempixel.com/800/250/nature/3/"></div>
   </div>
   <!-- Carousel nav -->
   <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
   <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
   </div>    
    </div>
   </div>
   <div class="row">
    <div class="span12">
    Hello {{ name }}!
    </div>
   </div>
</div>
{% endblock %}

Debo agregar q para que funcione el Slide o carrusel de imagenes he creado un archivo llamado script.js

Y contiene este código:

Y en el layout.html.twig agregamos la ruta del script para que lo comprima y lo agregue al script generado

Ahora solo limpie la caché del proyecto y recompile los assets nuevamente:

php app/console cache:clear

php app/console assets:install web --symlink

Como último paso vamos a poner a nuestro Bundle que cargue por defecto y eliminar del registro a nuestro DemoBundle ya que solo sirve de referencia.

en la ruta app/AppKernel.php eliminamos la instancia que hacen al Bundle DemoBundle

Una vez borrado esa linea de código, nos vamos al archivo app/config/routing_dev.yml ahí veremos 3 llamadas al AcmeBundle tambien lo eliminamos el siguiente segmento:

Ahora por último vamos a nuestro controlador Default y hacer modificaciones en la ruta de llegada al método indexAction y lo dejamos así:

Aya no olvidar que en la vista (index.html.twig) del controlador Default está imprimiendo Hello {name}, tienes que borrar {name} y eso es todo :)


Ahora solo limpie la caché del proyecto y recompile los assets nuevamente:

php app/console cache:clear

php app/console assets:install web --symlink

veremos el resultado:

Buenos ahora si puedes usar todas las bondades que te da Bootstrap para usar sus componentes queda en sus manos aplicar las diversas formas.

Espero mas adelante usar precompiladores de CSS y JS para trabajar Stylus y CoffeScript respectivamente espero tener tiempo.

espero sus comentarios. Nos leemos