Versões comparadas
Chave
- Esta linha foi adicionada.
- Esta linha foi removida.
- A formatação mudou.
Função
Esse componente é usado para listar dados estáticos ou vinculados a dinâmicos, através do vínculo com uma fonte de dados.
Image Added
Figura 1 .1 - Exemplo de imagem Lista Simples rodando no Aplicativo
Principais propriedades
Propriedades
Na tabela abaixo estão descritas as principais propriedades do componente.
Nome | Propriedade | Função |
---|---|---|
Fonte de dados | crn-datasource | Seleciona uma fonte de dados que estiver presente na área de edição do formulário. |
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 Angular usada para exibir ou oculta o componente. |
Repetir no formulário html.Repetidor | 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. |
Conteúdo | content | Esse campo define o texto que é exibido. |
Posição do texto | xattr-text-position | Define a posição do texto, alinhando à direita, esquerda ou centro. |
. | ||
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. |
Classes CSS | class | Adiciona classes CSS que já foram criadas. |
Itens | - | Permite adicionar, ordenar, configurar e excluir itens estáticos na lista. |
Eventos
Na tabela abaixo estão descritas os principais eventos do componente.
Nome | Propriedade | Função |
---|---|---|
Ao Clicar | ng-click | Executa uma ação quando o componente receber um clique com o mouse ou um toque na tela. |
Ao Clique Rápido | on-tap | Executa uma ação sempre que o componente é clicado rapidamente. |
Ao Clique Duplo Rápido | on-double-tap | Executa uma ação sempre que o componente é clicado duas vezes. |
Ao Pressionar | on-hold | Executa uma ação sempre que o componente é pressionado sem soltar por alguns milissegundos. |
Ao Deslizar | on-swipe | Executa uma ação sempre que é feito uma ação de swipe no componente. |
Ao Arrastar | on-drag | Executa uma ação sempre que o componente é arrastado. |
Item da lista simples
Na tabela abaixo estão descritas as principais propriedades do subcomponente.
Nome | Propriedade | Função | |||
---|---|---|---|---|---|
Identificador | id | Atributo que especifica um ID exclusivo para o componente. Por padrão um id é gerado automaticamente e atribuído ao componente. | |||
Título | content | Define o texto do Título. | |||
Cor do texto | xattr-theme | Define a cor do conteúdo que será exibido. | |||
Posição do texto | xattr-text-position | Define a posição do título e subtítulo do item, podendo ser na esquerda, no centro ou na direita. | |||
Estilo | style | Altera o estilo do componente de forma inline. | |||
Exibir | ng-show | Propriedade | AngularJSAngular usada para exibir ou oculta o componente. | ||
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. | |||
Classes CSS | class | Adiciona classes CSS que já foram criadas | .Itens | - | Permite adicionar, ordenar, configurar e excluir itens estáticos na lista . |
Configuração
Esse componente permite listar conteúdo estáticos estático e dinâmicos, dinâmico com o uso de fonte de dados existente no formulário (acesse Fonte de Dados para Componente visual fonte de dados para mais informações).
Âncora itens itens
Itens
estáticosPara alimentar a lista com conteúdo estáticoadicionar um novo item, basta arrastar o componente Lista simples para o formulário e na propriedade Itens, clicar no botão "+" (Adicionar). Também é possível apagar o item, clicando no ícone de lixeira Lixeira (item destaque 2 da Figura 2.1) ou ordená-lo, clicando no item e arrastando para uma sua nova posição (item 3 da Figura destaque 3 da figura 2).
Quando o componente Lista Simples é selecionado, todo o componente fica selecionado em azul na área de edição e o nome do componente "Lista Simples" é exibido logo em cima na área de propriedades (destaque 1 da figura 2). Já quando um Item da lista simples é selecionado, apenas o subcomponente fica marcado na área de edição, e tanto o título quando as propriedades na área de propriedades mudam (destaque 1 da figura 2.1).Image Removed
Image Added
Figura 2 .1 - A propriedade Itens permite adicionar, excluir e ordenar os itens
Itens estáticos
Para adicionar conteúdo estático a cada registro da lista, clique em um item da propriedade Itens, selecionando-o, para exibir suas propriedades e permitir alterar a propriedade Título (destaque 2 da figura 2.1).
Image Added
Figura 2.1 - Editando o título de um item da lista
Itens dinâmicos
Para criar utilizar o componente Lista simples como uma lista dinâmica é necessário configurar inicialmente uma fonte de dados. Para isso, arraste e configure um Componente visual fonte de dados, no exemplo iremos usar a fonte de dados associada a entidade User. Nas configurações do Componente visual fonte de dados, é importante que a propriedade Postergar Carga esteja configurada como Não. Caso contrário, o conteúdo do componente não será exibido automaticamente na tela.
Para vincular a fonte de dados ao componente, primeiro selecione o componente Lista simples e na e, em seguida, acesse a propriedade Fonte de dados e escolha a fonte de dados configurada anteriormente (figura 2.2).
Image Added
Figura 2.2 - Vinculando uma fonte de dados ao componente
Após , escolha uma das fontes de dados que já devem estar no formulário. Após o vínculo entre a lista simples e fonte de dados, clique em um item da propriedade Itens, acesse a propriedade Conteúdo Título (destaque 1 da figura 2.3) e na aba Campo da Tela, selecione um atributo da fonte de dados (Figura figura 2.23).Image Removed
Image Added
Figura 2.2 3 - Vinculando um item da lista à a um campo da fonte de dados.
Após selecionar um campo da fonte de dados na propriedade Conteúdo Título, este aparecerá em uma notação AngularJSAngular. É possível mesclar o conteúdo com texto estático, exemplo: "O e-mail do usuário {{rowDataE-mail: {{User.active.email}}
". Neste exemplo, iremos inserir o conteúdo "{{User.active.name}
} é - {{
rowDataUser.active.email}}
", como mostra a figura 2.4.
Image Removed
Image Added
Figura 2.3 4 - Exibindo login nome e e-mail do usuário em um mesmo item da lista
No exemplo da figura 2.34, a lista simples possui 2 itens na propriedade Itens, sendo que o primeiro é dinâmico e o segundo estático. , exibindo o termo "Item estático", e o segundo dinâmico. Ao abrir essa tela no aplicativo , serão exibidos o login nome e e nome -mail de todos os registros da fonte de dados, e abaixo , acima de cada registro, o termo "Item estático". (Figura 2.45)Image Removed
Image Added
Figura 2.4 5 - Execução do exemplo da figura 2.34
Âncora corDoTexto corDoTexto
Cor do texto
Essa propriedade irá exibir 2 grupos de cores em sua lista, as primeiras são as cores definidas pelo tema e, em seguida, uma seleção fixa de cores pré-definidas.
As cores definidas pelo tema (Padrão do tema, Secundário, Sucesso, Informação, Aviso, Perigo, Claro, Editável, Real e Escuro) podem variar a partir das seguintes situações:
- Alteração do tema do projeto (menor prioridade);
- Adição da Skin do projeto através do campo "Skin do Tema Mobile" na janela de Configurações do Projeto.
- Seleção da Skin na propriedade "Skin" do componente visual. (maior prioridade).
Nome em inglês
Simple List
Nessa Nesta página
Índice maxLevel 3 printable false
Compatibilidade
Formulário webmobile
Equivalente web
O link será adicionado no final, após todos os componentes criados.Lista Simples
Botão do Componente
Image Added
Imagem no Editor Visual
Image Added