A fonte de dados normalmente é utilizada para fazer a comunicação entre os dados persistidos (ex.: banco de dados) e a tela na qual o usuário realiza alguma interação. Ela permite tratar os dados em componentes visuais, relatórios, sistema BPM e gerar requisições REST dentro ou fora da aplicação. A fonte de dados utiliza a tecnologia OData para trafegar os dados e pode ser alimentada por uma consulta JPQL, bloco de programação ou web services (REST e SOAP). Esses fatores garantem a interoperabilidade e integração entre as camadas do sistema.
Existe uma diferença entre a Fonte de dados e o componente visual Fonte de dados. A fonte de dados é um recurso criado no lado servidor do projeto e server todos recursos que necessitam de uma fonte de dados, já o componente visual fonte de dados é utilizado apenas nas páginas web e telas mobile (lado cliente) e tem o objetivo de referenciar uma Fonte de dados. |
Existem 3 tipos de fonte de dados personalizáveis (Blocos, Entidades e Web services) e 1 não personalizável (Classe):
*.wsdl
SOAP. Para mais detalhes, acesse a documentação Fonte de dados tipo Web Service (REST / SOAP).A fonte de dados do tipo Classe só estará disponível ao selecionar uma fonte de dados a partir de um componente visual, relatório ou outras ferramentas. Para utilizá-la, basta selecionar qual Entidade irá alimentar o componente. Já para os demais tipos, é necessário criar e configurar a fonte de dados, apontar para o componente visual fonte de dados e depois vincular ao componente que será alimentado.
A maioria dos componentes que necessitam de uma fonte de dados possuem uma propriedade Origem dos dados ou Configurações onde é possível selecionar uma fonte de dados já existente ou criar uma nova.
Não é possível utilizar a mesma fonte de dados para dois componentes na mesma tela, para esses casos, utilize uma segunda fonte de dados. |
Na Figura 1.1 temos o ícone do Componente visual Fonte de dados (destaque 1) que alimenta a lista do componente Caixa de seleção múltipla (destaque 2). O ícone de fonte de dados só é exibido no momento de edição da view, caso não queira visualizar esses ícones no momento da edição, basta clicar no botão Exibir elementos não visuais (3) para ocultar ou exibi-lo novamente.
Figura 1.1 - Ícone fonte de dados (1) na tela de edição da view
O ícone do componente visual fonte de dados deve estar sempre acima do componente visual no qual ele está associado na tela de edição da view, podendo cada fonte de dados estar logo acima do componente (Figura 1.1) ou todos juntos no início da página. |
Nem sempre é necessário arrastar o componente Fonte de dados para a área de edição da view, ao definir uma fonte de dados nas propriedades Origem dos Dados ou Configuração (destaque 1 da figura 1.2) de algum outro componente, o ícone é criado automaticamente acima do componente editado na janela de edição da view (destaque 2 da figura 1.2).
As propriedades de configuração do componente visual fonte de dados podem ser acessadas através do menu lateral, ao selecionar o componente na área de edição da view - como na Figura 1.1, ou através das janelas de configurações de outros componentes - como mostrado na Figura 1.2.
Figura 1.2 - Acesso as propriedades através da janela de configurações do componente Grade
Na tabela abaixo estão descritas as principais propriedades do componente visual.
Nome | Propriedade | Função |
---|---|---|
Filtros e Parâmetros | condition | Cria filtros para a fonte de dados. |
Depende de | dependent-by | Vincula a fonte de dados principal com outras fontes de dados. Ao usar algumas propriedades (ex.: Mestre Detalhe), esse campo é preenchido automaticamente. |
Nome | name | Nome do componente fonte de dados. |
Postergar Carga | lazy | Alimenta a fonte de dados somente após uma ação do usuário. Essa propriedade pode ser utilizada junto com o campo Estratégia para Carregar Dados. |
Mestre Detalhe | parameters | Vincula um ou mais atributos de uma fonte de dados com outra fonte de dados. Acesse o tópico Mestre Detalhe para mais informações. |
Estratégia para Carregar Dados | load-data-strategy | Escolhe as condições de carregamento dos dados, que são:
|
Atualizar Automaticamente (ms) | auto-refresh | Define o tempo, em milissegundos, que o datasource atualizará automaticamente. Exemplo de uso: chat e thread de fórum colaborativo. |
Origem dos Dados | entity | Define a origem dos dados: entidade ou consulta personalizada. |
Ordenação | order-by | Ordena o conteúdo da fonte de dados. |
Dependente de salvamento | dependent-lazy-post | Vincula uma fonte de dados para servir como dependente da fonte de dados principal - ou seja, o salvamento da fonte de dados principal dependerá de uma ação na fonte de dados dependente. |
Linhas por página | rows-per-page | Retorna a quantidade de dados informada para realizar paginação na exibição dos dados. |
Validar Campos Requeridos | checkrequired | Insere ou atualiza os dados somente se todos os campos marcados como requeridos estiverem preenchidos. |
Chaves | keys | Exibe as chaves primárias de todas as entidades atribuídas na fonte de dados. |
Estratégia em Cláusula Nula | parameters-null-strategy | Define como o sistema deve tratar parâmetros os nulos do campo "Filtros e Parâmetros" da fonte de dados;
|
O componente visual Fonte de dados só é visível em tempo de desenvolvimento, logo não necessita de campos de estilo personalizado.
Com o Filtros e Parâmetros é possível adicionar grupos de regras e agrupá-los com outros grupos usando conectivos lógicos (e / ou). Regras podem ser criadas a partir de expressões, campos da tela, conteúdo estático ou blocos de programação.
Figura 2.1 - Janela de Filtros e Parâmetros
Figura 2.2 - Exemplo de uso da propriedade Filtros e Parâmetros
No exemplo da Figura 2.2, a sintaxe de comparação pode ser lida da seguinte forma:
(email = 'pedro.porto@email.com') AND ((name = cronapi.client('js.blockly.BlocoCliente.Funcao').attr().run()) OR (login = 'pedro.porto')) |
A expressão cronapi.client('js.blockly.BlocoCliente.Funcao').attr().run() se trata do retorno de uma função de bloco de programação, ao selecionar essa função no botão "..." (destaque 11 da Figura 2.1), o sistema preenche o endereço e a chamada da função.
A ordenação ocorre selecionando um ou mais campos da fonte de dados e definindo a ordem (ascendente ou descendente).
Figura 2.3 - Ordenação do campo 'name' em ordem crescente
A propriedade Mestre detalhe gera uma ligação entre os parâmetros de uma fonte de dados com expressões, campos na tela, bloco de programação ou parâmetros de outra fonte de dados. O mestre detalhe pode ser utilizado para fazer o filtro entre componentes. Por exemplo: uma tela possui 2 caixas de seleção dinâmica, a primeira lista os estados de um país, enquanto a segunda, as cidades. Ao fazer o vínculo Mestre detalhe entre as fontes de dados e selecionar um estado, a caixa de seleção de cidades só exibirá as cidades referente ao estado selecionado. Isso só funcionará em entidades que possuem relacionamento 1 para N.
Figura 2.4 - Ligação entre o atributo id da fonte de dados e o id de outra fonte de dados da view
A propriedade Origem dos Dados abre a janela Lista de Fonte de dados e permite vincular um componente visual Fonte de dados a uma fonte de dados já criada. Também é possível criar uma fonte de dados a partir do botão Nova fonte de dados.
Nessa janela são exibidos os 4 tipos de fontes de dados.
Fontes de dados do tipo Entidades são alimentadas apenas por uma classe e permite personalizações, já as fontes de dados do tipo Classe não permitem nenhum tipo de personalização, retornando todos os registros. |
Figura 2.5 - Seleção de uma fonte de dados ou entidade
É possível criar ou editar uma fonte de dados por vários caminhos: através da propriedade Origem dos dados de algum componente que utiliza fontes de dados (Figura 1.2), pelo ícone da Fonte de dados (destaque 1 da figura 3.1) ou ainda, pelo diretório Fontes de dados (Localização: /
Endereço: |
) do menu lateral (destaque 2 da figura 3.1).
O menu lateral Fontes de Dados permite criar subdiretórios para organizar as fontes de dados do sistema. Ao abrir janelas que fazem a seleção da fonte de dados (figura 3.1), ocorrerá dois filtros em sequência: o primeiro é o tipo da fonte de dados (Bloco de programação, Entidade, Classe ou Web Services) e o segundo são os diretórios (destaque 3 da figura 3.1).
Figura 3.1 - Acesso as fontes de dados pelo menu do sistema
A janela de edição possui diversas configurações para personalizar a fonte de dados. A configuração mais básica necessita apenas dos campos: Nome da consulta (destaque 4 da Figura 3.2), tipo da fonte de dados (5) e Origem (6).
Figura 3.2 - Janela de edição da fonte de dados
Independente do tipo da fonte de dados, é possível usá-la para gerar recursos REST dentro e fora do sistema. O endPoint do recurso fica localizado ao lado do campo Identificador (destaque 1 da Figura 3.2) e deve ser concatenado com o domínio do sistema. Sintaxe: Vale lembrar que poderá ser necessário aplicar permissões na fonte de dados e em seus campos. Para mais detalhes, acesse a documentação Disponibilizando Web Service REST. |
Ao selecionar a opção "Web Services" em Tipo de fonte (destaque 1 da figura 3.2.1), o campo ao lado ficará editável e espera receber o endPoint do serviço REST ou o endereço do arquivo *.wsdl
do serviço SOAP que alimentará a fonte de dados, o botão em seguida mudará seu ícone de "..." para o símbolo de "play" (2), clicando, uma janela será aberta para configurar os campos que a fonte de dados irá receber do serviço.
Figura 3.2.1 - Janela de edição da fonte de dados do tipo Web Services
Para mais detalhes sobre como configurar uma fonte de dados a partir de web services, acesse a documentação Fonte de dados tipo Web Service (REST / SOAP). |
Os dados que alimentam a fonte de dados passarão pelas regras definidas nessa aba e a fonte de dados encaminha somente o conteúdo que passar pelo filtro. A forma como o filtro será configurado irá variar de acordo com o tipo da fonte de dados:
Acesse o tópico aba Ações para mais detalhes sobre como configurar os parâmetros das fontes de dados Web Services. |
No exemplo da Figura 3.3, a fonte de dados retornará todos os usuários que possuem e-mails de um servidor específico, obtido no retorno do bloco de programação vinculado ao parâmetro email.
Figura 3.3 - Exemplo de filtro para uma entidade
Na aba Ações é possível definir quais os verbos HTTP (get, post, put, delete), filtrar ou contar serão executados e quais permissionáveis terão acesso a esses recursos. A forma como a ação será executada vai depender do tipo da Fonte de dados.
Fontes de dados do tipo Bloco de programação que possua uma entidade vinculada no campo Entidade base exibirá também a opção "Padrão" nas ações (verbos). Essa opção faz com que as ações que possuam essa opção selecionada executem o verbo da mesma forma como ocorre nas fontes de dados do tipo Entidade. Porém, caso queira personalizar a execução do verbo, basta selecionar uma função de bloco de programação (Figura 3.4).
O verbo Para Contar é usado internamente para paginar os registros retornados, porém, para funcionar, os campos Para Obter e Para Contar devem possuir as mesmas configurações. |
Figura 3.4 - Configurando a ação Remover para uma fonte de dados do tipo Web service REST
Fontes de dados tipo Web Services permitem configurar os argumentos que serão passados como parâmetros para os métodos do SOAP ou para o endPoint das requisições REST. Essa configuração é feita na janela Obter campos do serviço e pode ser aberta a partir do botão "..." de cada ação (destaque 1 da figura 3.4.1).
Para mais detalhes sobre como configurar uma fonte de dados a partir de web services, acesse a documentação Fonte de dados tipo Web Service (REST / SOAP). |
Figura 3.4.1 - Configurando ação ações para uma fonte de dados web service REST
<URL BASE>/
" (nas ações Para Obter e Para Inserir) ou "<URL Base>/{id}
" (demais ações)insert/
) para a requisição ser montada a partir da concatenação da URL BASE e o endereço final (ex.: "<URL Base>/list/
"). Podemos configurar de 2 formas: Se o primeiro caractere do campo URL não for uma "/" (barra), será concatenado a URL Base com o conteúdo do campo URL, já se o primeiro caractere do campo URL for uma "/" (barra), será concatenado somente o domínio da URL Base com o campo URL. Veja os 2 exemplos a seguir./
"/
"$.data
- tudo que estiver dentro do atributo data
no JSON). Caso não seja preenchido, será obtido todo o conteúdo do corpo da requisição.Figura 3.4.2 - QueryString definidas como parâmetros serão configuradas na aba Filtro
A partir das configurações feitas nas figuras 3.4.1 e 3.4.2, a ação Para Remover terá a seguinte sintaxe.
token.{key}
) do usuário (ex: ABC321).DELETE https://607f375302a23c0017e8cec5.mockapi.io/user?id_user=123&token=ABC321 |
O uso da aba Filtro para alimentar parâmetros de requisições REST também pode ser feito em requisições que utilizam o modelo de rotas. Nesse caso, podemos informar " Veja mais detalhes sobre isso no tópico Parâmetros REST. |
Existem 2 formas de passar parâmetros em requisições REST (via Query String e/ou Rotas) e cada API define como irá tratá-las.
No formato Questy Stirng, após o endereço do endPoint é adicionado o caractere ?
(interrogação) para informar onde começam as declarações dos parâmetros (Chave=Valor
) e entre cada parâmetro (Chave=Valor
) é adicionado o caractere &
(ampersand),
O endereço abaixo retorna o comentário que possui o id
17 da postagem com o identificador (postId
) 4. A configuração na fonte de dados pode ser vista na figura 3.5.2.
https://meusistema.com.br/comentarios/list?postId=4&id=17 |
Figura 3.4.3 - Adicionando parâmetros queryString a uma requisição REST
No formato de rotas, os valores dos parâmetros são passados no meio do endereço, separado pelo caractere /
(barra). Algumas APIs utilizam os parâmetros de rotas e queryString juntos.
O endereço abaixo retorna o comentário que possui o id
17 da postagem com o identificador 4. O identificador do post é passado na rota, entre o "...post/
" e "/comentários
".
https://meusistema.com.br/post/4/comentarios?id=17 |
Para inserir um parâmetro dinâmico na roda, podemos inserir o caractere :<parâmetro>
(dois pontos + nome do parâmetro) nos campos de endereços (URL Base ou campo URL nas configurações da ação) e configurar seu valor na aba Filtro. No exemplo abaixo foi inserido o nome do parâmetro dentro do endereço da URL Base ".../:idPost/...
" (destaque 1 da figura 3.4.4), ao reconhecer o caractere ":
", o Cronapp cria um campo de parâmetro para na aba Filtro para permitir sua configuração (destaque 2 da figura 3.4.4). Neste exemplo, o parâmetro idPost
é alimentado pelo retorno da função de bloco de programação ObterIdPost.
Figura 3.4.4 - Parâmetro criado a partir do endereço com o uso do caractere : (dois pontos)
A quesryString é tratada diretamente nas configurações (janela Obter campos do serviço) da Ação, após criar um parâmetro e informa de onde será obtido o seu valor.
Figura 3.4.5 - Requisição REST que obtém parâmetros REST por Rotas e queryString
A aba Eventos permite rodar alguma função antes ou após a fonte de dados executar uma ação. Muito útil em eventos "Antes", pois, caso uma validação não seja atendida, uma exceção pode ser lançada.
Existem diferenças entre os eventos da fonte de dados (servidor, Figura 3.5) e os eventos do componente visual fonte de dados (cliente). Para mais detalhes de como configurar os eventos, acesse o tópico Lançar exceção ou o tutorial Validação da fonte de dados usando Eventos.
Figura 3.5 - Seleção de uma fonte de dados ou entidade
Colunas
Eventos
A aba Campos exibe todos os atributos (campos) da entidade base selecionada, adiciona novos campos ao mapa retornado e trata cada campo de forma individual, definindo valores estáticos ou dinâmicos.
Não é possível adicionar novos campos para fontes de dados do tipo Entidade, também não são exibidas as configurações de banco de dados (colunas (6), (7) e (8) da Figura 3.6.). Esses recursos só estão disponíveis para as fontes de dados dos tipos Blocos de programação e Web Services.
Figura 3.6 - Aba campos e as várias configurações de seus atributos
$.data[0].id
). Adiciona novos campos temporários às entidades da fonte de dados. Diferentemente da aba Campos, aqui os atributos e seus valores não são persistidos, existem apenas para uso temporário na aplicação.
Exemplo de uso: Em uma fonte de dados vinculada a entidade usuários, podemos criar um campo calculado idade, ela chamará uma função Servidor que obtém o campo data de nascimento do usuário e retornará a sua idade baseado na data atual. Dessa forma, sempre que precisar exibir a idade atual dos usuários, basta chamar o campo calculado idade da fonte de dados.
Figura 3.7 - Aba de campos calculados
Os campos calculados permitem referenciar atributos da própria entidade ou os atributos de outras entidades que possuam relacionamento 1 para N. Podemos utilizar esse recurso em diversas situações, por exemplo, em um relacionamento entre as entidades Cidade. Estado e País, no qual a fonte de dados com a entidade Cidade pode ter acesso a qualquer atributo da entidade Estado ou País. Na Figura 3.8, a fonte de dados tem acesso ao atributo região da entidade Estado e ao atributo nome da entidade País. O termo this
representa a entidade atual.
Como não existem limites de relacionamentos que podem ser feitos em um banco de dados, o Cronapp limita a lista de atributos (via caixa de seleção) até o terceiro relacionamento. Porém, é possível inserir manualmente relacionamentos maiores - Exemplo: this.estado.pais.continente.planeta.distanciaSol
.
Figura 3.8 - Campos calculados referenciando atributos de outras entidades relacionadas
Permite configurar os cabeçalhos das requisições HTTP. Por padrão, os campos Accept e Content-Type já vem definidos em fontes de dados do tipo Web Services, porém é possível alterá-los e adicionar novos.
Figura 3.9 - Aba Cabeçalhos de uma fonte de dados Web Services
Se o sistema não encontrar algum item, ele exibirá uma mensagem para o usuário - sendo possível internacionalizar essas mensagens.
Na Figura 3.9, o campo está com uma chave de internacionalização atendendo dois ou mais idiomas.
Figura 3.9 - Aba tratamento de erro
Neste tópico veremos algumas configurações específicas para o componente Fonte de dados.
Eventos da fonte de dados permite a execução de uma função ao realizar uma ação. Por exemplo, é possível utilizar os eventos Antes de inserir e Antes de atualizar para validar os campos CPF em um formulário ou enviar uma notificação para o usuário Depois de Inserir um novo registro.
Esses eventos estão localizados na aba Eventos (Figura 4.1) e serão executados independente de quem está requisitando a fonte de dados, por exemplo, uma requisição REST à fonte de dados. Essa configuração é feita diretamente nas configurações da fonte de dados, no servidor do sistema, e só é possível selecionar funções do tipo servidor.
Figura 4.1- Seleção de uma fonte de dados ou entidade
Para entender mais sobre quais argumentos utilizar dentro dos seus eventos, acesse o tópico Parâmetros e constantes.
São eventos JavaScript relacionados apenas ao componente visual fonte de dados (mobile ou web) e aceitam funções cliente ou servidor. Esses eventos só serão executados se a requisição à fonte de dados for feita a partir do componente visual no editor de views. Dessa forma, uma fonte de dados configurada para gerar um serviço REST não executará esses eventos. Eles são inseridos na aba lateral Eventos do componente visual Fonte de dados (Figura 4.2).
Figura 4.2 - Eventos do componente Fonte de dados
Na tabela abaixo é possível visualizar os principais eventos do componente visual fonte de dados. Para mais informações sobre outros eventos, acesse o tópico Eventos da fonte de dados em Eventos dos componentes visuais.
Nome | Propriedade | Função |
---|---|---|
Antes de atualizar | On before update | Executa uma ação antes de um dado ser atualizado |
Antes de criar | On before create | Executa uma ação antes de um novo dado ser criado |
Antes de deletar | On before delete | Executa uma ação antes de um dado ser excluído |
Ao Errar | On Error | Executa uma ação quando ocorrer um erro |
Após atualizar | On after update | Executa uma ação após um dado ser atualizado |
Após criar | On after create | Executa uma ação após um novo dado ser criado |
Após deletar | After delete | Executa uma ação após um dado ser excluído |
Os Eventos do menu lateral do componente Fonte de dados (Figura 4.2) são eventos JavaScript e não podem ser interrompidos. Já os eventos internos da janela da fonte de dados (Figura 3.5) são eventos Servidor, o que significa que uma exceção pode ser adicionada para paralisar o processo. Essas exceções são eventos que quebram o fluxo normal das instruções, assim, ao lançar uma exceção, uma mensagem será exibida na saída do console (Figura 4.3), uma notificação de erro na aplicação.
Na figura 4.3 vemos um exemplo em que uma exceção será lançada caso o usuário cadastrado tenha menos de 18 anos idade.
Figura 4.3 - Bloco para lançar exceção
Na Figura 4.4 lançamos a exceção no evento Antes de Inserir da fonte de dados "Gerenciador de Participantes". Como o evento executa uma ação antes de inserir um dado na fonte de dados e a exceção paralisa o processo, o dado não será cadastrado.
Figura 4.4 - Lançando exceção no evento Antes de Inserir
Veja mais detalhes no tutorial Validação da fonte de dados usando Eventos.
As abas Filtro, Ações, Eventos, Campos, Campos calculados e Cabeçalhos possuem campos onde é possível definir quais valores serão passados. Esses campos podem ser configurados de diversas formas, como veremos a seguir.
A coluna Valor do campo (destaque a da figura 5.1) informa o tipo do valor enquanto a coluna Conteúdo (b) define de onde e como o valor será obtido. A segunda coluna terá um comportamento diferente a depender da seleção da coluna Valor do campo.
Abaixo vemos as opções das caixas de seleção da coluna Valor do campo e o que muda nos campos da coluna Conteúdo (b):
É possível criar uma variável a partir do caractere :
(dois pontos) e uma palavra (ex.: :nome_variavel
), o Cronapp reconhecerá como uma variável que será configurada na aba Filtro. Esse artifício pode ser utilizado em diversos momentos, como uma expressões FTL,, textos estáticos ou endPoints de rotas (veja exemplo em parâmetros REST).
Expressões FTL podem ser criadas inserindo o termo "expression:
" no início e os caracteres "${}
" em cada expressão.
expression: a chave primária do usuário ${data.name} é ${primaryKey}. |
Figura 5.1 - Exemplo de janela com diversas formas de configurações de parâmetros
Descrição das configurações na figura 5.1:
parametroDaRota
" será configurada na aba Filtro.variavelParametroCompartilhado
" será configurada na aba Filtro.limit
acrescido de 1.MeuBloco
.Constantes
:<chave>
no jpql ou parâmetros de entrada de bloco).data.idade
para obter o valor "idade" do registro corrente.token.name
para obter o valor "name" do token de autenticação.${data.name} 123
", o valor do campo "name" do registro manipulado será concatenado com a constante "123", retornando: "Thiago 123".${1 + 1}
" o valor retornado será "2".top
do OData (máximo de registros).skip
do OData (quantidade de registros ignorados).page
ao invés de top
e skip
.Exclusivo nos campos da aba Eventos:
Exclusivos do campo Ao gerar Erro (destaque 1 da figura 5.2) da aba Eventos:
Nome em inglês
Datasource
Nessa página
Compatibilidade
Botão do Componente
Imagem no Editor Visual