Função

Esse componente é usado para renderizar os dados de uma coluna da tabela.listar dados estáticos ou dinâmicos, através do vínculo com uma fonte de dados.

Image Added

Figura Figura 1. 1 - Exemplo de imagem Lista Simples rodando no Aplicativo

Principais propriedades

Propriedades

Na tabela abaixo estão descritos descritas as principais propriedades para o funcionamento básico 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

A lista simples serve tanto para exibir dados provenientes de uma fonte de dados quanto dados estáticos. Para exibir os dados dinâmicos, primeiro é feito a adição do componente fonte de dados no formulário e sua configuração (caso não saiba, clique aqui para saber como faz a configuração de uma fonte de dados).

Dados provenientes de uma fonte de dados

Após configurar a fonte e selecioná-la no campo fonte de dados (1), clique no menu … (2) do campo conteúdo para abrir a janela de configuração do mesmo. Então, selecione a aba campo de tela (3) e escolha qual das colunas dessa fonte (4) irá mostrar os dados na lista (Figura 2).

Image Removed

Figura 2 - Relacionado a coluna da tabela com o componente

Dados estáticos

No caso de dados estáticos, é preciso relacionar também com alguma fonte de dados para que eles sejam renderizados no formulário. Por padrão, o campo repetidor irá garantir a quantidade de dados existentes da fonte de dados sejam renderizados (Figura 3).

Image Removed

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). 

Âncora
itens itens

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).

Image Added

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).

Image Added

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).

Image Added

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).

Image Added

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.

Image Added

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)

Image Added

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).