Tutorial3 Desymfony - La Vista. Twig

14,601 views

Published on

Presentación del tutorial de construcción de página ficticia de las jornadas #desymfony 2011.

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
14,601
On SlideShare
0
From Embeds
0
Number of Embeds
10,581
Actions
Shares
0
Downloads
347
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Tutorial3 Desymfony - La Vista. Twig

  1. 3. @me Antes Ahora
  2. 4. La Vista en MVC <ul><li>Representa los datos del modelo, gestionados por el controlador. Misión: Representación
  3. 5. Define formato(s) de visualización, agregando assets necesarios (css, js, imágenes...)
  4. 6. Es el interfaz final de usuario </li></ul>
  5. 7. Plantillas y Motores <ul><li>La plantilla (template) es el archivo donde se instalan los datos (dinámicos) a mostrar al usuario
  6. 8. Una de las funciones originales de PHP, y lo ha sido durante todo este tiempo, es la de servir de motor de templates
  7. 9. Soluciones avanzadas y específicas para esta función </li></ul>
  8. 10. Twig: Ventajas <ul><li>Herencia de templates / bloques
  9. 11. Funciones específicas de templates (output-escaping)
  10. 12. Limpio y sencillo
  11. 13. Extensible
  12. 14. Rapidez – Plantillas son transformadas en PHP </li></ul>
  13. 15. Etiquetas Básicas <ul>Mostrar variables </ul><ul>Acceso a atributos </ul><ul>{{ var }} <?php echo htmlspecialchars($var, ENT_QUOTES, 'UTF-8') ?> </ul><ul>{{ var.name }} <?php echo $var['name'] ?> //evaluar si es un array y existe la clave <?php echo $var->name ?> //evaluar si es un objeto y existe la propiedad <?php echo $var->name() ?> //evaluar si es un objeto y existe el método <?php echo $var->getName() ?> //evaluar si es un objeto y existe el método getXXX() <?php echo $var->isName() ?> //evaluar si es un objeto y existe el método isXXXX() </ul>
  14. 16. Etiquetas Básicas <ul>Filtros </ul><ul>Comandos </ul><ul>{{ nombre | capitalize }} // Federico </ul><ul>{% for persona in personas %} {{ persona.nombre }} - {{ persona.fechanacimiento | date('Y-m-d') }} {% else %} No hay personas {% endfor %} </ul>
  15. 17. Symfony y Twig <ul><li>Twig se presenta como opción por defecto
  16. 18. Estructura de archivos
  17. 19. Sintaxis de nombres </li></ul><ul>return $this->render(' DesymfonyBundle:Ponente:index.html.twig ', array( 'ponentes' => $ponentes )); </ul><ul><ul><ul><li>app/config.yml
  18. 20. app/Resources/views
  19. 21. src/Desymfony/DesymfonyBundle/Resources/views
  20. 22. src/Desymfony/DesymfonyBundle/Resources/public </li></ul></ul></ul>
  21. 23. <ul>DesymfonyBundle:Ponente:index.html.twig </ul>Bundle de Referencia Grupo de Templates (Directorio - Controlador) Nombre archivo template Denominación Formato Motor
  22. 24. Aplicación deSymfony <ul><li>Symfony instalado y configurado (Tutorial #1)
  23. 25. Entidades creadas (Tutorial #2)
  24. 26. Maquetas html creadas </li></ul>Punto de partida <ul>> git checkout tutorial3 </ul>
  25. 27. Aplicación deSymfony <ul><li>Construir homepage, vista de ponentes, vista de ponencias y detalle de ponencia
  26. 28. Mostrar páginas de error
  27. 29. Ponencias en formatos XML e iCal </li></ul>Objetivos en Tutorial #3
  28. 30. <ul><li>NetBeans + Ubuntu 10.10 (recién instalado)
  29. 31. Twig Extension for NetBeans
  30. 32. Riguroso directo (tendremos apuntes) </li></ul>Aplicación deSymfony Acerca del Screencast 11
  31. 33. <ul><li>Señalamos brevemente directorios y ficheros afectados y naming de Symfony
  32. 34. Aplicarmos filtros y mejoramos foreach dejado por Nacho en Ponente
  33. 35. Mostrarmos rápidamente maquetas y localizacion.
  34. 36. Recrear index ponencia, poner etiquetas brevemente </li></ul>SCREENCAST 19
  35. 37. Herencia en Twig Las plantillas se comportan como clases que es posible extender, los bloques se comportan como métodos. Los Bloques “nacen” para ser sobrescritos
  36. 39. Estructura tres niveles
  37. 40. <ul><li>Creamos base.html.twig, layout.html.twig y aplicamos ponentes
  38. 41. Creamos includes en ponecias
  39. 42. (UPDATE templates)
  40. 43. Pararmos para explicar assets (images + js + css) e integración de routing para construir enlaces </li></ul>SCREENCAST 34
  41. 44. <ul><li>CSS, JS e imágenes accesibles desde web/, pero residentes en los Bundles (Resources/public)
  42. 45. Etiqueta asset. Ventajas: path manejado por Symfony2, optimización – Assetic, YUI Compressor... </li></ul>Assets en Sf2 + Twig <ul>> ./app/console assets:install web --symlink </ul><ul><link href=”{{ asset('bundle/desymfony/css/reset.css') }}” rel=”stylesheet” type=”text/css”> </ul>
  43. 46. <ul><li>Tag especial para construir enlaces, propio de Symfony2. Similar a url_for() en Symfony 1
  44. 47. Utilizamos información de routing, podemos pasar parámetros </li></ul>Elaces y sistema routing <ul><a href=”{{ path('estatica', { 'pagina': 'copyright' }) }}” > Copyright </a> </ul><ul><a href=”{{ url('estatica', { 'pagina': 'copyright' }) }}” > Copyright </a> </ul>
  45. 48. <ul><li>Introduciomos la función asset.
  46. 49. Terminamos detalles de las vistas (enlaces en footer)
  47. 50. Nos damos cuenta de que nos hacen falta extensiones para: </li><ul><li>Acortar descripciones (filtro truncate)
  48. 51. Autolink de urls
  49. 52. Formatear Meta-descripción </li></ul><li>Vamos a explicar extensiones </li></ul>SCREENCAST 40
  50. 53. <ul><li>Extensiones oficiales, como Vendor en Symfony2
  51. 54. Extensiones propias. Máxima flexibilidad
  52. 55. Se configuran como Servicio en Symfony2 + Dependency Injection Tags </li></ul>Extender Twig
  53. 56. <ul><li>Creamos filtros propios, Service Injection tags
  54. 57. Habilitamos core extensions Twig (indicar que están en vendors)
  55. 58. Aplicamos los filtros auto_link_text </li></ul>SCREENCAST 49
  56. 59. <ul><li>Symfony2 ya tiene página de error. Vamos a sobrescribirla
  57. 60. Podemos sobrescribir templates de cualquier Bundle = modularidad </li></ul>Error pages - Overriding
  58. 61. <ul><li>Creamos página de error, distinguiendo errores (ver si hacemos extensión condicional si es error 500)
  59. 62. Sobreescribimos página de Desymfony </li></ul>SCREENCAST
  60. 63. <ul><li>Fabien Pontencier's blog: Templating Engines in PHP
  61. 64. http://fabien.potencier.org/article/34/templating-engines-in-php
  62. 65. Proyecto Desymfony
  63. 66. https://github.com/desymfony/desymfony
  64. 67. Diferencias entre Symfony 1 y Symfony2
  65. 68. http://symfony.com/doc/2.0/cookbook/symfony1.html
  66. 69. Documentación Symfony2 referente a Templating
  67. 70. http://symfony.com/doc/2.0/book/templating.html
  68. 71. Proyecto Twig
  69. 72. http://www.twig-project.org/documentation
  70. 73. Crear una Extensión para Twig en Symfony2
  71. 74. http://www.martinsikora.com/how-to-make-twig-extension-for-symfony2 </li></ul>Referencias
  72. 75. {{ “Gracias!” }} {{ “Gracias!” }} Marcos Labad [email_address] @esmiz JORNADAS SYMFONY 2011 1-3 JULIO, CASTELLÓN DESYMFONY.COM {% if action.contact %} {% endif %}

×