Tutorial3 Desymfony - La Vista. Twig

@me Antes Ahora

La Vista en MVC
Representa los datos del modelo, gestionados por el controlador. Misión: Representación
Define formato(s) de visualización, agregando assets necesarios (css, js, imágenes...)
Es el interfaz final de usuario

Plantillas y Motores
La plantilla (template) es el archivo donde se instalan los datos (dinámicos) a mostrar al usuario
Una de las funciones originales de PHP, y lo ha sido durante todo este tiempo, es la de servir de motor de templates
Soluciones avanzadas y específicas para esta función

Twig: Ventajas
Herencia de templates / bloques
Funciones específicas de templates (output-escaping)
Limpio y sencillo
Extensible
Rapidez – Plantillas son transformadas en PHP

Etiquetas Básicas
Mostrar variables
Acceso a atributos
{{ var }} <?php echo htmlspecialchars($var, ENT_QUOTES, 'UTF-8') ?>
{{ 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()

Etiquetas Básicas
Filtros
Comandos
{{ nombre | capitalize }} // Federico
{% for persona in personas %} {{ persona.nombre }} - {{ persona.fechanacimiento | date('Y-m-d') }} {% else %} No hay personas {% endfor %}

Symfony y Twig
Twig se presenta como opción por defecto
Estructura de archivos
Sintaxis de nombres
return $this->render(' DesymfonyBundle:Ponente:index.html.twig ', array( 'ponentes' => $ponentes ));
app/config.yml
app/Resources/views
src/Desymfony/DesymfonyBundle/Resources/views
src/Desymfony/DesymfonyBundle/Resources/public

DesymfonyBundle:Ponente:index.html.twig
Bundle de Referencia Grupo de Templates (Directorio - Controlador) Nombre archivo template Denominación Formato Motor

Aplicación deSymfony
Symfony instalado y configurado (Tutorial #1)
Entidades creadas (Tutorial #2)
Maquetas html creadas
Punto de partida
> git checkout tutorial3

Aplicación deSymfony
Construir homepage, vista de ponentes, vista de ponencias y detalle de ponencia
Mostrar páginas de error
Ponencias en formatos XML e iCal
Objetivos en Tutorial #3

NetBeans + Ubuntu 10.10 (recién instalado)
Twig Extension for NetBeans
Riguroso directo (tendremos apuntes)
Aplicación deSymfony Acerca del Screencast 11

Señalamos brevemente directorios y ficheros afectados y naming de Symfony
Aplicarmos filtros y mejoramos foreach dejado por Nacho en Ponente
Mostrarmos rápidamente maquetas y localizacion.
Recrear index ponencia, poner etiquetas brevemente
SCREENCAST 19

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

Estructura tres niveles

Creamos base.html.twig, layout.html.twig y aplicamos ponentes
Creamos includes en ponecias
(UPDATE templates)
Pararmos para explicar assets (images + js + css) e integración de routing para construir enlaces
SCREENCAST 34

CSS, JS e imágenes accesibles desde web/, pero residentes en los Bundles (Resources/public)
Etiqueta asset. Ventajas: path manejado por Symfony2, optimización – Assetic, YUI Compressor...
Assets en Sf2 + Twig
> ./app/console assets:install web --symlink
<link href=”{{ asset('bundle/desymfony/css/reset.css') }}” rel=”stylesheet” type=”text/css”>

Tag especial para construir enlaces, propio de Symfony2. Similar a url_for() en Symfony 1
Utilizamos información de routing, podemos pasar parámetros
Elaces y sistema routing
<a href=”{{ path('estatica', { 'pagina': 'copyright' }) }}” > Copyright </a>
<a href=”{{ url('estatica', { 'pagina': 'copyright' }) }}” > Copyright </a>

Introduciomos la función asset.
Terminamos detalles de las vistas (enlaces en footer)
Nos damos cuenta de que nos hacen falta extensiones para:
Acortar descripciones (filtro truncate)
Autolink de urls
Formatear Meta-descripción
Vamos a explicar extensiones
SCREENCAST 40

Extensiones oficiales, como Vendor en Symfony2
Extensiones propias. Máxima flexibilidad
Se configuran como Servicio en Symfony2 + Dependency Injection Tags
Extender Twig

Creamos filtros propios, Service Injection tags
Habilitamos core extensions Twig (indicar que están en vendors)
Aplicamos los filtros auto_link_text
SCREENCAST 49

Symfony2 ya tiene página de error. Vamos a sobrescribirla
Podemos sobrescribir templates de cualquier Bundle = modularidad
Error pages - Overriding

Creamos página de error, distinguiendo errores (ver si hacemos extensión condicional si es error 500)
Sobreescribimos página de Desymfony
SCREENCAST

Fabien Pontencier's blog: Templating Engines in PHP
http://fabien.potencier.org/article/34/templating-engines-in-php
Proyecto Desymfony
https://github.com/desymfony/desymfony
Diferencias entre Symfony 1 y Symfony2
http://symfony.com/doc/2.0/cookbook/symfony1.html
Documentación Symfony2 referente a Templating
http://symfony.com/doc/2.0/book/templating.html
Proyecto Twig
http://www.twig-project.org/documentation
Crear una Extensión para Twig en Symfony2
http://www.martinsikora.com/how-to-make-twig-extension-for-symfony2
Referencias

{{ “Gracias!” }} {{ “Gracias!” }} Marcos Labad [email_address] @esmiz JORNADAS SYMFONY 2011 1-3 JULIO, CASTELLÓN DESYMFONY.COM {% if action.contact %} {% endif %}

http://www.symfony.es	8785
http://moodle.iesunibhi.com	33
http://webcache.googleusercontent.com	5
http://translate.googleusercontent.com	5
http://www.sfexception.com	2
http://www.slideshare.net	1
http://www.google.com.ar	1
http://www.google.cl	1

Tutorial3 Desymfony - La Vista. Twig

by Marcos Labad on Jul 01, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

8 Embeds 8,833

Statistics

Tutorial3 Desymfony - La Vista. Twig — Presentation Transcript