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

1

Компонент List — это прокручиваемый список, в котором можно выбрать один или несколько элементов. В списке могут отображаться графические элементы, включая другие компоненты. Элементы, отображаемые в списке, добавляются в диалоговом окне "Значения", которое открывается при щелчке по меткам или в полях параметров данных. Кроме того, для добавления элементов в список можно использовать методы List.addItem() и List.addItemAt().

Компонент List использует индекс от нуля, где элемент с индексом 0 отображается вверху. При добавлении, удалении или замене элементов списка с помощью методов и свойств класса List может потребоваться указать индекс элемента списка.

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

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

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

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

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

Буквенно-цифровые клавиши              Переходит к следующему элементу, первый символ метки которого является Key.getAscii(). Ctrl                                                                    Клавиша переключения, позволяющая выделить несколько непоследовательных элементов или

снять с них выделение.

"Стрелка вниз"                                             Выделение перемещается вниз на один элемент. Home                                                               Выделение перемещается в начало списка.

Page Down                                                     Выделение перемещается вниз на одну страницу. Page Up                                                           Выделение перемещается вверх на одну страницу.

Shift                                                                  Позволяет выделить несколько последовательных элементов.

"Стрелка вверх"                                           Выделение перемещается вверх на один элемент.

Примечание. Обратите внимание, что размеры прокрутки приводятся в пикселах, а не строках.

Примечание. Размер страницы, используемый клавишами Page Up и Page Down, на одну единицу меньше чем количество элементов, помещающихся в область отображения. Например, при переходе вниз по страницам в

10-строчном раскрывающемся списке показываются элементы 0-9, 9-18, 18-27 и т.д., а на следующей странице показывается последняя строка предыдущей.

Дополнительные сведения об управлении фокусом см. в описании интерфейса IFocusManager и класса FocusManager в руководствах Справочник по языку ActionScript 3.0 и компонентам и «Работа с FocusManager» на странице 29.

Интерактивный просмотр каждого элемента List в рабочей области отражает изменения, которые были внесены в параметры в Инспекторе свойств или Инспекторе компонентов во время разработки.

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

import fl.accessibility.ListAccImpl;

ListAccImpl.enableAccessibility();

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

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

В Инспекторе свойств или Инспекторе компонентов можно задать следующие параметры для каждого экземпляра компонента List : allowMultipleSelection, dataProvider, horizontalLineScrollSize, horizontalPageScrollSize, horizontalScrollPolicy, multipleSelection, verticalLineScrollSize, verticalPageScrollSize и verticalScrollPolicy. Каждый из этих параметров имеет соответствующее свойство ActionScript с тем же именем. Сведения о возможных значениях для этих параметров см. в описании класса List в Справочнике по языку ActionScript 3.0 и компонентам. Сведения об использовании параметра dataProvider см. в разделе «Использование параметра dataProvider» на странице 31.

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

Ниже описывается процедура добавления компонента List в приложение в ходе разработки.

Добавление простого компонента List в приложение

В этом примере экземпляр List состоит из меток, определяющих модели автомобилей, и полей данных, содержащих цены.

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

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

3   В Инспекторе свойств выполните следующие действия.

•   Введите имя экземпляра aList.

•   Задайте 200 для значения ширины (W).

4   С помощью инструмента "Текст" создайте текстовое поле под aList и присвойте ему имя экземпляра aTf.

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

ActionScript.

import fl.controls.List;

import flash.text.TextField;

aTf.type = TextFieldType.DYNAMIC;

aTf.border = false;

// Create these items in the Property inspector when data and label

// parameters are available.

aList.addItem({label:"1956 Chevy (Cherry Red)", data:35000}); aList.addItem({label:"1966 Mustang (Classic)", data:27000}); aList.addItem({label:"1976 Volvo (Xcllnt Cond)", data:17000}); aList.allowMultipleSelection = true;

aList.addEventListener(Event.CHANGE, showData);

function showData(event:Event) {

aTf.text = "This car is priced at: $" + event.target.selectedItem.data;

}

В этом коде используется метод addItem() для заполнения экземпляра aList тремя элементами, каждому из которых присвоено одно значение label, отображаемое в списке, и значение data. Когда выделяется элемент в экземпляре List, прослушиватель событий вызывает функцию showData(), которая отображает значение data для выделенного элемента.

6   Выберите "Управление" > "Тестировать ролик", чтобы скомпилировать и запустить это приложение.

Заполнение экземпляра List с помощью поставщика данных

В этом примере создается экземпляр List, в котором перечисляются модели автомобилей и их цены. Однако для заполнения List используется поставщик данных, а не метод addItem().

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

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

3   В Инспекторе свойств выполните следующие действия.

•   Введите имя экземпляра aList.

•   Задайте 200 для значения ширины (W).

4   С помощью инструмента "Текст" создайте текстовое поле под aList и присвойте ему имя экземпляра aTf.

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

ActionScript.

import fl.controls.List; import fl.data.DataProvider; import flash.text.TextField;

aTf.type = TextFieldType.DYNAMIC;

aTf.border = false;

var cars:Array = [

{label:"1956 Chevy (Cherry Red)", data:35000},

{label:"1966 Mustang (Classic)", data:27000},

{label:"1976 Volvo (Xcllnt Cond)", data:17000},

];

aList.dataProvider = new DataProvider(cars);

aList.allowMultipleSelection = true;

aList.addEventListener(Event.CHANGE, showData);

function showData(event:Event) {

aTf.text = "This car is priced at: $" + event.target.selectedItem.data;

}

6   Выберите "Управление" > "Тестировать ролик", чтобы просмотреть экземпляр List и его элементы.

для управления экземпляром MovieClip

В следующем примере создается экземпляр List, в котором перечислены названия цветов. Выбранный цвет применяется к экземпляру MovieClip.

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

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

Инспекторе свойств.

•   Введите aList в качестве имени экземпляра.

•   Введите 60 для значения высоты (H).

•   Введите 100 для значения Х.

•   Введите 150 для значения Y.

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

ActionScript.

aList.addItem({label:"Blue", data:0x0000CC}); aList.addItem({label:"Green", data:0x00CC00}); aList.addItem({label:"Yellow", data:0xFFFF00}); aList.addItem({label:"Orange", data:0xFF6600}); aList.addItem({label:"Black", data:0x000000});

var aBox:MovieClip = new MovieClip();

addChild(aBox);

aList.addEventListener(Event.CHANGE, changeHandler);

function changeHandler(event:Event) {

drawBox(aBox, event.target.selectedItem.data);

};

function drawBox(box:MovieClip,color:uint):void { box.graphics.beginFill(color, 1.0); box.graphics.drawRect(225, 150, 100, 100); box.graphics.endFill();

}

4   Выберите "Управление" > "Тестировать ролик", чтобы запустить приложение.

5   Щелкайте цвета в списке, чтобы они отображались в экземпляре MovieClip.

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

В данном примере с использованием ActionScript создается простой список, который заполняется при помощи метода addItem().

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

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

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

ActionScript.

import fl.controls.List;

var aList:List = new List(); aList.addItem({label:"One", data:1}); aList.addItem({label:"Two", data:2}); aList.addItem({label:"Three", data:3}); aList.addItem({label:"Four", data:4}); aList.addItem({label:"Five", data:5}); aList.setSize(60, 40); aList.move(200,200);

addChild(aList);

aList.addEventListener(Event.CHANGE, changeHandler);

function changeHandler(event:Event):void {

trace(event.target.selectedItem.data);

}

4   Выберите "Управление" > "Тестировать ролик", чтобы запустить приложение.

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

По теме:

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

1 комментарий

  1. Думаю автору будет приятно, если я скажу, что пост мне помог! Спасибо!