composer create-project symfony/framework-standard-edition my_project_name
***
la estructura creada es la siguiente:
***
como vemos en la carpeta app, se encuentra
practica recomendada:
la carpeta Resources, donde tenemos la carpeta views
donde (como buena practica) debemos guardar las vistas de nuestro proyecto.
ventajas de guardar las vistas en app/Resources/views/:
-centralizamos la ubicacion de las vistas asi no debemos buscarlas dentro de todos los bundles que pudiera tener el proyecto.
-simplificamos la nomenclatura de los nombres logicos de las vistas.
otra opcion:
otra opcion muy usuada es la de recrear dentro de la carpeta del bundle en src, nuestra propia carpeta Resources/views
en ese caso si por ejemplo quisieramos referirnos a index.html.twig
lo deberemos hacer asi:
AppBundle:Default:index.html.twig
***
en cambio del modo anterior, lo ubicaremos simplemente asi:
default/index.html.twig
**
recomendacion:
para nombres de carpetas y templates se recomienda usar snake case, asi los nombres quedan como_esto
nota:
usamos twig porque es rapido, ya que cada tempplate se compila en una clase nativa php y cacheada.
(en modo DEV, el template se re-compila automaticamente despues de cualquier cambio)
herencia de templates y layouts
en symfony un template "hijo" puede sobreescribir cualquiera de los "bloques" del template padre, o base.
ejemplo:
{# app/Resources/views/base.html.twig #} <!DOCTYPE html> <html> <head> <meta 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="content"> {% block body %}{% endblock %} </div> </body> </html>***
en este caso tenemos 3 bloques: title, sidebar y body .
entonces, un template hijo, o que hereda de base, podria ser algo asi:
{# 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 %}***
en donde el nombre del template base, es relativa
al directorio app/Resources/views
**
obviamente si en el template hijo no se sobre escribe algun bloque, este toma el contenido
definido por default en el template base.
si no se quiere sobreescribir del todo el contenido de un bloque padre, y por el contrario se quiere incluir el contenido por default y agregarle otro más, se puede escribir en el bloque del hijo
{{ parent() }}
{% block sidebar %} <h3>Table of Contents</h3> {# ... #} {{ parent() }} {% endblock %}
**
como habiamos visto, los templates pueden residir en 2 lugares:
app/Resources/views
o en:
src/MiBundle/Resources/views
la mayoria van a estar en la primera ubicacion, entonces:
cada vez que querramos extender o renderizar algo como
app/Resources/views/base.html.twig
escribiremos, base.html.twig
y cuando querramos extender o renderizar algo como
app/Resources/views/blog/index.html.twig
escribiremos blog/index.html.twig
***
podemos tambien incluir templates dentro de otros usando la funcion
{{ include() }} ejemplo:
{{ include('article/article_details.html.twig', { 'article': article }) }}
kdkd
Links a otras paginas
use simplemente la funcion path() con el nombre del route definido en el controller
ejemplo:
<a href="{{ path('welcome') }}">Home</a>
|
si la route necesita un parametro, se lo envia de un modo similar a cuando enviamos variables a
un template incluido:
/** * @Route("/article/{slug}", name="article_show") */ public function showAction($slug)**
{# app/Resources/views/article/recent_list.html.twig #} {% for article in articles %} <a href="{{ path('article_show', {'slug': article.slug}) }}"> {{ article.title }} </a> {% endfor %}**
incluir hojas de estilo y javascript en twig
{# 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>**
obviamente si para una pagina particular necesitamos ademas incluir una hoja de estilo particular
se haria (como ya hemos visto) incluyendo la del base asi:
{# app/Resources/views/contact/contact.html.twig #} {% extends 'base.html.twig' %} {% block stylesheets %} {{ parent() }} <link href="{{ asset('css/contact.css') }}" rel="stylesheet" /> {% endblock %}
*
No hay comentarios:
Publicar un comentario