Twig avanzado (sf2Vigo)

Twig avanzadoJavier Eguiluz Jornadas Symfony2 Galicia 25-26 noviembre 2011 #sf2Vigo

me presento • Javier Eguiluz • formador en Symfony2 y nuevas tecnologías

creador de http://symfony.es

apasionado de Symfony http://connect.sensiolabs.com/ profile/javier.eguiluz

objetivos de la sesión • Buenas prácticas • Trucos • Usos avanzados • Snipets

Si no sabes Twig, te vas a perder a partir de la siguiente transparencia

Aprende Twigen 5 minutos

«Twig es un lenguaje ymotor de plantillas PHP»

twig se puede usar en CualquierSymfony2 proyecto PHP

¿Por qué usar Twig?

$usuariopublic function getNombre(){ return $this->nombre;}

TWIG{{ usuario.nombre }}

PHPecho $usuario->getNombre()

PHP<?phpecho $usuario->getNombre();?>

PHP<?phpecho htmlspecialchars( $usuario->getNombre(), ENT_QUOTES, UTF-8);?>

TWIG {{ usuario.nombre }} PHP<?php echo htmlspecialchars($usuario->getNombre(), ENT_QUOTES, UTF-8); ?>

Mostrarinformación

{# ... #}{% ... %}{{ ... }}

<p> Hola {{ usuario }}Tienes {{ edad }} años yvives en {{ ciudad }} </p>

<p> Hola {{ usuario.nombre }}Tienes {{ usuario.edad }}años y vives en{{ usuario.ciudad }} </p>

{{ usuario.nombre }}1. $usuario["nombre"]2. $usuario->nombre3. $usuario->nombre()4. $usuario->getNombre()5. $usuario->isNombre()6. null

<?php Template.phpabstract class Twig_Template implements Twig_TemplateInterface{ // ... protected function getAttribute( $object, $item, array $arguments = array(), $type = Twig_TemplateInterface::ANY_CALL, $isDefinedTest = false) { // ...

twig-extDerick Rethans

http://github.com/derickr/twig-ext

Modificarinformación

<strong>Lorem ipsum</strong>dolor sit <em>amet</em>

<strong>Loremipsum</strong> dolorsit <em>amet</em>

Espaciosen blanco

<ul> <li> <a ... >XXX</a> </li> <li> ...

{% spaceless %}

{% spaceless %}<ul> <li> <a ... >XXX</a> </li> <li> ...{% endspaceless %}

<ul><li><a ... >XXX</a></li><li>...

Estructuras de control

{% for elemento in coleccion %} {# ... #}{% endfor %}

{% for clave, elemento in coleccion %} {# ... #}{% endfor %}

{% if condicion1 %} {# ... #}{% elseif condicion2 %} {# ... #}{% else %} {# ... #}{% endif %}

Herenciade plantillas

PORTADA

CONTACTO

# TITULO # # LATERAL # # CONTENIDOS #

# TITULO # layout.twig # LATERAL # # CONTENIDOS #

<html> <head> ... </head> layout.twig<body> <h1> {% block titulo %}{% endblock %} </h1> {% block contenidos %}{% endblock %} {% block lateral %}{% endblock %}</body></html>

<html> <head> ... </head> portada.twig<body> <h1> PORTADA </h1> <div id="contenidos">...</div> <div id="lateral">...</div></body></html>

portada.twig PORTADA<div id="contenidos">...</div><div id="lateral">...</div>

portada.twig{% extends "layout.twig" %} PORTADA <div id="contenidos">...</div> <div id="lateral">...</div>

{% extends "layout.twig" %} portada.twig{% block titulo %} PORTADA{% endblock %}{% block contenidos %} <div id="contenidos">...</div>{% endblock %}{% block lateral %} <div id="lateral">...</div>{% endblock %}

{% extends "layout.twig" %} contacto.twig{% block titulo %} CONTACTO{% endblock %}{% block contenidos %} <form>...</form>{% endblock %}{% block lateral %} <p>...</p>{% endblock %}

ya pasaron los5 minutos

DESARROLLOWEB ÁGIL CON todos los ejemplos que se muestranSYMFONY2 a continuación pertenecen al libro Desarrollo web ágil con Symfony2 (disponible próximamente) Javier Eguiluz

variables globales

# app/config/config.ymltwig: # ... globals: cp: 01001 iva: [1.04, 1.08, 1.18] version: 1.0.3

# app/config/config.ymltwig: # ... globals: cp: 01001 iva: [1.04, 1.08, 1.18] version: 1.0.3Precio {{ oferta.precio * iva[0] }}Coste de envío a {{ usuario.cp | default(cp) }}<footer> © now|date(Y) - v.{{ version }}</footer>

# app/config/config.ymltwig: # ... globals: global: cp: 01001 iva: [1.04, 1.08, 1.18] version: 1.0.3

# app/config/config.ymltwig: # ... globals: global: cp: 01001 iva: [1.04, 1.08, 1.18] version: 1.0.3Precio {{ oferta.precio * global.iva[0] }}Coste de envío a {{ oferta.cp | default(global.cp) }}<footer> © now|date(Y) - v.{{ global.version }}</footer>

servicios como variables globalesnamespace CuponOfertaBundleUtil;class Util{ static public function getSlug($cadena) { // ... return $slug; }}

# app/config/config.ymlservices: # ... cupon.utilidades: class: CuponOfertaBundleUtilUtil

# app/config/config.ymltwig: # ... globals: utilidades: @cupon.utilidades

depurando variables

<?php var_dump($oferta); ?>{% debug oferta %}

# app/config/config.ymlservices: twig.extension.debug: class: Twig_Extensions_Extension_Debug tags: - { name: twig.extension }

for ... else

{% for articulo in articulos %} {{ articulo.titulo }} {# ... #}{% endfor %}

{% for articulo in articulos %} {{ articulo.titulo }} {# ... #}{% else %} No hay artículos{% endfor %}

for ... if

Itera sólamente por las ofertas baratas

{% for oferta in ofertas if oferta.precio < 10 %} {# ... #}{% endfor %}

1.2{% for elemento in coleccion if condicion %} {# ... #}{% endfor %}

Itera sólamente por los amigos del usuario{% set usuarios = 1..30 %}{% set amigos = [12, 29, 34, 55, 67] %}

{% set usuarios = 1..30 %}{% set amigos = [12, 29, 34, 55, 67] %}{% for usuario in usuarios if usuario in amigos %} {# sólo 12 y 29 #}{% endfor %}

Operadoresde división

operación resultado{{ 12 / 7 }} 1.7142857142{{ 12 // 7 }} 1{{ 12 % 7 }} 5

creandovariables

{% set nombre = José García %}{% set edad = 27 %}{% set precio = 104.83 %}{% set conectado = false %}{% set tasaImpuestos = [4, 8, 18] %}

{% set perfil = { nombre: José García, perfiles: [usuario, admin], edad: 27, validado: true} %}

{% set nombreCompleto = nombre ~ ~ apellidos %}{% set experiencia = edad ~ años %}

{% set perfil %} Nombre: {{ usuario.nombre }} Apellidos: {{ usuario.apellidos }} Edad: {{ usuario.edad }} años Página: {{ usuario.url }}{% endset %}{{ perfil }}

{% set nombre, edad, activado = José, 27, false %}{{ nombre }}{{ edad }}{% if activado %}

espaciosen blanco

class DefaultController extends Controller{ {% if comentarios %} /** * Primera línea * Segunda línea */ {% endif %}

NOclass DefaultController extends Controller{ /** * Primera línea * Segunda línea */

SIclass DefaultController extends Controller{ /** * Primera línea * Segunda línea */

class DefaultController extends Controller{{% if comentarios %} /** * Primera línea * Segunda línea */{% endif %}

class DefaultController extends Controller{ {% if comentarios -%} /** * Primera línea * Segunda línea */ {%- endif %}

{% if condicion -%} {# ... #}{%- endif %}

class DefaultController extends Controller{ {% if comentarios -%} /** * Comentario */ {%- else -%} /** * @Anotacion(...) */ {%- endif %}

formatearinformación

{{ %.0f|format(time * 1000) }} ms

{{ %.0f|format(time * 1000) }} ms{{ %0.2f|format(time * 1000) }} ms

macrospolimórﬁcas

{# formulario.html.twig #}{% macro campo(nombre, tipo, valor) %} <input type="{{ tipo }}" name="{{ nombre }}" value="{{ valor }}" />{% endmacro %}

{% from formularios.html.twig import campo as campo %}

{% from formularios.html.twig import campo as campo %}<table> {{ campo(nombre, text, José) }} {{ campo(apellidos, text, García Pérez) }} {{ campo(telefono, text) }}</table>

{% from formularios.html.twig import campo as campo %}<table> {{ campo(nombre, text, José) }} {{ campo(apellidos, text, García Pérez) }} {{ campo(telefono, text) }}</table><ul> {{ campo(nombre, text, José) }} {{ campo(apellidos, text, García Pérez) }} {{ campo(telefono, text) }}</ul>

{# formulario.html.twig #}{% macro campo(nombre, tipo, valor) %} <input type="{{ tipo }}" name="{{ nombre }}" value="{{ valor }}" />{% endmacro %}{% macro fila(nombre, tipo, valor) %} <tr> <td>{{ nombre | capitalize }}</td> <td>{{ _self.campo(nombre, tipo, valor) }}</td> </tr>{% endmacro %}

{# formulario.html.twig #}{% macro campo(nombre, tipo, valor) %} <input type="{{ tipo }}" name="{{ nombre }}" value="{{ valor }}" />{% endmacro %}{% macro item(nombre, tipo, valor) %} <li> {{ _self.campo(nombre, tipo, valor) }} </li>{% endmacro %}

{% from formularios.html.twig import campo as campo %} {{ campo(nombre, text, José) }} {{ campo(apellidos, text, García Pérez) }} {{ campo(telefono, text) }}

{% from formularios.html.twig import fila as campo %}<table> {{ campo(nombre, text, José) }} {{ campo(apellidos, text, García Pérez) }} {{ campo(telefono, text) }}</table>

{% from formularios.html.twig import item as campo %}<ul> {{ campo(nombre, text, José) }} {{ campo(apellidos, text, García Pérez) }} {{ campo(telefono, text) }}</ul>

ﬁltros dependientes del entorno

public function getFilters(){ return array(longitud => new Twig_Filter_Method($this, longitud) );}function longitud($valor){ return strlen($valor);}

function longitud($valor){ return mb_strlen($valor, EUC-JP);}

public function getFilters(){ return array( longitud => new Twig_Filter_Method( $this, longitud, array(needs_environment => true) ) );}

function longitud(Twig_Environment $entorno, $valor){ $codificacion = $entorno->getCharset(); return mb_strlen($valor, $codificacion);}

class Twig_Environment{ const VERSION = 1.1.2; // ... $options = array_merge(array( debug => false, charset => UTF-8, base_template_class => Twig_Template, strict_variables => false, autoescape => true, cache => false, auto_reload => null, optimizations => -1, ), $options); // ...}

notación bundle

{% includeMiBundle:Carpeta:plantilla.html.twig %}

{% includeMiBundle:Carpeta:plantilla.html.twig %} src/MiAplicacion/ MiBundle/ Resources/ views/ Carpeta/ plantilla.html.twig

{% includeMiBundle:Carpeta:plantilla.html.twig %}{% include MiBundle:Carpeta:Subcarpeta/ plantilla.html.twig %}

{% includeMiBundle:Carpeta:plantilla.html.twig %}{% include MiBundle:Carpeta:Subcarpeta/ plantilla.html.twig %}{% include MiBundle:Carpeta:Subcarpeta1/ Subcarpeta2/plantilla.html.twig %}

{% includeMiBundle:Carpeta:plantilla.html.twig %}{% includeMiBundle::Carpeta/plantilla.html.twig %}

{% includeMiBundle:Carpeta:plantilla.html.twig %}{% includeviews/Carpeta/plantilla.html.twig %}

opciones deconﬁguración

# app/config/config.ymltwig: autoescape: true auto_reload: ~ cache: %kernel.cache_dir%/twig charset: %kernel.charset% debug: %kernel.debug% strict_variables: ~

$twig = new Twig_Environment($loader, array( debug => true, strict_variables => true, charset => UTF-8, cache => __DIR__./cache));

# app/config/config.yml twig: base_template_class: Twig_Template<?phpclass __TwigTemplate_82262eae3f96052ef64432a9ddc53915 extends Twig_Template{ protected $parent; public function __construct(Twig_Environment $env) { // ... }

# app/config/config.ymltwig: # ... exception_controller: SymfonyBundleTwigBundleControllerExceptionController::showAction

# app/config/config.ymltwig: # ... form: resources: [ ... ]

formulariospersonalizados

modificar campos de una plantilla{{ form_row(noticia.url) }}

modificar campos de una plantilla{{ form_row(noticia.url) }}Label

modificar campos de una plantilla{{ form_row(noticia.url) }}Label{% block url_widget %}{% spaceless %} {% set type = type|default(url) %} {{ block(field_widget) }}{% endspaceless %}{% endblock url_widget %}

{{ form_row(noticia.url) }}{% form_theme form _self %}{% block url_widget %} {% set type = url %} <em>http://</em> {{ block(field_widget) }}{% endblock url_widget %}

{{ form_row(noticia.url) }}{% form_theme form _self %}{% block url_widget %} {% set type = url %} <em>http://</em> {{ block(field_widget) }}{% endblock url_widget %}Label http://

modificar campos de varias plantillas{# src/.../Resources/views/Form/form.html.twig #}{% block url_widget %} {% set type = url %} <em>http://</em> {{ block(field_widget) }}{% endblock url_widget %}

{% form_theme form MiBundle:Form:form.html.twig %}{{ form_row(noticia.titular) }}{{ form_row(noticia.publicada) }}{{ form_row(noticia.url) }}

modificar todos los formularios# app/config/config.ymltwig: # ... form: resources: - form_div_layout.html.twig

# app/config/config.ymltwig: # ... form: resources: - form_table_layout.html.twig

{% use "form_div_layout.html.twig" %}{% block field_row %}{% spaceless %} <tr> <td> {{ form_label(form, label|default(null)) }} </td> <td> {{ form_errors(form) }} {{ form_widget(form) }} </td> </tr>{% endspaceless %}{% endblock field_row %}{# ... #}

{% use "form_div_layout.html.twig" %}{% block field_row %} {# ... #}{% endblock %}{% block form_errors %} {# ... #}{% endblock %}{% block hidden_row %} {# ... #}{% endblock %}{% block form_widget %} {# ... #}{% endblock %}

# app/config/config.ymltwig: # ... form: resources: - MiBundle:Form:form.html.twig

mostrandocampos de fecha

{{ form_label(fecha) }}{{ form_errors(fecha) }}{{ form_widget(fecha.year) }}{{ form_widget(fecha.month) }}{{ form_widget(fecha.day) }}

generando código

«Twig genera confacilidad cualquier tipo de contenido»

public function indexAction() Symfony2{ $em = $this->getDoctrine()->getEntityManager(); $entities = $em->getRepository({{ bundle }}:{{ entity }}) ->findAll();{% if annotation == format %} return array(entities => $entities);{% else %} return $this->render({{ bundle }}: {{ entity|replace({: /}) }}:index.html.twig, array(entities => $entities));{% endif %}}

easybook3/* page size, margins, headers & footers--------------------------------------------- */@page { size: {{ edition.page_size }};}{% if edition.two_sided %}@page:right { margin: {{ edition.margin.top|default(25mm) }}{{ edition.margin.outter|default(20mm) }}{{ edition.margin.bottom|default(25mm) }}{{ edition.margin.inner|default(30mm) }}; @top-left { /* ... */ }

{% block NamespaceDeclaration %}{% if namespace %} Doctrine2namespace {{ namespace }}; ActiveRecorduse {{ namespace }}Base{{ classname }} as Base{{ classname }};{% else %}use Base{{ classname }} as Base{{ classname }};{% endif %}{% endblock %}{% block DocBlock %}/** * ActiveRecord class. */{% endblock %}{% block ClassDeclaration %}class {{ classname }} extends Base{{ classname }}{% endblock %}{{% block Body %} // add your code here{% endblock %}}

https://github.com/cedriclombardot/TwigGenerator

twig.js

<select id="ciudad"> {% for ciudad in ciudades %} <option value="{{ ciudad.slug }}"> {{ ciudad.nombre }} </option> {% endfor %}</select>

https://github.com/FriendsOfSymfony/FOSJsRoutingBundle

{% twig_js name="perfil" %}Nombre: {{ nombre }}Apellidos: {{ apellidos }}

https://github.com/schmittjoh/twig.js

ﬂexible

{{ ... | length }}Tienes {{ amigos|length }} amigosy tu nombre tiene{{ nombre|length }} letras

{{ ... | length }} count( )Tienes {{ amigos|length }} amigosy tu nombre tiene{{ nombre|length }} letras

{{ ... | length }} count( )Tienes {{ amigos|length }} amigosy tu nombre tiene{{ nombre|length }} letras strlen( )

{{ ... in ... }}{% if fecha in [2005, 2006] %} Eres un early-adopter{% endif %}{% if password in login %} La contraseña no puede ser una parte del login{% endif %}

{{ ... in ... }} in_array( ){% if fecha in [2005, 2006] %} Eres un early-adopter{% endif %}{% if password in login %} La contraseña no puede ser una parte del login{% endif %}

{{ ... in ... }} in_array( ){% if fecha in [2005, 2006] %} Eres un early-adopter{% endif %} strpos( ){% if password in login %} La contraseña no puede ser una parte del login{% endif %}

{% for letra in a|upper..inicial|default(z)|upper %} {{ letra }}{% endfor %}

{% for letra in a|upper..inicial|default(z)|upper %} {{ letra }}{% endfor %}{% filter upper %}{% for letra in a..inicial|default(z) %} {{ letra }}{% endfor %}{% endfilter %}

{% for letra in a|upper..inicial|default(z)|upper %} {{ letra }}{% endfor %}{% filter upper %}{% for letra in a..inicial|default(z) %} {{ letra }}{% endfor %}{% endfilter %}{% for letra in a..inicial|default(z) %} {{ letra | upper }}{% endfor %}

propiedades variables

{% set bundles = { AsseticBundle => .../vendor/..., BackendBundle => .../src/..., CiudadBundle => .../src/..., DoctrineBundle => .../vendor/..., ...} %}

NO{{ bundles.AsseticBundle }}

SI{% set nombre = AsseticBundle %}{{ bundles[nombre] }}

{% for name in bundles|keys|sort %}<tr> <th>{{ name }}</th> <td>{{ bundles[name] }}</td></tr>{% endfor %}

{% set usuarios = [ { email: ..@.. }, { movil: 9.... }] %}

{% set usuarios = [ { email: ..@.. }, { movil: 9.... }] %}{% for usuario in usuarios %} {{ usuario.nombre }} Contacto {{ usuario.????? }}{% endfor %}

{% set usuarios = [ { email: ..@.., contacto: email }, { movil: 9...., contacto: movil }] %}

{% set usuarios = [ { email: ..@.., contacto: email }, { movil: 9...., contacto: movil }] %} {{ usuario.contacto }} resultado email

{% set usuarios = [ { email: ..@.., contacto: email }, { movil: 9...., contacto: movil }] %} {{ usuario[contacto] }} resultado ERROR

{% set usuarios = [ { email: ..@.., contacto: email }, { movil: 9...., contacto: movil }] %} {{ usuario[usuario.contacto] }} resultado ..@..

{% set usuarios = [ { email: ..@.., contacto: email }, { movil: 9...., contacto: movil }] %} {{ attribute(usuario, usuario.contacto) }}

{% set usuarios = [ { email: ..@.., contacto: email }, { movil: 9...., contacto: movil }] %} {{ attribute(usuario, usuario.contacto) }} resultado ..@..

1.2{{ attribute(objeto, propiedad) }}{{ attribute(objeto, expresion) }}{{ attribute(producto, foto ~ i) }}

1.2{{ attribute(objeto, metodo) }}{{ attribute(objeto, metodo, argumentos) }}

herenciadinámica

{% extends usuario.tipo ~ .html.twig %}{# usuario = {tipo: admin} #}admin.html.twig{# usuario = {tipo: usuario} #}usuario.html.twig

{% extends listado ? listado.html.twig : tabla.html.twig %}

1.2{% extends [primera.html.twig, segunda.html.twig, tercera.html.twig] %}

{% extends noticia.html.twig %}

{% extends [categoria_ ~ noticia.categoria ~ .html.twig,seccion_ ~ noticia.seccion ~ .html.twig,noticia.html.twig] %}

includedinámico

1.2{% include [primera.html.twig, segunda.html.twig, tercera.html.twig] %}

{% include [lateral_ ~ noticia.categoria ~ .html.twig,lateral_ ~ noticia.seccion ~ .html.twig,lateral.html.twig] %}

{% set seccion = ... %}{% include lateral_ ~ seccion ~ .html.twig%}

1.2{% set seccion = ... %}{% include lateral_ ~ seccion ~ .html.twig ignore missing%}

{% include ... ignore missing %}{% include ... ignore missing with { ... } %}{% include ... ignore missing with { ... } only %}

muchasgracias

dudaspreguntascomentarios

contactajavier.eguiluz@gmail.comconectalinkedin.com/in/javiereguiluz

copyrightLos contenidos de estapresentación son propiedadde su autor. No se puedenreutilizar sin el consentimientoexpreso de su autor.

http://www.symfony.es	5576
http://www.tiendy.com	925
http://feeds.feedburner.com	124
http://blog.solucionex.com	78
http://translate.googleusercontent.com	20
http://www.sfexception.com	6
http://paper.li	4
http://a0.twimg.com	1
http://www.tiendy.es	1

Twig avanzado (sf2Vigo)

by Javier Eguiluz on Dec 02, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

9 Embeds 6,735

Statistics

Twig avanzado (sf2Vigo) — Presentation Transcript