Las cookies nos permiten ofrecer nuestros servicios. Al utilizar nuestros servicios, aceptas el uso que hacemos de las cookies. Más Información. Aceptar

Symfony2 Tutorial: Vista: plantillas con Twig

Sergio Yamuza
  • Escrito por Sergio Yamuza el 14 de Septiembre de 2015
  • 3 min de lectura | Backend
Symfony2 Tutorial: Vista: plantillas con Twig

Como vimos en el capítulo anterior, el controlador se encarga de manejar cada petición entrante en la aplicación. Un action debe contener alrededor de unas 30 líneas de código tan sólo, y esto es porque se debe delegar en otras acciones, por ejemplo, en servicios o repositorios de una entidad.


Cuando el controlador necesita generar contenido en formato HTML o CSS, encarga ese trabajo al motor de plantillas.

Una plantilla es un archivo de texto que puede generar cualquier otro formato basado en texto (HTML, XML, CSV, etc.). Hasta ahora, lo más común era utilizar plantillas PHP como la siguiente:

Symfony2 incluye un motor de plantillas llamado Twig , mucho más flexible, rápido y seguro que PHP. Las plantillas son más legibles ya que su código se simplifica notablemente.

Twig incluye una gran número de etiquetas y filtros listos para utilizar , los cuales permiten formatear la salida de una fecha, traducir textos, truncar una cadena, etc. .También existe la posibilidad de definir tus propias extensiones de Twig.

Vemos ahora cómo quedaría la plantilla anterior:


Twig es muy rápido porque todas las plantillas se compilan a código PHP antes de ejecutarlas. Las plantillas compiladas se guardan en /app/cache, y se compilan de nuevo automáticamente cada vez que se realiza un cambio estando en el entorno de desarrollo.

Sintaxis de Twig

{{ ... }} Sirve para mostrar el contenido de una variable o el resultado de alguna operación.

{% ... %} Se utiliza para definir la lógica de la vista, es decir, la forma en la que se muestran los contenidos de la plantilla. También se puede utilizar para la herencia de plantillas o para crear y asignar variables.

{# ... #} Se utiliza para añadir comentarios de una o varias líneas

{{ 'symfony framework'|capitalize }} Con el caracter | se indica el uso de un filtro. Los filtros permiten realizar acciones sobre las variables antes de mostrarlas. En este caso, capitalize muestra el primer caracter de la cadena en mayúscula. El resultado sería: Symfony framework . Otros ejemplos de filtros predefinidos:


Además, permite hacer cosas que con PHP no podríamos, como controlar los espacios en blanco generados por el código o combinar el uso de un bucle for con una condición if :

Herencia de plantillas y layout

Las plantillas de una aplicación suelen tener en común varios elementos de la vista: header , sidebar , footer , etc. La herencia de plantillas permite crear una plantilla base llamada layout , que contiene todos los elementos comunes del sitio definidos como bloques.


Después, existe la posibilidad de que otras plantillas hijas hereden del layout y rellenen o modifiquen esos bloques. Por convención, el nombre del layout suele ser base.html.twig .


La plantillas hija pueden modificar el contenido de los bloques volviendo a definirlos o dejarlos tal como están en la plantilla base.


La clave aquí reside en el uso de la etiqueta {% extends %} . De esta forma el motor de plantillas sabe que primero tiene que procesar la plantilla base, creando los bloques de contenido correspondientes.

Si queremos añadir contenido a algún bloque de la plantilla padre pdemos utilizar la función {{ parent() }} . Por ejemplo, para añadir un tercer enlace en el menú de navegación:

Nombre y localización de las plantillas

Podemos encontrar plantillas en dos localizaciones diferentes:

  • /app/Resources/views/ : donde se almacenan las plantillas de la aplicación. Aquí también se pueden redefinir plantillas de otros bundles de Symfony para sobrescribirlas.

  • ruta/hasta/el/bundle/Resources/views/ : los bundles almacenan sus propias plantillas en el directorio Resources/views/ de cada bundle.

Symfony2 identifica a cada plantilla con la sintaxis especial bundle:controlador:plantilla . La nomenclatura para referirse a las plantillas es la misma que se emplea para identificar a los controladores de la aplicación.

A parir del ejemplo definido en la documentación de Symfony, vamos a anaizar la estructura de la siguiente plantilla: AcmeBlogBundle:Blog:index.html.twig

  • AcmeBlogBundle : (bundle) la plantilla se encuentra dentro del bundle AcmeBlogBundle (por ejemplo, /src/Acme/BlogBundle ).

  • Blog : (controlador) indica que la plantilla se almacena en el subdirectorio Blog de Resources/views .

  • index.html.twig : (plantilla) el nombre del archivo que guarda la plantilla es index.html.twig . La ruta completa de la plantilla sería /src/Acme/BlogBundle/Resources/views/Blog/index.html.twig .

Podemos ver que cada plantilla incluye 2 extensiones en su nombre, correspondientes al formato y motor de la plantilla:

Hojas de estilo y javaScript

Para los archivos CSS se utiliza la etiqueta stylesheet dentro de la etiqueta head . La etiqueta javascripts se define justo antes de la etiqueta de cierre </body> .

Para añadir un CSS o javaScript en un plantilla determinada pordemos hacer uso de nuevo de la función {{ parent() }}


La función asset apunta directamente al directorio /web de la aplicación. Va entre la anotación {{ }} para volcar el contenido de la ruta en el atributo href del enlace.

Siguiendo las buenas prácticas de Symfony, los assets (CSS y javaScript) de nuestra aplicación, residen directamente en el directorio /web :


/web/css/post.css
/web/js/main.js


Para referenciar un archivo CSS o javaScript contenido en el directorio Resources/public de otro bundle , se haría de la siguiente forma. Ejecutamos el siguiente comando

$ php app/console assets:install directorio [--symlink]


Este comando crea enlaces simbólicos en el directorio
/web , que apuntan a los originales contenidos en el bundle . Se referencian entonces de la siguiente forma:


acmedemo
es el resultado de la concatenación de nombre del proyecto + nombre del bundle .

Vistas para la aplicación de ejemplo my_blog


# /app/Resources/views/

- base.html.twig
- public
    - home.html.twig
    - post.html.twig
    - archive
        - category.html.twig
        - tag.html.twig


Este post ha sido producido gracias a la colaboración de
Sopinet Software

Estas son algunas de las empresas que ya confían en OpenWebinars

Profesores y profesionales

Nuestros docentes son profesionales que trabajan día a día en la materia que imparten

Conviértete en profesor de OpenWebinars