Visão geral detalhada das capacidades da biblioteca FastGrid

Os usuários do FastReport VCL Ultimate provavelmente já notaram que apareceram 2 novos itens no instalador: FastEditors VCL e FastGrid VCL. Além disso, uma nova demonstração foi adicionada ao Demo Center — FastGrid VCL Demo.

FastGrid é uma biblioteca para visualização, edição e estruturação de dados em VCL e Lazarus. Consiste em uma grade — um elemento-chave da programação visual. Ela permite apresentar dados de forma clara e é ativamente utilizada em aplicações para trabalhar com bancos de dados, tabelas e listas. Com o FastGrid, você pode criar programas convenientes e funcionais para processamento de informações.

As funções embutidas de filtragem, ordenação e estruturação de dados simplificam significativamente o desenvolvimento. Elas reduzem o tempo de trabalho, eliminando a codificação excessiva e permitindo que você se concentre na lógica de negócios.

Principais capacidades do FastGrid

1. Funciona em dois modos. O primeiro modo — como um componente DBAware comum (DB). Usando o componente TDataSource, você se conecta aos dados e então trabalha de forma semelhante ao DBGrid (só que significativamente mais conveniente). No segundo modo, Unbound, a grade armazena os dados nela mesma. Para o usuário, visualmente não há diferença entre os dois modos. Do ponto de vista do programador, as diferenças também não são muito grandes.
2. Facilidade de edição de dados. Muitos sabem o quão inconveniente é inserir dados numéricos usando TEdit. Nele, é necessário garantir que o usuário digite apenas números e controlar se o valor inserido está dentro da faixa especificada. Atualmente, o conjunto de editores embutidos no FastGrid já atende à maioria das necessidades dos usuários. No futuro, está planejado aumentar significativamente esse conjunto de editores.
3. Entrada manual de grandes quantidades de dados. Durante o desenvolvimento, muita atenção foi dada à configuração de combinações de teclas para acelerar a entrada de informações.
4. Elemento de navegação embutido. Quando necessário, você pode posicioná-lo em qualquer lado da grade, configurar os botões necessários ou até mesmo ocultá-lo completamente.
5. Capacidades embutidas de ordenação e filtragem de dados. Essas capacidades estão disponíveis tanto programaticamente quanto na interface do usuário. É possível ordenar por múltiplas colunas ao mesmo tempo, tanto em ordem crescente quanto decrescente. A filtragem está disponível tanto no nível de coluna individual quanto no nível de registro.
6. Múltiplas formas de configurar a aparência da grade. Por exemplo, com certas configurações, você pode tornar todas as fontes usadas na grade, por exemplo, em negrito, sem alterar o tamanho ou outros atributos das fontes!
7. Agrupamento multinível das linhas da grade por valores de colunas. Para definir agrupamentos, também são suportadas combinações de várias colunas.
8. Integração com o FastReport. Usando o componente especial TfrGridReportBuilder, você pode, literalmente com uma única linha de código, imprimir sua grade e, com os filtros de exportação conectados, exportar para qualquer formato necessário.

Criação de uma aplicação de demonstração baseada no FastGrid

Vamos tentar criar um pequeno aplicativo para visualização de dados. Neste aplicativo, usaremos o banco de dados de demonstração fornecido com o FastReport VCL, especificamente, demo.mdb.

Coloque no formulário: TADOConnection, TADOTable, TDataSource. Configure o TADOConnection para o banco de dados de demonstração demo.mdb (se você tiver o Demo Center instalado, por padrão este banco de dados está localizado na pasta "C:\Users\Public\Documents\Fast Reports\VCL\Feature Demos\FastReport VCL Demo\Data\". Você também pode encontrá-lo nos diretórios com exemplos fornecidos junto com o FastReport). Vincule a tabela ADOTable1 à tabela do banco de dados “customer” e abra-a. Tudo está pronto para criar seu primeiro aplicativo com FastGrid.

Como segundo passo, coloque no formulário a grade do FastReport. Você pode encontrá-la na paleta de componentes na aba “FastControls VCL”. Todos os componentes que estão nesta aba são ativamente utilizados por nós em nosso trabalho, e você pode vê-los ao editar e visualizar relatórios.

Agora vamos vincular nossa grade aos dados. Observe que a grade é um componente complexo. Na grade podem haver um ou mais elementos View, que são os que exibem os dados. Também pode haver um navegador de dados na grade.

No canto inferior esquerdo da grade, você pode ver uma “legenda”. A legenda mostra a própria grade e os outros componentes sobre ela. Clique na legenda no elemento frGridTableView1. Agora, no inspetor de objetos, as propriedades do View que estão na grade são exibidas. Encontre agora no inspetor de objetos a propriedade DataController e expanda-a. Em seguida, defina a propriedade DataController.DataSource como DataSource1. Agora o View atual está vinculado aos dados.

E como exibir os dados propriamente ditos? No DBGrid padrão, os dados são exibidos automaticamente. Aqui, primeiro precisamos adicionar os campos que devem ser exibidos. Abra a tabela vinculada à grade. Em seguida, clique com o botão direito na legenda, depois na linha com o nosso View e, no menu pop-up, escolha “Add missing columns”. Como o nome sugere, este item de menu adiciona à grade, no View atual, todos os campos do DataSource vinculado que estão ausentes. Como todos os campos estão ausentes, todos os campos serão adicionados. Devemos obter um resultado semelhante ao da imagem abaixo. Também poderíamos clicar no item de menu “Link to DataSource” — a grade se conectaria imediatamente e criaria todos os campos da fonte de dados. Também os comandos deste menu permitem remover todos os campos da grade ou adicionar apenas um campo para configuração posterior no inspetor de objetos.

Vamos agora editar um pouco a grade resultante. Vamos remover os campos Addr2, Zip, Fax, State, TaxRate. Para isso, basta clicar com o botão direito no cabeçalho da coluna e escolher o item “Delete”. Se necessário, podemos alterar a largura das colunas diretamente no Designer com o mouse. Agora vamos adicionar um “Navegador de dados” para a grade — vá para as propriedades do View e defina OptionsView.ShowDataNavigator := True.

Ressaltamos que na propriedade OptionsView estão reunidos os parâmetros gerais que afetam a aparência da grade. A posição e outros parâmetros, incluindo os botões exibidos no navegador de dados, podem ser configurados na propriedade OptionsDataNavigator. Após isso, no editor da IDE, obteremos o seguinte resultado:

Vamos percorrer brevemente as outras propriedades do View:

• Na propriedade OptionsData, você pode configurar as operações permitidas com os dados.
• OptionsCustomization é responsável por permitir ao usuário várias ações (se ele pode realizar ordenação e filtragem de dados, redimensionar e mover colunas da grade).
• OptionsBehavior — confirmações de algumas operações com dados.
• DataController — configuração da vinculação com os dados.
• OptionsView — várias configurações de aparência da grade.
• As propriedades cujos nomes começam com “Appearance...” são responsáveis principalmente pela aparência de vários elementos da grade e por herdar esses estilos do pai. Essas propriedades serão examinadas em detalhes em artigos futuros.

Vamos executar o aplicativo resultante e ver o que um usuário comum pode fazer com ele.

E o usuário pode fazer bastante coisa. Por exemplo, ao clicar no cabeçalho da coluna, ocorre a ordenação dos valores. Na captura de tela, ordenamos a grade pelo campo Contact.

Se passarmos o mouse sobre o cabeçalho da coluna, notaremos que apareceu um “Filter Mark” (ícone de filtro). Clique neste ícone e você terá a possibilidade de filtrar os dados.

Qualquer usuário pode mover as colunas com o mouse e redimensioná-las. Isso desde que você, como desenvolvedor, tenha permitido essas ações. Além disso, no FastGrid você pode ocultar colunas desnecessárias. Para isso, clique com o botão esquerdo no canto superior esquerdo da grade e, na janela que aparecer, marque ou desmarque o nome da coluna. A captura de tela mostra exatamente o modo de exibir ou ocultar colunas.

Observe que a coluna CustNo possui elementos do tipo UpDown. A grade determinou automaticamente que o tipo do campo é numérico e selecionou o editor apropriado para trabalhar com o campo.

Se necessário, você pode escolher manualmente o editor para trabalhar com o campo. Para isso, no Designer da IDE, selecione a coluna desejada. Em seguida, no inspetor de objetos, vá para a propriedade “Properties” da coluna e escolha o valor desejado na lista suspensa. Após selecionar o editor, a propriedade “Properties” se tornará expansível e você poderá configurar seus parâmetros.

Atualmente, cerca de dez editores estão disponíveis, e seu número está em constante crescimento. Os editores da grade também estão disponíveis como componentes separados. Não use editores de tipos de dados incompatíveis com o tipo do seu campo. O trabalho com os editores da grade será detalhado em outro artigo. Agora, observe que o editor para uma coluna da grade pode ser definido programaticamente, usando o nome do editor.

Conseguimos um pequeno aplicativo que exibe uma única tabela. E isso sem escrever uma única linha de código! Vamos tentar adicionar alguma funcionalidade extra ao nosso aplicativo. Por exemplo, escolher a tabela para visualização, imprimir e exportar os dados da tabela para CSV.

Vamos colocar no formulário os seguintes elementos de controle: frComboBox, 3 botões, frSpinEdit e os componentes TfrxReport, TfrGridReportBuilder e TfrxCSVExport. Usaremos o frComboBox para selecionar a tabela a ser exibida. No inspetor de objetos, defina a propriedade frCombobox1.Properties.DropDownStyle := frddsFixedList e escreva o manipulador FormCreate:

procedure TForm1.FormCreate(Sender: TObject);
var I:Integer;
begin
 frCombobox1.Properties.Items.Clear;
 ADOConnection1.GetTableNames(frCombobox1.Properties.Items);
 I := frCombobox1.Properties.Items.IndexOf(ADOTable1.TableName);
 if I <> -1 then begin
 frCombobox1.ItemIndex := I;
 end;
end;

E o manipulador OnClick para Button1:

procedure TForm1.Button1Click(Sender: TObject);
begin
 ADOTable1.Active := False;
 ADOTable1.TableName := frCombobox1.Text;
 ADOTable1.Active := True;
 frGrid1TableView1.Columns.Clear;
 frGrid1TableView1.Columns.RetrieveMissingColumns; 
end;

Agora, se executarmos nosso aplicativo, no frComboBox1 aparecerão todas as tabelas do nosso banco de dados, e a que está definida no nosso ADOTable será selecionada. E se clicarmos em Button1, o conteúdo da tabela selecionada aparecerá na grade. Vamos tentar abrir a tabela biolife:

A grade determinou automaticamente os tipos de campos e pode até exibir imagens armazenadas no banco de dados. No entanto, as imagens obtidas são pequenas. Vamos escrever o seguinte manipulador para o frSpinEdit1:

procedure TForm1.frSpinEdit1PropertiesChanged(Sender: TObject);
begin
 frGrid1TableView1.OptionsView.RowHeight := frSpinEdit1.Value;
end;

Agora, ao inserir um valor no frSpinEdit1 e pressionar Enter, definimos a altura da linha da grade. Vamos tentar imprimir o conteúdo da grade. Para isso, configure as propriedades do componente frGridReportBuilder1 da seguinte forma:

Report:=frxReport1;
View:=frGridTableView1;
Options.BuildReportActionType:=braShowReport
Options.BuildReportActionType:=frxCVSExport1

E escrevemos nossa única linha no manipulador OnClick do Button2:

procedure TForm1.Button2Click(Sender: TObject);
begin
 frGridReportBuilder1.Build;
end;

Executamos o aplicativo, clicamos no botão Print (Button2) e obtemos:

Neste exemplo, ordenamos a grade pelo campo “Company” e ocultamos algumas colunas. Na pré-visualização, obtivemos exatamente os mesmos dados que estavam na grade.

A propriedade Options.BuildReportActionType do componente TfrGridReportBuilder define o que será feito com o relatório atual após sua construção. São possíveis 3 opções:

• braPrepareReport — prepara o relatório, e o programador decide o que fazer em seguida.
• braShowReport — exibe a pré-visualização.
• braExportReport — exporta o relatório preparado para um filtro de exportação predefinido na propriedade Options.DefaultExport.

Vamos escrever o seguinte manipulador para Button3:

procedure TForm1.Button3Click(Sender: TObject);
begin 
 TfrGridTableViewReportBuilderOptions(frGridReportBuilder1.Options).BuildReportActionType := braExportReport;
 frGridReportBuilder1.Build; 
 TfrGridTableViewReportBuilderOptions(frGridReportBuilder1.Options).BuildReportActionType := braShowReport;
end;

Execute nosso aplicativo e tente clicar em Button3 — primeiro aparecerá na tela o diálogo de exportação para CSV e depois o diálogo para salvar o arquivo resultante. Se abrirmos o arquivo obtido, descobriremos que seu conteúdo coincide com os dados presentes na grade.

Pequeno resumo do artigo de visão geral do FastGrid

Assim, com alguns cliques do mouse e dezenas de linhas de código, criamos um utilitário bastante útil que permite exportar dados de um banco de dados conectado.

Este exemplo também funcionará no Lazarus, inclusive no Linux. A única diferença é que será necessário substituir os componentes de acesso a dados e os métodos para obter a lista de tabelas do banco de dados conectado e ativar a tabela selecionada. A grade funciona com qualquer descendente de TDataSet.

Você pode conhecer este exemplo de demonstração sem mesmo digitar o código em sua IDE. Tudo está incluído no conjunto de demos do FastGrid chamado “DataAware”.

Como podemos ver, trabalhar com o componente TfrGrid é fácil e simples. Neste artigo, percorremos brevemente as principais formas de usar este componente. Em artigos futuros, exploraremos juntos vários aspectos do uso da grade com mais detalhes. Se você tiver interesse em determinados aspectos do uso, informe-nos e tentaremos abordar os detalhes que lhe interessam de forma mais completa. E não guarde muito longe o pequeno projeto com a grade que fizemos neste artigo — ele ainda será útil!