Nesse artigo vamos conhecer o que são os Templated Components do Blazor. Se você é novo no Blazor, sugiro que leia os artigos mais introdutórios antes de trabalhar com os Templated Components. Seguem algumas sugestões:
- Introdução
- Criando um novo Projeto com o Visual Studio 2019
- Criando um novo Projeto com o VSCode
- Componentes
- Parâmetros nos Componentes
- ChildContent
Templated Components
Templated Components são componentes que aceitam um ou mais “fragmentos de interface” como parâmetro. Esses parâmetros são então utilizados como parte da lógica de renderização do Componente.
Por não ter uma tradução amigável para o termo, vamos continuar chamando esse recurso de Templated Components.
Os Templated Components nos permitem criar componentes bem mais complexos e reutilizáveis, como por exemplo:
- Um componente de Lista que permite que você especifique um template que define como os itens da lista serão renderizados.
- Um componente de Tabela, onde podemos especificar templates separados para definição do header, rows e footer.
Para exemplificar a ideia do Templated Component, vamos criar um componente chamado Painel, que irá receber 3 fragmentos HTML. Um fragmento para o Título, outro para o Corpo e um terceiro para o Rodapé.
RenderFragment
Como o próprio nome nos revela, um RenderFragment define um fragmento HTML para renderização. Ele é uma classe do Blazor, que usamos para definir parâmetros para receber esses trechos de HTML.
Você já deve ter ouvido falar no recurso de ChildContent, onde é possível passar o conteúdo HTML de um componente por parâmetro. Isso é possível através de um parâmetro do tipo RenderFragment.
No caso do ChildContent, o componente pode ter apenas um único parâmetro RenderFragment. Já com os Templated Components, nós podemos ter vários.
Veja na Figura 1, a definição de um Templated Component contendo três RenderFragments.
Nesse exemplo foi criado o componente Painel.razor, contendo os três parâmetros do tipo RenderFragment. Esses fragmentos serão utilizados para renderizar um painel, no estilo de janela de diálogo.
Usando o Templated Component
Para usar um Templated Component, precisamos definir todos os seus fragmentos HTML dentro da TAG do componente. Vamos utilizar esse componente no Index.razor, como você pode ver na Figura 2.
Como você pode ver, cada parâmetro RenderFragment é passado para o componente através de uma TAG, com o mesmo nome do parâmetro.
Execute a sua aplicação e veja o resultado, como mostra a Figura 3.
Concluindo
A ideia do Templated Component abre um enorme leque de possibilidades. Com esse recurso nós podemos desenvolver componentes de alto nível, para otimizar e reutilizar código em nossos projetos.
Um recurso muito importante dos Templated Components, que não vimos nesse artigo, é a tipagem genérica, que vai trazer ainda mais flexibilidade aos seus componentes. Veremos esse recurso no próximo artigo desse blog.
Grande Abraço e até lá.
Blaze of Code 
2 comentários em “Templated Components do Blazor”