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.

Eventos

Na tabela abaixo estão descritas os principais eventos do componente.

Item da lista simples

Na tabela abaixo estão descritas as principais propriedades do subcomponente.

Configuração

Esse componente permite listar conteúdo estático e dinâmico com o uso de fonte de dados (acesse Fonte de Dados para 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 Fonte de Dados Componente visual fonte de dados, no exemplo iremos usar a fonte de dados associada a entidade User. Nas configurações do componente Fonte 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 Angular. É 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:

1. Alteração do tema do projeto (menor prioridade);
2. Adição da Skin do projeto através do campo "Skin do Tema Mobile" na janela de Configurações do Projeto.
3. Seleção da Skin na propriedade "Skin" do componente visual. (maior prioridade).