AdvPL atuando como Angular (SPA)

No último post fiz um comparativo entre o AdvPL e o Angular, e neste experimentei um modelo, montei uma classe AdvPL me aproximando o máximo possível de um componente Angular, respondendo como uma Single Page Application (AJAX).

Link para os videos anteriores e o post do Medium
Vídeo parte 1
Vídeo parte 2
Post Medium

Vamos ver como ficou…

Link para os fontes usados no exemplo
https://github.com/totvs/twebengine-sample
https://github.com/totvs/twebchannel-js

Fiz a montagem padrão quando utilizamos o SmartClient como webview, utilizando o TWebChannel (websocket), o TWebEngine (chromium), e o componente NiverComp, fazendo a vez de WebComponent.

O bloco de código bLoadFinished vai ser disparado assim que todos os componentes da página HTML forem carregados. Neste exemplo, apenas exibindo algumas informações através da função myLoadFinish().

O bloco bJsToAdvpl do componente TWebChannel será disparado ao receber informações via JavaScript através do método twebchannel.jsToAdvpl.

Ao receber as informações, a função associada ao bloco (static jsToAdvpl) poderá fazer os devidos tratamentos em AdvPL.

Corpo da classe AdvPL

No Constructor definimos o nome do nosso arquivo HTML (mainHTML), que será automaticamente salvo no diretório temporário da estação. Na sequência, baixamos no mesmo diretório o arquivo twebchannel.js do RPO. Ele é responsável pela comunicação via websocket. Assim, este arquivo precisa ser compilado em seu ambiente.

O método OnInit (NgOnInit do Angular) também será disparado no fim da carga da página HTML, possibilitando ações que dependam disso.

O método Template (template/templateUrl do Angular) gera a estrutura inicial do nosso arquivo HTML.

Você poderá inserir trechos em tempo de execução em seu HTML, seja JavaScript, CSS ou mesmo HTML, que é exatamente o que faremos durante a inclusão de itens…

Como devem ter percebido, neste trecho utilizei um command, o BeginContent, que permite inserir um trecho de texto (qualquer) que será concatenado em uma variável, no caso a cHTML. É um facilitador para inserir um grande trecho de texto sem a necessidade de usar, por exemplo, cHTML += “meu texto”, e assim por diante.

Aqui começam as diferenças. No Angular, eu carregaria as funções JS diretamente no meu componente, mas em AdvPL precisamos injetá-las no corpo do HTML. Fazemos isso através do método Script, também utilizando o command BeginContent.

O mesmo acontece com o método Style (styles do Angular).

E, por fim, no método Constructor concatenamos JavaScript, Página de Estilo e HTML antes de salvá-lo em disco. Assim temos o Core de nossa aplicação.

Em nosso Getter and Setter tive que usar de “licença poética” e acabei me aproximando do State do React, utilizando um array Global para guardar informações importantes à aplicação.

Já no Angular, você usaria os métodos get e set diretamente para cada variável. Vamos ver como ficou…

No Constructor criei um array nomeado ::mainData, que através do método Get retorna informações, e do Set às define. “Óbvio…”

No método Get eu localizo e retorno o item no array.

No método Set, repito a procura. Existindo, atualizo. Não existindo, crio um novo item no array.

Atente que caso a variável recebida seja um Vetor, executo um aClone. Caso contrário, faria referência à variável original e poderia atualizar acidentalmente seu valor.

Aqui é onde o AJAX fica evidente.

Ainda no método Set disparamos um bloco (bUpdate) após a atualização da variável. No exemplo, usei para exibir em tela os itens inseridos. Veja como:

No Submit do formulário HTML, disparo o Set da variável aNivers e passo a função showNiverItens() para ser executada após essa atualização.

Agora a função ShowNiverItens() executa a inclusão dos itens através do método oWebChannel:advplToJs.

Veja que durante a inclusão do item já crio a mensagem de auto-deleção, chamando o método jsToAdvpl via JS com a mensagem <delItem>

Voltando ao fluxo, a mensagem para inclusão será recebida pelo método twebchannel.advplToJs que fará tratamento.

Executando a aplicação.

Se assistiram ao primeiro vídeo e atentaram para os exemplos, verão que neste componente também inseri no código tags, como a [*Material_UI], um facilitador para comparar os projetos. Se não entendeu o que eu comentei, acompanhe os links com o primeiro projeto que demonstrei.

Como comentei no início, este exemplo foi um experimento, uma maneira fácil de entender o conceito de integrar o HTML com o AdvPL, com um jeitão de Angular.

Como sempre, espero que o material seja útil e me deixe saber suas impressões sobre o assunto.