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-arquivoImpressã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"
}Last updated