Comparte en Facebook Twitter Google+

symfony-vistas-templates

En esta nueva clase de la serie introductoria a Symfony explicaremos el manejo de vistas con twig el impresionante motor de plantillas que viene con la distribución estándar de Symfony. En el post anterior explicamos como el controlador generaba la respuesta a la petición de la url,  ahora nos concentraremos un poco más en las plantillas y los recursos de CSS.

Symfony maneja sus plantillas con Twig, esto nos provee de una serie de funcionalidades como una sintaxis más legible y la herencia de plantillas la cual nos permite organizar de una manera más eficiente las secciones de nuestra página web, veamos el ejemplo del index del blog de la app demo.

http://127.0.0.1:8000/blog/

En el párrafo anterior les comenté que Twig manejaba herencia de plantillas, bueno noten la sentencia extends de la primera línea, esta nos está indicando que esa es nuestra plantilla padre donde seguramente están definidos los bloques que moldean el layout y de donde se llaman a las hojas de estilo (css) y otros recursos que nos ayudan del lado del cliente como javascript.

Todos los bloques que tenemos en index.html.twig ya estaban definidos en base.html.twig, en la herencia de plantillas los bloques hacen las veces de los métodos de una clase, y así mismo gracias a la programación orientada a objetos podemos sobrescribir bloques como sobrescribimos métodos, de hecho la plantilla index.html.twig está sobrescribiendo al bloque sidebar.

Al igual que con php, podemos llamar al método/bloque padre y luego extender su funcionalidad, esto lo hacemos al llamar a la función {{ parent() }} que nos renderiza el bloque sidebar padre y lo extiende agregando el contenido que nos arroja la función {{ show_source_code(_self) }} de la extensión de Twig SourceCodeExtension.

Los post son desplegados recorriendo a todos los post que nos devuelve el repositorio en el controlador como se vio en la clase anterior.

Este bucle es la versión de Twig del foreach de php, para imprimir el valor de una variable en Twig debes escribirla dentro  de {{  }}, y para el resto de sentencias como bucles y bifurcaciones debes usar {%%}.

Como pudes ver, las vistas manejan una sintaxis muy sencilla, el código es reutilizable gracias a la herencia y puede sobrescribirse en caso de ser necesario. Mi recomendación es que pruebes haciendo algunos cambios en esta app para que comprendas un poco mas sobre el funcionamiento de este componente.

Lecciones anteriores

Aprende PHP, Laravel y más por sólo 999 al mes: ver planes.

Lección anterior Introducción a Symfony IV, Controladores