A Fonte O Cronapp utiliza Fontes de dados faz  para fazer a comunicação entre um emissor de dados (via banco de dados ou bloco de programação) e um receptor (componentes visuais, relatórios, API etc), demais ferramentas do sistema. Essa comunicação é feita através de requisições REST (com o uso de OData) dentro ou fora da aplicação. Por padrão, a fonte de dados espera que o objeto possua a sua classe no diagrama de dados, porém, mostraremos nesse tutorial como alimentar a fonte de dados com objetos não descritos na aplicação. 

Para esse tutorial, será utilizado a seguinte API: https://jsonplaceholder.typicode.com/todos/ para retornar um array de objetos.

Fonte de dados

Configurações na fonte de dados.

Bloco servidor vazio

O primeiro passo desse tutorial é criar um bloco de programação do tipo servidor. Esse bloco só tem a função o objetivo de fazer o vínculo com a fonte de dados, pois uma fonte de dados só funciona quando está vinculado à um bloco ou a uma entidade - então esse bloco estará vazio.

Figura 1 - Bloco servidor vazio

Nova fonte de dados

O segundo passo é criar uma fonte de dados, então clique em Projeto (1 da Figura 2.1) no menu do sistema e depois em Fonte de dados (2 da Figura 2.1) para abrir a janela, por fim, clique no botão Nova fonte de dados (3 da Figura 2.1).

Figura 2.1 - Criar fonte de dados

Vincular bloco servidor

Ao abrir a janela da Fonte de dados, defina um nome no campo Nome da consulta e troque a opção Entidade por Bloco de programação (1 da Figura 2.2) para assim habilitar o botão do bloco e poder vincular o bloco servidor criado com essa fonte. Clique no botão "..." (2 da Figura 2.2) para abrir a janela de seleção do bloco, selecione a função do bloco que foi criado anteriormente (3 da Figura 2.2) e clique no botão selecionar (4 da Figura 2.2) para fazer o vínculo.

Figura 2.2 - Selecionando o bloco para vincular com a fonte

Informar atributos

Após salvar a fonte de dados, clique na aba Campos (1 da Figura 2.3) para criar os campos referentes ao objeto recebido. Nessa hora é importante conhecer a estrutura do objeto que irá alimentar a fonte de dados. Para esse exemplo usaremos a estrutura informada abaixo:

{
    "userId": <number>,
    "id": <number>,
    "title": <string>,
    "completed": <boolean>
}

Primeiro informe o nome do atributo no campo (que é case sensitive) e clique no botão "+" (2 da Figura 2.3) para adicionar. Após, verifique o tipo do atributo e troque (3 da Figura 2.3) conforme esse tipo, pois eles devem ser do mesmo tipo - ou seja, se o atributo é boolean o campo precisa ser lógico tambémBoolean.

Figura 2.3 - Adicionando os atributos do objeto

Obter conteúdo

Nessa parte, iremos obter os dados de uma lista inserida no bloco de programação.

Criar bloco de programação cliente

etapa mostraremos duas formas de se obter e alimentar os dados, inserindo os valores manualmente de forma estática ou obtendo através de uma requisição Rest de outro sistema. Fique a vontade para escolher uma das duas formas. Nos dois casos iremos usar um bloco do tipo cliente.

Estático

Crie Então, crie um bloco de programação cliente no qual a função terá retorno e adicione nesse retorno o bloco criar e em seu retorno adicione o bloco Criar objeto Json (1 da Figura 3.1). Clique no ícone da engrenagem (2 da Figura 3.1) para abrir a janela de edição de texto, insira o JSON e salve (3 da Figura 3.1).

Figura 3.1 - Criando bloco Bloco com retorno

Vincular bloco cliente com fonte dados

Adicione o componente fonte de dados em um formulário, selecione a fonte de dados criada e salve (Figura 3.2).

Image Removed

Figura 3.2 - Vincular fonte criada com componente fonte de dados

Após isso, na aba Propriedades (1 da Figura 3.3), clique na subaba Eventos (2 da Figura 3.3) e clique no botão "..." do evento Para Obter Dados (3 da Figura 3.3). Ao abrir a janela do evento, clique no ícone (4 da Figura 3.3) para abrir a janela de seleção do bloco e selecione a função que contenha os dados JSON (5 da Figura 3.3). Por fim, salve essas configurações.

Image Removed

Figura 3.3 - Vincular bloco ao evento para remover dados do componente

Vincular componente para exibir dados

Adicione um componente que possa ser vinculado com a fonte para que exiba os dados, como uma grade. Configure o componente para que ele possa exibir os dados e salve. Rode o projeto e acesse a página para visualizar os dados (Figura 3.4).

Image Removed

Figura 3.4 - Valores do bloco renderizados na grade

Alimentação via API

Esses dados também podem ser provenientes de uma API.

Criar bloco de programação cliente

estático

Via API

Usaremos junto com o bloco de requisição REST, o bloco Promessa, que fica aguardando a resposta do serviço para dar continuidade a execução da função.

Crie um bloco de programação cliente, crie também Os blocos a utilizar são clientes, então deverá ser criado um bloco de programação do tipo cliente. Com isso, crie uma variável e adicione a ela o bloco criar promessa Criar Promessa (destaque 1 da Figura 4.1). Após, adicione o bloco obter Obter conteúdo da URL logo abaixo (2 da Figura 4.1) e escolha o método de requisição get para requisição GET para fazer a obtenção dos dados e e selecione a opção application/json para que esses dados venham em formato JSON  no parâmetro do campo logo abaixo (3 da Figura 4.1). Após isso, informe no parâmetro URL address o endereço do serviço que retornará o array de JSON.

Figura 43.1 2 - Criando bloco de programação Parte 1Primeira parte do bloco que obtém o serviço externo 

Adicione o bloco Atribuir valor para a promessa tanto Tanto no retorno de sucesso quanto de erro do bloco obter Obter conteúdo da URL, adicione o bloco atribuir valor da promessa. No retorno de sucesso, defina o tipo campo Tipo para resolved (1 da Figura 4.2) e no retorno de erro; reject (2 da Figura 4.2). Adicione tanto a variável do bloco criar promessa quanto a variável do bloco obter conteúdo da URL em seus respectivos campos dos blocos atribuir valor da promessa (3 e 4 da Figura Arraste a variável que foi definida como promessa (destaque 1 da figura 4.1) e vincule aos parâmetros Promessa dos blocos Atribuir valor para a promessa (destaque 3 da figura 4.2). Insira também a variável de retorno do bloco Obter conteúdo da URL no parâmetro Valor dos blocos Atribuir valor para a promessa (destaque 4 da figura 4.2).

Por fim, adicione a variável que guarda a promessa no retorno da função (5 da Figura 4.2).

Figura 43.2 3 - Criando bloco de programação Parte 2

Vincular bloco cliente com fonte dados

 Segunda parte do bloco que obtém o serviço externo 

Alimentar fonte de dados

No editor de view, adicione o componente fonte de dados em um formulário, selecione a fonte de dados criada e salve (Figura 4.

1).

Image RemovedImage Added

Figura 4.3 - Vincular fonte criada com componente 1 - Vinculando o componente com a fonte de dados

Após isso, selecione o componente Fonte de dados e na aba Propriedades (1 da Figura 4.42), clique na subaba Eventos (2 da Figura 4.42) e clique no botão "..." do evento Para Obter Dados (3 da Figura 4.42). Ao abrir a janela do evento, clique no ícone (4 da Figura 4.42) para abrir a janela de seleção do bloco e selecione a função que contenha os dados provenientes de uma API JSON (5 da Figura 4.42). Por fim, salve essas configurações.

Image Modified

Figura 4.4 2 - Vincular bloco ao evento para remover dados do componente

Teste

Após as etapas acima, já é possível alimentar componentes visuais, relatórios e demais serviços que utilize a Fonte de dados.

Adicione um componente que possa ser vinculado com a fonte para que exiba os dados, como uma tabelagrade. Configure o componente para que ele possa exibir os dados e salve. Rode o projeto e acesse a página para visualizar os dados (Figura 45.51).

Image RemovedImage Added

Figura 45.5 1 - Valores do bloco renderizados na grade