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 as classes existentes 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: lista 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 CRUD da entidade;
- Finalizar: conclui o Assistente de view para o diagrama e gera as páginas.
title | Informação |
---|
- 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
doformulário
Ao são acessadas ao clicar no "..." (destaque 3 da Figura 3) na seleção da entidade , será aberta a janela de configuração. Os campos listados primeiramente fazem referência ao que será mostrado na grade (ou na lista avançada, caso fosse um formulário mobile).
Image Removed
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: apresenta permite selecionar os atributos que serão mostrados na grade (eles devem ser marcados);
- ↑↓: ordena as colunas da grade;
- Filtro de campo pesquisável: define a 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 a janela de configuração do conteúdo do formulário;
- BuscaBuscar: filtra os pesquisa pelos atributos da entidade selecionadaque serão os campos do formulário;
- Lista dos atributos: apresenta permite selecionar os atributos que serão mostrados no formulário (eles devem ser marcados)n;
- ↑↓: ordena os campos do formulário;
- Finalizar (customização de entidade): retorna para janela de seleção de classes para finalizar o Assistente de view;
Formulário CRUD e Formulário de pesquisa
Além de serem divididos como formulário web e mobile, ambos ainda possuem outras divisões: eles podem ser formulário do tipo CRUD e do tipo pesquisável (o de pesquisa). O formulário CRUD (Figura 4.1) é a página encarregada de adicionar, editar e remover dados enquanto o formulário de pesquisa (Figura 4.2) não - ele somente faz a pesquisa. 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.
Image Removed
Figura 4.1 - Formulário CRUD
Image Removed
Figura 4.2 - Formulário de pesquisa
- 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
Nessa página
toc