desymfony 2011 - twig

JORNADAS SYMFONY 2011 1-3 JULIO, CASTELLÓN DESYMFONY.COM

Twig, cuando Django encontró a SymfonyJavier Eguiluz

http://desymfony.com/programa.php#alvaro_videla






JORNADAS SYMFONY 2011 están patrocinadas porPa

troc

inad

ores

PL

ATIN

O y

ORO

Patr

ocin

ador

es

PLAT

APa

troc

inad

ores

BR

ONCE

Cola

bora

dore

s

Algunas partes de esta presentación no se pueden entender bien sin ver el vídeo de su impartición.

Puedes acceder al vídeo enhttp://bit.ly/sf-tutorial-twig

importante

http://bit.ly/sf-tutorial-twig

http://bit.ly/sf-tutorial-twig

¿Qué es Twig?

« template engine »

Hola { nombre }......

<p>Hola José</p>......

<mensaje> <contenido> Hola José ... ... </contenido></mensaje>

template engine+

template language

twig se puede usar en

Symfony2 Cualquier proyecto PHP

Twig paramaquetadores

{# ... #}

{% ... %}

{{ ... }}

{* *}

{ }

{$ }

<%# %>

<% %>

<%= %>

{# #}

{% %}

{{ }}

{% if usuario is defined %}

Hola {{ usuario.nombre }}

hoy es {{ 'now' | date('d/m/Y') }}

{% endif %}

Mostrar información

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

Modificar información

Hay {{ articulos | length }}

artículos

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

<strong>Lorem ipsum</

strong> dolor sit

<em>amet</em>

Espacios en 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>...

Herencia de plantillas

« Lo más poderosode Twig »

Fuente: documentación oficial de Twig

layout.twig

layout.twig

portada.twig contacto.twig

<html> <head> ... </head><body> <h1> {% block titulo %}{% endblock %} </h1>

{% block cuerpo %}{% endblock %}</body></html>

layout.twig

portada.twig

{% extends "layout.twig" %}

{% block titulo %} Portada{% endblock %}

{% block cuerpo %} Lorem ipsum ...{% endblock %}

contacto.twig


{% block titulo %} Contacta con nosotros{% endblock %}

{% block cuerpo %} Duis aute irure dolor in ...{% endblock %}

1{% block titulo %} Portada{% endblock %}

{% block titulo "Portada" %}

2


{% block cuerpo %} Duis aute irure dolor in ...{% endblock %}

contacto.twig

3layout.twig

... <h1> {% block titulo %} Lorem Ipsum {% endblock %} </h1> ...

Razones para usar Twig

1. Muy fácil de aprender (intuitivo)

2. Suficiente / completo

3. Plantillas concisas y bonitas

Twig paraprogramadores

Variables

1. $usuario["nombre"]

2. $usuario!>nombre

3. $usuario!>nombre()

4. $usuario!>getNombre()

5. $usuario!>isNombre()

6. null

{{ usuario.nombre }}

{% set var = "Mi variable" %}

{% set ivas = [4, 8, 18] %}

{%

set nombreCompleto =

nombre ~ apellidos

%}

{% set perfil %}

{{ apellidos }}, {{ nombre }}

{{ edad }} años

Página: {{ url }}

{% endset %}

Espacios en blanco

{% spaceless %}

ltrim(descripcion)

rtrim(descripcion)

trim(descripcion)

{{ descripcion }}

{{! descripcion }}

{{ descripcion !}}

{{! descripcion !}}

{{ descripcion }}

{{! descripcion }}

{{ descripcion !}}

{{! descripcion !}}

ltrim(descripcion)

rtrim(descripcion)

trim(descripcion)

Filtros

{% filter striptags | upper %}

titular

{% endfilter %}

Mecanismode escape

« Twig por defecto escapa todas las variables »

twig:

autoescape: truefalsejs

Estructura de control for

{% for articulo in articulos %}

...

{% endfor %}

TaversableCountable{

{% for i in 0..10 %}

...

{% endfor %}

{% for i in 'a'..'z' %}

...

{% endfor %}


...

{% else %}

No existen artículos

{% endfor %}

{% for . in . %}

...

{% empty %}

...

{% endfor %}

{% for . in . %}

...

{% else %}

...

{% endfor %}

loop.index

loop.index0

loop.first

loop.last

loop.length

loop.revindex

loop.revindex0

loop.parent

variables dentro del for


articulo número {{ loop.index }}

{% endfor %}

{% for articulo in articulos %} {% if not loop.first %} Anterior {% endif %}

{% if not loop.last %} Siguiente {% endif %}{% endfor %}

{% for seccion in secciones %}

{% for categoria in categorias %}

{{ loop.parent.loop.index }}

{{ loop.index }}

{% endfor %}

{% endfor %}

{% for clave in variable | keys %}

...

{% endfor %}

{% for clave, valor in variable %}

...

{% endfor %}

Estructura de control if

{% if conectado %}

...

{% elseif registrado %}

...

{% else %}

...

{% endif %}

{% if numero is divisibleby(3) %}

{% if texto is none %}

{% if numero is even %}

{% if numero is odd %}

{% if descripcion is empty %}

if (descripcion == null || descripcion == false || descripcion == "") { ... }

Herencia de plantillas

{% extends seccion ~ "_layout.twig" %}

{% extends

seccion | default("principal") ~

"_layout.twig" %}

{% extends

app.user ? "conectado.html" :

"anonimo.html"%}

<html>

<head>

<title> </title></head>

<body>

<h1> </h1>

layout.twig

<html><head>

<title> {% block titulo %}{% endblock %} </title></head><body>

<h1> {% block titulo %}{% endblock %} </h1>

layout.twig

<html><head>

<title> {% block titulo %}{% endblock %} </title></head><body>

<h1>

{{ block('title') }} </h1>

layout.twig

{% block lateral %}{% endblock %}

layout.twig

ponencias.twig

{% block lateral %} <h3>¿Echas en falta algún tema?</h3> <p>...</p>

{{ parent( ) }}{% endblock %}

ponencias.twig

{% block contenidos %}

{% block principal %}

...

{% endblock %}

{% endblock %}

{% block contenidos %}

{% block principal %}

...

{% endblock principal %}

{% endblock contenidos %}

Herenciahorizontal

...


{{ articulo. titulo }}

{% endfor %}

...

portada.twig



{% endfor %}

listado.twig

...

{% include "listado.twig" %}

...

portada.twig

...

{% include "listado.twig" only %}

...

portada.twig

{% include "listado.html" with

{ 'articulos': articulos } only %}



{% endfor %}

listado.twig

{% for item in items %}

{{ item. titulo }}

{% endfor %}

{% include "listado.html"

with { 'items': articulos } %}

{% set articulos =

destacados | merge(otros) %}

{% include "listado.html"

with { 'items': articulos }

only %}

Extensiones

« Twig está construido con extensiones »

Macro

Filtro

Función

Global

Tag

Test

Operator

Para generar contenido

MacroFiltro

Función

Para modificar contenido

https://github.com /

fabpot /

Twig!extensions

https://github.com/fabpot/Twig-extensions






Filtros

DesymfonyBundle\Extension\DesymfonyTwigExtension.php

class DesymfonyTwigExtension extends \Twig_Extension { public function getFilters() { return array( 'auto_link_text' => new \Twig_Filter_Method ( $this, 'auto_link_text' )); }

static public function auto_link_text($string) { ... return $string; }

}


public function getFilters() { return array( 'auto_link_text' => new \Twig_Filter_Method ( $this, 'auto_link_text' ));}


public function getFilters() { return array( 'auto_link_text' => new \Twig_Filter_Method ( $this, 'auto_link_text', array('is_safe' => array('html')) ));}

Macros

« El equivalente en Twig a las funciones de programación »

{% macro input(name, type) %}

<input type="{{ type }}"

name="{{ name }}" />

{% endmacro %}

{% macro input(name, type) %} ...{% endmacro %}

<div>{{ _self.input('edad') }}</div>

<input type="" name="edad" />

{% macro input(name, type) %} ...{% endmacro %}

<div>{{ _self.input('edad', 'text') }}</div>

<input type="text" name="edad" />


<input type="{{ type | default('text') }}"


{% endmacro %}


<input type="{{ type }}"


{% endmacro %}

formularios.twig

{% import "formularios.twig" as formularios %}

pagina.twig

<div>

{{ formularios.input('edad') }}</div>

Twig enSymfony2

{{"path( ) }}{{ url( ) }}

{% trans %}

caché configurada

las plantillas se cargan solas

app/cache/dev/twig/* DesymfonyBundle:Default:index.html.twig */class __TwigTemplate_8e822424720fee931876b7c05a9112b0 extends Twig_Template

{ protected $parent;

public function __construct(Twig_Environment $env) { parent::__construct($env);

$this!>blocks = array( 'title' => array($this, 'block_title'), 'pageid' => array($this, 'block_pageid'), 'contenido' => array($this, 'block_contenido'), ); }

Twig fuera deSymfony2

1. Descargar Twig

2. Registrar su autoloader

Usando Twig en un proyecto PHP propio

EN LA PRÁCTICA

Referencias

http://twig!project.org

Razones parausar Twig

Proyecto maduro y completo

La ¿única? posibilidad para los maquetadores

Fácilmente extensible

Rendimiento comparable a PHP

[email protected]

twitter.com/javiereguiluz

linkedin.com/in/javiereguiluz

contacto

desymfony 2011 - twig

Technology