Подробный обзор возможностей библиотеки FastGrid

Пользователи FastReport VCL Ultimate наверно уже заметили, что в инсталлере появились 2 новых пункта: FastEditors VCL и FastGrid VCL. Также, в Демоцентре появилось новое демо – FastGrid VCL Demo. 

FastGrid – это библиотека для визуализации, редактирования и структурирования данных на VCL и Lazarus. Состоит из таблицы – ключевого элемента визуального программирования. И позволяет наглядно представить данные и активно используется в приложениях для работы с базами, таблицами и списками. Благодаря FastGrid можно создавать удобные и функциональные программы для обработки информации.

Встроенные функции фильтрации, сортировки и структурирования данных значительно упрощают разработку. Они сокращают время работы, избавляя от излишнего кодирования и позволяя сосредоточиться на бизнес-логике.

Ключевые возможности FastGrid

1. Работа в двух режимах. Первый режим – как обычный DBAware компонент (DB). С помощью компонента TDataSource мы связываемся с данными, и далее работаем почти также, как и с DBGrid (только значительно удобнее). Во втором режиме Unbound – сетка сама хранит в себе данные. Для пользователя эти 2 режима визуально ничем не отличаются. С точки зрения программиста, различия также не очень большие.
2. Удобство редактирования данных. Многие знают, как неудобно вводить числовые данные с помощью TEdit. В нём необходимо предусмотреть, чтобы пользователь вводил только цифры, и контролировать, чтобы введенное значение попадало в заданный диапазон. Уже сейчас набор встроенных редакторов в FastGrid покрывает большинство потребностей пользователей. В дальнейшем планируется значительно увеличить набор таких редакторов.
3. Ручной ввод большого количества данных. При разработке большое внимание было уделено настройке комбинаций клавиш для ускорения ввода информации.
4. Встроенный элемент навигации. При необходимости вы можете расположить его с любой стороны сетки, настроить необходимые кнопки, или вообще его скрыть. 
5. Встроенные возможности сортировки и фильтрации данных. Причем эти возможности доступны как программно, так и в интерфейсе пользователя. Сортировать можно сразу по нескольким колонкам как по возрастанию, там и по убыванию. Фильтрация доступна как на уровне отдельной колонки, так и на уровне записи.
6. Множество способов настройки внешнего вида сетки. Например, при определенных настройках вы сможете сделать все применяемые в сетке шрифты, например, жирными, без изменения размера и прочих атрибутов шрифтов!
7. Многоуровневая группировка строк сетки по значениям колонок. Для задания группировок поддерживаются и сочетания нескольких колонок.
8. И конечно же, интеграция с FastReport. C помощью специального компонента TfrGridReportBuilder вы можете буквально одной строкой кода вывести вашу сетку на печать, а с помощью подключенных фильтров экспорта – в любой необходимый вам формат.

Создание демонстрационного приложения на основе FastGrid

Давайте попробуем сделать небольшое приложение для просмотра данных. В этом приложении будем использовать демонстрационную базу данных из комплекта поставки FastReport VCL, а именно, demo.mdb. 

Положите на форму TADOConnection, TADOTable, TDataSource. Настройте TADOConnection на демонстрационную базу данных demo.mdb (если у вас установлен Демоцентр, то по умолчанию эта база данных находится в папке "C:\Users\Public\Documents\Fast Reports\VCL\Feature Demos\FastReport VCL Demo\Data\". Также вы можете найти ее в каталогах с примерами, поставляемыми вместе с FastReport). Свяжите таблицу ADOTable1 с таблицей БД customer и откройте ее. Все готово для создания первого вашего приложения с FastGrid. 

Вторым шагом положите на форму сетку от FastReport. Ее можно найти на панели компонентов во вкладке «FastControls VCL». Все компоненты, которые находятся в этой вкладке, мы активно применяем в своей работе, и вы можете видеть их при редактировании и просмотре отчетов.

Теперь свяжем нашу сетку с данными. Отметим, что сетка является сложным компонентом. На сетке могут находиться один или несколько элементов View, которые и отображают данные. Ещё на сетке может находиться навигатор данных. 

В левом нижнем углу сетки вы можете увидеть «легенду». На легенде показана сама сетка и лежащие на ней остальные компоненты. Щелкнем в легенде мышкой на элемент frGridTableView1. Теперь в инспекторе объектов показываются свойства View, лежащего на сетке.  Найдем теперь в инспекторе объектов свойство DataController и развернем его. Далее свойству DataController.DataSource установим значение DataSource1. Теперь текущий View связан с данными.

А как теперь показать сами данные? В стандартной DBGrid данные показываются автоматически. У нас же требуется сначала добавить поля, которые необходимо отобразить. Откройте связанную с сеткой таблицу. Далее нажмите правой кнопкой мыши на легенду, затем на строчку с нашим View и во всплывающем меню выберите «Add missing columns». Как следует из названия, этот пункт меню добавляет в сетку, в текущий View все поля из связанного DataSource, которые там отсутствуют. Так как у нас отсутствуют все поля, все поля и добавятся. У нас должен получиться результат примерно, как на картинке ниже. Также можно было нажать на пункт меню «Link to DataSource» – сетка бы при этом сразу же подключилась и создала все поля из источника данных. Также команды из этого меню позволяют удалить все поля из сетки либо добавить только одно поле для дальнейшей его настройки в инспекторе объектов. 

Давайте теперь немного отредактируем получившуюся сетку. Уберем поля Addr2, Zip, Fax, State, TaxRate. Для этого достаточно просто щелкнуть правой кнопкой мыши на заголовке колонки и выбрать пункт «Delete». При необходимости мы можем прямо в дизайнере изменить мышкой ширину колонок. Теперь добавим «Навигатор данных» для сетки – переходим к свойствам View и устанавливаем OptionsView.ShowDataNavigator := True. 

Отдельно подчёркиваем, что в свойстве OptionsView собраны общие параметры, влияющие внешний вид сетки. Настроить положение и другие параметры, в том числе и показываемые кнопки навигатора данных можно в свойстве OptionsDataNavigator. После этого в редакторе IDE мы получим следующий результат:

Пробежимся кратко по остальным свойствам View:

• В свойстве OptionsData можно настроить разрешенные операции с данными.
• OptionsCustomization отвечает за разрешение пользователю различных действий (может ли он выполнять сортировку и фильтрацию данных, изменять размеры и перемещать колонки сетки.
• OptionsBehavior – подтверждения некоторых операций с данными.
• DataController – настройка связи с данными. 
• OptionsView – различные настройки внешнего вида сетки. 
• Свойства, имена которых начинаются со слова Appearance…, отвечают в основном за внешний вид различных элементов сетки и заимствование их от родителя. Эти свойства мы подробнее рассмотрим в дальнейших статьях.

Давайте запустим получившееся приложение и посмотрим, что может сделать с ним обычный пользователь.

А сделать пользователь может достаточно много. Например, при щелчке по заголовку колонки происходит сортировка значений. На скриншоте мы отсортировали сетку по полю Contact.

Если мы наведем мышь на заголовок колонки, то заметим, что там появился Filter Mark (Значок фильтрации). Нажмем на этот знак и получим возможность фильтровать данные.

Любой пользователь может перемещать мышкой колонки и изменять их размер. Это при условии, что вы как разработчик разрешили совершать данные действия. Также FastGrid можно прятать ненужные колонки. Для этого нужно нажать левой кнопкой мыши в верхнем левом углу сетки и в появившемся окошке отметить или снять отметку с названия колонки. На скриншоте как раз и показан режим показа или скрытия колонок.

Обратите внимание, что у колонки CustNo имеются элементы типа UpDown. Сетка автоматически определила, что тип поля – это число, и для работы с полем выбрала соответствующий редактор. 

При необходимости вы можете самостоятельно выбрать редактор для работы с полем. Для этого в дизайнере IDE выберите нужную колонку. Затем в инспекторе объектов перейдите к свойству колонки «Properties» и выберите нужное значение из выпадающего списка. После выбора редактора свойство «Properties» станет раскрываемым, и вы сможете настроить его параметры.

Сейчас доступно около десяти редакторов, и их число постоянно растёт. Редакторы сетки также доступны в виде отдельных компонентов. Не используйте редакторы типов данных, которые не совместимы с типом вашего поля. Работа с редакторами сетки будет подробно рассмотрена в другой статье. Сейчас отметим, что редактор для колонки сетки можно задать программно, используя имя редактора.

У нас получилось маленькое приложение, отображающее одну таблицу. При этом мы не написали ни одной строчки кода! Давайте попробуем добавить к нашему приложению какую-нибудь дополнительную функциональность. Например, выбор таблицы для просмотра, печать и экспорт данных таблицы в CSV. 

Положим на нашу форму следующие элементы управления: frComboBox, 3 кнопки, frSpinEdit и компонеты TfrxReport, TfrGridReportBuilder и TfrxCSVExport.  frComboBox будем использовать для выбора отображаемой таблицы. Установим у него в инспекторе объектов свойство frCombobox1.Properties.DropDownStyle := frddsFixedList и напишем обработчик 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;

И обработчик OnClick для Button1:

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

Теперь, если мы запустим наше приложение, в frComboBox1 появятся все таблицы нашей базы данных, причем выбрана будет та, которая указана в нашей ADOTable. А если мы нажмем Button1, то в сетке появится содержимое выбранной таблицы. Попробуем открыть таблицу biolife:

Сетка автоматически определила типы полей и может показывать даже изображения, хранящиеся в базе данных. Однако полученные изображения маленькие. Давайте напишем следующий обработчик у frSpinEdit1:

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

Теперь при вводе в frSpinEdit1 значения и нажатия Enter мы задаем высоту строки сетки. Попробуем распечатать содержимое сетки, для этого настроим свойства компонента frGridReportBuilder1 следующим образом:

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

И напишем нашу одну строчку в обработчике OnClick Button2:

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

Запускаем приложение, нажимаем на кнопку Print (Button2) и получаем:

В данном примере мы отсортировали сетку по полю «Company» и скрыли некоторые колонки. При этом на превью мы получили ровно те же данные, что и в сетке.

Свойство Options.BuildReportActionType компонента TfrGridReportBuilder определяет, что будет сделано с текущим отчетом после его построения. Возможны 3 опции: 

• braPrepareReport просто подготавливает отчет, и что с ним делать дальше решает программист.
• braShowReport – показывает предварительный просмотр.
• braExportReport – производит экспорт подготовленного отчета в предварительно заданный фильтр экспорта в свойстве Options.DefaultExport. 

Напишем следующий обработчик для Button3:

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

Запустим наше приложение и попробуем нажать на Button3 – у нас на экране сначала появится диалог экспорта в CSV, а потом диалог сохранения полученного файла. Если открыть полученный файл, то мы обнаружим, что его содержимое совпадает с находящимися в сетке данными.

Небольшие итоги обзорной статьи FastGrid

Таким образом, мы за несколько кликов мышкой и десяток строк кода создали достаточно полезную утилиту, позволяющую выполнять экспорт из подключенной базы данных. 

Данный пример будет работоспособен и под Lazarus, в том числе и под Linux. Единственное, надо будет заменить компоненты доступа к данным и методы получения списка таблиц из связанной базы данных и активации выбранной таблицы. Сетка работает с любыми потомками TDataSet.

Вы можете ознакомиться с этим демонстрационным примером, даже не набирая код в вашей IDE. Всё включено в набор демо FastGrid под названием “DataAware”.

Как видим, работать с компонентом TfrGrid легко и просто. В этой статье мы кратко прошлись по основным способам применения этого компонента. В дальнейших статьях мы вместе с вами исследуем различные аспекты применения сетки более подробно. Если вам интересны те или иные аспекты применения, подскажите нам об этом, и мы постараемся раскрыть интересующие вас подробности более полно. А небольшой проект с сеткой, который мы сделали в этой статье, не убирайте далеко, он нам еще понадобится!