Twig avanzado (sf2Vigo)

Twig avanzado
Javier Eguiluz

Jornadas Symfony2 Galicia
25-26 noviembre 2011 #sf2Vigo

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

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

«Twig es un lenguaje y
motor de plantillas PHP»

twig se puede usar en

Cualquier
Symfony2 proyecto PHP

$usuario

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

PHP

echo $usuario->getNombre()

PHP

<?php
echo $usuario->getNombre();
?>

PHP

<?php
echo htmlspecialchars(
$usuario->getNombre(),
ENT_QUOTES,
'UTF-8');
?>

TWIG

{{ usuario.nombre }}

PHP

<?php echo htmlspecialchars($usuario->
getNombre(), ENT_QUOTES, 'UTF-8'); ?>

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

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

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

<?php Template.php
abstract class Twig_Template implements
Twig_TemplateInterface
{

// ...

protected function getAttribute(
$object,
$item,
array $arguments = array(),
$type = Twig_TemplateInterface::ANY_CALL,
$isDefinedTest = false) {

// ...

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

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

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

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

<li>
...

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

<li>
...
{% endspaceless %}

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

{% for elemento in coleccion %}

{# ... #}

{% endfor %}

{% for clave, elemento
in coleccion %}

{# ... #}

{% endfor %}

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

# 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


portada.twig
{% extends "layout.twig" %}

PORTADA


{% extends "layout.twig" %} portada.twig

{% block titulo %}
PORTADA
{% endblock %}

{% block contenidos %}
{% endblock %}

{% block lateral %}
{% endblock %}

{% extends "layout.twig" %}
contacto.twig
{% block titulo %}
CONTACTO
{% endblock %}

{% block contenidos %}
<form>...</form>
{% endblock %}

{% block lateral %}
<p>...</p>
{% endblock %}

DESARROLLO
WEB ÁGIL CON todos los ejemplos que se muestran
SYMFONY2 a continuación pertenecen al libro

Desarrollo web ágil
con Symfony2
(disponible próximamente)

Javier Eguiluz

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

twig:
# ...
globals:
cp: 01001
iva: [1.04, 1.08, 1.18]
version: 1.0.3

Precio {{ oferta.precio * iva[0] }}

Coste de envío a {{ usuario.cp | default(cp) }}

<footer>
© 'now'|date('Y') - v.{{ version }}
</footer>

twig:
# ...
globals:
global:
cp: 01001
iva: [1.04, 1.08, 1.18]
version: 1.0.3

twig:
# ...
globals:
global:
cp: 01001
iva: [1.04, 1.08, 1.18]
version: 1.0.3

Precio {{ 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 globales
namespace CuponOfertaBundleUtil;

class Util
{
static public function getSlug($cadena)
{
// ...
return $slug;
}
}

services:
# ...
cupon.utilidades:
class: CuponOfertaBundleUtilUtil

twig:
# ...
globals:
utilidades: @cupon.utilidades

<?php var_dump($oferta); ?>

{% debug oferta %}

services:
twig.extension.debug:
class: Twig_Extensions_Extension_Debug
tags:
- { name: twig.extension }

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

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

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 %}

operación resultado
{{ 12 / 7 }} 1.7142857142

{{ 12 // 7 }} 1

{{ 12 % 7 }} 5

{% 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 %}

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

NO

{
/**
* Primera línea
* Segunda línea
*/

SI

{
/**
* Primera línea
* Segunda línea
*/

{
{% if comentarios -%}
/**
* Primera línea
* Segunda línea
*/
{%- endif %}

{% if condicion -%}

{# ... #}

{%- endif %}

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

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

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

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

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

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


<table>
{{ campo('nombre', 'text', 'José') }}
{{ campo('apellidos', 'text', 'García Pérez') }}
{{ campo('telefono', 'text') }}
</table>

<input type="{{ tipo }}" name="{{ nombre }}"
{% endmacro %}

{% endmacro %}

{% macro fila(nombre, tipo, valor) %}
<tr>
<td>{{ nombre | capitalize }}</td>
<td>{{ _self.campo(nombre, tipo, valor) }}</td>
</tr>
{% endmacro %}

{% endmacro %}

{% macro item(nombre, tipo, valor) %}
<li>
{{ _self.campo(nombre, tipo, valor) }}
</li>
{% endmacro %}

import fila as campo %}

<table>
</table>

import item as campo %}

<ul>
</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);
// ...
}

{% include
'MiBundle:Carpeta:plantilla.html.twig' %}

{% include

src/MiAplicacion/
MiBundle/
Resources/
views/
Carpeta/
plantilla.html.twig

{% include

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

{% include

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

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

{% include

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

{% include

{% include
'views/Carpeta/plantilla.html.twig' %}

twig:
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'
));

twig:
base_template_class: Twig_Template

<?php

class __TwigTemplate_82262eae3f96052ef64432a9ddc53915
extends Twig_Template
{
protected $parent;

public function __construct(Twig_Environment $env)
{
// ...
}

twig:
# ...
exception_controller: SymfonyBundleTwigBundle
ControllerExceptionController::showAction

twig:
# ...
form:
resources: [ ... ]

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


Label


Label
{% block url_widget %}
{% spaceless %}
{% set type = type|default('url') %}
{{ block('field_widget') }}
{% endspaceless %}
{% endblock url_widget %}


{% form_theme form _self %}

{% set type = 'url' %}
<em>http://</em> {{ block('field_widget') }}


{% form_theme form _self %}


Label http://

modificar campos de varias plantillas

{# src/.../Resources/views/Form/form.html.twig #}


{% form_theme form
'MiBundle:Form:form.html.twig' %}

{{ form_row(noticia.titular) }}

{{ form_row(noticia.publicada) }}


modificar todos los formularios
twig:
# ...
form:
resources:
- 'form_div_layout.html.twig'

twig:
# ...
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 %}

twig:
# ...
form:
resources:
- 'MiBundle:Form:form.html.twig'

{{ form_label(fecha) }}
{{ form_errors(fecha) }}

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

«Twig genera con
facilidad 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 %} Doctrine2
namespace {{ namespace }}; ActiveRecord
use {{ 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

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


var url = Routing.generate('portada',
{'ciudad': ciudad});
};
</script>

https://github.com/
FriendsOfSymfony/
FOSJsRoutingBundle

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

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

{{ ... | length }}

Tienes {{ amigos|length }} amigos
y tu nombre tiene
{{ nombre|length }} letras

{{ ... | length }}

count( )
y tu nombre tiene

{{ ... | length }}

count( )
y tu nombre tiene

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'] %}
{% endif %}

una parte del login
{% endif %}

{{ ... in ... }}
in_array( )
{% if fecha in ['2005', '2006'] %}
{% endif %}
strpos( )
una parte del login
{% endif %}

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

{{ letra }}
{% endfor %}

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

{{ letra }}
{% endfor %}

{% filter upper %}
{{ letra }}
{% endfor %}
{% endfilter %}

{{ letra | upper }}
{% endfor %}

{% 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 %}
Contacto {{ usuario.????? }}
{% endfor %}

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

{% set usuarios = [
] %}

{{ usuario.contacto }}

resultado email

{% set usuarios = [
] %}

{{ usuario[contacto] }}

resultado ERROR

{% set usuarios = [
] %}

{{ usuario[usuario.contacto] }}

resultado ..@..

{% set usuarios = [
] %}

{{ attribute(usuario, usuario.contacto) }}

{% set usuarios = [
] %}

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

{% 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'
] %}

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 %}

contacta
javier.eguiluz@gmail.com

conecta
linkedin.com/in/javiereguiluz

copyright
Los contenidos de esta
presentación son propiedad
de su autor. No se pueden
reutilizar sin el consentimiento
expreso de su autor.

Twig avanzado (sf2Vigo)

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (20)

Similar a Twig avanzado (sf2Vigo)

Similar a Twig avanzado (sf2Vigo) (20)

Más de Javier Eguiluz

Más de Javier Eguiluz (18)

Último

Último (20)

Twig avanzado (sf2Vigo)