Nesse artigo vamos falar um pouco sobre os Componentes Blazor. Para isso vamos utilizar uma aplicação Blazor já existente. Qualquer dúvida dê uma olhada nesse artigo, que mostra como criar um novo projeto Blazor usando o template do Visual Studio.
Componente
Assim como outros Frameworks Web, o Blazor é um Framework baseado em Componentes. Isso significa que praticamente todos os elementos que compõe uma aplicação Blazor, são Componentes.
Um Componente nada mais é do que uma “parte” de uma interface de usuário. Podendo ser toda uma página, um pequeno fragmento, uma janela de diálogo ou um formulário. Ou seja, qualquer elemento que no final será renderizado como uma interface de usuário é um componente da sua aplicação Blazor.
Diferente dos outros Frameworks Web, onde os componentes são escritos em HTML e JavaScript, um componente Blazor é escrito em HTML e C#. Um componente Blazor é escrito em um arquivo com extensão .razor. Veja na Figura 1 que em nossa aplicação de exemplo temos quatro componentes na pasta Pages.
Abra o componente Counter.razor e veja, como mostra a Figura 2, que um componente pode ser composto de três blocos de código.
O primeiro bloco de código é a área onde temos as diretivas do componente. Existem várias diretivas em um componente, que realizam diversas tarefas como importar outros namespaces, indicar uma herança, injetar serviços, definir rotas, entre outros.
Nesse exemplo temos uma única diretiva @page, que define a rota para a qual esse componente irá responder. Veja mais sobre rotas nesse outro artigo aqui.
O segundo bloco de código contém a estrutura HTML que será renderizada pelo componente. Além de HTML, nós também podemos combinar código C# para se comunicar com o terceiro bloco.
O terceiro bloco de código é chamado de @code, onde temos código C#, responsável pela lógica do nosso componente. Veja que nesse exemplo temos um atributo e um método. O atributo é renderizado no HTML dentro da tag <p>, e o método é chamado pelo botão HTML.
Toda vez que o usuário clicar no botão, o método é executado, e o atributo incrementado em 1. Automaticamente o HTML é modificado para o usuário. Faça um teste executando a aplicação.
Compilação e Execução
Quando compilamos a nossa aplicação, o componente (HTML+C#) é convertido em uma classe .NET. O nome dessa classe é o mesmo nome do arquivo .razor. O código C# do bloco @code são os membros da classe (atributos, propriedades, métodos).
Quando a aplicação é executada, os Componentes são renderizados em memória, numa representação do DOM (Document Object Model), chamada de render tree. Isso é usado para atualizar a UI da forma mais flexível e eficiente possível.
Sendo assim, quando o botão de componente Counter é clicado, ocorre o seguinte:
- O componente executa o método IncrementCount registrado no evento @onclick do botão
- O método executa o código que incrementa em 1 o atributo currentCount.
- O componente recria a sua árvore de renderização (render tree)
- Essa nova árvore de renderização é então comparada com a anterior
- Apenas as diferenças encontradas entre as duas árvores são aplicadas ao DOM
Reutilizando Componentes
Componentes podem responder a rotas como já vimos, mas eles também podem ser reutilizados dentro de outros componentes.
Faça o seguinte teste: abra o componente Index.razor, e no final do seu HTML inclua o componente Counter, como mostra a Figura 3.
Execute a sua aplicação e veja que o mesmo componente que reponde à rota \counter, também é renderizado dentro do componente Index.razor. Figura 4.
É importante saber que a declaração da rota de um componente é opcional. Podemos criar componentes que não respondem à nenhuma rota, e que simplesmente são reutilizados em outros componentes da aplicação.
Todo o modelo de reutilização que já temos no .NET pode ser aplicado aos componentes Blazor. Podemos criar componentes em projetos separados e reutilizá-los referenciando esses projetos na nossa Solução. Ou ainda, podemos publicar nossos componentes em pacotes nuget, e reutilizá-los em diferentes projetos.
No próximo artigo iremos explorar os parâmetros dos Componentes.
Grande Abraço e até o próximo!
Blaze of Code 