Blazorise — UI em app Blazor

3 min readJan 25, 2019

Falar de uma tecnologia nova que nem foi lançada oficialmente é um prazer, pois requer estudar, testar e entender as vantagens de adota-la. O Blazor (https://blazor.net/) é um experimento da Microsoft para desenvolver apps WEB com C# e WebAssembly, ou seja, você escreve C# puro para rodar nos navegadores, tornando assim, a app mais inteligente com o processamento direto no cliente.

Agora, como que fica a interface de usuário? Do ponto de vista do desenvolvedor, sabemos que os navegadores entendem HTML, então você pode associar um CSS para tornar a UI com um design melhor. Sendo assim, entra o conceito do que é Blazorize, que é uma biblioteca de componentes criados para o framework Blazor, usando CSS com Boostrap, Bulma ou Material. Com isto, você tem prontos todos os componentes usados em WEB app, como Textbox, caixa de listagem, botão, datas, cartão, tab, modal, etc.

Isto permite inserir nas apps, através de tags similares ao HTML, com os componentes prontos do Blazorize, ganhando em produtividade. Caso contrário você teria que escrever os próprios componentes, o que na maioria das vezes é trabalhoso e não tem vantagens. Os componentes do Blazorize são extensíveis, caso queira aprimorá-los.

Por onde começo?

A primeira coisa é entender como instalar via Nuget e usa-los no projeto. O link é https://blazorise.com/docs/start/#installing-nuget-packages . Basicamente há 3 pacotes com CSS e componentes específicos, todos instalados via comando Nuget direto no VS ou VS Code. Só atente que obrigatoriamente o projeto DEVE ser do tipo Blazor.

Install-Package Blazorise.Bootstrap
Install-Package Blazorise.Material
Install-Package Blazorise.Bulma

Cabe ressaltar que os nomes dos componentes são TextEdit, CheckEdit, etc, devido à limitação no Razor e no Visual Studio, além de não ser possível nomea-los com o mesmo nome das tags HTML (form, button, text).

Como aplicar?

Antes de mais nada, o projeto deve ser do tipo Blazor, você deve decidir qual dos 3 frameworks quer aplicar de acordo com seu layout.

Passo1: Instalar via Nuget:

Install-Package Blazorise.Material
Install-Package Blazorise.Bootstrap
Install-Package Blazorise.Bulma

Passo 2: Adicionar as referências do CSS e os Scripts no arquivo index.html, veja o exemplo do Bootstrap:

Caso use o Material, o código é:

<! — CSS → <! — Add Material font (Roboto) and Material icon as needed →
<link href=”https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i|Roboto+Mono:300,400,700|Roboto+Slab:300,400,700" rel=”stylesheet”>
<link href=”https://fonts.googleapis.com/icon?family=Material+Icons" rel=”stylesheet”>

<! — Optional JavaScript →
<! — jQuery first, then Popper.js, then Bootstrap JS →
<script src=”https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src=”https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>

Caso use o Bulma, o código é:

Passo 3: Abra o arquivo _ViewImports.cshtml e adicione a referência à taghelper:
@addTagHelper *, Blazorise
@using Blazorise

Passo 4: Agora é preciso referenciar o serviço, portanto, abra o arquivo Startup.cs e adicione os códigos:

using Blazorise;
using Blazorise.Bootstrap;

public class Startup
{
public void ConfigureServices(IServiceCollection services)
{
services.AddBootstrapProviders()
.AddIconProvider(IconProvider.FontAwesome);
}
}

Caso seja o Material, use:
using Blazorise.Material;

Caso seja o Bluma, use:
using Blazorise.Bulma;

Tags HTML do Blazorize

A seguir mostrarei alguns exemplos de tags mais usadas nos formulários de páginas WEB.

Uso de caixas de texto:

Como o Blazor usamos códigos C# para escrever diretamente no navegador, você pode usar propriedades para fazer referência em qualquer outro elemento, graças ao conceito de Bind:
<TextEdit bind-Text=”@nome” />

@functions {
string nome; }

Ou, caso queira implementar evento, use:
<TextEdit Text=”@nome” TextChanged=”@OnNomeChanged” />
@functions{
string nome;
void OnNomeChanged( string value ) {
nome = value; } }

Veja um exemplo de seleção onde há a propriedade e o evento declarado a ser disparado quando o usuário selecionar um item.

@functions{
string selectedValue;
void OnSelectedValueChanged( string value ) {
selectedValue = value;
Console.WriteLine( selectedValue ); }
}

Outros exemplos você pode pesquisar na própria documentação do Blazorize. Vale a pena estudar os exemplos rodando diretamente nos sites:
https://bootstrapdemo.blazorise.com/

https://materialdemo.blazorise.com/

https://bulmademo.blazorise.com/

Conclusão

Tenho certeza que você irá tirar proveito quando o Blazor for lançado oficialmente em 2019. Escrever códigos em C# ao invés de javascript através do WebAssembly, com todos os recursos de UI facilitados, só tende a crescer rapidamente o Blazor.

Boa sorte, sucesso nos projetos e se precisar treinar o seu time, fale comigo rehaddad@msn.com

Blazorise — UI em app Blazor

Por onde começo?

Como aplicar?

Tags HTML do Blazorize

Conclusão

Written by Renato Haddad

No responses yet