Главная » ActionScript » Использование компонента DataGrid

0

Компонент DataGrid позволяет отображать данные в сетке со строками и столбцами, рисовать данные из массива или внешнего XML-файла, который можно проанализировать и добавить в массив для экземпляра DataProvider. Компонент DataGrid включает вертикальную и горизонтальную прокрутку, поддержку событий (включая поддержку редактируемых ячеек) и функции сортировки.

Можно изменять размер и настройки для таких характеристик, как шрифт, цвет и границы столбцов в сетке. Для любого столбца в сетке в качестве визуализатора ячейки можно использовать пользовательский фрагмент ролика. (Визуализатор ячейки отображает ее содержимое.) Можно отключить полосы прокрутки и с помощью методов DataGrid создать отображение стиля вида страницы. Дополнительные сведения о настройке см. в описании класса DataGridColumn в Справочнике по языку ActionScript 3.0 и компонентам.

См. также

Создание, заполнение и изменение размера компонента DataGrid

Настройка и сортировка компонента DataGrid

Фильтрация и форматирование данных компонента DataGrid

Взаимодействие пользователей с компонентом DataGrid

С компонентом DataGrid можно взаимодействовать с помощью мыши или клавиатуры.

Если свойство sortableColumns и свойство столбца sortable имеют значение true, то при щелчке по заголовку столбца данные сортируются на базе значений этого столбца. Можно отключить сортировку для отдельного столбца, задав его свойству sortable значение false.

Если свойство resizableColumns имеет значение true, можно изменять размер столбцов, перетаскивая разделители столбцов в строке заголовка.

Если щелкнуть в редактируемой ячейке, она получает фокус; при щелчке по нередактируемым ячейкам фокус не меняется. Отдельная ячейка является редактируемой, когда свойства DataGrid.editable и DataGridColumn.editable оба имеют значение true.

Дополнительную информацию см. в описании классов DataGrid и DataGridColumn в Справочнике по языку

ActionScript 3.0 и компонентам.

Когда экземпляр DataGrid получает фокус в результате щелчка мыши или перехода с помощью клавиши Tab, им можно управлять следующими клавишами.

Клавиша                                                       Описание

"Стрелка вниз"                                          Когда ячейка редактируется, точка вставки перемещается в конец текста ячейки. Если ячейка нередактируемая, клавиша "Стрелка вниз" обрабатывает выделение, как компонент List.

"Стрелка вверх"                                        Когда ячейка редактируется, точка вставки перемещается в начало текста ячейки. Если ячейка нередактируемая, клавиша "Стрелка вверх" обрабатывает выделение, как компонент List.

Shift+"Стрелка вверх"/"Стрелка вниз"

Если компонент DataGrid нередактируемый и свойство allowMultipleSelection имеет значение true, выделяются непрерывные строки. При изменении направления с помощью противоположной стрелки отменяется выделение выбранных строк, пока не будет пройдена первая выделенная строка, после чего строки опять начнут выделяться.

Shift+щелчок мыши                                Если свойство allowMultipleSelection имеет значение true, выделяются все строки между выделенной строкой и текущей точкой вставки (выделенной ячейки).

Ctrl+щелчок мыши                                  Если свойство allowMultipleSelection имеет значение true, выделяются дополнительные строки, которые могут не примыкать друг к другу.

"Стрелка вправо"                                     Когда редактируется ячейка, точка вставки сдвигается на один символ вправо. Если ячейка нередактируемая, клавиша "Стрелка вправо" не работает.

"Стрелка влево"                                       Когда редактируется ячейка, точка вставки сдвигается на один символ влево. Если ячейка нередактируемая, клавиша "Стрелка влево" не работает.

Home                                                            Выделяет первую строку в экземпляре DataGrid.

Клавиша                                                       Описание

End                                                                 Выделяет последнюю строку в экземпляре DataGrid.

Page Up                                                        Выделяет первую строку на странице в DataGrid. Страница содержит определенное количество строк, которое DataGrid может отображать без прокручивания.

Page Down                                                  Выделяет последнюю строку на странице в DataGrid. Страница содержит определенное количество строк, которое DataGrid может отображать без прокручивания.

Return/Enter/Shift+Enter                       Когда ячейка редактируемая, изменение применяется, а точка вставки перемещается на другую ячейку в том же столбце но на другой строке (выше или ниже в зависимости от переключателя сдвига).

Shift+Tab/Tab                                            Если экземпляр DataGrid редактируемый, фокус переводится на предыдущий/следующий элемент, пока не будет достигнут конец столбца, а затем на предыдущую/следующую строку, пока не будет достигнута первая или последняя ячейка. Если выделена первая ячейка, комбинация Shift+Tab переводит фокус на предыдущий элемент управления. Если выделена последняя ячейка, клавиша Tab переводит фокус на следующий элемент управления.

Если экземпляр DataGrid нередактируемый, фокус переводится на предыдущий/следующий элемент управления.

Компонент DataGrid можно использовать как основу для многочисленных типов приложений на базе данных. Данные можно легко отобразить в виде отформатированной таблицы. Также можно использовать возможности визуализатора ячейки, чтобы создать более сложные и редактируемые элементы пользовательского интерфейса. Ниже приводятся примеры практического применения компонента DataGrid:

•   клиенты почтовой веб-службы;

•   страницы результатов поиска;

•   приложения для работы с электронными таблицами, такие как калькуляторы ссуды или приложения для заполнения налоговых деклараций.

Разрабатывая приложение с использованием компонента DataGrid, лучше разобраться в дизайне компонента List, потому что класс DataGrid расширяет класс SelectableList. Дополнительные сведения о классе SelectableList и компоненте List см. в описании классов SelectableList и List в  Справочнике по языку ActionScript 3.0 и компонентам.

Когда в приложение добавляется компонент DataGrid, его можно сделать доступным для программ чтения с экрана путем добавления следующих строк кода ActionScript.

import fl.accessibility.DataGridAccImpl; DataGridAccImpl.enableAccessibility();

Расширенный доступ для компонента включается только один раз, независимо от числа его экземпляров. Дополнительные сведения см. в главе 18 "Создание содержимого с расширенной доступностью" в руководстве Использование Flash.

Параметры компонента DataGrid

В Инспекторе свойств или Инспекторе компонентов можно задать следующие параметры разработки для каждого экземпляра компонента DataGrid: allowMultipleSelection, editable, headerHeight, horizontalLineScrollSize, horizontalPageScrollSize, horizontalScrolllPolicy, resizableColumns, rowHeight, showHeaders, verticalLineScrollSize, verticalPageScrollSize и verticalScrollPolicy. Каждый из этих параметров имеет соответствующее свойство ActionScript с тем же именем. Сведения о возможных значениях для этих параметров см. в описании класса DataGrid в Справочнике по языку ActionScript 3.0 и компонентам.

Создание приложения с компонентом DataGrid

Чтобы создать приложение с компонентом DataGrid, сначала необходимо определиться, откуда будут поступать данные. Как правило, данные поступают из экземпляра Array, который можно добавить в сетку с помощью свойства dataProvider. Также для добавления данных в сетку можно использовать методы классов DataGrid и DataGridColumn.

Использование локального поставщика данных с компонентом DataGrid

В этом примере создается экземпляр DataGrid для отображения состава футбольной команды. Список футболистов определяется в объекте Array (aRoster) и назначается свойству dataProvider экземпляра DataGrid.

1   В Flash выберите "Файл" > "Создать", затем выберите "Файл Flash (ActionScript 3.0)".

2   Перетащите компонент DataGrid с панели "Компоненты" в рабочую область.

3   В Инспекторе свойств введите aDg в качестве имени экземпляра.

4   Откройте панель "Действия", выберите "Кадр 1" на главной временной шкале и введите следующий код

ActionScript.

import fl.data.DataProvider;

bldRosterGrid(aDg);

var aRoster:Array = new Array();

aRoster = [

{Name:"Wilma Carter", Bats:"R", Throws:"R", Year:"So", Home: "Redlands, CA"},

{Name:"Sue Pennypacker", Bats:"L", Throws:"R", Year:"Fr", Home: "Athens, GA"},

{Name:"Jill Smithfield", Bats:"R", Throws:"L", Year:"Sr", Home: "Spokane, WA"},

{Name:"Shirley Goth", Bats:"R", Throws:"R", Year:"Sr", Home: "Carson, NV"},

{Name:"Jennifer Dunbar", Bats:"R", Throws:"R", Year:"Fr", Home: "Seaside, CA"},

{Name:"Patty Crawford", Bats:"L", Throws:"L", Year:"Jr", Home: "Whittier, CA"},

{Name:"Angelina Davis", Bats:"R", Throws:"R", Year:"So", Home: "Odessa, TX"},

{Name:"Maria Santiago", Bats:"L", Throws:"L", Year:"Sr", Home: "Tacoma, WA"},

{Name:"Debbie Ferguson", Bats:"R", Throws:"R", Year: "Jr", Home: "Bend, OR"},

{Name:"Karen Bronson", Bats:"R", Throws:"R", Year: "Sr", Home: "Billings, MO"},

{Name:"Sylvia Munson", Bats:"R", Throws:"R", Year: "Jr", Home: "Pasadena, CA"},

{Name:"Carla Gomez", Bats:"R", Throws:"L", Year: "Sr", Home: "Corona, CA"},

{Name:"Betty Kay", Bats:"R", Throws:"R", Year: "Fr", Home: "Palo Alto, CA"},

];

aDg.dataProvider = new DataProvider(aRoster);

aDg.rowCount = aDg.length;

function bldRosterGrid(dg:DataGrid){

dg.setSize(400, 300);

dg.columns = ["Name", "Bats", "Throws", "Year", "Home"];

dg.columns[0].width = 120; dg.columns[1].width = 50; dg.columns[2].width = 50; dg.columns[3].width = 40; dg.columns[4].width = 120; dg.move(50,50);

};

Функция bldRosterGrid() задает размер экземпляра DataGrid, а также порядок и размеры столбцов.

5   Выберите "Управление" > "Тестировать ролик".

Определение столбцов и добавление сортировки для компонента DataGrid в приложении

Обратите внимание, что для сортировки содержимого столбца DataGrid в нисходящем порядке значений, нужно щелкнуть заголовок нужного столбца.

В следующем примере используется метод addColumn() для добавления экземпляров DataGridColumn в компонент DataGrid. В столбцах содержатся имена футболистов и набранные ими очки. В примере также задается свойство sortOptions, чтобы определить параметры сортировки для каждого столбца: Array.CASEINSENSITIVE для столбца "Имя" и Array.NUMERIC для столбца "Очки". Чтобы задать соответствующий размер экземпляру DataGrid, длина определяется по количеству строк, а ширина равна 200.

1   В Flash выберите "Файл" > "Создать", затем выберите "Файл Flash (ActionScript 3.0)".

2   Перетащите компонент DataGrid с панели "Компоненты" в рабочую область.

3   В Инспекторе свойств введите aDg в качестве имени экземпляра.

4   Откройте панель "Действия", выберите "Кадр 1" на главной временной шкале и введите следующий код

ActionScript.

import fl.controls.dataGridClasses.DataGridColumn;

import fl.events.DataGridEvent;

import fl.data.DataProvider;

// Create columns to enable sorting of data.

var nameDGC:DataGridColumn = new DataGridColumn("name");

nameDGC.sortOptions = Array.CASEINSENSITIVE;

var scoreDGC:DataGridColumn = new DataGridColumn("score"); scoreDGC.sortOptions = Array.NUMERIC; aDg.addColumn(nameDGC);

aDg.addColumn(scoreDGC);

var aDP_array:Array = new Array({name:"clark", score:3135}, {name:"Bruce", score:403},

{name:"Peter", score:25})

aDg.dataProvider = new DataProvider(aDP_array);

aDg.rowCount = aDg.length;

aDg.width = 200;

5   Выберите "Управление" > "Тестировать ролик".

Создание экземпляра компонента DataGrid с помощью ActionScript

В этом примере создается экземпляр DataGrid с помощью ActionScript и заполняется объектом Array с именами и очками футболистов.

1   Создайте новый документ Flash (ActionScript 3.0).

2   Перетащите компонент DataGrid с панели "Компоненты" на панель "Библиотека" текущего документа.

В результате этого компонент добавляется в библиотеку, но остается невидимым в приложении.

3   Откройте панель "Действия", выберите "Кадр 1" на главной временной шкале и введите следующий код

ActionScript.

import fl.controls.DataGrid;

import fl.data.DataProvider;

var aDg:DataGrid = new DataGrid();

addChild(aDg);

aDg.columns = [ "Name", "Score" ];

aDg.setSize(140, 100);

aDg.move(10, 40);

Этот код создает экземпляр DataGrid, после чего задает размер и местоположение сетки.

4   Создайте массив, добавьте в него данные и укажите его в качестве поставщика данных для экземпляра

DataGrid.

var aDP_array:Array = new Array(); aDP_array.push({Name:"Clark", Score:3135}); aDP_array.push({Name:"Bruce", Score:403}); aDP_array.push({Name:"Peter", Score:25}); aDg.dataProvider = new DataProvider(aDP_array); aDg.rowCount = aDg.length;

5   Выберите "Управление" > "Тестировать ролик".

Заполнение экземпляра DataGrid XML-файлом

В следующем примере используется класс DataGridColumn для создания столбцов DataGrid. Экземпляр DataGrid заполняется путем передачи объекта XML в качестве параметра value конструктора DataProvider().

1   Создайте новый документ Flash (ActionScript 3.0).

2   На панели "Компоненты" дважды щелкните DataGrid, чтобы добавить экземпляр в рабочую область.

3   В Инспекторе свойств введите aDg в качестве имени экземпляра.

4   Откройте панель "Действия", выберите "Кадр 1" на главной временной шкале и введите следующий код

ActionScript.

import fl.controls.dataGridClasses.DataGridColumn;

import fl.data.DataProvider;

var teamXML:XML = <team>

<player name="Player A" avg="0.293" />

<player name="Player B" avg="0.214" />

<player name="Player C" avg="0.317" />

</team>;

var nameCol:DataGridColumn = new DataGridColumn("name");

nameCol.headerText = "Name";

nameCol.width = 120;

var avgCol:DataGridColumn = new DataGridColumn("avg");

avgCol.headerText = "Average";

avgCol.width = 60;

var myDP:DataProvider = new DataProvider(teamXML);

aDg.columns = [nameCol, avgCol];

aDg.width = 200; aDg.dataProvider = myDP; aDg.rowCount = aDg.length;

5   Выберите "Управление" > "Тестировать ролик".

Источник: Использование компонентов ActionScript 3.0 – 2008

По теме:

  • Комментарии