View VH

O Hello fornece uma sintaxe simples e flexível para renderização fácil de arquivos de visualização no lado do servidor.

Introdução

O motor de template do Hello Microframework, conhecido como VH, foi desenvolvido com o objetivo de ser simples e extensível. Foi projetado para oferecer recursos mais enxutos, porém suficientes para desenvolver templates completos de forma simples. O VH proporciona uma maneira fácil e organizada de renderizar arquivos de visualização no lado do servidor.

Para utilizar a sintaxe VH, basta colocar seus arquivos de template com extensão "*.view.php" na pasta "resources/views" do seu projeto. O VH foi inspirado em outros motores de template, como o Blade, porém de forma mais simplificada.

O VH utiliza um sistema de cache. Isso significa que quando um arquivo de template é criado e renderizado, ele cria um segundo arquivo em cache. Nas próximas requisições, o acesso ao arquivo não será feito no arquivo original, mas sim no arquivo que está armazenado em cache. Dessa forma, é possível obter um desempenho melhor, uma vez que o servidor não precisa reprocessar o template a cada requisição.

Quando o arquivo original é modificado e atualizado pelo desenvolvedor, o arquivo de cache correspondente também é atualizado. Isso permite que o fluxo de cacheamento seja repetido, garantindo que as alterações no template sejam refletidas corretamente.

O uso do sistema de cache no VH ajuda a melhorar o desempenho e a eficiência do processo de renderização de templates.

Alternativas ao VH

É possível usar um motor de template diferente do oferecido nativamente pelo Hello Microframework. Para fazer isso, você pode registrar o seu motor de template como um serviço. No entanto, é importante ressaltar que incentivamos os desenvolvedores a utilizar ferramentas reativas, como VueJS, ReactJS, Angular, entre outras.

Acreditamos que a responsabilidade principal de renderizar a interface deve estar no dispositivo do usuário final que está acessando a aplicação. Dessa forma, o foco principal da aplicação pode ser direcionado para o processamento e o fornecimento de dados brutos, lidando com a lógica de negócio. As ferramentas reativas oferecem recursos robustos para a criação de interfaces de usuário interativas e dinâmicas.

No entanto, não há impedimento em utilizar o motor de template nativo VH, baseado em PHP, ou qualquer outro motor de template similar de sua escolha, se assim preferir. A escolha do motor de template depende das necessidades e preferências do projeto e da equipe de desenvolvimento.

Você poderá usar o Hello CLI com o comando make para criar um arquivo de template., usando a seguinte sentaxe:

php hello make:view nome-do-arquivo

Impressão de variáveis

Impressão de variáveis do tipo texto ou numérica:

<h1>{{ $name }}</h1> 

Impressão de variáveis de conteúdo do tipo HTML:

<h1>{! $name !}</h1> 

Token CSRF

Você pode exibir as seguintes variáveis no template VH padrão para o campo de CSRF e o token de CSRF:

<!-- Imprime o token CSRF -->
{{csrf_token}}

<!-- Imprime o token CSRF dentro de um input do tipo hidden -->
{{csrf_field}}

Estrutura condicional

O VH oferece diretivas para trabalhar com estruturas condicionais de maneira simples e elegante dentro do seu arquivo de visualização.

{if 5 > 4}
    <h1>True</h1>
{/if}

{if 10 < 20}
    <h1>True</h1>
{else}
    <h1>false</h1>
{/if}

{if 10 < 8}
    <h1>True</h1>
{elseif 5 > 8}
     <h1>Truex</h1>
{else}
    <h1>false</h1>
{/if}

Aplicando estilos condicionais

É possível utilizar funções auxiliares para aplicar estilos e classes CSS de forma condicional.

Estrutura de repetição

O VH oferece diretivas para trabalhar com estruturas de repetições de maneira simples e elegante dentro do seu arquivo de visualização.

{for $items as $item }
     <h1>{# $item->id #}</h1>
{/for}


{for $item in $items}
     <h1>{# $item->id #}</h1>
{/for}

Função de inclusão:

Você pode incluir qualquer arquivo externo de template HTML com VH no seu arquivo atual sem precisar especificar a extensão do arquivo. Basta informar apenas o nome do arquivo, sem o "view.php". Por exemplo, se você deseja incluir o "header" no seu "index", pode dividir o seu layout em partes, como header, sidebar, content e footer, em arquivos de templates VH separados.

Além disso, é possível acessar subpastas de arquivos de template utilizando o ponto (.) em vez da barra (/), o que facilita a legibilidade da sintaxe. A inclusão de um template dentro de outro template VH é uma forma simples de estender as funcionalidades do seu projeto e melhorar a organização visual do sistema, facilitando futuras manutenções.

Lembre-se de que a função de template include funciona de maneira semelhante à função auxiliar view, que retorna um arquivo de template renderizado. Na verdade, a função include utiliza a função view nos bastidores para fornecer esse recurso.

{include 'header'}

{include 'layouts.header'}

Além disso, é possível incluir arquivos de templates VH diretamente de repositórios de módulos utilizando o símbolo "@" seguido do nome do diretório do módulo e do caminho ou nome do arquivo de template. Por exemplo: @Modulo.home. Dessa forma, a função include irá carregar diretamente o arquivo de template que esteja dentro do diretório "View" existente na estrutura do módulo. Isso proporciona uma maneira conveniente de organizar e reutilizar templates de módulos em seu sistema.

{include '@modulo.header'}

{include '@modulo.layouts.header'}

Ao utilizar a função ou diretiva 'include', que utiliza internamente a função auxiliar 'view', é possível declarar um segundo parâmetro para injetar variáveis como dependência, de forma semelhante à função 'view'. Essas variáveis podem ser recuperadas no próximo visualizador.

{include 'teste2',["server"=>"12345"]}

Construindo componentes com sections

Um dos melhores recursos da linguagem de template VH, também conhecida como View HTML, é a possibilidade de componentizar trechos de código. Uma section no VH é essencialmente um bloco isolado de código HTML e JavaScript, que pode ser reutilizado em qualquer parte do sistema. Isso permite criar componentes, como modais e botões, escrevendo o código apenas uma vez e reutilizando-o em várias partes do seu template. As sections podem ser criadas em arquivos de templates distintos e usadas para estender as funcionalidades de outros componentes, criando uma estrutura modular.

Além disso, é possível passar valores para dentro dos componentes, utilizando um segundo parâmetro do tipo array associativo. As chaves desse array podem ser acessadas utilizando o símbolo "@" na frente. No entanto, dentro de uma section, não é possível utilizar aspas duplas diretamente. Para fazer uso delas, é necessário escapá-las da seguinte forma: """.

Para criar um componente usando a section, utilize a seguinte sintaxe: {section 'nome_da_sua_section'}. Em seguida, para exibir a section, utilize a função de template show da seguinte forma: {show 'nome_da_sua_section'}. É possível passar valores de propriedades para dentro do componente da seguinte forma: {show 'nome_da_sua_section', ['nome' => 'Paulo']}. Para acessar o valor do array informado no show dentro da sua section, basta utilizar o símbolo "@" na frente do nome do índice, como no exemplo: @nome. Caso você não informe um array, o valor a ser acessado terá o nome de "@scope".

<!--Criação da section para componentizar uma tag h1-->
{section 'title'}
     <h1 class='bg-primary'>Esse é um título criado com section.</h1>
{/section}

<!--Renderização/exibição do title acima-->
{show 'title'}

Podemos mudar o dizer do título ou até mesmo a cor da seguinte forma.

{section 'title'}
     <h1 class='bg-@color'>@title</h1>
{/section}

{show 'title', ['title'=>'Meu título','color'=>'danger']}

Passando um valor diferente de um array.

{section 'title'}
     <h1>@scope</h1>
{/section}

{show 'title', 'Título da página'}

PHP bruto

Em algumas situações, pode ser necessário escrever código PHP puro dentro de um arquivo de template VH. Para fazer isso, você pode usar a diretiva php. Essa diretiva permite que você insira blocos de código PHP diretamente no seu arquivo de template VH, sem a necessidade de escapar ou modificar a sintaxe.

Aqui está um exemplo de como usar a diretiva php:

<h1>Hello</h1>
{php}
     $sum = 10 + 5;
{/php}

<h1>SUM: {{$sum}}</h1>

Nesse exemplo, o bloco de código PHP está envolvido pela diretiva php. Você pode escrever qualquer código PHP válido dentro desse bloco, incluindo declarações, expressões, loops, condicionais, etc. O código será interpretado e executado quando o arquivo de template for renderizado.

Lembre-se de que, ao utilizar a diretiva php, você está inserindo código PHP diretamente no seu arquivo de template VH, o que pode afetar a legibilidade e a manutenção do código. Portanto, é importante usar essa diretiva com moderação e considerar se existem alternativas mais adequadas, como a criação de funções ou variáveis no arquivo do controlador.

Diretiva JSON

A função {json} é utilizada para converter um array em um objeto JSON. Essa função é amplamente empregada na interação entre código PHP e JavaScript, especialmente para retornar dados de um modelo de banco de dados em formato de array ou objeto de array em JavaScript.

Exemplo de código usando a diretiva json:

{php}
    $x = ['a'=>10,'b'=>'20'];
{/php}

{json $x}

Exemplo de saída do código acima:

{
  "a": 10,
  "b": "20"
}