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

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

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

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

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

  • 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

Result

Debugger

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

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