En la formación de Emagister de este viernes hemos hecho una introducción a twig con la beta de Symfony 2.1.

Aquí os dejo la presentación que hemos usado por si a alguien le puede ayudar.

Transcripción de la presentación:

  • 1. Twig en Symfony 2.1 Para programadores y diseñadores
  • 2. ¿Qué es Twig? Twig is a modern template engine for PHP (definición de la web de twig) Rápido (compila los templates en código php optimizado) Seguro (tiene un modulo de sandbox para evaluar código no verificado) Flexible (permite al desarrollador definir sus própios custom tags)
  • 3. ¿Por qué otro motor de templates? PHP es el mismo un motor de templates (muy largo de escribir) Me explico: <?php echo htmlspecialchars($var, ENT_QUOTES, UTF-8) ?> {{ var|e }}
  • 4. Sintaxis orientada a Templates Hay muchos accesos directos (Shortcuts) para realizar las acciones mas comunes. Un ejemplo (cuando iteramos sobre un array vacio): {% for user in users %} * {{ user.name }} {% else %} No user have been found. {% endfor %}
  • 5. Todas las funciones Con twig tenemos todas las opciones posibles a la hora de crear templates, tenemos herencia multiple, bloques de código, escape automático y muchas otras funcionalidades. {% extends “layout.html” %} {% block content %} Content of the page… {% endblock %}
  • 6. Mas cosas que tiene twig Fácil de aprender Extensible (Permite crear tus propios tags, filtros, etc..) Unit Tested (Twig está testeado completamente y preparado para grandes proyectos) Documentado Seguro Mensajes de error claros Rápido
  • 7. ¿Quien está detrás de todo? @fabpot
  • 8. ¿qué nos da twig?
  • 9. Básico de twig {# Comentario #} {{ mostrar_algo }} {% hacer algo %}
  • 10. Variables {{ name }} === <?php echo $name; ?>
  • 11. Tags{% if online == false %} <p>Our website is in maintenance mode. Please, come back later.</p>{% endif %}
  • 12. Filters {{ my first car|capitalize }}
  • 13. Funciones {{ random() }}  (funciona como la nativa de PHP `mt_rand`) {{ random(5) }}
  • 14. Tests{# Se evalúa a true si la variable is null, false, o cadenavacía #} {% if foo is empty %} … {% endif %}
  • 15. NOTA: Twig no tiene el operador === Para esto usamos una función “sameas” {% if foo.attribute is sameas(false) %} the foo attribute really is the “false“ PHP value {% endif %}
  • 16. Embed Include Extends Embed {% embed “lateral.twig” %} {% block principal %} … {% endblock %} {% endembed %}
  • 17. Documentación interesante http://twig.sensiolabs.org/  http://twig.sensiolabs.org/documentation http://www.symfony.es/2012/06/17/desymfony2012- twig-los-mejores-trucos-y-tecnicas-avanzadas/
  • 18. Vale, Fin de diapositivas Creamos un proyecto de symfony 2.1 para hacer cositasphp composer.phar create-project symfony/framework-standard-edition twig-formacionCopiamos composer.phar en twig-formacion y ejecutamos:php composer.phar installChmod –R 777 app/cacheChmod –R 777 app/logshttp://local.twig-formacion.com/app_dev.php/demo/hello/
  • 19. Un poquito de Symfony Accedemos a  DemoBundle -> Controller -> DemoController.php helloAction Template  Resources/views/demo/hello.html.twig Interesante para pasar parámetros Symfony hace un return de un array con las variables a pasar a la vista.
  • 20. Ejercicios1. Pasar una variable nueva desde el controller a twig y printar por pantalla.2. Imprimir un array ordenado 1. {{ array | sort }}3. Escapar una variable 1. {{ string | e(„html‟) }}4. Escapar una cadena de texto larga {% filter escape(html) %} <script type=”text/javascript”> Var texto=”<p>Loremipsumdolorsitamet</p>”; alert(texto); </script> {%end filter %}
  • 21. Random Presenta por pantalla un numero aleatorio Presenta por pantalla un numero aleatorio menor que 10 Presenta por pantalla un carácter aleatorio de un string Presenta por pantalla un elemento aleatorio de un array
  • 22. Fechas Print dia de hoy  {{„now‟ | date(“d”)}} Print fecha completa dd/mm/yyyy HH:mi:ss  {{„now‟ | date(“d/m/Y H:i:s”)}} Print de la fecha y la hora de ahora en Argentina  {{now|date(“d/m/Y H:i:s”,”America/Argentina/Buenos_Aires”)}} Print la fecha de aquí a 30 días  {{date(+30days)|date}}
  • 23. Date Ejemplo interesante Si tenemos una variable fechaNacimiento como hacemos la comprobación si el usuario es menor de edad ? {% if date(fechaNacimiento) < date(„-18years‟) %} Eres menor de edad {% endif %}
  • 24. Otra de date Queremos imprimir la fecha del proximo viernes.El curso de formularios en SF2 será el{{date(next Friday)|date(„d/m/Y 14:00‟)}}
  • 25. Arrays Tenemos el siguiente array {% set oferta = { precio:30, fechaExpiracion:date(+30days) }%} Como mostramos lo siguiente: La oferta cuesta 30 euros (35.4 con IVA) y es válida hasta el 19/08/2012
  • 26. Varias opciones ~ (concatenar con el MAC alt + ñ) {{La oferta cuesta‟ ~ oferta.precio ~ euros(‟ ~ oferta.precio*1.18 ~‟ con IVA)y es válida hasta el‟ ~oferta.fechaExpiracion|date()}} Format() {{La oferta cuesta %.2f euros(%.2f con IVA)y es válida hasta el %s|format(oferta.precio, oferta.precio*1.18,oferta.fech aExpiracion|date())}}
  • 27. Mas opciones Replace() {{La oferta cuesta :precio euros( :total con IVA)y es válida hasta el :fecha|replace({:precio:oferta.precio,:total:oferta.pr ecio*1.18,:fecha:oferta.fechaExpiracion|date()})}} La chula {{“La oferta cuesta #{oferta.precio} euros(#{oferta.precio*1.18} con IVA) y es válida hasta el #{oferta.fechaExpiracion|date()}”}}
  • 28. Listas Dada una lista como esta {% set lista=[a,b,c,d] %} Queremos imprimir solo b, c, d Solucion: {% for value in lista[1:] %} {{value}} {% endfor %}
  • 29. Includes{% extends request.ajax ? “base_ajax.html” : “base.html” %}{% block content %} Este es el contenido a mostrar.{% endblock %}
  • 30. Ejercicios Crear un template que herede de otro y que cree un bloque con una capa con fondo de color rojo.  Podemos usar el layout por defecto El que herede que sea de color azul
  • 31. Include Crear un template hello2.html.twig que se incluya al principio del bloque content. NOTA: no se puede añadir contenidos en templates que hereden de otros, fuera de los bloques.{% include AcmeDemoBundle::demo/hello2.html.twig %}Podemos usar include con el simbolo de concatenar (~)incluso usando filtros.{% include var|default(index) ~ _foo.html %}

 

2 Comments

 

  1. 23/07/2012  10:22 PM by Ricard Clau Reply

    Vaya formación más currada! Bravo Joan! :)

  2. 24/07/2012  8:24 AM by Joan Reply

    Se hace lo que se puede!

Leave a Reply to Ricard Clau Cancel reply

 

Your email address will not be published.