Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Com o Cronapp, você pode criar regras de negócio no front end utilizando blocos de programação, que facilitam ainda mais a implementação do código. Com esse recurso, será necessário apenas arrastar blocos para desenvolver uma funcionalidade. 

Utilizando o mesmo exemplo da página Utilizando Blockly para construir regras de negócio no backend temos o diagrama abaixo:

Image RemovedImage AddedFigura 1 - Diagrama do Projeto Exemplo


Diferentemente da página citada acima vamos utilizar recursos do front-end, para isso você deve ir na árvore de recursos e clicar no ícone de "ir para os blocos do tipo cliente" ( figura 2). Estando na pasta de blocos de front-end, clique com o botão direito > novo > bloco de programação (figura 3).


Criando a Função a partir dos blocos


Image RemovedImage AddedFigura 2 - Ícone na árvore de recursos 


Image RemovedImage Added

Figura 3 - Criando Blockly

 Depois disso, será aberto um Pop-pup, onde  você irá clicar em Bloco de programação vazio e avançar (figura 4), após isso você indicará o nome do arquivo de blocos e a função específica a ser criada (figura 5).

Image RemovedImage Added

Figura 4 - Pop-up para criar um  Bloco


Image RemovedImage Added

Figura 5 - Nome e função do Bloco


Será aberto um arquivo de blocos, aonde você verá um bloco já criado com o nome escolhido anteriormente, pronto para ser utilizado (figura 6).

Image RemovedImage AddedFigura 6 - Arquivo de blocos


Exemplo

Para exemplificar, vamos criar uma função para mostrar a data e hora  ao clicar um botão. Para isso é necessário seguir alguns passos, e gerar vários blocos.  Clique na opção tela do menu de tipos de blocos, após isso você verá que foi aberto um menu com várias blocos de tela (figura 7). Vamos escolher a opção exibir notificação e arrastar para dentro da nossa função (animação 1). Após isso, Iremos clicar na opção data e hora, aonde encontraremos o bloco para obter data e hora atual (figura 8). É importante verificar o nome do bloco, descrição e parâmetros, pois nesse exemplo não poderia ser colocado o bloco de data diretamente como mensagem uma vez que a mensagem espera uma string, por isso vamos utilizar um conversor de objeto para string (figura 9).

 

Image RemovedImage Added 

Figura 7 - Funcionalidade de blocos na tela

 


Image RemovedImage AddedAnimação 1 - Associando uma funcionalidade a função do bloco

  

Image RemovedImage AddedFigura 8 - Funcionalidade de obter data e hora atual


 

Image RemovedImage AddedFigura 9 - funcionalidade de converter objeto em String

 


Image RemovedImage Added

 

Figura 10 - Mostrando a forma correta de utilizar os parâmetros do bloco

 


A função estando pronto basta criarmos um botão na view para chamarmos a função (figura 11). Após inserir o botão é necessário adicionar um evento a esse botão e escolher a função que criamos (figura 12). Agora basta abrir o projeto verificar o resultado na view escolhida (figura 14).

 

Image RemovedImage AddedFigura 11 - Inserindo um botão na view

 


Image RemovedImage AddedFigura 12 - Associando o botão a função de blocos
 

 

 Image RemovedImage Added

Figura 13 - Função escolhida

 


 

 

 

Image RemovedImage AddedFigura 13 - Resultado na view


 

 


 


Panel
titleNesta página

Table of Contents