Desymfony 2011 - Twig

7,372 views

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
7,372
On SlideShare
0
From Embeds
0
Number of Embeds
4,481
Actions
Shares
0
Downloads
228
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

×