Versões comparadas
Chave
- Esta linha foi adicionada.
- Esta linha foi removida.
- A formatação mudou.
Função
Formulário é um componente para cadastrar, editar e exibir dados. Para funcionar, o componente necessita ser configurado juntamente com outros componentes visuais, de acordo a necessidade do projeto. Nesse exemplo adicionamos os botões e o campos de entrada de texto.
Image Modified
Animação 1 - Exemplo do componente associado com botões rodando no simulador
Principais propriedades
Nome | Tipo | Doc |
---|---|---|
Identificador | id | Atributo que especifica um ID exclusivo para o componente. Por padrão um id é gerado automaticamente e atribuído ao componente. |
Estilo | style | Altera o estilo do componente de forma inline. |
Exibir | ng-show | Propriedade AngularJS Angular usada para mostrar ou oculta o componente. |
Fonte de dados | crn-datasource | Seleciona uma um Componente visual fonte de dados que já foi previamente adicionada adicionado ao formulário. |
Repetir | ng-repeat | Propriedade que seleciona uma fonte de dados contida na tela e repete o componente baseado no número de itens dessa fonte de dados. |
Segurança | cronapp-security | Propriedade do Cronapp que trata as permissões de segurança da aplicação. Usado para permitir ou não edição e visualização do componente com base nos perfis selecionados. |
Skin | crn-skin | Permite selecionar um skin que afetará apenas o componente selecionado. |
Configuração
Vincular fonte de dados
Primeiro é feita feito a adição e configuração do componente Componente visual fonte de dados no formulário. Depois arraste, selecione o componente Formulário clicando em e clique form na árvore DOM (destaque 1 da Figura 1) e, na aba de Propriedades, vincule a fonte no campo Fonte de dados.
Image Modified
Figura 1 - Vinculando fonte de dados
Adicionar componentes
Adicione o componente Barra de Botões duas vezes. Selecione o componente e arraste o componente à div do formulário, verificando se as arestas da div do componente formulário estão tracejadas, e solte-o. Para adicionar outro componente, arraste-o e solte-o embaixo de componente recém-adicionado.
Image RemovedImage Added
Figura 2.1 - Adicionando botões ao formulário
Em seguida, adicione alguns componentes para exibir os campos da fonte de dados. Arraste o componente do editor visual e solte-o na área de edição embaixo do componente Barra de botões.
Image RemovedImage Added
Figura 2.2 - Adicionando campos ao formulário
Configurar botões
Adicionar ou remover botões
Clique no componente Barra de botões e, na aba de Propriedades, role até a seção de Itens e clique no ícone de Adicionar (1 da Figura 3) para adicionar botões ou no ícone de Remover (2) para remover o botão. Adicione dois itens na primeira barra e remove um item da segunda.
Image RemovedImage Added
Figura 3 - Adicionando ou removendo botões
Alterar ícones
Após adicionar e remover itens, altere os ícones e temas dos botões. Na aba Propriedades do componente, role até a seção Itens e selecione o item. Você será redirecionado para as Propriedades do botão selecionado.
Obs.: Selecione cada item da barra de botões e repita os passos abaixo.
Figura 4 - Alterando ícone do botão
- Na aba de Propriedades do botão, altere o ícone no campo Ícone. Os ícones utilizados nesse exemplo serão:
- Inserir: ion-android-add;
- Editar: ion-android-create;
- Anterior: ion-android-arrow-back;
- Próximo: ion-android-arrow-forward;
- Excluir: ion-android-close;
- Salvar: ion-android-done;
- Cancelar: ion-android-
cancel - close.
- Deixe o campo Conteúdo
- Título em branco;
- Altere o campo Tema de acordo com a finalidade do botão:
- Azul para os botões gerais: tema
- Positivo;
- Vermelho para os botões de excluir ou cancelar: tema
- Assertivo;
- Verde para o botão de salvar: tema
- Equilibrado.
Positive
Assertive
Balanced
Configurar eventos
Assim como no tópico anterior, selecione cada botão de forma separada e vá para a aba de Eventos. Adicione a propriedade ng-click
(destaque em amarelo da Figura 5) no campo Novo Evento, seguido do evento de acordo com cada botão.
Obs.: Selecione cada item da barra de botões para adicionar o evento correspondente.
Figura 5 - Adicionando evento ao botão
- Evento do botão Inserir:
datasource.startInserting()
- Evento do botão Editar:
datasource.startEditing()
- Evento do botão Voltar:
datasource.previous()
- Evento do botão Próximo:
datasource.next()
- Evento do botão Excluir:
datasource.remove()
- Evento do botão Salvar:
datasource.post()
- Evento do botão Cancelar:
datasource.cancel()
Agora adicione nos botões Voltar e Próximo a propriedade Desabilitar Se para que o formulário percorra apenas a quantidade de itens na fonte de dados.
Image RemovedImage Added
Figura 6 - Configurando botões de Voltar e Próximo
- Selecione o botão Voltar e, na aba de Propriedades, clique no link Exibir mais localizado ao fim da aba. Inclua no campo Desabilitar Se (Figura 6) a propriedade
!datasource.hasPrevious()
. - Selecione o botão Próximo e, na aba de Propriedades, clique no link Exibir mais localizado ao fim da aba. Inclua no campo Desabilitar Se (Figura 6) a propriedade
!datasource.hasNext()
.
Esconder botões
Nesse tópico vamos abordar como os botões vão se comportar no modo de edição e inserção de itens.
Image Added
Figura 7 - Configurando propriedade Esconder SeImage Removed
- Clique no primeiro componente Barra de botões e, na aba de Propriedades, clique em Exibir mais localizado ao fim da aba. Inclua no campo Esconder Se a propriedade
datasource.editing || datasource.inserting
para esconder o componente quando entrar em modo de edição ou inserção. - Clique no segundo componente Barra de botões e, na aba de Propriedades, clique em Exibir mais. Inclua no campo Esconder Se a propriedade
!datasource.editing && !datasource.inserting
para mostrar o componente apenas quando entrar em modo de edição ou inserção.
Configurar campo
Vincular campo da fonte
Para que o item seja salvo, é necessário vincular o componente com um campo da fonte de dados. Então, selecione no componente (destaque 1 da Figura 8) e, na aba Propriedades, abra a lista suspensa do campo Valor (2) e escolha em qual dos campos da fonte de dados será salvo.
Obs.: Deve-se fazer esse procedimento para todos os componentes adicionados ao formulário.
Image RemovedImage Added
Figura 8 - Vinculando campo da fonte ao componente
Habilitar apenas leitura
Por fim, alguns componentes permitem adicionar a propriedade apenas leitura para que não seja possível escrever no item quando não estiver em modo de inserção ou edição. No caso de um componente Entrada de texto, selecione-o e desagrupe-o. Selecione somente a tag input (Figura 9), clique em Exibir mais e adicione o conteúdo !datasource.editing && !datasource.inserting
na propriedade Apenas leitura.
Obs.: Repita esse procedimento para todos os campos adicionados no formulário.
Image RemovedImage Added
Figura 9 - Habilitar apenas leitura no input
Nome em inglês
Form
Nesta página
Índice |
---|
Compatibilidade
- Formulário mobile
Equivalente web
Botão do componente
Image RemovedImage Added
Imagem no editor visual
Image RemovedImage Added