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

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

ShortError.

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

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

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

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

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

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

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

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

Приклад: source="{id_елементу}"

а б

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

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

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

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

- Для більшого контролю за валідацією використайте метод 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);

}

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

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

Приклад: if(errors.length > 0)

{

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

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

}

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

- Не раціонально для кожної помилки виводити окреме вікно. Їх можна зберегти в одному місці і потім відобразити в одному вікні. Для цього створіть масив 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.");

}

}

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

Поиск по сайту: