Drapo Framework for ASP.NET Core — Components

No post Drapo Framework for ASP.NET Core — Initial eu comentei que algumas configurações do eu falaria mais adiante, portanto, aqui vou falar sobre como funciona a criação e execução de componentes feita pelo drapo.

Middleware Pipeline

No método ConfigureDrapo conforme exemplo a seguir, temos nas options o comando para indicar para o drapo qual o caminho onde os components irão ficar.

options.Config.LoadComponents(string.Format("{0}{1}components", env.WebRootPath, Path.AltDirectorySeparatorChar), "~/components");

Isto significa que na pasta wwwroot você vai ter uma pasta chamada components.

Create Component

Qual o real objetivo de ter um componente? É poder utilizá-lo em diversos pontos do sistema sem que haja necessidade de a todo momento duplicar o código utilizado.

O drapo em sua inicialização, procura dentro da pasta components uma outra pasta e considera que ela é o nome do componente.
Dentro da pasta com o nome do componente, deve haver:

• Um arquivo [nome do componente].ts que é o código TypeScript do componente;
• Um arquivo [nome do componente].html que é o código html do componente;

No meu exemplo, vou criar um componente chamado checkbox parar poder explicar a sequência de funcionamento e execução que o drapo faz.

Checkbox HTML

O html do componente você pode colocar o que for necessário para que ele se comporte como um componente, sempre tendo em mente que ele é genérico e pode ser reutilizado em vários lugares do sistema.

Na criação do html conforme o exemplo abaixo, utilizei alguns recursos interessantes para um componente e de uso geral do drapo.

• dc-: O d representa o drapo e o c é de component, o que vier depois é o nome de um parâmetro do componente, ou seja, sim, você pode passar parâmetros para o seu componente.
• d-dataKey: é o nome da chave onde dados serão armazenados no DOM virtual criado e controlado pelo drapo.
• d-dataType: é o tipo do dado. O parent deste exemplo indica que neste dataKey estarão as propriedades que representam os parâmetros do componente, value e label.
• d-dataLoadType: é a forma com que os valores do dataKey serão carretados. Neste exemplo os valores são carregados por reference.
• d-dataValue: como a forma de carregamento dos valores é realizado por reference, serão criados as propriedades do dataKey a partir do prefixo dc-, isso significa que teremos um dataKey com 3 propriedades: value, label e onclick.
• d-model: é a fonte onde o a informação está, pode ser um dataKey inteiro ou uma propriedade.
• {{}}: as chaves chamamos de mustache, o drapo entende que tudo que está dentro das chaves deve ser interpretado, lido e dependendo do input setado o valor de forma correta conforme cada elemento do html.

Component Initialization

O drapo ao ler o arquivo com código TypeScript procura pela seguinte sintaxe para sua inicialização:

async function checkboxConstructor

Onde,

• checkbox: o prefixo é mesmo nome da pasta do componente;
• Constructor: o sufixo é sempre a palavra “Constructor”;

Esta é a chamada de inicialização do componente.
A imagem a seguir exemplifica a estrutura da pasta components.

Já no TypeScript é importante falar sobre alguns pontos:

• Por padrão o drapo chama função de inicialização passando por parâmetro o elemento html onde o componente está sendo utilizando e o objeto da classe DrapoApplication.
• Nesta função é inicializada a classe Checkbox que representa o componente como sendo um objeto, isso permite que o componente tenha escopo e contexto.

Use the Component

Para utilizar o componente criado é bem simples:

• d-dataKey: criei aqui um dataKey do tipo object, ele possui duas propridades.
• d-dataProperty-label-name: o nome da propriedade é Label.
• d-dataProperty-label-value: o valor da propriedade Label é Click to check.
• d-dataLoadType: os valores das propriedades são carregadas ao final do carregamento da página quando for startup.
• d-checkbox: é desta forma que o componente é utilizado no html, com o valor de seus parâmetros sendo setados a partir de um dataKey já pré-definido.

Este processo de passagem de parâmetros para o componente pode ser feito de diversas formas, inclusive utilizando o TypeScript para ler os valores dos parâmetros e atribuí-los ao componente.

TypeScript

O TypeScript apenas é utilizado para facilitar o desenvolvimento, pois o resultado final será sempre um JavaScript já no padrão ES5 (ECMAScript 5) que funciona em diversos navegadores.

Result

A seguir a imagem com o resultado de execução da página no caminho “ http://localhost:5000/app/components/checkbox/index.html", onde o checkbox que é o componente criado é apresentado, inicializado, com o valor do label setado e de seu valor também.

Debugger

Na imagem anterior, eu aproveitei e estou mostrando o debugger do drapo, através do CTRL+F2 o debugger é aberto e é possível ver os dataKeys, suas propriedades e seus valores.

Esta é apenas uma desgustação do debugger, através dele é possível ver muita coisa acontecendo no drapo e no momento certo eu vou mostrando o resultado.

Github

Você pode conferir tudo isso no Github.

Originally published at http://alextochetto.com on September 15, 2020.