Clase 6 twig

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

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) }}">

</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ño
Una 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 AcmeBlogBundle
Resources/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.php
class 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>

Clase 6 twig

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (8)

Similar a Clase 6 twig

Similar a Clase 6 twig (20)

Más de hydras_cs

Más de hydras_cs (9)

Clase 6 twig