Календар з функцією вибору дати на ActionScript 3.0
Часто так буває, що ти довго і наполегливо проводиш час в пошуках якогось рішення. Але пошуки безрезультатні. І, рано чи пізно, ти відмовляєшся від продовження пошуку, відступаєш. здаєш. Проходить кілька днів або тижнів і. ти зовсім випадково знаходиш просте і готове рішення проблеми, яка ще недавно здавалася нерозв'язною. З вами таке часто буває? А ось зі мною подібна біда трапляється з завидною регулярністю.
Так, наприклад, не так і давно я присвятив чимало часу пошуку компонента-календаря на ActionScript 3.0. Але потрібен був не простий календар (наприклад, як клас Calendar з поста Простий календар на ActionScript 3.0), а календар, який би повертав обрану користувачем дату в зручному для мене форматі. І ось сьогодні, абсолютно випадково, такий компонент потрапив мені в руки. Це компонент DatePicker. розповсюджуваний у вигляді SWC -бібліотеки.
Зовні компонент DatePicker виглядає наступним чином:
По-моєму скромному думку, такий календарик не тільки функціональний, але і вельми симпатично виглядає. Втім, є у даного компонента і можливість налаштувати зовнішній вигляд.
Як же можна використовувати даний компонент в наших флеш-проектах?
Скачав 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
Як бачите, нічого складного.
Возвращаемую календарем дату можна легко привести до потрібного вам виду. Наприклад, так.
Код 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
Ну, а якщо у вас щось не виходить, то ось вам обіцяний раніше исходник - скачати исходник (під Adobe Flash CS 5.5).
Олена, все працює. Просто ви не на ті кнопки дивіться :-)
- це зміна кольору кнопок, за допомогою яких вибирається місяць (!).
З висновком в текстове пое розібралася ..
А ось колір кнопочок не змінюється .. ((
. щось не так.
/ *
імпорт класів
* /
import nid.ui.controls.DatePicker;
import nid.events.CalendarEvent;
import flash.display.Bitmap;
/ *
створюємо новий календар
* /
var datePicker: DatePicker = new DatePicker ();
datePicker.setButtonColor = 0xFFC9E0;
/ *
створюємо іконку для календаря
клік мишкою по іконці викликатиме календар
* /
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);
date_txt.text = ( "Я вибрав дату:" + event.selectedDate);
>
> Не понял
Спробу поясніть..В коді після позиціонування.
ВІДСТЕЖЕННЯ ВИВЕСТИ В текстовому полі
БЕЗ trace.
як в DateFormat ми робили ..))
/ *
імпорт класів
* /
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);
>
> Функцію вибору дати (без часу) хочу вивести в текстове поле. Може підключити клас DateFormat?
За назвою властивостей і методів можна здогадатися, за що вони відповідають. А після двокрапки зазначений тип даних, які приймає дане властивість. Наприклад, на зображенні видно, що DatePicker має властивість setButtonColor. Логічно припустити, що властивість setButtonColor відповідає за колір кнопки (set button color). Крім цього, видно, що властивість setButtonColor приймає значення типу int (цілі числа). Логічно припустити, що це колір в 16-річної системі числення. Пробуємо застосувати наші логічні дослідження:
І, дійсно, кнопки перефарбувалися в червоний колір (0xff0000 - це код червоного кольору).
Думаю, логіка приблизно зрозуміла.
Вітаю))
Календарик виглядає дуже симпатично.
Вийшло зробити. З другого разу :-)))
З ваших слів випливає, що є можливість налаштувати зовнішній вигляд.
В, принципі, і так можна оставіть..Но якщо є можливість, чому б не поекспериментувати ..
Питання, де налаштувати?
Будь це клас, я б, в параметрах шукала. а ось SWC файл, на жаль ..
І чи можна російською місяць і дні тижня?
І ще ..
Функцію вибору дати (без часу) хочу вивести в текстове поле.
Може підключити клас DateFormat?