Twig, cuando Djangoencontró a SymfonyJavier EguiluzJORNADAS SYMFONY 2011 1-3 JULIO, CASTELLÓN DESYMFONY.COM
Patrocinadores   Patrocinadores   PatrocinadoresColaboradores      BRONCE            PLATA        PLATINO y ORO    JORNADA...
importanteAlgunas partes de esta presentaciónno se pueden entender bien sin verel vídeo de su impartición.Puedes acceder a...
¿Qué es Twig?
« template engine »
<mensaje>Hola         <p>Hola               <contenido>{ nombre }       Hola José             José</p>                 ......
template engine        +template language
twig se puede usar en               CualquierSymfony2     proyecto PHP
Twig paramaquetadores
{# ... #}{% ... %}{{ ... }}
{*   *}   <%#   %>   {#   #}{     }   <%    %>   {%   %}{$    }   <%=   %>   {{   }}
{% if usuario is defined %} Hola {{ usuario.nombre }} hoy es {{ now | date(d/m/Y) }}{% endif %}
Mostrarinformación
<p> Hola {{ usuario }}Tienes {{ edad }} años y vives en{{ ciudad }} </p>
<p> Hola {{ usuario.nombre }}Tienes {{ usuario.edad }} años yvives en {{ usuario.ciudad }} </p>
Modificarinformación
{{ descripcion }}
{{ descripcion | striptags }}
{{ etiquetas | join(", ") }}
Hay {{ articulos | length }}         artículos
{{ titular | striptags | upper }}
<strong>Lorem ipsum</strong>dolor sit <em>amet</em>
{{ biografia }}
&lt;strong&gt;Lorem ipsum&lt;/strong&gt; dolor sit&lt;em&gt;amet&lt;/em&gt;
{{ biografia | raw }}
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>...
Herenciade plantillas
« Lo más poderoso     de Twig » Fuente: documentación oficial de Twig
layout.twig
layout.twigportada.twig          contacto.twig
<html> <head> ... </head><body>  <h1>                </h1></body></html>
layout.twig<html> <head> ... </head><body>  <h1>   {% block titulo %}{% endblock %}  </h1>  {% block cuerpo %}{% endblock ...
portada.twig{% extends "layout.twig" %}{% block titulo %} Portada{% endblock %}{% block cuerpo %} Lorem ipsum ...{% endblo...
contacto.twig{% extends "layout.twig" %}{% block titulo %} Contacta con nosotros{% endblock %}{% block cuerpo %} Duis aute...
1{% block titulo %} Portada{% endblock %}{% block titulo "Portada" %}
contacto.twig                   2{% extends "layout.twig" %}{% block cuerpo %} Duis aute irure dolor in ...{% endblock %}
layout.twig               3   ...   <h1>     {% block titulo %}       Lorem Ipsum     {% endblock %}   </h1>   ...
Razones para   usar Twig
1. Muy fácil de aprender (intuitivo)2. Suficiente / completo3. Plantillas concisas y bonitas
Twig paraprogramadores
Variables
{{ usuario.nombre }}1.   $usuario["nombre"]2.   $usuario!>nombre3.   $usuario!>nombre()4.   $usuario!>getNombre()5.   $usu...
{{ 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 %}
Espaciosen blanco
{% spaceless %}
{{ descripcion }}{{! descripcion }}{{ descripcion !}}{{! descripcion !}}
{{ descripcion }}{{! descripcion }} ltrim(descripcion){{ descripcion !}} rtrim(descripcion){{! descripcion !}} trim(descri...
Filtros
{{ titular | striptags | upper }}
{% filter striptags | upper %}titular{% endfilter %}
{{ articulo | truncate(150) }}{{ articulo | truncate(150, true) }}
Mecanismo de escape
« Twig por defecto escapa   todas las variables »
{{ variable | raw }}
{{ variable | e }}
twig:  autoescape: true              false              js
Estructurade control for
Taversable                  Countable                 {{% for articulo in articulos %}  ...{% endfor %}
{% for i in 0..10 %} ...{% endfor %}
{% for i in a..z %} ...{% endfor %}
{% for articulo in articulos %}  ...{% else %}  No existen artículos{% endfor %}
{% for . in . %}   {% for . in . %}  ...                ...{% empty %}        {% else %}  ...                ...{% endfor ...
variables dentro del forloop.index    loop.revindexloop.index0   loop.revindex0loop.first              loop.parentloop.las...
{% 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 {% endi...
{% for seccion in secciones %} {% for categoria in categorias %}    {{ loop.parent.loop.index }}    {{ loop.index }} {% en...
{% for clave in variable | keys %} ...{% endfor %}
{% for clave, valor in variable %} ...{% endfor %}
Estructurade 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 }}
Herenciade plantillas
{% extends "layout.twig" %}
{% extends seccion ~ "_layout.twig" %}
{% extendsseccion | default("principal") ~"_layout.twig"%}
{% extendsapp.user ? "conectado.html" :           "anonimo.html"%}
layout.twig<html><head>  <title>   </title></head><body>    <h1>    </h1>
<html><head>                          layout.twig  <title>    {% block titulo %}{% endblock %}  </title></head><body>  <h1...
<html><head>                      layout.twig  <title>    {% block titulo %}{% endblock %}  </title></head><body>  <h1>   ...
{% block lateral %}{% endblock %}        ponencias.twig   layout.twig
ponencias.twig{% block lateral %}  <h3>¿Echas en falta algún tema?</h3>  <p>...</p>  {{ parent( ) }}{% endblock %}
{% block contenidos %}  {% block principal %}     ...  {% endblock %}{% endblock %}
{% block contenidos %}  {% block principal %}     ...  {% endblock principal %}{% endblock contenidos %}
Herenciahorizontal
portada.twig...{% for articulo in articulos %}    {{ articulo. titulo }}{% endfor %}...
listado.twig{% for articulo in articulos %}  {{ articulo. titulo }}{% endfor %}
portada.twig...{% include "listado.twig" %}...
portada.twig...{% include "listado.twig" only %}...
{% include "listado.html" with{ articulos: articulos } only %}
listado.twig{% for articulo items %} %}        item in in articulos  {{ articulo. titulo }}     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     TagFiltro    TestFunción   OperatorGlobal
Para generar   Para modificar  contenido       contenido Macro                  FiltroFunción
https://github.com /fabpot /Twig!extensions
Filtros
{{ ponente.biografia | auto_link_text }}
DesymfonyBundleExtensionDesymfonyTwigExtension.phpclass DesymfonyTwigExtension extends Twig_Extension {   public function ...
{{ ponente.biografia   | auto_link_text   | raw }}
DesymfonyBundleExtensionDesymfonyTwigExtension.phppublic function getFilters() {  return array(   auto_link_text => new Tw...
DesymfonyBundleExtensionDesymfonyTwigExtension.phppublic function getFilters() {  return array(   auto_link_text => new Tw...
{{ ponente.biografia   | auto_link_text   | raw }}
Macros
« El equivalente en Twig a lasfunciones 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 %}
formularios.twig{% macro input(name, type) %}  <input type="{{ type }}"         name="{{ name }}" />{% endmacro %}
pagina.twig{% import "formularios.twig"   as formularios %}<div>  {{ formularios.input(edad) }}</div>
Twig enSymfony2
{{"path( ) }}   {% trans %} {{ url( ) }}   caché        las plantillas se configurada      cargan solas
app/cache/dev/twig/* DesymfonyBundle:Default:index.html.twig */class __TwigTemplate_8e822424720fee931876b7c05a9112b0 exten...
Twig fuera de   Symfony2
1. Descargar Twig2. Registrar su autoloader
EN LA PRÁCTICA     Usando Twig en un    proyecto PHP propio
Referencias
http://twig!project.org
Razones para   usar Twig
Proyecto maduro y    completo
La ¿única? posibilidadpara los maquetadores
Fácilmente extensible
Rendimientocomparable a PHP
contactojavier.eguiluz@gmail.comtwitter.com/javiereguiluzlinkedin.com/in/javiereguiluz
Desymfony 2011 - Twig
Upcoming SlideShare
Loading in...5
×

Desymfony 2011 - Twig

6,752

Published on

"Twig, cuando Django encontró a Symfony" fue la primera ponencia impartida durante el segundo día de las Jornadas Symfony 2011.

Durante la misma, se explican las características más destacadas del motor de plantillas Twig, empezando con las más adecuadas para diseñadores/maquetadores y siguiendo después con las características para desarrolladores.

También se mencionan brevemente las ventajas de la integración de Twig en Symfony2 y se concluye con un ejemplo práctico del uso de Twig en proyectos PHP propios.

Published in: Technology, Business
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
6,752
On Slideshare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
227
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Desymfony 2011 - Twig

  1. 1. Twig, cuando Djangoencontró a SymfonyJavier EguiluzJORNADAS SYMFONY 2011 1-3 JULIO, CASTELLÓN DESYMFONY.COM
  2. 2. Patrocinadores Patrocinadores PatrocinadoresColaboradores BRONCE PLATA PLATINO y ORO JORNADAS SYMFONY 2011 están patrocinadas por
  3. 3. importanteAlgunas partes de esta presentaciónno se pueden entender bien sin verel vídeo de su impartición.Puedes acceder al vídeo enhttp://bit.ly/sf-tutorial-twig
  4. 4. ¿Qué es Twig?
  5. 5. « template engine »
  6. 6. <mensaje>Hola <p>Hola <contenido>{ nombre } Hola José José</p> ...... ......... ... </contenido> </mensaje>
  7. 7. template engine +template language
  8. 8. twig se puede usar en CualquierSymfony2 proyecto PHP
  9. 9. Twig paramaquetadores
  10. 10. {# ... #}{% ... %}{{ ... }}
  11. 11. {* *} <%# %> {# #}{ } <% %> {% %}{$ } <%= %> {{ }}
  12. 12. {% if usuario is defined %} Hola {{ usuario.nombre }} hoy es {{ now | date(d/m/Y) }}{% endif %}
  13. 13. Mostrarinformación
  14. 14. <p> Hola {{ usuario }}Tienes {{ edad }} años y vives en{{ ciudad }} </p>
  15. 15. <p> Hola {{ usuario.nombre }}Tienes {{ usuario.edad }} años yvives en {{ usuario.ciudad }} </p>
  16. 16. Modificarinformación
  17. 17. {{ descripcion }}
  18. 18. {{ descripcion | striptags }}
  19. 19. {{ etiquetas | join(", ") }}
  20. 20. Hay {{ articulos | length }} artículos
  21. 21. {{ titular | striptags | upper }}
  22. 22. <strong>Lorem ipsum</strong>dolor sit <em>amet</em>
  23. 23. {{ biografia }}
  24. 24. &lt;strong&gt;Lorem ipsum&lt;/strong&gt; dolor sit&lt;em&gt;amet&lt;/em&gt;
  25. 25. {{ biografia | raw }}
  26. 26. Espaciosen blanco
  27. 27. <ul> <li> <a ... >XXX</a> </li> <li> ...
  28. 28. {% spaceless %}
  29. 29. {% spaceless %}<ul> <li> <a ... >XXX</a> </li> <li> ...{% endspaceless %}
  30. 30. <ul><li><a ... >XXX</a></li><li>...
  31. 31. Herenciade plantillas
  32. 32. « Lo más poderoso de Twig » Fuente: documentación oficial de Twig
  33. 33. layout.twig
  34. 34. layout.twigportada.twig contacto.twig
  35. 35. <html> <head> ... </head><body> <h1> </h1></body></html>
  36. 36. layout.twig<html> <head> ... </head><body> <h1> {% block titulo %}{% endblock %} </h1> {% block cuerpo %}{% endblock %}</body></html>
  37. 37. portada.twig{% extends "layout.twig" %}{% block titulo %} Portada{% endblock %}{% block cuerpo %} Lorem ipsum ...{% endblock %}
  38. 38. contacto.twig{% extends "layout.twig" %}{% block titulo %} Contacta con nosotros{% endblock %}{% block cuerpo %} Duis aute irure dolor in ...{% endblock %}
  39. 39. 1{% block titulo %} Portada{% endblock %}{% block titulo "Portada" %}
  40. 40. contacto.twig 2{% extends "layout.twig" %}{% block cuerpo %} Duis aute irure dolor in ...{% endblock %}
  41. 41. layout.twig 3 ... <h1> {% block titulo %} Lorem Ipsum {% endblock %} </h1> ...
  42. 42. Razones para usar Twig
  43. 43. 1. Muy fácil de aprender (intuitivo)2. Suficiente / completo3. Plantillas concisas y bonitas
  44. 44. Twig paraprogramadores
  45. 45. Variables
  46. 46. {{ usuario.nombre }}1. $usuario["nombre"]2. $usuario!>nombre3. $usuario!>nombre()4. $usuario!>getNombre()5. $usuario!>isNombre()6. null
  47. 47. {{ usuario.nombre }}{{ usuario["nombre"] }}
  48. 48. {% set var = "Mi variable" %}
  49. 49. {% set ivas = [4, 8, 18] %}
  50. 50. {%set nombreCompleto = nombre ~ apellidos%}
  51. 51. {% set perfil %} {{ apellidos }}, {{ nombre }} {{ edad }} años Página: {{ url }}{% endset %}
  52. 52. Espaciosen blanco
  53. 53. {% spaceless %}
  54. 54. {{ descripcion }}{{! descripcion }}{{ descripcion !}}{{! descripcion !}}
  55. 55. {{ descripcion }}{{! descripcion }} ltrim(descripcion){{ descripcion !}} rtrim(descripcion){{! descripcion !}} trim(descripcion)
  56. 56. Filtros
  57. 57. {{ titular | striptags | upper }}
  58. 58. {% filter striptags | upper %}titular{% endfilter %}
  59. 59. {{ articulo | truncate(150) }}{{ articulo | truncate(150, true) }}
  60. 60. Mecanismo de escape
  61. 61. « Twig por defecto escapa todas las variables »
  62. 62. {{ variable | raw }}
  63. 63. {{ variable | e }}
  64. 64. twig: autoescape: true false js
  65. 65. Estructurade control for
  66. 66. Taversable Countable {{% for articulo in articulos %} ...{% endfor %}
  67. 67. {% for i in 0..10 %} ...{% endfor %}
  68. 68. {% for i in a..z %} ...{% endfor %}
  69. 69. {% for articulo in articulos %} ...{% else %} No existen artículos{% endfor %}
  70. 70. {% for . in . %} {% for . in . %} ... ...{% empty %} {% else %} ... ...{% endfor %} {% endfor %}
  71. 71. variables dentro del forloop.index loop.revindexloop.index0 loop.revindex0loop.first loop.parentloop.lastloop.length
  72. 72. {% for articulo in articulos %} articulo número {{ loop.index }}{% endfor %}
  73. 73. {% for articulo in articulos %} {% if not loop.first %} Anterior {% endif %} {% if not loop.last %} Siguiente {% endif %}{% endfor %}
  74. 74. {% for seccion in secciones %} {% for categoria in categorias %} {{ loop.parent.loop.index }} {{ loop.index }} {% endfor %}{% endfor %}
  75. 75. {% for clave in variable | keys %} ...{% endfor %}
  76. 76. {% for clave, valor in variable %} ...{% endfor %}
  77. 77. Estructurade control if
  78. 78. {% if conectado %} ...{% elseif registrado %} ...{% else %} ...{% endif %}
  79. 79. {% if numero is divisibleby(3) %}
  80. 80. {% if texto is none %}{% if numero is even %} {% if numero is odd %}
  81. 81. {% if descripcion is empty %} if (descripcion == null || descripcion == false || descripcion == "") { ... }
  82. 82. {{ app.user ? Mi perfil : Registrate }}
  83. 83. Herenciade plantillas
  84. 84. {% extends "layout.twig" %}
  85. 85. {% extends seccion ~ "_layout.twig" %}
  86. 86. {% extendsseccion | default("principal") ~"_layout.twig"%}
  87. 87. {% extendsapp.user ? "conectado.html" : "anonimo.html"%}
  88. 88. layout.twig<html><head> <title> </title></head><body> <h1> </h1>
  89. 89. <html><head> layout.twig <title> {% block titulo %}{% endblock %} </title></head><body> <h1> {% block titulo %}{% endblock %} </h1>
  90. 90. <html><head> layout.twig <title> {% block titulo %}{% endblock %} </title></head><body> <h1> {{ block(title) }} </h1>
  91. 91. {% block lateral %}{% endblock %} ponencias.twig layout.twig
  92. 92. ponencias.twig{% block lateral %} <h3>¿Echas en falta algún tema?</h3> <p>...</p> {{ parent( ) }}{% endblock %}
  93. 93. {% block contenidos %} {% block principal %} ... {% endblock %}{% endblock %}
  94. 94. {% block contenidos %} {% block principal %} ... {% endblock principal %}{% endblock contenidos %}
  95. 95. Herenciahorizontal
  96. 96. portada.twig...{% for articulo in articulos %} {{ articulo. titulo }}{% endfor %}...
  97. 97. listado.twig{% for articulo in articulos %} {{ articulo. titulo }}{% endfor %}
  98. 98. portada.twig...{% include "listado.twig" %}...
  99. 99. portada.twig...{% include "listado.twig" only %}...
  100. 100. {% include "listado.html" with{ articulos: articulos } only %}
  101. 101. listado.twig{% for articulo items %} %} item in in articulos {{ articulo. titulo }} item. titulo }}{% endfor %}
  102. 102. {% include "listado.html" with { items: articulos } %}
  103. 103. {% set articulos = destacados | merge(otros) %}{% include "listado.html" with { items: articulos } only %}
  104. 104. Extensiones
  105. 105. « Twig está construido con extensiones »
  106. 106. Macro TagFiltro TestFunción OperatorGlobal
  107. 107. Para generar Para modificar contenido contenido Macro FiltroFunción
  108. 108. https://github.com /fabpot /Twig!extensions
  109. 109. Filtros
  110. 110. {{ ponente.biografia | auto_link_text }}
  111. 111. DesymfonyBundleExtensionDesymfonyTwigExtension.phpclass 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; }
  112. 112. {{ ponente.biografia | auto_link_text | raw }}
  113. 113. DesymfonyBundleExtensionDesymfonyTwigExtension.phppublic function getFilters() { return array( auto_link_text => new Twig_Filter_Method ( $this, auto_link_text ));}
  114. 114. DesymfonyBundleExtensionDesymfonyTwigExtension.phppublic function getFilters() { return array( auto_link_text => new Twig_Filter_Method ( $this, auto_link_text, array(is_safe => array(html)) ));}
  115. 115. {{ ponente.biografia | auto_link_text | raw }}
  116. 116. Macros
  117. 117. « El equivalente en Twig a lasfunciones de programación »
  118. 118. {% macro input(name, type) %} <input type="{{ type }}" name="{{ name }}" />{% endmacro %}
  119. 119. {% macro input(name, type) %} ...{% endmacro %}<div>{{ _self.input(edad) }}</div> <input type="" name="edad" />
  120. 120. {% macro input(name, type) %} ...{% endmacro %}<div>{{ _self.input(edad, text) }}</div><input type="text" name="edad" />
  121. 121. {% macro input(name, type) %}<input type="{{ type | default(text) }}" name="{{ name }}" />{% endmacro %}
  122. 122. formularios.twig{% macro input(name, type) %} <input type="{{ type }}" name="{{ name }}" />{% endmacro %}
  123. 123. pagina.twig{% import "formularios.twig" as formularios %}<div> {{ formularios.input(edad) }}</div>
  124. 124. Twig enSymfony2
  125. 125. {{"path( ) }} {% trans %} {{ url( ) }} caché las plantillas se configurada cargan solas
  126. 126. 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), );
  127. 127. Twig fuera de Symfony2
  128. 128. 1. Descargar Twig2. Registrar su autoloader
  129. 129. EN LA PRÁCTICA Usando Twig en un proyecto PHP propio
  130. 130. Referencias
  131. 131. http://twig!project.org
  132. 132. Razones para usar Twig
  133. 133. Proyecto maduro y completo
  134. 134. La ¿única? posibilidadpara los maquetadores
  135. 135. Fácilmente extensible
  136. 136. Rendimientocomparable a PHP
  137. 137. contactojavier.eguiluz@gmail.comtwitter.com/javiereguiluzlinkedin.com/in/javiereguiluz
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×