Templated Components do Blazor

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:

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.

Figura 1: Criando um Templated Component com 3 Fragmentos HTML

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.

Figura 2: Passando três fragmentos HTML como parâmetro

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.

Figura 3: Testando o Templated Component

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á.

2 comentários em “Templated Components do Blazor

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair /  Alterar )

Foto do Google

Você está comentando utilizando sua conta Google. Sair /  Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )

Conectando a %s