Symfony - Motore di visualizzazione

Un livello di visualizzazione è il livello di presentazione dell'applicazione MVC. Separa la logica dell'applicazione dalla logica di presentazione.

Quando un controller deve generare HTML, CSS o qualsiasi altro contenuto, inoltra l'attività al motore di modelli.

Modelli

I modelli sono fondamentalmente file di testo utilizzati per generare documenti basati su testo come HTML, XML, ecc. Viene utilizzato per risparmiare tempo e ridurre gli errori.

Per impostazione predefinita, i modelli possono risiedere in due posizioni diverse:

app/Resources/views/- La directory delle visualizzazioni dell'applicazione può contenere i layout ei modelli dell'applicazione del bundle dell'applicazione. Ignora anche i modelli di bundle di terze parti.

vendor/path/to/Bundle/Resources/views/ - Ogni bundle di terze parti contiene i propri modelli nella propria directory "Resources / views /".

Twig Engine

Symfony usa un potente linguaggio di template chiamato Twig. Twig ti consente di scrivere modelli concisi e leggibili in modo molto semplice. I modelli Twig sono semplici e non elaborano i tag PHP. Twig esegue il controllo degli spazi, il sandboxing e l'escape HTML automatico.

Sintassi

Twig contiene tre tipi di sintassi speciale:

• {{ ... }} - Stampa una variabile o il risultato di un'espressione nel modello.

• {% ... %} - Un tag che controlla la logica del modello. Viene utilizzato principalmente per eseguire una funzione.

• {# ... #}- Sintassi dei commenti. Viene utilizzato per aggiungere commenti su una o più righe.

Il modello di base del ramoscello si trova in “app/Resources/views/base.html.twig”.

Esempio

Facciamo un semplice esempio usando il motore 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'); 
   } 
}

Qui, il render() esegue il rendering di un modello e inserisce quel contenuto in un oggetto Response.

Ora spostati nella directory "views" e crea una cartella "student" e all'interno di quella cartella crea un file "home.html.twig". Aggiungi le seguenti modifiche al file.

home.html.twig

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

È possibile ottenere il risultato richiedendo l'url "http: // localhost: 8000 / student / home".

Per impostazione predefinita, Twig viene fornito con un lungo elenco di tag, filtri e funzioni. Vediamone uno per uno in dettaglio.

Tag

Twig supporta i seguenti tag importanti:

Fare

Il dotag esegue funzioni simili all'espressione regolare con l'eccezione che non stampa nulla. La sua sintassi è la seguente:

{% do 5 + 6 %}

Includere

L'istruzione include include un modello e restituisce il contenuto renderizzato di quel file nello spazio dei nomi corrente. La sua sintassi è la seguente:

{% include 'template.html' %}

Si estende

Il tag extends può essere utilizzato per estendere un modello da un altro. La sua sintassi è la seguente:

{% extends "template.html" %}

Bloccare

Block funge da segnaposto e sostituisce il contenuto. I nomi dei blocchi sono costituiti da caratteri alfanumerici e trattini bassi. Per esempio,

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

Incorporare

Il embedtag esegue una combinazione di include ed extends. Ti consente di includere il contenuto di un altro modello. Consente inoltre di sovrascrivere qualsiasi blocco definito all'interno del modello incluso, ad esempio quando si estende un modello. La sua sintassi è la seguente:

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

Filtro

Le sezioni dei filtri consentono di applicare filtri Twig regolari su un blocco di dati del modello. Per esempio,

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

Qui, il testo verrà modificato in maiuscolo.

Per

Forloop recupera ogni elemento in una sequenza. Per esempio,

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

Se

Il ifin Twig è simile a PHP. L'espressione restituisce true o false. Per esempio,

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

Filtri

Twig contiene filtri. Viene utilizzato per modificare il contenuto prima del rendering. Di seguito sono riportati alcuni dei filtri importanti.

Lunghezza

Il filtro della lunghezza restituisce la lunghezza di una stringa. La sua sintassi è la seguente:

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

Inferiore

Il filtro inferiore converte un valore in minuscolo. Per esempio,

{{ 'SYMFONY'|lower }}

Produrrebbe il seguente risultato:

symfony

Allo stesso modo, puoi provare con le maiuscole.

Sostituire

Il filtro di sostituzione formatta una determinata stringa sostituendo i segnaposto. Per esempio,

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

Produrrà il seguente risultato:

tutorials point website

Titolo

Il filtro del titolo restituisce una versione titlecase del valore. Per esempio,

{{ 'symfony framework '|title }}

Produrrà il seguente risultato:

Symfony Framework

Ordinare

Il filtro di ordinamento ordina un array. La sua sintassi è la seguente:

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

Trim

Il filtro di ritaglio ritaglia gli spazi (o altri caratteri) dall'inizio e dalla fine di una stringa. Per esempio,

{{ '  Symfony!  '|trim }}

Produrrà il seguente risultato:

Symfony!

Funzioni

Twig supporta le funzioni. Serve per ottenere un risultato particolare. Di seguito sono riportate alcune delle importanti funzioni di Twig.

Attributo

Il attributepuò essere utilizzata per accedere a un attributo "dinamico" di una variabile. La sua sintassi è la seguente:

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

Per esempio,

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

Costante

La funzione costante restituisce il valore costante per una stringa specificata. Per esempio,

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

Ciclo

La funzione ciclo esegue un ciclo su una matrice di valori. Per esempio,

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

Data

Converte un argomento in una data per consentire il confronto delle date. Per esempio,

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

Produrrà il seguente risultato:

Choose your location before May 15, 2017

L'argomento deve essere in uno dei formati di data e ora supportati da PHP.

Puoi passare un fuso orario come secondo argomento.

Dump

La funzione dump scarica le informazioni su una variabile del modello. Per esempio,

{{ dump(user) }}

Max

La funzione max restituisce il valore più grande di una sequenza. Per esempio,

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

Min

La funzione min restituisce il valore più piccolo di una sequenza. Per esempio,

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

Includere

La funzione include restituisce il contenuto renderizzato di un modello. Per esempio,

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

Casuale

La funzione random genera un valore casuale. Per esempio,

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

Gamma

La funzione intervallo restituisce un elenco contenente una progressione aritmetica di numeri interi. Per esempio,

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

Produrrà il seguente risultato:

1,2,3,4,5

Layout

Un layout rappresenta le parti comuni di più visualizzazioni, ad esempio, intestazione di pagina e piè di pagina.

Ereditarietà del modello

Un modello può essere utilizzato da un altro. Possiamo ottenere ciò utilizzando il concetto di ereditarietà del modello. L'ereditarietà dei modelli consente di costruire un modello di "layout" di base che contiene tutti gli elementi comuni del sito web definiti come blocchi.

Facciamo un semplice esempio per capire di più sull'ereditarietà dei modelli.

Esempio

Considera il modello di base che si trova in "app / Resources / views / base.html.twig". Aggiungi le seguenti modifiche al file.

base.html.twig

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

Ora spostati nel file del modello di indice che si trova in "app / Resources / views / default / index.html.twig" . Aggiungi le seguenti modifiche.

index.html.twig

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

Qui, il {% extends %}tag informa il motore di modelli di valutare prima il modello di base, che imposta il layout e definisce il blocco. Viene quindi eseguito il rendering del modello figlio. Un modello figlio può estendere il layout di base e sostituire il cartiglio. Ora, richiedi l'URL "http: // localhost: 8000" e puoi ottenere il suo risultato.

Risorse

L'asset gestisce la generazione di URL e il controllo delle versioni di risorse web come fogli di stile CSS, file JavaScript e file di immagine.

JavaScript

Per includere file JavaScript, utilizza l'estensione javascripts tag in qualsiasi modello.

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

Fogli di stile

Per includere file di fogli di stile, usa il stylesheets tag in qualsiasi modello

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

immagini

Per includere un'immagine, puoi utilizzare il tag immagine. È definito come segue.

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

Asset composti

Puoi combinare molti file in uno solo. Questo aiuta a ridurre il numero di richieste HTTP e produce migliori prestazioni 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 %}