Introdução

O Cronapp se encarrega de gerar páginas O Diagrama de dados possui uma funcionalidade para facilitar a criação de páginas CRUD (Create-Read-Update-Delete) em AngularJS, que são páginas onde serão realizadas as ações de criaçãode criação, consulta, atualização e remoção de dados no banco de dados.

Existe duas maneiras de gerar páginas CRUD: através do ícone de assistente Assistente de view para diagrama Diagrama (destaque 1 da Figura 1) ou clicando com o botão direito do mouse sobre a classe (2a partir da opção Criar visão para a Entidade do menu de contexto da classe selecionada (destaque 2 da Figura 1).

Image RemovedImage Added

Figura 1 - Maneiras de gerar páginas CRUD

Cada opção abre um assistente e a única diferença é que a primeira permite gerar formulários CRUD para todas as classes do diagrama, enquanto a segundo só gera para a classe selecionada.

Figura 1:

1. Abre a janela Assistente de view para o Diagrama que permite gerar formulários CRUD para várias classes ao mesmo tempo. O nome da página será o mesmo nome da classe.
   Etapas:
   
   • Seleção do template e diretório (link);
   • Permite habilitar e configurar individualmente cada classe que terá o CRUD gerado (link);
     • Seleciona os campos da classe que serão exibidos na grade (link);
     • Seleciona os campos da classe que serão exibidos no formulário (link).
2. Abre a janela Assistente de view para a Entidade que permite gerar o formulário CRUD da classe selecionada. O nome da página poderá ser personalizado.
   Etapas:
   
   • Seleção do template e diretório (link);
   • Seleciona os campos da classe que serão exibidos na grade (link);
   • Seleciona os campos da classe que serão exibidos no formulário (link).

Etapas

Seleção do template e diretório

Nessa janela é definido o

Tanto um quanto o outro abrem a mesma janela de configuração, a diferença fica que através do ícone gera-se CRUD para todas as classes selecionadas no diagrama ao mesmo tempo enquanto gerar para uma única classe disponibiliza um campo para escrever o nome da página (Figura 2).

Image Removed

Figura 2 - Gerando CRUD para uma classe

Assistente de view para o diagrama

Ao clicar no ícone será aberta a janela de Assistente de View para Diagrama que apresenta as configurações para definição de modelos e seleção do diretório, seleção das classes, assim como suas configurações para a grade e o formulário.

Seleção do modelo e do diretório

Nessa janela é definido o modelo de template e o endereço onde serão criadas as páginas.

Image RemovedImage Added

Figura 3.1 2 - Seleção de modelo e de diretório

1. Assistente de view para o diagrama: abre a janela de configuração;.
2. Busca: pesquisa pelos modelos de template disponíveis;.
3. Lista de seleção dos modelos;
   • Formulário CRUD Mobile: formulário para inserir, atualizar, listar e remover registros de uma fonte de dados.
   • Formulário CRUD Web: formulário para inserir, atualizar, listar e remover registros de uma fonte de dados.
   • Formulário de Atualização Web: formulário para atualizar registros de uma fonte de dados.
   • Formulário de Pesquisa Mobile: formulário para listar e pesquisar registros em uma fonte de dados.
   • Formulário de Pesquisa Web: formulário para listar e pesquisar registros em uma fonte de dados.
4. Formulário de Referência: endereço onde serão criados os formulários CRUD;
5. "…": abre a janela de seleção do diretório;
6. Busca: filtra o nome dos diretórios;
7. Lista de seleção dos diretórios;
8. Diretório selecionado: exibe o endereço do diretório selecionado;
9. Selecionar: botão de confirmação do diretório selecionado;
10. Avançar: Avança para seleção de entidades.

Modelos de formulários

Durante a escolha dos templates é possível selecionar, tanto para os formulários mobile quanto web, as opções CRUD e Pesquisa. A opção Pesquisa não permite qualquer alteração no registro, apenas lista o conteúdo com ou sem filtro.

Formulário CRUD Web

A figura 2.1 apresenta um formulário CRUD web, neste exemplo estamos utilizando a classe Musica (figura 1). Através do botão adicionar (destaque 1 da figura 2.1), podemos inserir os dados da classe, "título", "faixa" e "artista", para editar o item cadastrado, podemos acessar a página de edição da classe (destaque 2 da figura 2.1) ou utilizar um formulário de atualização web. Para excluir, basta clicar no botão com o ícone "x" (destaque 3 da figura 2.1).

Image Added

Figura 2.1 - Formulário CRUD Web

Formulário de Pesquisa Web

A figura abaixo lista os itens cadastrados anteriormente, utilizando o campo Pesquisar podemos filtrar um ou mais itens a partir dos atributos (nomes das colunas).

Image Added

Figura 2.2 - Formulário de Pesquisa Web

Formulário de Atualização Web

Esse template gera uma página de edição contendo uma fonte de dados, os campos selecionados na etapa Campos do Formulário e um botão de atualização. 

Para utilizar, primeiro é necessário configurar a página gerada, definindo um filtro na propriedade Filtros e Parâmetros do componente fonte de dados (consulte o tópico "Filtros e Parâmetros" na documentação Componente visual fonte de dados para mais detalhes). Recomenda-se utilizar como filtro o atributo _objectKey, padrão das classes criadas pelo Cronapp. Esse filtro pode ser alimento, por exemplo, a partir de parâmetros queryString passados na página de atualização (veja mais detalhes no tópico "Propriedades e Eventos da página" da documentação Editor de views). 

Image Added

Figura 2.3 - Formulário de Atualização Web

Formulário CRUD Mobile

O formulário do mobile possui um botão para adicionar um registro (destaque 1 da figura 2.4), um botão de edição (destaque 2 da figura 2.4) e para excluir o registro, utilizamos o botão Remover (destaque 3 da figura 2.4).

Para acessar os botões Editar e Remover de um registro, é necessário deslizar o registro para a esquerda.

Image Added

Figura 2.4 - Formulário CRUD Mobile

Formulário Pesquisa Mobile

A figura 2.5 lista os itens cadastrados, utilizando o campo Pesquisar podemos filtrar um ou mais itens a partir dos atributos.

Image Added

Figura 2.5 - Formulário de Pesquisa mobile

Seleção de classes

Nessa janela faz-se a seleção das classes que gerarão CRUDs.

Image Removed

Essa janela só é exibida na funcionalidade Assistente de view para o Diagrama (1 da Figura 1), já no Assistente de view para a Entidade, o botão "Avançar" (10 da Figura 2) direciona para a janela de customização dos campos da Grade e Formulário. 

A janela de seleção de classes permite selecionar e configurar quais as classes que terão o formulário CRUD.

Image Added

Figura 3 Figura 3.2 - Seleção das classes

1. Busca: pesquisa pelas entidades existentes;
2. Lista de entidades: seleção das entidadeslista todas as classes persistidas no diagrama, marque o checkbox de cada classe que terá o CRUD gerado;
3. "…": abre a janela de customização seleção dos campos da grade e do formulário do CRUD dessa  CRUD da entidade;
4. Finalizar: conclui o Assistente de view para o diagrama e gera as páginas.

Configuração da grade e do formulário da classe

• Inverter Todos: inverte a seleção das classes.

Campos da grade e formulário

As janelas de seleção dos campos da grade e formulário são acessadas ao Ao clicar no "..." será aberta a janela de configuração, onde a primeira faz a seleção dos itens que serão exibidos na listagem da grade, enquanto que a segunda janela faz a seleção dos campos que poderão ser inseridos ou editados no formulário do CRUD.

Image Removed

" (destaque 3 da Figura 3) na seleção da entidade no Assistente de view para Diagrama ou após "Avançar" (destaque 10 da Figura 2) no Assistente de view para a Entidade.

Na janela Campos da Grid são selecionados os campos da Grade que serão exibidos para o usuário, já a tela Campos do Formulário permite selecionar os campos exibidos para o usuário no formulário de edição ou criação do registro.

Image Added

Figura 3.1 Figura 3.3 - Selecionando as colunas da grade e, depois, os campos do formulário

1. Busca campos para gradeBuscar: pesquisa pelos atributos da entidade que serão as colunas da grade;
2. Lista dos atributos: permite selecionar os atributos que serão listados mostrados na grade;
3. ↑↓: ordena as colunas da grade;
4. Filtro de campo pesquisável: define que a página terá um único campo pesquisável para todos os atributos, um forma de pesquisa na página:
   1. Geral (Campo único de pesquisa): somente há um campo para pesquisar todos os atributos;
   2. Específico (Campo para cada atributo pesquisável): um campo de pesquisa específico para cada atributo ou não terá campo de pesquisa;
5. Avançar: avança para o passo 3-b, seleção dos campos do formulário da entidade;a janela de configuração do conteúdo do formulário;
6. Buscar: pesquisa pelos atributos da entidade que serão os campos do formulárioBusca: filtra os atributos da entidade selecionada;
7. Lista dos atributos que poderão ser editados no formulário*: permite selecionar os atributos que serão mostrados n;
8. ↑↓: ordena os campos do formulário;
9. Finalizar (customização de entidade): retorna a janela de seleção de entidades (Passo 2) para finalizar o Assistente de view;
11. Finalizar:
    
    • Assistente de view para a Entidade: finaliza o assistente e gera o formulário CRUD selecionado.
    • Assistente de view para o Diagrama: retorna para a janela de Seleção de classes.

CRUD via Fonte de dados ou Classe

Uma alternativa para criar um CRUD é utilizar uma Fonte de dados (destaque 2 da figura 4) ou uma classe do Diagrama. No exemplo abaixo, utilizaremos a classe "Pessoa" do Diagrama de Dados (destaque 1 da figura 4) para criar o CRUD. Para isso, clique com o botão direito do mouse sobre a classe desejada e selecione Ação > Criar visão para a entidade para abrir a janela do Assistente de view para Entidade.

Caso o CRUD seja criado a partir de uma fonte de dados que tenha algum tipo de filtro, esses filtros serão automaticamente incluídos no CRUD.

Image Added

Figura 4 - Criando um CRUD a partir de uma classe