Lista simples (mobile)
Função
Esse componente é usado para listar dados estáticos ou dinâmicos, através do vínculo com uma fonte de dados.
Figura 1 - Exemplo de 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 Cronapp MVC 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. |
- | 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. |
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 Cronapp MVC 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. |
Configuração
Esse componente permite listar conteúdo estático e dinâmico com o uso de fonte de dados (acesse Componente visual fonte de dados para mais informações).
Itens
Para adicionar 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 (destaque 2 da Figura 2) ou ordená-lo, clicando no item e arrastando para sua nova posição (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).
Figura 2 - 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).
Figura 2.1 - Editando o título de um item da lista
Itens dinâmicos
Para 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 e, em seguida, acesse a propriedade Fonte de dados e escolha a fonte de dados configurada anteriormente (figura 2.2).
Figura 2.2 - Vinculando uma fonte de dados ao componente
Após o vínculo entre a lista simples e fonte de dados, clique em um item da propriedade Itens, acesse a propriedade Título (destaque 1 da figura 2.3) e na aba Campo da Tela, selecione um atributo da fonte de dados (figura 2.3).
Figura 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 Título, este aparecerá em uma notação Cronapp MVC. É possível mesclar o conteúdo com texto estático, exemplo: "E-mail: {{User.active.email}}". Neste exemplo, iremos inserir o conteúdo "{{User.active.name}} - {{User.active.email}}", como mostra a figura 2.4.
Figura 2.4 - Exibindo nome e e-mail do usuário em um mesmo item da lista
No exemplo da figura 2.4, a lista simples possui 2 itens na propriedade Itens, sendo que o primeiro é estático, exibindo o termo "Item estático", e o segundo dinâmico. Ao abrir essa tela no aplicativo serão exibidos o nome e e-mail de todos os registros da fonte de dados, e, acima de cada registro, o termo "Item estático". (Figura 2.5)
Figura 2.5 - Execução do exemplo da figura 2.4
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
Nesta página
Compatibilidade
Formulário mobile
Equivalente web
Botão do Componente
Imagem no Editor Visual