Symfony - Ver motor

Una capa de vista es la capa de presentación de la aplicación MVC. Separa la lógica de la aplicación de la lógica de presentación.

Cuando un controlador necesita generar HTML, CSS o cualquier otro contenido, reenvía la tarea al motor de plantillas.

Plantillas

Las plantillas son básicamente archivos de texto que se utilizan para generar documentos basados ​​en texto, como HTML, XML, etc. Se utilizan para ahorrar tiempo y reducir errores.

De forma predeterminada, las plantillas pueden residir en dos ubicaciones diferentes:

app/Resources/views/- El directorio de vistas de la aplicación puede contener los diseños y las plantillas de su aplicación del paquete de aplicaciones. También anula las plantillas de paquetes de terceros.

vendor/path/to/Bundle/Resources/views/ - Cada paquete de terceros contiene sus plantillas en su directorio "Resources / views /".

Motor de ramita

Symfony utiliza un poderoso lenguaje de plantillas llamado Twig. Twig te permite escribir plantillas concisas y legibles de una manera muy fácil. Las plantillas de Twig son simples y no procesan etiquetas PHP. Twig realiza control de espacios en blanco, sandboxing y escape HTML automático.

Sintaxis

Twig contiene tres tipos de sintaxis especial:

• {{ ... }} - Imprime una variable o el resultado de una expresión en la plantilla.

• {% ... %} - Una etiqueta que controla la lógica de la plantilla. Se utiliza principalmente para ejecutar una función.

• {# ... #}- Sintaxis de comentario. Se utiliza para agregar comentarios de una o varias líneas.

La plantilla de la base de la ramita se encuentra en “app/Resources/views/base.html.twig”.

Ejemplo

Veamos un ejemplo simple usando el motor twig.

StudentController.php

<?php  
namespace AppBundle\Controller;  

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

class StudentController extends Controller { 
   /** 
      * @Route("/student/home") 
   */ 
   public function homeAction() { 
      return $this->render('student/home.html.twig'); 
   } 
}

Aquí el render() El método renderiza una plantilla y coloca ese contenido en un objeto Response.

Ahora vaya al directorio "vistas" y cree una carpeta "estudiante" y dentro de esa carpeta cree un archivo "home.html.twig". Agregue los siguientes cambios en el archivo.

home.html.twig

//app/Resources/views/student/home.html.twig  
<h3>Student application!</h3>

Puede obtener el resultado solicitando la url “http: // localhost: 8000 / student / home”.

De forma predeterminada, Twig viene con una larga lista de etiquetas, filtros y funciones. Repasemos uno por uno en detalle.

Etiquetas

Twig admite las siguientes etiquetas importantes:

Hacer

los doLa etiqueta realiza funciones similares a las de una expresión regular con la excepción de que no imprime nada. Su sintaxis es la siguiente:

{% do 5 + 6 %}

Incluir

La declaración de inclusión incluye una plantilla y devuelve el contenido renderizado de ese archivo en el espacio de nombres actual. Su sintaxis es la siguiente:

{% include 'template.html' %}

Se extiende

La etiqueta de extensión se puede utilizar para extender una plantilla de otra. Su sintaxis es la siguiente:

{% extends "template.html" %}

Bloquear

Block actúa como marcador de posición y reemplaza el contenido. Los nombres de bloque constan de caracteres alfanuméricos y guiones bajos. Por ejemplo,

<title>{% block title %}{% endblock %}</title>

Empotrar

los embedLa etiqueta realiza una combinación de incluir y extender. Te permite incluir el contenido de otra plantilla. También le permite anular cualquier bloque definido dentro de la plantilla incluida, como cuando se extiende una plantilla. Su sintaxis es la siguiente:

{% embed “new_template.twig” %} 
   {# These blocks are defined in “new_template.twig" #} 
   {% block center %} 
      Block content 
   {% endblock %} 
{% endembed %}

Filtrar

Las secciones de filtro le permiten aplicar filtros Twig regulares en un bloque de datos de plantilla. Por ejemplo,

{% filter upper %} 
   symfony framework 
{% endfilter %}

Aquí, el texto se cambiará a mayúsculas.

por

Forbucle recupera cada elemento en una secuencia. Por ejemplo,

{% for x in 0..10 %} 
   {{ x }} 
{% endfor %}

Si

los ifLa declaración en Twig es similar a PHP. La expresión se evalúa como verdadera o falsa. Por ejemplo,

{% if value == true %} 
   <p>Simple If statement</p> 
{% endif %}

Filtros

Twig contiene filtros. Se utiliza para modificar el contenido antes de ser renderizado. A continuación se muestran algunos de los filtros notables.

Longitud

El filtro de longitud devuelve la longitud de una cadena. Su sintaxis es la siguiente:

{% if name|length > 5 %} 
   ... 
{% endif %}

Inferior

El filtro inferior convierte un valor a minúsculas. Por ejemplo,

{{ 'SYMFONY'|lower }}

Produciría el siguiente resultado:

symfony

Del mismo modo, puede probar con mayúsculas.

Reemplazar

El filtro de reemplazo formatea una cadena determinada reemplazando los marcadores de posición. Por ejemplo,

{{ "tutorials point site %si% and %te%."|replace({'%si%': web, '%te%': "site"}) }}

Producirá el siguiente resultado:

tutorials point website

Título

El filtro de título devuelve una versión en mayúscula del valor. Por ejemplo,

{{ 'symfony framework '|title }}

Producirá el siguiente resultado:

Symfony Framework

Ordenar

El filtro de clasificación ordena una matriz. Su sintaxis es la siguiente:

{% for user in names|sort %} 
   ... 
{% endfor %}

Podar

El filtro de recorte recorta los espacios en blanco (u otros caracteres) desde el principio y el final de una cadena. Por ejemplo,

{{ '  Symfony!  '|trim }}

Producirá el siguiente resultado:

Symfony!

Funciones

Twig admite funciones. Se utiliza para obtener un resultado particular. A continuación se muestran algunas de las funciones importantes de Twig.

Atributo

los attributeLa función se puede utilizar para acceder a un atributo "dinámico" de una variable. Su sintaxis es la siguiente:

{{ attribute(object, method) }} 
{{ attribute(object, method, arguments) }} 
{{ attribute(array, item) }}

Por ejemplo,

{{ attribute(object, method) is defined ? 'Method exists' : 'Method does not exist' }}

Constante

La función constante devuelve el valor constante para una cadena especificada. Por ejemplo,

{{ constant('Namespace\\Classname::CONSTANT_NAME') }}

Ciclo

La función de ciclo recorre una matriz de valores. Por ejemplo,

{% set months = [‘Jan’, ‘Feb’, ‘Mar’] %}  
{% for x in 0..12 %} 
   { cycle(months, x) }} 
{% endfor %}

Fecha

Convierte un argumento en una fecha para permitir la comparación de fechas. Por ejemplo,

<p>Choose your location before {{ 'next Monday'|date('M j, Y') }}</p>

Producirá el siguiente resultado:

Choose your location before May 15, 2017

El argumento debe estar en uno de los formatos de fecha y hora admitidos por PHP.

Puede pasar una zona horaria como segundo argumento.

Tugurio

La función de volcado vuelca información sobre una variable de plantilla. Por ejemplo,

{{ dump(user) }}

Max

La función max devuelve el valor más grande de una secuencia. Por ejemplo,

{{ max(1, 5, 9, 11, 15) }}

Min

La función min devuelve el valor más pequeño de una secuencia. Por ejemplo,

{{ min(1, 3, 2) }}

Incluir

La función de inclusión devuelve el contenido renderizado de una plantilla. Por ejemplo,

{{ include('template.html') }}

Aleatorio

La función aleatoria genera un valor aleatorio. Por ejemplo,

{{ random([‘Jan’, ‘Feb’, ‘Mar’, ‘Apr’]) }} 
{# example output: Jan #}

Rango

La función de rango devuelve una lista que contiene una progresión aritmética de números enteros. Por ejemplo,

{% for x in range(1, 5) %} 
   {{ x }}, 
{% endfor %}

Producirá el siguiente resultado:

1,2,3,4,5

Diseños

Un diseño representa las partes comunes de varias vistas, es decir, por ejemplo, encabezado y pie de página.

Herencia de plantilla

Una plantilla puede ser utilizada por otra. Podemos lograr esto usando el concepto de herencia de plantilla. La herencia de plantillas le permite crear una plantilla de "diseño" base que contiene todos los elementos comunes del sitio web definidos como bloques.

Tomemos un ejemplo simple para comprender más sobre la herencia de plantillas.

Ejemplo

Considere la plantilla base ubicada en "app / Resources / views / base.html.twig". Agregue los siguientes cambios en el archivo.

base.html.twig

<!DOCTYPE html> 
<html> 
   <head> 
      <meta charset = "UTF-8"> 
      <title>{% block title %}Parent template Layout{% endblock %}</title> 
   </head> 
</html>

Ahora vaya al archivo de plantilla de índice ubicado en "app / Resources / views / default / index.html.twig" . Agregue los siguientes cambios en él.

index.html.twig

{% extends 'base.html.twig' %}  
{% block title %}Child template Layout{% endblock %}

Aquí el {% extends %}La etiqueta informa al motor de plantillas que primero evalúe la plantilla base, que configura el diseño y define el bloque. A continuación, se procesa la plantilla secundaria. Una plantilla secundaria puede ampliar el diseño base y anular el bloque de título. Ahora, solicite la url “http: // localhost: 8000” y podrá obtener su resultado.

Bienes

El activo gestiona la generación de URL y el control de versiones de activos web, como hojas de estilo CSS, archivos JavaScript y archivos de imagen.

JavaScript

Para incluir archivos JavaScript, utilice el javascripts etiqueta en cualquier plantilla.

{# Include javascript #} 
{% block javascripts %} 
   {% javascripts '@AppBundle/Resources/public/js/*' %} 
      <script src="{{ asset_url }}"></script> 
   {% endjavascripts %} 
{% endblock %}

Hojas de estilo

Para incluir archivos de hoja de estilo, use el stylesheets etiqueta en cualquier plantilla

{# include style sheet #} 
{% block stylesheets %} 
   {% stylesheets 'bundles/app/css/*' filter = 'cssrewrite' %} 
      <link rel = "stylesheet" href="{{ asset_url }}" />
   {% endstylesheets %} 
{% endblock %}

Imagenes

Para incluir una imagen, puede utilizar la etiqueta de imagen. Se define como sigue.

{% image '@AppBundle/Resources/public/images/example.jpg' %} 
   <img src = "{{ asset_url }}" alt = "Example" /> 
{% endimage %}

Activos compuestos

Puede combinar muchos archivos en uno. Esto ayuda a reducir la cantidad de solicitudes HTTP y produce un mayor rendimiento de front-end.

{% javascripts 
   '@AppBundle/Resources/public/js/*' 
   '@AcmeBarBundle/Resources/public/js/form.js' 
   '@AcmeBarBundle/Resources/public/js/calendar.js' %} 
   <script src = "{{ asset_url }}"></script> 
{% endjavascripts %}