ccc

Mostrando entradas con la etiqueta Symfony Views. Mostrar todas las entradas
Mostrando entradas con la etiqueta Symfony Views. Mostrar todas las entradas

Symfony: Heredando JS y CSS en las vistas

Crear src\AppBundle\Controller\HolaController.php
<?php
namespace AppBundle\Controller;

use Sensio\Bundle\FrameworkExtraBundle\Configuration\Route;
use Symfony\Bundle\FrameworkBundle\Controller\Controller;
use Symfony\Component\HttpFoundation\Request;

class HolaController extends Controller
{
    /**
     * @Route("/hola", name="hola")
     */
    public function indexAction(Request $request)
    {
        // replace this example code with whatever you need
        return $this->render('hola/hola.twig', array(
            'base_dir' => realpath($this->container->getParameter('kernel.root_dir').'/..'),
        ));
    }
}

Modificar app\Resources\views\base.html.twig:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>{% block title %}Welcome!{% endblock %}</title>
        {% block stylesheets %}{% endblock %}
        <link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" />
    </head>
    <body>
        {% block body %}{% endblock %}

{% block csslsg %}
<link rel="stylesheet" href="{{asset('/css/style.css')}}">
{% endblock %}

        {% block jslsg %}
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
{% endblock %}
    </body>
</html>

Crear app\Resources\views\hola\hola.twig:
{% extends 'base.html.twig' %}

{% block body %}
    <div id="wrapper">
        <div id="container">
   <p>La ruta es: {{ base_dir }}</p>
   </div>

    </div>
{% endblock %}

{% block csslsg %}
{{parent()}}
<link rel="stylesheet" href="{{asset('/css/substyle.css')}}">
{% endblock %}

{% block jslsg %}
{{parent()}}
<script type="text/javascript" src="{{asset('/js/prueba.js')}}"></script>
{% endblock %}

Crear web\css\style.css:
body { background-color:#FF0000;}

Crear web\css\substyle.css:
p { font-size:30px;color:#FFF; }

Crear web\js\prueba.js:
$(function() {
alert("carga bien");
});


Symfony Views: Nociones básicas

{{ ... }} Imprime el contenido
{% ... %} Ejecuta el contenido
{# ... #}  Comenta el contenido

La plantilla genérica está en:
\app\resources\views\base.html.twig

Extender la plantilla genérica en cualquier vista:
{% extends "::base.html.twig" %}

Mostrar en la vista todo lo que contiene una estructura:
{{ dump(variable) }}




Symfony: Hacer includes a otras vistas desde una vista y cómo añadir rutas de los CSS, JS, imágenes, etc

 Para hacer un include de una vista dentro de otra vista poner la ruta completa del bundle:
{{ include('cineactoresBundle:Default:listadototal.html.twig') }}

Incluir rutas de CSS, JS e Imágenes
El asset  te lleva siempre a: \web
Por tanto crea las subcarpetas de css, js, img en la carpeta \web

Para añadirlo luego en nuestras vistas:

{% block stylesheets %}
    <link href="{{ asset('css/main.css') }}" rel="stylesheet" />
{% endblock %}

{% block javascripts %}
    <script src="{{ asset('js/js_main.js') }}">
{% endblock %}

<img src="{{ asset('img/gary_cooper.jpg')}}">

Para añadir un enlace (se puede hacer con path o con url):
<a href="{{ path('cineactores_showActorPorId',{'id':actor.id}) }}">Pulsar</a>
<a href="{{ url('cineactores_showActorPorId',{'id':actor.id}) }}">Pulsar</a>

La diferencia entre ambos es mínima:
path: genera la ruta absoluta
url: genera la ruta completa con el protocolo http




Symfony: Crear una vista a partir de la plantilla base de Symfony (Extenderla)

La plantilla de la vista base de Symfony está en:
/app/resources/views/base.html.twig

Para usarla en nuestra vista listadoActores.html.twig hay que extenderla:

{% extends '::base.html.twig' %}

{% block body %}
    <h1>Listado de actores</h1>
    {% for actor in actores %}
        <p>
        <a href="{{ url('cineactores_showActor',{'id_actor':actor.id_actor}) }}" class="fila {{ cycle(["par", "impar"], loop.index) }}">
            {{actor.id_actor}} - {{actor.nombre}}
        </a>
        </p>
    {% endfor %}
{% endblock %}


EJEMPLO GENERAL

Crear una vista principal: /src/cine/actoresBundle/Resources/views/main.html.twig

{% extends '::base.html.twig' %}

{% block title %}Estás en main.html {% endblock %}

{% block body %}
    <div id="contenido">
        {% block contenido %}
            contenido principal
        {% endblock %}
    </div>
   
    <div id="lateralDer">
        {% block lateralDer %}
            Aquí lateral Derecho
        {% endblock %}
    </div>

{% endblock %}

Modificar nuestra vista que herede directamente de main:
{% extends 'cineactoresBundle::main.html.twig' %}

{% block contenido %}
    <h1>Listado de actores</h1>
    {% for actor in actores %}
        <p>
        <a href="{{ url('cineactores_showActor',{'id_actor':actor.id_actor}) }}" class="fila {{ cycle(["par", "impar"], loop.index) }}">
            {{actor.id_actor}} - {{actor.nombre}}
        </a>
        </p>
    {% endfor %}
{% endblock %}

{% block lateralDer %}
    {{ parent() }}
    Se añade esto a Lateral Derecho por listadoActores.html
{% endblock %}

El parent() lo que hace es escribir TAMBIEN todo lo que tenga ese bloque en el padre del que se hereda. Lo agrega. Si no se pone parent() entonces sustituye el contenido de ese bloque por lo nuevo que se escriba.

Puedes reemplazar el contenido de  CUALQUIER bloque (incluso de title, stylesheets, javascrips, etc).