Часто так бывает, что ты долго и упорно проводишь время в поисках какого-то решения. Но поиски безрезультатны. И, рано или поздно, ты отказываешься от продолжения поиска, отступаешь ... сдаёшься. Проходит несколько дней или недель и ... ты совершенно случайно находишь простое и готовое решение проблемы, которая ещё недавно казалась неразрешимой. С вами такое часто бывает? А вот со мной подобная беда случается с завидной регулярностью...
Так, например, не так и давно я посвятил немало времени поиску компонента-календаря на ActionScript 3.0. Но нужен был не простой календарь (например, как класс Calendar из поста Простой календарь на ActionScript 3.0), а календарь, который бы возвращал выбранную пользователем дату в удобном для меня формате. И вот сегодня, совершенно случайно, такой компонент попал мне в руки. Это компонент DatePicker, распространяемый в виде SWC-библиотеки.
Внешне компонент DatePicker выглядит следующим образом:
По-моему скромному мнению, такой календарик не только функционален, но и весьма симпатично выглядит. Впрочем, имеется у данного компонента и возможность настроить внешний вид.
Как же можно использовать данный компонент в наших флеш-проектах?
Первым делом, конечно, нам потребуется скачать SWC-файл с данным компонентом. Скачать можно с официальной страницы проекта здесь или взять swc-файл из архива с исходниками, который прилагается к этому уроку (ссылка на исходники, как обычно, в конце поста).
Скаченный SWC помещаем в папку с нашим будущим флеш-проектом и идём в панель Свойств нашего любимого Adobe Flash (в моём случае это будет Adobe Flash 5.5). В панели Свойств нас интересует одна единственная кнопка, которая на следующем скриншоте выделена красной рамкой:
Жмём указанную кнопку и открывается окно с настройками. В этом окне нас интересует одна-единственная вкладка и кнопка на ней. Кнопка выделена красной рамкой:
Жмём эту кнопку и выбираем ранее загруженный нами SWC-файл. Так мы указали программе путь до SWC-библиотеки с компонентом-календарём. Но это ещё не всё...
Нам ещё надо подготовить иконку для нашего будущего календаря. Для этого нам потребуется обычная растровая иконка размером 16 X 16 px или чуть крупнее (это уже дело вашего личного вкуса). Я выбрал такую иконку:
Загружаем иконку в библиотеку нашего флеш-проекта, а после этого идём в контекстное меню иконки - Свойства - и указываем для нашей иконки класс CalendarIcon (обратите внимание, что класс CalendarIcon расширяет класс BitmapData).
Всё. Подготовительный этап закончен. Переходим к коду.
Код ActionScript 3.0:
/*
импорт классов
*/
import nid.ui.controls.DatePicker;
import nid.events.CalendarEvent;
import flash.display.Bitmap;
/*
создаём новый календарь
*/
var datePicker:DatePicker = new DatePicker();
/*
создаём иконку для календаря
клик мышкой по иконке будет вызывать календарь
*/
datePicker.icon = new Bitmap(new CalendarIcon());
/*
указываем нашему календарю, что неделя начинается с понедельника, а не с воскресенья (как это принято в некоторых варварских странах)
*/
datePicker.WeekStart = "monday";
/*
добавляем календарь на сцену флеш-ролика
*/
addChild(datePicker);
/*
позиционируем календарь на сцене флеш-ролика
*/
datePicker.x = 100;
datePicker.y = 100;
/*
а теперь отслеживаем, какую дату в календаре выбирает пользователь флеш-приложения
*/
datePicker.addEventListener(CalendarEvent.CHANGE, getDate);
function getDate(event:CalendarEvent):void {
trace("Пользователь выбрал следующую дату: " + event.selectedDate);
}
Как видите, ничего сложного.
Возвращаемую календарём дату можно легко привести к нужному вам виду. Например, так...
Код ActionScript 3.0:
import nid.ui.controls.DatePicker;
import nid.events.CalendarEvent;
import flash.display.Bitmap;
var datePicker:DatePicker = new DatePicker();
datePicker.icon = new Bitmap(new CalendarIcon());
datePicker.WeekStart = "monday";
addChild(datePicker);
datePicker.x = 100;
datePicker.y = 100;
datePicker.addEventListener(CalendarEvent.CHANGE, getDate);
function getDate(event:CalendarEvent):void {
trace("Пользователь выбрал следующую дату: " + event.selectedDate);
var date:Date = new Date(event.selectedDate);
trace("Год: " + date.getFullYear());
trace("Месяц: " + (date.getMonth() + 1));
trace("День: " + date.getDate());
}
Ну, а если у вас что-то не получается, то вот вам обещанный ранее исходник - скачать исходник (под Adobe Flash CS 5.5).
datePicker.setButtonColor = 0xFFC9E0;
- это изменение цвета кнопок, с помощью которых выбирается месяц (!).