Лабораторна робота №2

Тема: «Відслідковування події change. Використання зв’язаних даних»

Мета: удосконалити навички використання події change. Навчитися виконувати явне перетворювання типу даних, багаторівневе зв’язування (модель даних) у тому числі з глобальними змінними. Використовувати тег <mx:Binding/>.

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

Подія change відбувається при виборі користувачем іншого об’єкту або зміні тексту елемента керування, наприклад NumericStepper чи TextInput.

Метод зв’язування даних являється однією з переваг Flex – він дозволяє легко оперувати інформацією. Це простий метод звертання до даних, що дозволяє відслідковувати їх зміни. Він являє собою спосіб передачі і використання даних всередині додатку. Для збереження виразів зв’язування в окремому місці (за межами тегів компонентів MXML) використовують тег <mx:Binding/>. Однією з переваг цього тегу є те, що він дає можливість задавати декілька джерел прив’язування до одного адресату. Тег <mx:Binding/> може розташовуватись у будь-якому місці коду між тегами відкриття та закриття Application, але тільки за межами контейнерів.

Flex також забезпечує зручність збереження структурованої інформації в моделі даних. Модель даних – це окремий об’єкт з деякою кількістю заданих властивостей, тобто спосіб збереження інформації в окремому місці. Його використання суттєво спрощує організацію коду. Вирази зв’язування, що використовуються всередині моделі, забезпечують багаторівневе зв’язування даних.

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

- У режимі Design виберіть об’єкти TextInput та Label. Задайте для них атрибути id. Зв’яжіть данні з використанням фігурних дужок {} таким чином, щоб атрибут text об’єкту Label містив довільну строчку символів та інформацію з атрибуту text об’єкту TextInput.

- Додайте до панелі об’єкт NumericStepper з обробником подій change, що визиває функцію.

- У тілі функції виконайте явне перетворення типу даних з value на String одним з трьох методів. Присвойте властивості text любого об’єкту (його можна зробити невидимим) значення, що було введене через NumericStepper.

Приклад: TextInput_ ім’я.text= NumericStepper_ ім’я.value.toString()

- Додайте отриману строчку до атрибуту text об’єкту Label, що отриманий у 1-му пункті.

- Створіть глобальну змінну типу String та зв’яжіть її з атрибутом text об’єкту TextInput за допомогою тегу <mx:Binding/>.

Приклад: <mx:Bnding destination="ім’я_змінної " source="input.text"/>

Destination – адресат прив’язування,

Source – джерело прив’язування.

- Виведіть на об’єкт TextArea данні, що були передані глобальній змінній.

- Створіть модель даних (тег <mx:Model/>) з багаторівневим зв’язуванням.

В окремих тегах задайте ім’я, прізвище, по батькові, вік, адресу, телефон користувача та підготуйте для виводу деякі з цих даних, використовуючи зв’язування {}.

Приклад:

<mx:Model id="model">

<info>

<name>

<firstname> { TextInput_ ім’я.text} </firstname>

<secondname> Ivanov </secondname>

<Person> {model.name.firstname} {model.name.secondname}</Person>

</name>

<age> { NumericStepper_ ім’я.value} </age>

<RR> {model.name.Person}, your age { model.age}</RR>

</info>

</mx:Model>

- Використайте обробник подій change для зміни кольору додатку на той, що вибрав користувач за допомогою об’єкту ColorPicker.

Приклад: change="setStyle('backgroundColor', ColorPicker_ ім’я.selectedColor)"

У результаті виконання роботи, ви отримаєте анкетну форму, в якій використовується модель даних, багаторівневе зв’язування даних та явне перетворення їх типу.

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