DevExpress QuantumGrid: Incrementando o uso de Grids

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
 (6)  (0)

Artigo publicado pela Clube Delphi edição 64.

Esse artigo faz parte da revista Clube Delphi edição 64. Clique aqui para ler todos os artigos desta edição

DevExpress QuantumGrid

Incrementando o uso de Grids

A apresentação e entrada de dados no formato de tabela é uma coisa bastante comum nos programas Delphi. Muitas vezes, estamos procurando uma característica especial, que não é fornecida nos componentes que vêm com o Delphi para essa finalidade: StringGrid, DrawGrid e DBGrid.

Algumas dessas funcionalidades mais procuradas são o desenho especial, como quando desenhamos os números negativos em vermelho, o desenho de memos ou figuras nas células da grade, ou o uso de editores especiais nas células: ComboBoxes, CheckBoxes, Memos etc.

Os fornecedores de componentes apresentam uma variedade enorme de componentes desse tipo, que implementam alguma funcionalidade, mas dificilmente algum Grid tem tudo o que necessitamos. Terminamos assim usando diversos componentes do tipo Grid, um para cada finalidade. O ideal é que pudéssemos usar apenas um componente, que permitisse englobar todos os usos que desejamos.

Na busca pelo Grid ideal, encontrei o DevExpress QuantumGrid, um componente que foi apontado como melhor componente VCL pelos leitores da revista Delphi Informant (Delphi Informant Magazine's Readers Choice Awards) nos anos de 2001 a 2004.

 

Introdução ao DevExpress QuantumGrid

A DevExpress, desenvolvedora do QuantumGrid, não disponibiliza uma versão de teste, embora tenha uma política de devolução de dinheiro até os 60 dias de registro. Ao instalar esse componente, a primeira impressão que temos é de intimidação: são criados 13 diretórios, quatro guias na paleta de componentes e instalados mais de 70 novos componentes. Além do Grid, são instalados diversos editores, em versões não ligadas a dados como também Data-Aware.

A segunda surpresa vem ao colocar o componente cxGrid no formulário: onde estão as propriedades do componente? O componente tem relativamente poucas propriedades, a maioria relativa à aparência (bordas, alinhamento). Como é feita a ligação do DataSource ao Grid?

Na realidade, não há nada de errado com a instalação. Esta grid tem uma filosofia diferente das demais, visando sua flexibilidade. O Grid é um “container”, guardando mais de uma visualização dos dados. Desta maneira, um mesmo Grid pode mostrar diversos dados de uma vez ou o mesmo dado, de maneiras diferentes. O esquema de trabalho com o Grid é o seguinte: um Grid pode conter diversos níveis, que dão uma noção hierárquica dos dados. Por exemplo, se quisermos mostrar uma relação mestre/detalhe no Grid, como os clientes e seus pedidos, usaremos dois níveis, um principal, para os clientes e um sub-nível, para os pedidos.

Cada nível pode conter diversas visualizações. Por exemplo, podemos ver os clientes como uma tabela ou no formato de “cartões”, onde cada campo está em uma linha do quadro. Com essa maneira de organizar os dados temos a flexibilidade de mostrar as informações que queremos, podendo facilmente alterar a maneira de apresentá-los ou mesmo mudar o que será apresentado.

Vamos então criar nossa primeira aplicação usando o QuantumGrid.

 

Criando o primeiro exemplo com o Grid

Crie uma nova aplicação, colocando um cxGrid, configurando sua propriedade Align para alClient. Coloque um ClientDataSet, dando um clique de direita com o mouse e selecionando Load from MyBase table. Selecione o arquivo animals.xml que encontra-se por padrão em Arquivos Comuns\Borland\Data dentro do diretório Arquivos de Programas. O arquivo XML é carregado para o ClientDataSet.

Adicione um DataSource, ligando-o ao ClientDataset. O passo seguinte é configurar o Grid, ligando-o ao DataSet. Na parte inferior do Grid há um quadro, como mostrado na Figura 1.

 

 

Figura 1. Quadro com a configuração default da cxGrid

Quando se insere um Grid no formulário, são criados um nível e uma view automaticamente. Clique no botão Customize para personalizar o Grid. Abre-se uma janela semelhante à da Figura 2. A ligação entre o Grid e os dados é feita na View, usando um DataController. Essa é uma abstração de dados que permite ligar tanto dados de uma tabela como dados vindos da memória ou de um arquivo.

 

 

Figura 2. Tela para personalização da Grid

 

Clicando em cxGrid1DBTableView1 podemos personalizar a view. A primeira providência é ligar o DataSource ao Grid. Configuramos o DataSource da propriedade DataController, indicando o DataSource1. Em seguida, clicamos no botão Retrieve Fields. Os campos da tabela são recuperados e inseridos no Grid. Clicando no botão Close, a janela é fechada e os dados são mostrados no Grid.

Executando a aplicação, vemos que, sem uma linha de código, geramos uma aplicação relativamente complexa, que permite classificar os dados com um clique na barra de título, filtrar os dados, selecionando o filtro no ComboBox da barra de título ou mesmo agrupar os dados, arrastando a coluna que queremos agrupar para a parte superior da janela.

Como podemos notar na Figura 3, as imagens não são mostradas. Para que isso aconteça, devemos fazer duas coisas: através do botão Customize, selecionar a view e em OptionsView, configuramos a propriedade CellAutoHeight para True.

Isso faz com que a célula tome a altura necessária para apresentar o campo. Em seguida, devemos personalizar o Grid e selecionar o campo relativo à imagem, alterando a propriedade Properties para Image. Ao fechar a janela de configuração, as imagens são mostradas (Figura 4).

 

Figura 3. Projeto em execução com dados agrupados por área

 

Figura 4. Grid com imagens

 

 

Múltiplas visualizações dos dados

Como foi citado anteriormente, a organização do Grid permite que se possa ter mais de uma visualização do mesmo dado. Para isso, deve-se criar uma nova view e associá-la ao nível desejado. Clique em Customize para abrir a caixa de diálogo de personalização e na guia Views clique em Add Views, selecionando DB Card View. Faça a ligação à propriedade DataController|DataSource e adicione os campos clicando em Retrieve Fields.

Selecione OptionsView e configure a propriedade CellAutoHeight para True. Selecione o campo BMP e altere a propriedade Properties para Image. Em seguida, iremos alternar entre as duas visualizações com um RadioGroup.

No projeto, selecione o Grid e altere a propriedade Align para alNone. Abra um espaço na parte inferior da tela e insira um Panel, mudando sua propriedade Align para alBottom. Limpe a propriedade Caption. Coloque um RadioGroup no Panel, alterando a propriedade Columns para “2”. Na propriedade Items, insira os seguintes valores: “Tabela” e “Ficha”. Altere a propriedade ItemIndex  para “0”. No evento OnClick do RadioGroup, insira o seguinte código:

 

case RadioGroup1.ItemIndex of

"

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?