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
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
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
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 “
case RadioGroup1.ItemIndex of
0: cxGrid1Level1.GridView := cxGrid1DBTableView1;
1: cxGrid1Level1.GridView := cxGrid1DBCardView1;
end;
...
