desymfony 2011 - twig
Post on 15-Jan-2015
6.589 Views
Preview:
DESCRIPTION
TRANSCRIPT
JORNADAS SYMFONY 2011 1-3 JULIO, CASTELLÓN DESYMFONY.COM
Twig, cuando Django encontró a SymfonyJavier Eguiluz
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
¿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
{{ descripcion }}
{{ descripcion | striptags }}
{{ etiquetas | join(", ") }}
Hay {{ articulos | length }}
artículos
{{ titular | striptags | upper }}
<strong>Lorem ipsum</strong> dolor sit <em>amet</em>
{{ biografia }}
<strong>Lorem ipsum</
strong> dolor sit
<em>amet</em>
{{ biografia | raw }}
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> </h1>
</body></html>
<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
{% extends "layout.twig" %}
{% block titulo %} Contacta con nosotros{% endblock %}
{% block cuerpo %} Duis aute irure dolor in ...{% endblock %}
1{% block titulo %} Portada{% endblock %}
{% block titulo "Portada" %}
2
{% extends "layout.twig" %}
{% 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 }}
{{ usuario.nombre }}
{{ 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
{{ titular | striptags | upper }}
{% filter striptags | upper %}
titular
{% endfilter %}
{{ articulo | truncate(150) }}
{{ articulo | truncate(150, true) }}
Mecanismode escape
« Twig por defecto escapa todas las variables »
{{ variable | raw }}
{{ variable | e }}
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 %}
{% for articulo in articulos %}
...
{% 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
{% for articulo in articulos %}
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 == "") { ... }
{{ app.user ? 'Mi perfil' : 'Registrate' }}
Herencia de plantillas
{% extends "layout.twig" %}
{% 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
...
{% for articulo in articulos %}
{{ articulo. titulo }}
{% endfor %}
...
portada.twig
{% for articulo in articulos %}
{{ articulo. titulo }}
{% endfor %}
listado.twig
...
{% include "listado.twig" %}
...
portada.twig
...
{% include "listado.twig" only %}
...
portada.twig
{% include "listado.html" with
{ 'articulos': articulos } only %}
{% for articulo in articulos %}
{{ articulo. titulo }}
{% 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
Filtros
{{ ponente.biografia | auto_link_text }}
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; }
}
{{ ponente.biografia
| auto_link_text
| raw }}
DesymfonyBundle\Extension\DesymfonyTwigExtension.php
public function getFilters() { return array( 'auto_link_text' => new \Twig_Filter_Method ( $this, 'auto_link_text' ));}
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')) ));}
{{ ponente.biografia
| auto_link_text
| raw }}
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" />
{% macro input(name, type) %}
<input type="{{ type | default('text') }}"
name="{{ name }}" />
{% endmacro %}
{% macro input(name, type) %}
<input type="{{ type }}"
name="{{ name }}" />
{% 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
javier.eguiluz@gmail.com
twitter.com/javiereguiluz
linkedin.com/in/javiereguiluz
contacto
top related