Guia Delphi

ListView: Listagem de dados dinâmica em aplicações mobile

Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Para efetuar o download você precisa estar logado. Clique aqui para efetuar o login
Confirmar voto
0
 (4)  (0)

Neste artigo veremos como manipular dinamicamente o componente ListView, exibindo dados via linha de código.

Fique por dentro
Para o desenvolvimento de aplicativos móveis, o ListView é considerado o principal componente do FireMonkey para a listagem de registros, possibilitando uma gama de recursos visuais que podem agilizar muito o desenvolvimento dos aplicativos, por exemplo os Live Bindings, usados para a vinculação desse componente com recursos de acesso a dados. Os dados para popular um ListView podem ser carregados de diversas fontes, tais como bases de dados, dataSets em memória ou dados extraídos da web. Com isso, o poder visual do RAD Studio pode não ser suficiente, fazendo-se necessário o conhecimento de como manipular esses componentes utilizando linhas de código e preenchimento dinâmico de uma lista de registros.
Autores: Jones Granatyr e Aldo Marcelo Paim

Recentemente, a demanda por aplicativos móveis no mercado comercial tem crescido cada vez mais, fato que torna o conhecimento dessa área indispensável para os desenvolvedores. Dentro desse contexto, o RAD Studio, juntamente com o FireMonkey, apresenta uma gama muito grande e diversificada de recursos para o desenvolvimento de tais aplicativos.

Nesse âmbito, um dos principais e mais utilizados componentes é o ListView, que realiza a exibição de dados apresentando-os no formato de linhas e colunas. Esse componente é passível de vários tipos de personalizações no que tange à apresentação da lista dos itens, por meio de mudanças nas características de aparência, tais como acréscimo de legendas ou de detalhes em um texto, associação de imagens ou ainda a adição de botões ou outros tipos de componentes associados a cada registro. Outro aspecto importante do ListView é o suporte apropriado ao scroll, o que permite a criação de uma lista contendo vários itens e isenta o desenvolvedor da preocupação se o conteúdo caberá em um dispositivo de dimensões reduzidas.

Em suma, o ListView é um componente otimizado para apresentação de dados em dispositivos móveis. Com isso ele se torna um substituto natural do componente TDBGrid, largamente utilizado desde as primeiras versões do Delphi em aplicações desktop para apresentação de dados. Essa migração do DBGrid para o ListView é um processo que vem ocorrendo nas últimas versões do Delphi. Ao criar uma nova aplicação multidispositivo utilizando o FireMonkey, por exemplo, o componente DBGrid não se encontra mais disponível.

Alguns dos recursos visuais que o RAD Studio fornece, como a vinculação automática de dados feita por meio de LiveBindings, podem não ser adequados em todas as situações. Isso ocorre porque em algumas situações bem específicas os componentes de acesso a dados do IDE (ClientDataSet ou queries, por exemplo) podem não atender a certos requisitos do cenário a ser trabalhado. Um exemplo disso é o acesso remoto a dados localizados nas nuvens ou até mesmo o acesso a um arquivo de texto local, situações em que o formato dos dados pode ser diferente da estrutura exigida por um componente como o ClientDataSet. Nesses casos, pode ser inviável a conversão de tais formatos em um padrão que pode ser lido por esses componentes. Além disso, se esses dados forem atualizados em curtos espaços de tempo, serão necessárias rotinas frequentes para atualização da sua exibição no aplicativo. Por esses motivos, é de suma importância conhecer os recursos para manipulação de componentes de listagem de dados por meio de código, pois assim o desenvolvedor pode adaptar um formato específico de acordo com suas necessidades, não ficando dependente somente dos recursos visuais que o IDE fornece.

Baseado nisso, o objetivo do presente artigo é mostrar como construir um aplicativo no Delphi 10 Seattle utilizando o ListView, com todo o processamento e carga de dados sendo realizados via código, dispensando a utilização dos recursos gráficos para a vinculação dos dados, tal como LiveBindings. Explorando as funcionalidades desse componente, o exemplo proposto consiste em um aplicativo mestre-detalhe com dois ListViews: o primeiro irá listar as três principais divisões do campeonato brasileiro de futebol juntamente com os times pertencentes a cada divisão, apresentando o número de vitórias, derrotas e empates. Por outro lado, o segundo ListView terá o objetivo de apresentar os jogadores pertencentes a cada time, ou seja: quando um time é selecionado são listados os jogadores que o compõem. O exemplo desenvolvido também faz uso de orientação a objetos e dicionários para armazenar os dados, já que eles serão carregados para o ListView de forma dinâmica por meio de métodos.

Criando a interface gráfica

A primeira etapa para a construção deste exemplo é criar uma nova aplicação multidispositivo no Delphi 10 Seattle (File > New > Multi-Device Application) utilizando o layout em branco (Blank Application). No formulário automaticamente criado, que chamamos de frmPrincipal, deve ser adicionado um componente TTabControl (tabPrincipal) composto por duas guias (tabTimes e tabJogadores), como mostra a Figura 1.

O funcionamento do aplicativo seguirá a seguinte lógica: na primeira guia serão listadas três divisões do campeonato brasileiro (série A, série B e série C), bem como alguns dos times que pertencem a cada uma dessas divisões. Quando um determinado time for selecionado, a interface será direcionada para a segunda guia, na qual serão listados todos os jogadores que compõem o time correspondente, caracterizando um relacionamento mestre-detalhe. Além disso, na primeira guia será possível realizar pesquisas, enquanto que a segunda guia possibilitará que os jogadores sejam excluídos ou selecionados.

Para obter o mesmo design apresentado na Figura 1, na primeira guia (tabTimes) deve ser adicionada uma TToolBar (tlbTimes) com a propriedade Align configurada para Top. Dentro dessa toolbar deve ser adicionado um TButton (btnPesquisa) alinhado à direita, com a propriedade StyleLookup con" [...]

A exibição deste artigo foi interrompida :(
Este post está disponível para assinantes MVP

 
Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Receba nossas novidades
Ficou com alguma dúvida?