Transcript
Page 2: Desymfony 2011 - Twig

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

Page 3: Desymfony 2011 - Twig

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

Page 4: Desymfony 2011 - Twig

¿Qué es Twig?

Page 5: Desymfony 2011 - Twig
Page 6: Desymfony 2011 - Twig

« template engine »

Page 7: Desymfony 2011 - Twig

Hola { nombre }......

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

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

Page 8: Desymfony 2011 - Twig

template engine+

template language

Page 9: Desymfony 2011 - Twig

twig se puede usar en

Symfony2 Cualquier proyecto PHP

Page 10: Desymfony 2011 - Twig

Twig paramaquetadores

Page 11: Desymfony 2011 - Twig

{# ... #}

{% ... %}

{{ ... }}

Page 12: Desymfony 2011 - Twig

{* *}

{ }

{$ }

<%# %>

<% %>

<%= %>

{# #}

{% %}

{{ }}

Page 13: Desymfony 2011 - Twig

{% if usuario is defined %}

Hola {{ usuario.nombre }}

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

{% endif %}

Page 14: Desymfony 2011 - Twig

Mostrar información

Page 15: Desymfony 2011 - Twig

<p> Hola {{ usuario }}

Tienes {{ edad }} años y vives en

{{ ciudad }} </p>

Page 16: Desymfony 2011 - Twig

<p> Hola {{ usuario.nombre }}

Tienes {{ usuario.edad }} años y

vives en {{ usuario.ciudad }} </p>

Page 17: Desymfony 2011 - Twig

Modificar información

Page 18: Desymfony 2011 - Twig

{{ descripcion }}

Page 19: Desymfony 2011 - Twig

{{ descripcion | striptags }}

Page 20: Desymfony 2011 - Twig

{{ etiquetas | join(", ") }}

Page 21: Desymfony 2011 - Twig

Hay {{ articulos | length }}

artículos

Page 22: Desymfony 2011 - Twig

{{ titular | striptags | upper }}

Page 23: Desymfony 2011 - Twig

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

Page 24: Desymfony 2011 - Twig

{{ biografia }}

Page 25: Desymfony 2011 - Twig

&lt;strong&gt;Lorem ipsum&lt;/

strong&gt; dolor sit

&lt;em&gt;amet&lt;/em&gt;

Page 26: Desymfony 2011 - Twig

{{ biografia | raw }}

Page 27: Desymfony 2011 - Twig

Espacios en blanco

Page 28: Desymfony 2011 - Twig

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

<li> ...

Page 29: Desymfony 2011 - Twig

{% spaceless %}

Page 30: Desymfony 2011 - Twig

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

<li> ...{% endspaceless %}

Page 31: Desymfony 2011 - Twig

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

Page 32: Desymfony 2011 - Twig

Herencia de plantillas

Page 33: Desymfony 2011 - Twig

« Lo más poderosode Twig »

Fuente: documentación oficial de Twig

Page 34: Desymfony 2011 - Twig

layout.twig

Page 35: Desymfony 2011 - Twig

layout.twig

portada.twig contacto.twig

Page 36: Desymfony 2011 - Twig

<html> <head> ... </head><body> <h1> </h1>

</body></html>

Page 37: Desymfony 2011 - Twig

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

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

layout.twig

Page 38: Desymfony 2011 - Twig

portada.twig

{% extends "layout.twig" %}

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

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

Page 39: Desymfony 2011 - Twig

contacto.twig

{% extends "layout.twig" %}

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

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

Page 40: Desymfony 2011 - Twig

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

{% block titulo "Portada" %}

Page 41: Desymfony 2011 - Twig

2

{% extends "layout.twig" %}

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

contacto.twig

Page 42: Desymfony 2011 - Twig

3layout.twig

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

Page 43: Desymfony 2011 - Twig

Razones para usar Twig

Page 44: Desymfony 2011 - Twig

1. Muy fácil de aprender (intuitivo)

2. Suficiente / completo

3. Plantillas concisas y bonitas

Page 45: Desymfony 2011 - Twig

Twig paraprogramadores

Page 46: Desymfony 2011 - Twig

Variables

Page 47: Desymfony 2011 - Twig

1. $usuario["nombre"]

2. $usuario!>nombre

3. $usuario!>nombre()

4. $usuario!>getNombre()

5. $usuario!>isNombre()

6. null

{{ usuario.nombre }}

Page 48: Desymfony 2011 - Twig

{{ usuario.nombre }}

{{ usuario["nombre"] }}

Page 49: Desymfony 2011 - Twig

{% set var = "Mi variable" %}

Page 50: Desymfony 2011 - Twig

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

Page 51: Desymfony 2011 - Twig

{%

set nombreCompleto =

nombre ~ apellidos

%}

Page 52: Desymfony 2011 - Twig

{% set perfil %}

{{ apellidos }}, {{ nombre }}

{{ edad }} años

Página: {{ url }}

{% endset %}

Page 53: Desymfony 2011 - Twig

Espacios en blanco

Page 54: Desymfony 2011 - Twig

{% spaceless %}

Page 55: Desymfony 2011 - Twig

ltrim(descripcion)

rtrim(descripcion)

trim(descripcion)

{{ descripcion }}

{{! descripcion }}

{{ descripcion !}}

{{! descripcion !}}

Page 56: Desymfony 2011 - Twig

{{ descripcion }}

{{! descripcion }}

{{ descripcion !}}

{{! descripcion !}}

ltrim(descripcion)

rtrim(descripcion)

trim(descripcion)

Page 57: Desymfony 2011 - Twig

Filtros

Page 58: Desymfony 2011 - Twig

{{ titular | striptags | upper }}

Page 59: Desymfony 2011 - Twig

{% filter striptags | upper %}

titular

{% endfilter %}

Page 60: Desymfony 2011 - Twig

{{ articulo | truncate(150) }}

{{ articulo | truncate(150, true) }}

Page 61: Desymfony 2011 - Twig

Mecanismode escape

Page 62: Desymfony 2011 - Twig

« Twig por defecto escapa todas las variables »

Page 63: Desymfony 2011 - Twig

{{ variable | raw }}

Page 64: Desymfony 2011 - Twig

{{ variable | e }}

Page 65: Desymfony 2011 - Twig

twig:

autoescape: truefalsejs

Page 66: Desymfony 2011 - Twig

Estructura de control for

Page 67: Desymfony 2011 - Twig

{% for articulo in articulos %}

...

{% endfor %}

TaversableCountable{

Page 68: Desymfony 2011 - Twig

{% for i in 0..10 %}

...

{% endfor %}

Page 69: Desymfony 2011 - Twig

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

...

{% endfor %}

Page 70: Desymfony 2011 - Twig

{% for articulo in articulos %}

...

{% else %}

No existen artículos

{% endfor %}

Page 71: Desymfony 2011 - Twig

{% for . in . %}

...

{% empty %}

...

{% endfor %}

{% for . in . %}

...

{% else %}

...

{% endfor %}

Page 72: Desymfony 2011 - Twig

loop.index

loop.index0

loop.first

loop.last

loop.length

loop.revindex

loop.revindex0

loop.parent

variables dentro del for

Page 73: Desymfony 2011 - Twig

{% for articulo in articulos %}

articulo número {{ loop.index }}

{% endfor %}

Page 74: Desymfony 2011 - Twig

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

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

Page 75: Desymfony 2011 - Twig

{% for seccion in secciones %}

{% for categoria in categorias %}

{{ loop.parent.loop.index }}

{{ loop.index }}

{% endfor %}

{% endfor %}

Page 76: Desymfony 2011 - Twig

{% for clave in variable | keys %}

...

{% endfor %}

Page 77: Desymfony 2011 - Twig

{% for clave, valor in variable %}

...

{% endfor %}

Page 78: Desymfony 2011 - Twig

Estructura de control if

Page 79: Desymfony 2011 - Twig

{% if conectado %}

...

{% elseif registrado %}

...

{% else %}

...

{% endif %}

Page 80: Desymfony 2011 - Twig

{% if numero is divisibleby(3) %}

Page 81: Desymfony 2011 - Twig

{% if texto is none %}

{% if numero is even %}

{% if numero is odd %}

Page 82: Desymfony 2011 - Twig

{% if descripcion is empty %}

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

Page 83: Desymfony 2011 - Twig

{{ app.user ? 'Mi perfil' : 'Registrate' }}

Page 84: Desymfony 2011 - Twig

Herencia de plantillas

Page 85: Desymfony 2011 - Twig

{% extends "layout.twig" %}

Page 86: Desymfony 2011 - Twig

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

Page 87: Desymfony 2011 - Twig

{% extends

seccion | default("principal") ~

"_layout.twig" %}

Page 88: Desymfony 2011 - Twig

{% extends

app.user ? "conectado.html" :

"anonimo.html"%}

Page 89: Desymfony 2011 - Twig

<html>

<head>

<title> </title></head>

<body>

<h1> </h1>

layout.twig

Page 90: Desymfony 2011 - Twig

<html><head>

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

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

layout.twig

Page 91: Desymfony 2011 - Twig

<html><head>

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

<h1>

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

layout.twig

Page 92: Desymfony 2011 - Twig

{% block lateral %}{% endblock %}

layout.twig

ponencias.twig

Page 93: Desymfony 2011 - Twig

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

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

ponencias.twig

Page 94: Desymfony 2011 - Twig

{% block contenidos %}

{% block principal %}

...

{% endblock %}

{% endblock %}

Page 95: Desymfony 2011 - Twig

{% block contenidos %}

{% block principal %}

...

{% endblock principal %}

{% endblock contenidos %}

Page 96: Desymfony 2011 - Twig

Herenciahorizontal

Page 97: Desymfony 2011 - Twig

...

{% for articulo in articulos %}

{{ articulo. titulo }}

{% endfor %}

...

portada.twig

Page 98: Desymfony 2011 - Twig

{% for articulo in articulos %}

{{ articulo. titulo }}

{% endfor %}

listado.twig

Page 99: Desymfony 2011 - Twig

...

{% include "listado.twig" %}

...

portada.twig

Page 100: Desymfony 2011 - Twig

...

{% include "listado.twig" only %}

...

portada.twig

Page 101: Desymfony 2011 - Twig

{% include "listado.html" with

{ 'articulos': articulos } only %}

Page 102: Desymfony 2011 - Twig

{% for articulo in articulos %}

{{ articulo. titulo }}

{% endfor %}

listado.twig

{% for item in items %}

{{ item. titulo }}

{% endfor %}

Page 103: Desymfony 2011 - Twig

{% include "listado.html"

with { 'items': articulos } %}

Page 104: Desymfony 2011 - Twig

{% set articulos =

destacados | merge(otros) %}

{% include "listado.html"

with { 'items': articulos }

only %}

Page 105: Desymfony 2011 - Twig

Extensiones

Page 106: Desymfony 2011 - Twig

« Twig está construido con extensiones »

Page 107: Desymfony 2011 - Twig

Macro

Filtro

Función

Global

Tag

Test

Operator

Page 108: Desymfony 2011 - Twig

Para generar contenido

MacroFiltro

Función

Para modificar contenido

Page 110: Desymfony 2011 - Twig

Filtros

Page 111: Desymfony 2011 - Twig

{{ ponente.biografia | auto_link_text }}

Page 112: Desymfony 2011 - Twig

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

}

Page 113: Desymfony 2011 - Twig

{{ ponente.biografia

| auto_link_text

| raw }}

Page 114: Desymfony 2011 - Twig

DesymfonyBundle\Extension\DesymfonyTwigExtension.php

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

Page 115: Desymfony 2011 - Twig

DesymfonyBundle\Extension\DesymfonyTwigExtension.php

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

Page 116: Desymfony 2011 - Twig

{{ ponente.biografia

| auto_link_text

| raw }}

Page 117: Desymfony 2011 - Twig

Macros

Page 118: Desymfony 2011 - Twig

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

Page 119: Desymfony 2011 - Twig

{% macro input(name, type) %}

<input type="{{ type }}"

name="{{ name }}" />

{% endmacro %}

Page 120: Desymfony 2011 - Twig

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

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

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

Page 121: Desymfony 2011 - Twig

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

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

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

Page 122: Desymfony 2011 - Twig

{% macro input(name, type) %}

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

name="{{ name }}" />

{% endmacro %}

Page 123: Desymfony 2011 - Twig

{% macro input(name, type) %}

<input type="{{ type }}"

name="{{ name }}" />

{% endmacro %}

formularios.twig

Page 124: Desymfony 2011 - Twig

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

pagina.twig

<div>

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

Page 125: Desymfony 2011 - Twig

Twig enSymfony2

Page 126: Desymfony 2011 - Twig

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

{% trans %}

caché configurada

las plantillas se cargan solas

Page 127: Desymfony 2011 - Twig

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'), ); }

Page 128: Desymfony 2011 - Twig

Twig fuera deSymfony2

Page 129: Desymfony 2011 - Twig

1. Descargar Twig

2. Registrar su autoloader

Page 130: Desymfony 2011 - Twig

Usando Twig en un proyecto PHP propio

EN LA PRÁCTICA

Page 131: Desymfony 2011 - Twig

Referencias

Page 132: Desymfony 2011 - Twig

http://twig!project.org

Page 133: Desymfony 2011 - Twig

Razones parausar Twig

Page 134: Desymfony 2011 - Twig

Proyecto maduro y completo

Page 135: Desymfony 2011 - Twig

La ¿única? posibilidad para los maquetadores

Page 136: Desymfony 2011 - Twig

Fácilmente extensible

Page 137: Desymfony 2011 - Twig

Rendimiento comparable a PHP

Page 138: Desymfony 2011 - Twig

[email protected]

twitter.com/javiereguiluz

linkedin.com/in/javiereguiluz

contacto


Top Related