Versões comparadas
Chave
- Esta linha foi adicionada.
- Esta linha foi removida.
- A formatação mudou.
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.
Maneiras de gerar páginas CRUDExiste 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:
- 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: - 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:
Etapas
Âncora custom-selecao-template custom-selecao-template
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
- Assistente de view para o diagrama: abre a janela de configuração;.
- Busca: pesquisa pelos modelos de template disponíveis;.
- 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.
- Formulário de Referência: endereço onde serão criados os formulários CRUD;
- "…": abre a janela de seleção do diretório;
- Busca: filtra o nome dos diretórios;
- Lista de seleção dos diretórios;
- Diretório selecionado: exibe o endereço do diretório selecionado;
- Selecionar: botão de confirmação do diretório selecionado;
- Avançar: Avança para seleção de entidades.
Informações |
---|
Se o assistente foi aberto a partir da opção Criar visão para a entidade no menu de contexto da classe selecionada, o campo Escolha o nome do novo arquivo será exibido abaixo do campo Formulário de Referência para que seja possível personalizar o nome do novo arquivo. |
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.
Âncora | ||||
---|---|---|---|---|
|
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
Âncora | ||||
---|---|---|---|---|
|
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
Âncora | ||||
---|---|---|---|---|
|
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
Âncora formCrudMobile formCrudMobile
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
Âncora | ||||
---|---|---|---|---|
|
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
Âncora selecao-classe selecao-classe
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
- Busca: pesquisa pelas entidades existentes;
- Lista de entidades: seleção das entidadeslista todas as classes persistidas no diagrama, marque o checkbox de cada classe que terá o CRUD gerado;
- "…": abre a janela de customização seleção dos campos da grade e do formulário do CRUD dessa CRUD da entidade;
- Finalizar: conclui o Assistente de view para o diagrama e gera as páginas.
Informações | ||
---|---|---|
| ||
Inverter Todos só faz com que as seleções de classes sejam invertidas - ou seja, as que estavam marcadas são desmarcadas e vice versa. |
Configuração da grade e do formulário da classe
- Inverter Todos: inverte a seleção das classes.
Âncora custom-grade-formulario custom-grade-formulario
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
- Busca campos para gradeBuscar: pesquisa pelos atributos da entidade que serão as colunas da grade;
- Lista dos atributos: permite selecionar os atributos que serão listados mostrados na grade;
- ↑↓: ordena as colunas da grade;
- 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:
- Geral (Campo único de pesquisa): somente há um campo para pesquisar todos os atributos;
- Específico (Campo para cada atributo pesquisável): um campo de pesquisa específico para cada atributo ou não terá campo de pesquisa;
- 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;
- Buscar: pesquisa pelos atributos da entidade que serão os campos do formulárioBusca: filtra os atributos da entidade selecionada;
- Lista dos atributos que poderão ser editados no formulário*: permite selecionar os atributos que serão mostrados n;
- ↑↓: ordena os campos do formulário;
- Finalizar (customização de entidade): retorna a janela de seleção de entidades (Passo 2) para finalizar o Assistente de view;
Formulário CRUD e Formulário de pesquisa
Existe dois tipos de formulários, o CRUD e o de pesquisa. O formulário CRUD é a página encarregada de adicionar, editar e remover dados enquanto o formulário de pesquisa não. Ambos possuem a mesma aparência, exceto pelos botões de ações de adicionar, editar e remover que não se encontram no formulário de pesquisa (Figura 4.1).
Image Removed
Figura 4 - Formulário CRUD (esquerda) e Formulário de pesquisa (direita)
- 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
Nesta página
Índice
Assista sobre o tema no Cronapp Academy
Informações |
---|
Caso seja seu primeiro acesso ao Cronapp Academy, crie antes uma conta gratuita e matricule-se no curso abaixo. |
- Aula: CRUD Mobile
title | Nessa página |
---|