Продолжим рассматривать библиотеку компонентов MiniUI (на ActionScript 3.0) и сегодня остановимся на компоненте TextList. Данный компонент представляет из себя простой выпадающий список. Внешне TextList выглядит следующим образом:
Как видите, компонент смотрится весьма и весьма скромно, но удобен для пользователей и работает исправно.
Давайте же рассмотрим, как TextList использовать в flash-приложениях.
Первым делом, нам, конечно, потребуется сама библиотека MiniUI. Напомню, что скачать её можно по ссылкам, указанным в посте «MiniUI: компоненты Label и Button». После того, как скачаете архив с библиотекой, вам надо разархивировать его содержимое в ту папку, в которой у вас находится ваш флеш-проект.
А теперь давайте рассмотрим самый простой способ создания выпадающего списка с помощью компонента TextList.
Код ActionScript 3.0:
/*
импорт классов
*/
import sliz.miniui.TextList;
/*
создаём выпадающий список
*/
var textList:TextList = new TextList(["пункт № 1","пункт № 2","пункт № 3","пункт № 4"],50,50,100,this,func);
/*
функция, которая вызывается при выборе пункта из выпадающего списка
*/
function func(event:Event):void{
/*
получаем название выбранного пункта
*/
trace(event.target.text)
/*
получаем индекс выбранного пункта
*/
trace(event.target.getSelectItem().index);
/*
получаем индекс предыдущего выбранного пункта списка
*/
trace(event.target.getLastSelectItem().index);
}
Здесь конструктор объектов TextList принимает следующие параметры:
1.) массив с названиями пунктов выпадающего списка;
2.) положение выпадающего списка по оси X;
3.) положение выпадающего списка по оси Y;
4.) ширина выпадающего списка;
5.) объект-контейнер, внутрь которого будет помещён выпадающий список;
6.) функция, которая будет вызываться при клике по пункту в выпадающем списке.
Добавить новые пункты в выпадающий список можно и с помощью специального метода add():
Код ActionScript 3.0:
/*
импорт классов
*/
import sliz.miniui.TextList;
/*
создаём выпадающий список
*/
var textList:TextList = new TextList(["пункт № 1","пункт № 2","пункт № 3","пункт № 4"],50,50,100,this,func);
/*
функция, которая вызывается при выборе пункта из выпадающего списка
*/
function func(event:Event):void{
/*
получаем название выбранного пункта
*/
trace(event.target.text)
/*
получаем индекс выбранного пункта
*/
trace(event.target.getSelectItem().index);
/*
получаем индекс предыдущего выбранного пункта списка
*/
trace(event.target.getLastSelectItem().index);
}
/*
добавляем новый пункт в список
*/
textList.add("пункт № 5",4);
Но, допустим, надо заменить уже имеющиеся пункты выпадающего списка на новые. Для этого имеется метод reset():
Код ActionScript 3.0:
/*
импорт классов
*/
import sliz.miniui.TextList;
/*
создаём выпадающий список
*/
var textList:TextList = new TextList(["пункт № 1","пункт № 2","пункт № 3","пункт № 4"],50,50,100,this,func);
/*
функция, которая вызывается при выборе пункта из выпадающего списка
*/
function func(event:Event):void{
/*
получаем название выбранного пункта
*/
trace(event.target.text)
/*
получаем индекс выбранного пункта
*/
trace(event.target.getSelectItem().index);
/*
получаем индекс предыдущего выбранного пункта списка
*/
trace(event.target.getLastSelectItem().index);
}
/*
добавляем новый пункт в список
*/
textList.add("пункт № 5",4);
/*
удаляем все старые пункты и устанавливаем новые
*/
textList.reset(["пункт № 6","пункт № 7","пункт № 8"]);
Результат:
По-умолчанию, показывается первый пункт выпадающего списка. Если надо, чтобы показывался не первый пункт, а какой-то другой, то используем метод select():
Код ActionScript 3.0:
/*
импорт классов
*/
import sliz.miniui.TextList;
/*
создаём выпадающий список
*/
var textList:TextList = new TextList(["пункт № 1","пункт № 2","пункт № 3","пункт № 4"],50,50,100,this,func);
/*
функция, которая вызывается при выборе пункта из выпадающего списка
*/
function func(event:Event):void{
/*
получаем название выбранного пункта
*/
trace(event.target.text)
/*
получаем индекс выбранного пункта
*/
trace(event.target.getSelectItem().index);
/*
получаем индекс предыдущего выбранного пункта списка
*/
trace(event.target.getLastSelectItem().index);
}
/*
добавляем новый пункт в список
*/
textList.add("пункт № 5",4);
/*
выбираем третий пункт выпадающего списка
*/
textList.select(2);
Результат:
Если вам надо, чтобы сразу были видны все пункты, то используем метод showMenu():
Код ActionScript 3.0:
/*
импорт классов
*/
import sliz.miniui.TextList;
/*
создаём выпадающий список
*/
var textList:TextList = new TextList(["пункт № 1","пункт № 2","пункт № 3","пункт № 4"],50,50,100,this,func);
/*
функция, которая вызывается при выборе пункта из выпадающего списка
*/
function func(event:Event):void{
/*
получаем название выбранного пункта
*/
trace(event.target.text)
/*
получаем индекс выбранного пункта
*/
trace(event.target.getSelectItem().index);
/*
получаем индекс предыдущего выбранного пункта списка
*/
trace(event.target.getLastSelectItem().index);
}
/*
добавляем новый пункт в список
*/
textList.add("пункт № 5",4);
/*
показываем все пункты выпадающего меню
*/
textList.showMenu();
Результат:
Обратным, по отношению к showMenu(), является метод hideMenu().
Ну а для закрепления напишем небольшое приложение со списком поисковых систем. Пользователь может выбрать пункт с нужной поисковой системой и откроется главная страница этого поисковика.
Код ActionScript 3.0:
/*
импорт классов
*/
import sliz.miniui.TextList;
import flash.net.URLRequest;
import flash.net.navigateToURL;
/*
создаём выпадающий список
*/
new TextList(["Yandex","Google","Mail","Rambler"],50,50,100,this,func);
/*
функция, которая вызывается при выборе пункта из выпадающего списка
*/
function func(event:Event):void
{
/*
получаем индекс выбранного пункта
*/
var selectItem:uint = event.target.getSelectItem().index;
/*
переходим к соответствующему поисковику
*/
if (event.target.getLastSelectItem().index >= 0)
{
if (selectItem==0)
{
navigateToURL(new URLRequest("http://www.yandex.ru/"));
}
else if (selectItem==1)
{
navigateToURL(new URLRequest("http://www.google.ru/"));
}
else if (selectItem==2)
{
navigateToURL(new URLRequest("http://mail.ru/"));
}
else if (selectItem==3)
{
navigateToURL(new URLRequest("http://www.rambler.ru/"));
}
}
}
Результат:
Вот так вот.