martes, 4 de marzo de 2014

Como fusionar Symfony2 y Bootstrap

Hoy les quería dejar un How-To de como hago para fusionar Symfony2 y el Bootstrap de Twitter, de esa forma lograr tener unas mejores vistas y hacer uso de estos dos framework fantásticos, por eso para saltear algunos pasos les recomiendo tener descargado Symfony2 y la última versión estable del Bootstrap, ambos totalmente libres y esperando ser usados.

Figura 1: Como fusionar Symfony2 y Bootstrap

Los que les voy a explicar a continuación es la forma que yo utilizo para realizar la integración de estos dos framework, con lo cuál la idea es optimizar las plantillas y reutilizar código para continuar escalando.

Para saltear algunos pasos les dejo los enlaces para instalar Symfony2 en su servidor de pruebas:


Una vez que tengamos todo instalado, vamos a crear un Bundle con sus configuraciones por defectos de forma simple y rápida, para comprender la secuencias de comando les recomiendo leer su ayuda:

$ php app/console help generate:bundle

$ php app/console generate:bundle --namespace=Sistema/BlogBundle


Figura 2: Generación de Bundle

Ahora lo que vamos a modificar es el archivo base.html.twig donde vamos a utilizarlo siempre antes de cargar las plantillas, en él vamos a reemplazar por el siguiente código:

archivo: app/Resources/views/base.html.twig 

<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="UTF-8" />
        <title>{% block title %}Welcome!{% endblock %}</title>
        {% block stylesheets %}{% endblock %}
        <link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" />
    </head>
    <body>                                                       
        {% block body %}{% endblock %}                           
        {% block javascripts %}{% endblock %}                 
    </body>
</html>

Ahora vamos a ir al a la estructura del Bundle que creamos, que seguramente se encuentra en src/Sistema/BlogBundle/Resources y copiamos dentro del directorio public/ todo el contenido del bootstrap, osea todo el directorio css, js y fonts.

Figura 3: Directorio public/

Para poder publicar los assets de nuestro Bundle vamos a ejecutar:

$ php app/console assets:install web

Figura 4: Publicar os assets del Bundle

Dentro del directorio views/ del Bundle, vamos a crear un archivo llamado layout.html.twig y que va a contener el siguiente código:

archivo: src/Sistema/BlogBundle/Resources/views/layout.html.twig 

{% extends '::base.html.twig' %}

{% block stylesheets %}
<link href="{{ asset('bundles/sistemablog/css/bootstrap.css') }}" type="text/css" rel="stylesheet">
<link href="{{ asset('bundles/sistemablog/css/bootstrap-responsive.css') }}" type="text/css" rel="stylesheet">
{% endblock %}

{% block body %}
{% endblock %}

{% block javascripts %}
<script type="text/javascript" src="{{ asset('bundles/sistemablog/js/bootstrap.js') }}"></script>
{% endblock %}

Ahora para finalizar lo único que nos queda es editar el archivo de la vista Default/ de la siguiente manera:

archivo: src/Sistema/BlogBundle/Resources/views/Default/index.html.twig

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

{% block body %}
<!-- Static navbar -->
    <div class="navbar navbar-default navbar-static-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </div>
<div class="container">
      <!-- Main component for a primary marketing message or call to action -->
      <div class="jumbotron">
        <h1>Hello {{ name }}</h1>
        <p>This example is a quick exercise to illustrate how the default, static and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
        <p>To see the difference between static and fixed top navbars, just scroll.</p>
        <p>
          <a class="btn btn-lg btn-primary" href="#" role="button">View navbar docs &raquo;</a>
        </p>
      </div>
    </div> <!-- /container -->
{% endblock %}

Figura 5: Pruebas en local sin el template de Bootstrap

Figura 6: Pruebas en local con la template de Bootstrap

Se puede ver que antes de visualizar esta vista extiende los contenidos del archivo layout.html.twig que a su vez se extiende de la estructura base.html.twig esta es una de las grandes ventajas de utilizar Twig en la capa de vista, además de los llamados block que en todos momento hacemos uso.

Como resultado podemos ver como desde las vistas de Symfony2 podemos convocar a las clases que se encuentran en el Bootstrap y hacer que nuestra aplicación adopte todo su estilo.

Ojalá le sea útil este pequeño How-To donde se muestra como integrar el Bootstrap de Twitter con las vistas de Symfony2 de tal forma que nos permita seguir escalando en todas las vistas de la aplicación.

Saludos!

Enlace | Symfony2 y Bootstrap

Entradas populares