Scribd Logo
Importer

Bienvenue sur Scribd !

  • Plantillas

    Transféré par

    Yanquiel Mansfarroll Gonzalez
    11 vues13 pages
    jhhg

    Titre original

    8. Plantillas ppt

    Copyright

    © © All Rights Reserved

    Formats disponibles

    PDF, TXT ou lisez en ligne sur Scribd

    Avez-vous trouvé ce document utile ?

    Ce contenu est-il inapproprié ?

    Signaler ce document
    jhhg

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    11 vues13 pages

    Plantillas

    Transféré par

    Yanquiel Mansfarroll Gonzalez
    jhhg

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    sur 13

    PROGRAMACIÓN WEB

    Tema III: Framework Symfony3

    Plantillas

    Conferencia 17
    Bibliografía

     Symfony. The Book 3.1 Chapter 7 (págs 68)


    Plantillas, herencia y diseño

    • Las plantillas en un proyecto comparten elementos


    comunes, como el encabezado, pie de página, barra
    lateral, etc.
    • Symfony piensa este problema de forma diferente:
    una plantilla se puede decorar con otra.
    • La herencia de plantillas permite crear un «diseño»
    de plantilla base que contiene todos los elementos
    comunes del sitio definido.
    • Una plantilla hija puede extender el diseño base y
    reemplazar cualquiera de sus bloques.
    Ejemplo plantilla base
    {# app/Resources/views/base.html.twig #}
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>{% block title %}Test Application{% endblock %}</title>
    </head>
    <body>
    <div id="sidebar">
    {% block sidebar %}
    <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/blog">Blog</a></li>
    </ul>
    {% endblock %}
    </div>
    <div id="contenido">
    {% block body %}{% endblock %}
    </div>
    </body>
    </html>
    Ejemplo plantilla hija

    {# app/Resources/views/Blog/index.html.twig #}
    {% extends '::base.html.twig' %}

    {% block title %}My cool blog posts{% endblock %}

    {% block body %}
    {% for entry in blog_entries %}
    <h2>{{ entry.title }}</h2>
    <p>{{ entry.body }}</p>
    {% endfor %}
    {% endblock %}
    Resultado sería:
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>My cool blog posts</title>
    </head>
    <body>
    <div id="sidebar">
    <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/blog">Blog</a></li>
    </ul>
    </div>
    <div id="contenido">
    <h2>My first post</h2>
    <p>The body of the first post.</p>
    <h2>Another post</h2>
    <p>The body of the second post.</p>
    </div>
    </body>
    </html>
    Aspectos a tener en cuenta:
     Si se utiliza {% extends %} en una plantilla, esta debe ser la primer
    etiqueta en esa plantilla;
     Mientras más etiquetas {% block %} se tengan en la plantilla base
    más flexible será el diseño.
     Las plantillas hijas no tienen que definir todos los bloques de los
    padres, por lo tanto se deben crear tantos bloques en las
    plantillas base como se desee.
     Si se desea añadir algo al contenido de un bloque padre en vez
    de reemplazarlo por completo desde una plantilla hija, se puede
    usar la función {{ parent() }}:
    {% block sidebar %}
    <h3>Table of Contents</h3>
    {# ... #}
    {{ parent() }}
    {% endblock %}
    Aspectos a tener en cuenta:
     Si se encuentra contenido duplicando en una serie de
    plantillas, se debe mover el contenido a un {% block %} en
    una plantilla padre. En algunos casos, una mejor solución
    podría ser mover el contenido a una nueva plantilla e incluirla
    con include
    {# {# app/Resources/views/article/list.html.twig #}
    app/Resources/views/article/art {% extends 'layout.html.twig' %}
    icle_details.html.twig #} {% block body %}
    <h2>{{ article.title }}</h2> <h1>Recent Articles<h1>
    <h3 class="byline">by {% for article in articles %}
    {{ article.authorName }} {{ include('article/article_details.html.twig', {
    </h3> 'article': article }) }}
    <p> {% endfor %}
    {{ article.body }} {% endblock %}
    </p>
    Integrando controladores
     Para incluir el controlador se utililizará la sintaxis de cadena
    estándar para controladores (paquete:controlador:acción):

    {# app/Resources/views/base.html.twig #}
    {# ... #}
    <div id="sidebar">
    {{ render(controller ('AppBundle:Article:recentArticles',
    { 'max': 3 } ) )
    }}
    </div>
    Incluyendo hojas de estilo y JavaScript

    Se recomienda agregar dos bloques a la plantilla base:


     uno llamado stylesheet dentro de la etiqueta head
     otro llamado javascript después de la etiqueta de
    cierre body.

    Estos bloques deben contener todas las hojas de estilo y


    archivos Javascript que se necesiten en el sitio.
    Los ficheros .css y .js, serán almacenados en el directorio
    public/web en sus respectivas carpetas.
    Ejemplo (clase base):
    {# app/Resources/views/base.html.twig #}
    <html>
    <head>

    {# ... #}
    {% block stylesheets %}
    <link href="{{ asset('css/main.css') }}"
    rel="stylesheet" />
    {% endblock %}
    </head>
    <body>
    {# ... #}
    {% block javascripts %}
    <script src="{{ asset('js/main.js') }}"></script>
    {% endblock %}
    </body>
    </html>
    Ejemplo (clase hija)
     Si se necesita incluir una hoja de estilo extra o archivos
    Javascript desde una plantilla hija se deben representar
    estos bloques con los nuevos ficheros.

    {# app/Resources/views/contact/contact.html.twig #}
    {% extends 'base.html.twig' %}
    {% block stylesheets %}
    {{ parent() }}
    <link href="{{ asset('css/contact.css') }}" rel="stylesheet" />
    {% endblock %}
    {# ... #}
    PROGRAMACIÓN WEB
    Tema III: Framework Symfony3

    Plantillas

    Conferencia 17

    Vous aimerez peut-être aussi