Лабораторная работа №4

«Компоненты. Часть 2»

по курсу «Интерактивная анимация»

Методические указания

Список (List)

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

Параметры компонента, которые можно задать вручную

Параметр	Значение
allowMultipleSelection	Задает, может ли пользователь выбирать в списке сразу несколько значений. Значение true разрешает это, значение false запрещает. Значение по умолчанию — false
dataProvider	Массив связанных значений: строк, отображаемых в списке и связанных с ними значений. Подробнее об использовании этого свойства - ниже
enabled	false – компонент запрещен к использованию, true – компонент активен (по умолчанию)
visible	false – компонент невидим, true – компонент является видимым
horizontalLineScrollSize, verticalLineScrollSize и др.	Эти параметры управляют скоростью прокрутки.
horizontalScrollPolicy / verticalScrollPolicy	Управление горизонтальной/вертикальной полосой прокрутки. Если задать этому свойству значение on то рядом со списком появляется полоса прокрутки. Значение off отключает полосу прокрутки. По умолчанию полоса прокрутки находится в автоматическом режиме (auto).

Чтобы вручную добавить строки в список, выделите строку dataProvider и щелкните по значку лупы, расположенном в углу поля (рисунок).

При этом появляется диалоговое окно Values, позволяющее добавлять значения в список. Кнопки на панели инструментов этого окна позволяют добавлять или удалять значения, а так же изменять порядок их следования в списке. При щелчке по кнопке Add (имеющей значок «плюс») в список добавляется новая строка. Каждая строка состоит из двух составляющих: label – отображаемая в списке строка и data – связанное со строкой значение (рисунок). Параметр data является необязательным. Кроме кнопки Add, на панели инструментов окна Values (рис. внизу) находятся следующие кнопки: Удалить, Переместить ниже по списку, переместить выше по списку.

В этой работе не задавайте множественный выбор строк.

Свойства компонента, доступные только программным способом (за исключением стандартный для клипов свойств таких так x, y, alpha и т. д.).

Свойство	Описание
rowCount	Количество видимых строк в списке. Если это число меньше, чем общее количество строк в списке, то для просмотра полного списка появляется полоса прокрутки (если она разрешена)
rowHeight	Высота одной строки (значение по умолчанию – 20 пикселей)
selectedItem	Свойство имеет тип Object. Это выбранная строка в раскрывающемся списке. Объект-строка имеет как минимум два свойства: label — отображаемая в списке строка и data — связанное с этой строкой значение. Если пользователь вводит новое значение в поле, то значение этого свойства равно undefined. По умолчанию значение свойства null (ни одна строка не выбрана).
selectedIndex	Номер выбранного пункта в списке начиная с 0. Значение по умолчанию – 0. Если задать этому свойству значение (число), то будет выбрана соответствующая строка в списке. Но если это число будет превышать допустимое значение, то ничего не произойдет. Если задать этому свойству значение -1, то ни один из элементов раскрывающегося списка выбран не будет (поле останется пустым).
selectable	Это свойство имеет логический тип. Если его значение равно true, то пользователь имеет возможность выбирать строки в списке, если false — то пользователь не имеет такой возможности.
maxHorizontalScroolPosition	Количество пикселей, на которое пользователь будет прокручивать список влево или вправо в том случае, если для списка разрешена горизонтальная полоса прокрутки.

Заполнение списка программным способом

Для добавления строки в список используется следующие методы:

- addItem(obj) – для добавления объекта-строки obj в конец списка;

- addItemAt(obj, index) – для добавления объекта-строки obj в указанной позиции index. Значения index начинаются с нуля. Последующие строки спускаются вниз. Если значение index превышает количество строк в списке, то в момент добавления строки в список будет выдана ошибка.

Объект, добавляемый в список, должен содержать следующие свойства:

- label – строка, которая будет отображаться в списке;

- data – связанное с этой строкой значение.

Вариант 1.

var obj : Object = new Object();

obj.label = "Среда";

obj.data = "3";

days.addItem(obj);

days – это имя компонента-списка.

Создается и инициализируется объект класса Object, к которому добавляются два свойства – label (отображаемая строка) и data (связанное значение). Далее этот объект добавляется в конец списка при помощи метода addItem. После выполнения программы в конце списка days появляется строка «Среда».

Вариант 2.

days.addItem({label:"Четверг", data:"4"});

В этом случае выполняются аналогичные действия, но они умещаются в одной строке. Запись вида

{<свойство1>: <значение1>,

<свойство2>: <значение2>,

…,

<свойствоN>: <ЗначениеN>)}

называется контейнерным объектом. Такие объекты создаются для быстрого создания объектов в момент выполнения программы.

Другие методы компонента связанные с удалением и замещением строк в списке являются общими с компонентом ComboBox и описаны ниже.

Обработка события выбора строки списка

Событие выбора строки в списке называется change и принадлежит событийному классу Event.

Пример 1. Список myList содержит название дней недели. При выборе строки в списке выводится сообщение с содержимым этой строки и ее индексом.

myList.addEventListener(Event.CHANGE, listChange);

function listChange(_event:Event)

{

trace("Выбрана строка с индексом "+_event.currentTarget.selectedIndex);

trace("Содержимое строки: "+_event.currentTarget.selectedItem.label);

}

Event.CHANGE — событие выбора строки в списке.

listChange – это имя листенера - функции, которая будет вызываться при срабатывании события. В эту функцию передается параметр — объект события, который в данном случае имеет тип Event. Свойство currentTarget этого объекта ссылается на объект, который вызвал событие, то есть на сам список myList. Как было сказано выше, свойство selectedIndex списка — это индекс выделенной в нем строки, а selectedItem – это сама строка. Каждая строка — это объект, который имеет два свойства: label — отображаемая в списке строка (именно ее мы выводим в примере) и data — связанное со строкой значение. Свойство data не является обязательным.

Раскрывающийся список (ComboBox)

Компонент ComboBox позволяет создавать раскрывающийся список, предоставляющий пользователю возможность выбора одного из пунктов. Причем можно добавить возможность ввода в список нового значения с клавиатуры. По своей сути, раскрывающийся список — это поле ввода, скомбинированное с компонентом «Список».

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

Параметр	Значение
dataProvider	Массив связанных значений: строк, отображаемых в списке и связанных с ними значений. Подробнее об использовании этого свойства было сказано выше при рассмотрении компонента List
editable	Если значение этого параметра true, то ввод новых строк с клавиатуры разрешен. Пункт false запрещает ввод строк. Значение по умолчанию — false
promt	Это строка-приглашение, отображаемая в поле ввода компонента тогда, когда ни одна из строк в раскрывающемся списке не выбрана (selectedIndex = -1, см. ниже). Например, если в раскрывающемся списке содержатся дни недели, то строка-приглашение может иметь вид «Выберите один из дней недели». Если не задать строку-приглашение. То по умолчанию будет выбрана первая строка в раскрывающемся списке.
rowCount	Количество пунктов, одновременно отображаемых в выпадающем списке. Если количество пунктов в списке превышает это значение, появляется полоса прокрутки. Значение по умолчанию — 5

Добавление пунктов в раскрывающийся список полностью аналогично добавлению новых пунктов в компонент List (Список).

Свойства компонента, доступные только программным способом

Свойство	Описание
selectedItem	Свойство имеет тип Object. Это выбранная строка в раскрывающемся списке. Объект-строка имеет как минимум два свойства: label — отображаемая в списке строка и data — связанное с этой строкой значение. Если пользователь вводит новое значение в поле, то значение этого свойства равно undefined. По умолчанию значение свойства null (ни одна строка не выбрана).
selectedIndex	Номер выбранного пункта в списке начиная с 0. Значение по умолчанию – 0. Если задать этому свойству значение (число), то будет выбрана соответствующая строка в списке. Но если это число будет превышать допустимое значение, то ничего не произойдет. Если задать этому свойству значение -1, то ни один из элементов раскрывающегося списка выбран не будет (поле останется пустым).
text	Текст в строке ввода
value	Нередактируемое свойство. Если editable=true, то в этом свойстве будет хранится значение из массива data, соответствующее выбранному пункту. Если editable=false, то в этом свойстве будет хранится значение из массива labels, соответствующее выбранному пункту.
length	Количество элементов в списке. Это свойство доступно только для чтения (редактировать нельзя).
restrict	Строка — набор символов, которые пользователь может ввести в поле ввода компонента.

Методы компонентов List и ComboBox

1. addItem и addItemAt используются для добавления новых элементов в список, были рассмотрены выше.

2. getItemAt(index: uint) : Object

Этот метод возвращает объект-строку, находящуюся в раскрывающемся списке под индексом index. Измерение index начинается с нуля.

Пример 2. Для работы примера компонент ComboBox обязательно должен находиться в библиотеке проекта!

import fl.controls.ComboBox;

var myComboBox:ComboBox = new ComboBox();

myComboBox.addItem({label:"Item 1"});

myComboBox.addItem({label:"Item 2"});

myComboBox.addItem({label:"item 3"});

myComboBox.addItem({label:"Item 4"});

myComboBox.addItem({label:"Item 5"});

myComboBox.move(10, 10);

addChild(myComboBox);

var item: Object = myComboBox.getItemAt(1);

trace("label=" + item.label); // вывод «label=Item 2»

Метод move, используемый в примере, перемещает клип (а в основе любого компонента находится клип) в указанную точку с координатами (x, y). Создается новый экземпляр компонента ComboBox — myComboBox, в него добавляются строки, затем, компонент передвигается в точку с координатами (10, 10) и добавляется в список отображения. Метод getTemAt возвращает объект-строку. Этот объект имеет два особенный для списка свойств — это label (отображаемая строка) и data (связанное со строкой значение). В примере для каждой строки создавались только метки (label), поэтому выводится только свойство label строки, имеющей индекс (1). Поскольку индексирование строк начинается с нуля, то строка с индексом 1 — это вторая строка в списке.

3. removeItem (item: Object) :Object

Удаляет указанный элемент из списка. Параметр, передаваемый в метод — item – это объект, который нужно удалить из списка. Возвращаемое значение — это удаленный объект.

Пример. Используем список, созданный выше.

var obj: Object = new Object();

obj.label = “Item6”;

myComboBox.addItem(obj); // добавление нового объекта в качестве строки списка

…

myComboBox.removeItem(obj); // удаление строки из списка

4. removeItemAt(index : uint): void

Удаляет строку из списка с индексом index. Метод ничего не возвращает. После удаления строки из списка оставшиеся элементы, располагавшиеся после удаленного, смещаются на один пункт к началу.

5. removeAll()

Удаляет все элементы из списка.

6. replaceItemAt(item : Object, index : iunt) : Object;

Заменяет элемент, находящийся в списке под индексом (index) (начиная с нуля) на объект item. Метод возвращает замещенный объект-строку.

Пример. Используется все тот же список, созданный ранее. Заменим первую строку раскрывающегося списка на новую.

var obj: Object = new Object();

obj.label = “new Item 1”;

myComboBox.replaceItemAt(obj, 0);

Обработка события выбора строки в списке

Обработка этого события ведется точно так же, как и для компонента List. Добавим к раскрывающемуся списку myComboBox, созданному в примере 2 в качестве обработчика события выбора пункта в списке функцию listChange, которая была создана в примере 1 для экземпляра компонента List. Эти два компонента имеют общий набор свойств и методов, работающих со списком, поэтому работать этот обработчик события для компонента ComboBox будет точно так же, как и для компонента List.

myComboBox.addEventListener(Event.CHANGE, listChange);