Clase 6 twig
19
Twig Realizada por: Gonzalo Alonso |@GonzaloAlonsoD Diego Barros |@Inmzombie Para: Hydras C&S |@hydras_cs Basada en Libro Symfony 2 en español Nacho Pacheco y The Book
description
www.hydrascs.com
Transcript of Clase 6 twig
Twig
Realizada por:Gonzalo Alonso |@GonzaloAlonsoDDiego Barros |@Inmzombie
Para: Hydras C&S |@hydras_csBasada en Libro Symfony 2 en español Nacho Pacheco y The Book
Plantillas
Una plantilla simplemente es un archivo de texto que puede generar cualquier formato basado en texto (HTML, XML, CSV, etc.)
<!DOCTYPE html> <html> <head> <title>Welcome to Symfony!</title> </head> <body> <h1><?php echo $page_title ?></h1>
<ul id="navigation"> <?php foreach ($navigation as $item): ?> <li> <a href="<?php echo $item->getHref() ?>"> <?php echo $item->getCaption() ?> </a> </li> <?php endforeach; ?> </ul> </body></html>
<!DOCTYPE html> <html> <head> <title>Welcome to Symfony!</title> </head> <body> <h1>{{ page_title }}</h1> <ul id="navigation"> {% for item in navigation %} <li><a href="{{ item.href }}">{{ item.caption }}</a></li> {% endfor %} </ul> </body></html>
Sintaxis especiales
{{ ... }} «Dice»
{% ... %} «Hace»
{# ... #} «Comenta»
{{ title|upper }} «Filtro»
La siguiente función, utiliza una etiqueta for estándar y la función cycle para imprimir diez etiquetas div, alternando entre clases par e impar:
{% for i in 0..10 %} <div class="{{ cycle(['odd', 'even'], i) }}"> <!-- some HTML here --> </div>{% endfor %}
Manejando las vistas con Twig¿Por qué Twig?
Las plantillas son simples y no procesan etiquetas PHP. Está destinado a expresar la presentación, no la lógica del programa.● controlar el espacio en blanco● cuenta con un recinto de seguridad● escape de salida automático y contextual● incluye funciones personalizadas● filtros que sólo afectan a las plantillas
● contiene pequeñas características que facilitan la escritura de plantillas y estas son más concisas.
<ul> {% for user in users if user.active %} <li>{{ user.username }}</li> {% else %} <li>No users found</li> {% endfor %}</ul>
Guardando en caché plantillas Twig
Cada plantilla Twig se compila hasta una clase PHP nativa. Directorio app/cache/{entorno}/twig
Modo debug desactivado (prod), regenerar las plantillas.
Modo debug (dev), compilación automática.
Plantillas, herencia y diseñoUna plantilla se puede decorar con otra. La herencia
permite tener una plantilla base.
<!DOCTYPE html><html> <head> <title>{% block title %}Welcome!{% endblock %}</title> {% block stylesheets %}{% endblock %} </head> <body> <div class="container">{% block body %}{% endblock %}</div> {% block javascripts %}{% endblock %} </body></html>
Una plantilla hija puede extender el diseño base y reemplazar cualquiera de sus bloques.
{% extends '::base.html.twig' %}
{% block title %}My cool blog posts{% endblock %}
{% block body %} {% for entry in blog_entries %} <h2>{{ entry.title }}</h2> <p>{{ entry.body }}</p> {% endfor %}{% endblock %}
A tener en cuenta{% extends %} primer etiqueta.Mas {% block %} mejor.Contenido duplicado un nuevo {% block %}.Obtener contenido {{ parent() }}.
{% block sidebar %} <h3>Table of Contents</h3> {# ... #} {{ parent() }}{% endblock %}
Nomenclatura y ubicación de plantillas
Symfony2 utiliza una sintaxis de cadena paquete:controlador:plantilla
AcmeBlogBundle:Blog:index.html.twig
● AcmeBlogBundle: (paquete) src/Acme/BlogBundle.
● Blog: (controlador) Resources/views.
● index.html.twig: (plantilla) nombre real.
Nomenclatura y ubicación de plantillas
ruta final src/ Acme/BlogBundle/Resources/views/Blog/index.html.twig.
AcmeBlogBundle::layout.html.twig:Plantilla base específica para AcmeBlogBundleResources/views/layout.html.twig
::base.html.twig:Esta sintaxis se refiere a una plantilla o diseño base de la aplicación.app/Resources/views/
Sufijo de plantilla
paquete:controlador:plantilla.(formato).(motor)
● AcmeBlogBundle:Blog:index.html.twig— formato HTML, motor Twig
● AcmeBlogBundle:Blog:index.html.php— formato HTML, motor PHP
● AcmeBlogBundle:Blog:index.css.twig— formato CSS, motor Twig
Incluyendo otras plantillas
{# src/Acme/ArticleBundle/Resources/views/Article/articleDetails.html.twig #}
<h2>{{ article.title }}</h2><h3 class="byline">by {{ article.authorName }}</h3>
<p> {{ article.body }}</p>
{# src/Acme/ArticleBundle/Resources/views/Article/list.html.twig #}{% extends 'AcmeArticleBundle::layout.html.twig' %}{% block body %} <h1>Recent Articles<h1> {% for article in articles %} {{ include( 'AcmeArticleBundle:Article:articleDetails.html.twig', { 'article': article } )}} {% endfor %}{% endblock %}
{ 'article': article } (arreglo con claves nombradas).Si tuviéramos que pasar varios elementos sería:{ 'foo': foo, 'bar': bar }.
Integrando controladores// src/Acme/ArticleBundle/Controller/ArticleController.phpclass ArticleController extends Controller{ public function recentArticlesAction($max = 3) { // hace una llamada a la base de datos u otra lógica $articles = ...; return $this->render( 'AcmeArticleBundle:Article:recentList.html.twig', array('articles' => $articles) ); }}
Integrando controladores{# src/Acme/ArticleBundle/Resources/views/Article/recentList.html.twig #}
{% for article in articles %} <a href="/article/{{ article.slug }}"> {{ article.title }} </a>{% endfor %}{# app/Resources/views/base.html.twig #}<div id="sidebar"> {{ render(controller( 'AcmeArticleBundle:Article:recentArticles', { 'max': 3 })) }}</div>
