Порядок виконання:

1. У режимі Design додаємо на панель три контейнери Canvas різних кольорів. Позиціонування – абсолютне (рисунок 1):

Рисунок 1

2. Для кожного контейнера створюємо обробника подій, що викличе функцію, в тілі якої буде послідовно видалятися і знову додаватися той контейнер, на який натиснув користувач (для зміни його положення у списку відображення).

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

colorsPanel.removeChild(Box_ ім’я).

Для додавання:

colorsPanel.addChild(Box_ ім’я).

3. Створюємо змінну, яка вказує на те, що мета події – Canvas:

var box:Canvas = event.currentTarget as Canvas.

4. Задаємо для кожного контейнеру атрибут maxWidth.

У результаті виконання роботи, отримуємо три контейнери Canvas різних кольорів. При натисканні на будь-який з них, він виходить на перший план і змінює свої розміри в залежності від виконання умови.

Висновок:

В ході лабораторної роботи ми засвоїли принципи роботи списку відображення, методів addChild() та removeChild(), зміни розмірів об’єктів при натисканні на них

Мета: навчитися створювати форми з використанням валідаторів для перевірки введених даних, циклів та умовних операторів if.

Елементи теорії.

Flex дає можливість перевіряти введені дані за допомогою валідаторів. Основним з них являється StringValidator – інструмент перевірки, що підтверджує наявність введеного тексту. Для його використання необхідно розмістити тег <mx:StringValidator/> у верхній частині MXML-коду у межах тегу <mx:Application/>. Валідатору присвоюється атрибут source для посилання на елемент, за яким необхідно вести контроль. Атрибут property вказує на властивість цього елементу. За допомогою властивості requiredFieldError можна змінити текст повідомлення про помилку. Якщо необхідно перевірити: чи має введений текст необхідну кількість символів, використовують властивість to

ShortError.

Процес перевірки визивають тригери. Любий компонент валідації має властивість trigger, що посилається на елемент, за яким ведеться контроль. Для керування роботою декількох валідаторів у додатку, використовують допоміжну функцію класу mx.validators.Validator - validateAll().

Умовний оператор if виконує частину коду при певних умовах: якщо передане йому значення – істине.

Цикл дозволяє неодноразове виконання коду до тих пір, поки не виконається певна умова.

Порядок виконання роботи:

1. Створюємо форму Contact Editor Form. Додаємо декілька елементів у контейнери FormItem: TextInput, HRule, NumericStepper, HBox (містить CheckBox, Spacer, Label), поле DataField (встановити значення true властивості editable – для можливості введення дати з клавіатури і з календарю). Таким чином, будуть створені поля для ім’я, прізвища, віку, дати народження. Далі створюємо поле для введення телефону і його типу. Додаємо елемент RadioButtonGroup і створюємо три перемикача, що відповідають мобільному, домашньому і робочому телефонам. Використовувати CheckBox в цьому випадку не коректно, оскільки користувачу можна вибрати лише один пункт. Для одного перемикача установлюємо властивість selected = true. Додаємо поля для введення почтової адреси, mail та кнопку.

Форма може мати вигляд, приведений на рисунку 1 а).

2. Для деяких контейнерів FormItem додаємо властивість required зі значенням true (з’явиться зірочка, рисунок 1 а). Це означає: для елементів буде проводитися перевірка на заповнення користувачем, але самі введенні данні перевірятися не будуть. Для цього використовуються валідатори.

3. Не виходячи за рамки тегу <mx:Application/> розміщюємо тег <mx:StringValidator/>, присвоюємо йому атрибут source, що вказує на елемент, над яким необхідно проводити контроль (в даному випадку це поля для ім’я та прізвища.

source="{id_елементу}"

а)	б)

а б

Рисунок 1 – Зовнішній вигляд форми

4. За допомогою властивості quiredFieldError задаємо текст повідомлення про помилку. Для переходу на наступний рядок у тексті повідомлення використовується комбінація символів &#13.

5. Для поля, де задається прізвище установіть властивість required=false. У цьому випадку можна виконати перевірку на кількість введених символів. Установлюємо властивість tooShortError: помилка буде виводитися у випадку, якщо кількість символів меньша ніж minLength.

6. Для перевірки даних з поля email використовуємо EmailValidator. Текст про помилку введимо за допомогою властивості requiredFieldError. Задаємо властивість trigger = ”id_кнопки” та встановіть triggerEvent = ”click”. Це означатиме, що перевірка почнеться після натискання кнопки.

7. Для більшого контролю за валідацією використовуємо метод validateAll(), що відноситься до класу mx.validators.Validator (базовий клас для всіх валідаторів). Цей метод має єдиний параметр, значенням якого є масив валідаторів.

private function validateAndSubmit():void

{

import mx.validators.Validator;

var validators:Array = [id,id,id,id];

var errors:Array = Validator.validateAll(validators);

}

8. Для відкритя вікна з інформацією для користувача про помилки використовуємо метод show() класу Alert. Імпортуємо клас mx.controls.Alert. Використовуємо умовний оператор if для визначення наявності помилок.

Для цього використовуємо властивість length, що визначеє кількість елементів у масиві помилок (він повертається функцією Validator.validateAll()).

if(errors.length > 0)

{

Alert.show("текст повідомлення",

"строка заголовку вікна");

}

9. Для того, щоб виводилось повідомлення про всі помилки, використовуємо цикл for each…in, в якому обробити всі елементи масиву помилок, що являються результати перевірки ValidationResultsEvents.

10. Не раціонально для кожної помилки виводити окреме вікно. Їх можна зберегти в одному місці і потім відобразити в одному вікні. Для цього створюємо масив errorMessages і добавте в нього повідомлення за допомогою методу push():

for each(var error:ValidationResultEvent in errors)

{

var errorField:String = FormItem (error.currentTarget.source.parent).label;

errorMessages.push(errorField + ": " + error.message);

}

Таким чином, частина коду, що відповідає за контроль над елементами, має наступну структуру:

private function validateAndSubmit():void

{

Імпорт класу валідаторів;

Імпорт класу Alert;

var validators:Array = [id,id,id,id];

var errors:Array = Validator.validateAll(validators);

var errorMessages:Array = [];

if(errors.length > 0)

{

for each(var error:ValidationResultEvent in errors)

{

var errorField:String = FormItem (error.currentTarget.source.parent).label;

errorMessages.push(errorField + ": " + error.message);

}

Alert.show(errorMessages.join("\n\n"), "There were problems with your form.");

}

}

У результаті виконання роботи отримуємо форму, в якій при введенні даних відбувається перевірка. На рисунку 1 б) показана підказка для користувача. Також після того, як буде натиснута кнопка, відбудеться перевірка введених даних і у випливаючому вікні з’явиться інформація про місця і характер помилок.