Symfony - View Engine

Uma camada de visualização é a camada de apresentação do aplicativo MVC. Ele separa a lógica do aplicativo da lógica da apresentação.

Quando um controlador precisa gerar HTML, CSS ou qualquer outro conteúdo, ele encaminha a tarefa para o mecanismo de modelagem.

Modelos

Os modelos são basicamente arquivos de texto usados ​​para gerar qualquer documento baseado em texto, como HTML, XML, etc. Ele é usado para economizar tempo e reduzir erros.

Por padrão, os modelos podem residir em dois locais diferentes -

app/Resources/views/- O diretório de visualizações do aplicativo pode conter os layouts de seu aplicativo e os modelos do pacote do aplicativo. Ele também substitui os modelos de pacote de terceiros.

vendor/path/to/Bundle/Resources/views/ - Cada pacote de terceiros contém seus modelos em seu diretório “Recursos / visualizações /”.

Twig Engine

Symfony usa uma poderosa linguagem de modelos chamada Twig. O Twig permite que você escreva modelos concisos e legíveis de uma maneira muito fácil. Os modelos Twig são simples e não processam tags PHP. Twig executa controle de espaço em branco, sandbox e escape automático de HTML.

Sintaxe

Twig contém três tipos de sintaxe especial -

• {{ ... }} - Imprime uma variável ou o resultado de uma expressão no modelo.

• {% ... %} - Uma tag que controla a lógica do modelo. É usado principalmente para executar uma função.

• {# ... #}- Sintaxe do comentário. É usado para adicionar comentários de uma ou várias linhas.

O modelo da base do galho está localizado em “app/Resources/views/base.html.twig”.

Exemplo

Vamos examinar um exemplo simples usando o mecanismo de galho.

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'); 
   } 
}

Aqui o render() método renderiza um modelo e coloca esse conteúdo em um objeto Response.

Agora vá para o diretório “views” e crie uma pasta “student” e dentro dessa pasta crie um arquivo “home.html.twig”. Adicione as seguintes alterações no arquivo.

home.html.twig

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

Você pode obter o resultado solicitando a url “http: // localhost: 8000 / student / home”.

Por padrão, Twig vem com uma longa lista de tags, filtros e funções. Vamos examinar um por um em detalhes.

Tag

Twig suporta as seguintes tags importantes -

Faz

o dotag executa funções semelhantes às de expressão regular, com a exceção de que não imprime nada. Sua sintaxe é a seguinte -

{% do 5 + 6 %}

Incluir

A instrução include inclui um modelo e retorna o conteúdo renderizado desse arquivo no namespace atual. Sua sintaxe é a seguinte -

{% include 'template.html' %}

Estende

A tag extends pode ser usada para estender um template de outro. Sua sintaxe é a seguinte -

{% extends "template.html" %}

Quadra

O bloco atua como um espaço reservado e substitui o conteúdo. Os nomes dos blocos consistem em caracteres alfanuméricos e sublinhados. Por exemplo,

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

Embutir

o embedtag executa uma combinação de include e extends. Ele permite que você inclua o conteúdo de outro modelo. Ele também permite que você substitua qualquer bloco definido dentro do modelo incluído, como ao estender um modelo. Sua sintaxe é a seguinte -

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

Filtro

As seções de filtro permitem que você aplique filtros Twig regulares em um bloco de dados de modelo. Por exemplo,

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

Aqui, o texto será alterado para maiúsculas.

Para

Forloop busca cada item em uma sequência. Por exemplo,

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

E se

o ifdeclaração no Twig é semelhante ao PHP. A expressão é avaliada como verdadeira ou falsa. Por exemplo,

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

Filtros

Twig contém filtros. É usado para modificar o conteúdo antes de ser renderizado. A seguir estão alguns dos filtros notáveis.

comprimento

O filtro de comprimento retorna o comprimento de uma string. Sua sintaxe é a seguinte -

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

Mais baixo

O filtro inferior converte um valor em minúsculas. Por exemplo,

{{ 'SYMFONY'|lower }}

Isso produziria o seguinte resultado -

symfony

Da mesma forma, você pode tentar letras maiúsculas.

Substituir

O filtro de substituição formata uma determinada string substituindo os marcadores de posição. Por exemplo,

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

Isso produzirá o seguinte resultado -

tutorials point website

Título

O filtro de título retorna uma versão titlecase do valor. Por exemplo,

{{ 'symfony framework '|title }}

Isso produzirá o seguinte resultado -

Symfony Framework

Ordenar

O filtro de classificação classifica uma matriz. Sua sintaxe é a seguinte -

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

aparar

O filtro de corte apara espaços em branco (ou outros caracteres) do início e do final de uma string. Por exemplo,

{{ '  Symfony!  '|trim }}

Isso produzirá o seguinte resultado -

Symfony!

Funções

Twig oferece suporte a funções. É usado para obter um determinado resultado. A seguir estão algumas das funções importantes do Twig.

Atributo

o attributefunção pode ser usada para acessar um atributo “dinâmico” de uma variável. Sua sintaxe é a seguinte -

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

Por exemplo,

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

Constante

A função constante retorna o valor constante de uma string especificada. Por exemplo,

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

Ciclo

A função de ciclo gira em uma matriz de valores. Por exemplo,

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

Encontro

Converte um argumento em uma data para permitir a comparação de datas. Por exemplo,

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

Isso produzirá o seguinte resultado -

Choose your location before May 15, 2017

O argumento deve estar em um dos formatos de data e hora suportados pelo PHP.

Você pode passar um fuso horário como o segundo argumento.

Despejar

A função de despejo despeja informações sobre uma variável de modelo. Por exemplo,

{{ dump(user) }}

Max

A função max retorna o maior valor de uma sequência. Por exemplo,

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

Min

A função min retorna o menor valor de uma sequência. Por exemplo,

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

Incluir

A função include retorna o conteúdo renderizado de um template. Por exemplo,

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

Aleatória

A função aleatória gera um valor aleatório. Por exemplo,

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

Alcance

A função de intervalo retorna uma lista contendo uma progressão aritmética de inteiros. Por exemplo,

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

Isso produzirá o seguinte resultado -

1,2,3,4,5

Layouts

Um Layout representa as partes comuns de várias visualizações, por exemplo, cabeçalho da página e rodapé.

Herança de modelo

Um modelo pode ser usado por outro. Podemos conseguir isso usando o conceito de herança de template. A herança do modelo permite que você construa um modelo de “layout” básico que contém todos os elementos comuns do site definidos como blocos.

Vamos dar um exemplo simples para entender mais sobre herança de template.

Exemplo

Considere o modelo base localizado em “app / Resources / views / base.html.twig”. Adicione as seguintes alterações no arquivo.

base.html.twig

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

Agora vá para o arquivo de modelo de índice localizado em “app / Resources / views / default / index.html.twig“ . Adicione as seguintes alterações nele.

index.html.twig

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

Aqui o {% extends %}tag informa ao mecanismo de modelagem para avaliar primeiro o template base, que configura o layout e define o bloco. O modelo filho é então renderizado. Um modelo filho pode estender o layout base e substituir o bloco de título. Agora, solicite a url “http: // localhost: 8000” e poderá obter o seu resultado.

Ativos

O Ativo gerencia a geração de URL e a versão de ativos da web, como folhas de estilo CSS, arquivos JavaScript e arquivos de imagem.

JavaScript

Para incluir arquivos JavaScript, use o javascripts tag em qualquer modelo.

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

Folhas de estilo

Para incluir arquivos de folha de estilo, use o stylesheets tag em qualquer modelo

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

Imagens

Para incluir uma imagem, você pode usar a tag de imagem. É definido como segue.

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

Ativos Compostos

Você pode combinar muitos arquivos em um. Isso ajuda a reduzir o número de solicitações HTTP e produz maior desempenho 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 %}