Складні елементи керування Macromedia Flash MX

Складні елементи керування Macromedia Flash MX

Вступ

Складні елементи керування Macromedia Flash MX — це, як правило, комбінації більш простих елементів керування:

1) компонент DataGrid (Таблиця) призначений для подання яких-небудь даних у вигляді таблиці. Для заповнення таблиці необхідно писати сценарії з використанням методу addItem;

2) компонент DataChooser (Календар) являє собою календар, що дозволяє користувачеві обрати потрібну дату. Також можна обрати й місяць. Для одержання значення обраної за календарем дати потрібно скористатися властивістю selectedDate об'єкту DateChooser;

3) компонент DateField (Поле введення дати) являє собою поле введення, що дозволяє користувачеві ввести в нього потрібну дату. При натисканні кнопки, розташованої в правій частині цього поля введення, на екрані з’явиться календар, на якому необхідно буде обрати потрібну дату. Даний компонент підтримує подію change;

4) компонент Menu (Меню, що розкривається) являє собою звичайне меню, що розкривається. Для наповнення в нього даних необхідно скористатися екземпляром об'єкта XML;

5) компонент MenuBar (Рядок меню) являє собою звичайний рядок меню. Для заповнення рядка меню пунктами використовується постачальник даних — екземпляр об'єкта XML;

6) компонент NumericStepper (Лічильник) являє собою лічильник — поле введення з двома кнопками-стрілками, що спрямовані вверх і вниз. Це поле служить для вибору числових значень. Значення також можна задавати вручну. Компонент підтримує подію change;

7) компонент Tree (Ієрархічний список) являє собою звичайний ієрархічний список (виду дерева каталогів). Для заповнення рядка меню пунктами використовується постачальник даних — екземпляр об'єкта XML.

Розглянемо перераховані компоненти детальніше.

1. Компонент DataGrid

Компонент DataGrid призначається для подання яких-небудь даних у вигляді таблиці. Властивості компонента DataGrid перераховані у табл. 1.

Для заповнення таблиці даними необхідно скласти допоміжний сценарій, що використовують постачальники даних, описаний вище. Це спеціальні масиви, елементи яких є екземплярами об'єкта Object. Кожен цей елемент являє один рядок таблиці; імена його властивостей стануть іменами стовпчиків таблиці, а значення властивостей — значеннями у клітинках відповідних стовпчиків.

Таблиця 1 — Властивості компонента DataGrid

Приклад (таблиця на рис. 1):

var provider = new Array ();

tabData.dataProvider = provider;

provider.addItem ({name: «Flash», version: «MX» });

provider.addItem ({name: «Flash», version: «MX 2004» });

provider.addItem ({name: «Dreamweaver», version: «MX 2004» });

Рисунок 1 — Приклад таблиці, створеної за допомогою компонента DataGrid

компонент macromedia flash

Для одержання номера виділеного користувачем рядка слід користуватися властивістю focusedCell об'єкта DataGrid. Вона повертає посилання на екземпляр об'єкта Object, що містить координати виділеної клітинки. Властивість columnIndex повертає номер стовпчика, а властивість itemIndex — номер рядка виділеної клітинки. І рядки, і клітинки таблиці нумеруються, починаючи з нуля.

selectedCell = tabData. focusedCell;

rowNumber = selectedCell. itemIndex;

За допомогою такого коду можна одержати значення будь-якої клітинки цього рядка:

v = provider[rowNumber]. version;

Для перевірки даних, що були введені користувачем, необхідно після закінчення введення перевірити постачальник даних, у даному випадку — provider. Для контролю введення на кожному кроці можна використовувати подію change, що виникає при зміні вмісту якої-небудь клітинки таблиці.

2. Компонент DataChooser

Компонент DataChooser являє собою календар, що дозволяє користувачеві вибрати потрібну дату. Вид його показаний на рис. 2. Для вибору потрібної дати необхідно клацнути по ній мишкою. Для переходу на сторінку із датами другого місяця служать дві кнопки у верхній частині вікна у вигляді стрілок.

Рисунок 2 — Календар (екземпляр компонента DataChooser)

Властивості компонента DataChooser перераховані в табл. 2.

Для одержання значення обраної у календарі дати необхідно скористатися властивістю selectedDate об'єкта DataChooser. Компонент DataChooser підтримує подію change, що виникає при виборі дати користувачем.

Таблиця 2 — Властивості компонента DataChooser

3. Компонент DateField

Компонент DateField являє собою поле введення, що дозволяє користувачеві ввести в нього потрібну дату. При натисканні кнопки, розташованої у правій частині цього поля введення, на екрані з’являється календар, в якому потрібно вибрати потрібну дату (рис. 3).

Властивості компонента DateField, що співпадають із властивостями компонента DataChooser, перераховані в табл. 4. Так само, як і компонент DataChooser, DateField підтримує подію change.

Рисунок 3 — Поле введення дати (екземпляр компонента DateField)

з розкритим календарем

4. Компонент Menu

Компонент Menu являє собою звичайне меню, що розкривається, аналогічне застосуванням Windows. Компонент Menu у середовищі Flash надає доступ тільки до однієї властивості - rowHeight. Ця властивість задає висоту пункту меню у пікселах; її значення за замовчуванням дорівнює 20.

Для додавання пунктів меню використовується постачальник даних — екземпляр об'єкта XML, наприклад:

var provider = new XML ();

Для створення пунктів меню, що розкривається, використовується метод addMenuItem:

<�постачальник даних>.addMenuItem (<�параметри пункту меню>);

Як єдиний параметр цього методу передається екземпляр об'єкта Object, що описує параметри пункту меню, що створюється. Властивість label задає назву пункту у рядковому вигляді.

Приклад створення меню:

provider.addMenuItem ({label:" Пункт меню 1″ });

provider.addMenuItem ({label:" Пункт меню 2″ });

provider.addMenuItem ({label:" Пункт меню 3″ });

mnuCustom.dataProvider = provider; //відповідність постачальника даних компоненту Створене в результаті виконання цього сценарію (він має знаходитися в першому кадрі анімації) меню показано на рис. 4.

Рисунок 4 — Приклад простого меню Метод addMenuItem повертає посилання на створений ним пункт меню. Його можна використовувати для створення на основі цього пункту підменю, для чого необхідно викликати для цього посилання метод addMenuItem, передавши йому параметри пункту, що створюється. Цей пункт стає першим пунктом підменю.

Приклад коду, що створює підменю:

var submenu = provider. addMenuItem ({label:" Подменю" });

// збереження посилання на створений пункт підменю

submenu.addMenuItem ({label:" Пункт подменю 1″ });

submenu.addMenuItem ({label:" Пункт подменю 2″ });

Результатом виконання даного коду стане меню, показане на рис. 7.35.

Для реалізації вибору пунктів меню потрібно скласти сценарій, що обробляє подію change. Ця подія настає при виборі користувачем пункту меню та обробляється за допомогою перехоплювача.

var listener = new Object ();

listener.change = function (evtObj) { … }

Екземпляр evtObj об'єкта Object містить властивість menuItem, що повертає посилання на екземпляр об'єкта XML, що являє обраний пункт меню. Для одержання імені обраного пункту можна використовувати властивість attributes. label цього екземпляру.

if (evtObj.menuItem.attributes.label= ="Пункт меню 1″)

{…}

Рисунок 5 — Меню з підменю Для виводу на екран меню, що розкривається, використовується метод show об'єкта Menu:

<�меню, що розкривається>.show (,);

Як параметри цьому методу передаються відповідно горизонтальна та вертикальна координати верхнього лівого кута меню.

Приклад сценарію, прив’язаного до кнопки btnMenu та утворюючого меню, що розкривається mnuButton під її зображенням:

on (click) {

_root.mnuButton.show (this.x, this. y + this. height);

}

5. Компонент MenuBar

Компонент MenuBar являє собою звичайний рядок меню. Для заповнення рядка меню пунктами використовується постачальник даних — екземпляр об'єкта XML.

Приклад сценарію з використанням цього постачальника даних:

var provider = new XML ();

var mEdit = provider. addMenuItem ({label:" Edit" });

mEdit.addMenuItem ({label:" Cut" });

mEdit.addMenuItem ({label:" Copy" });

var mView = provider. addMenuItem ({label:" View" });

mView.addMenuItem ({label:" Zoom In" });

mView.addMenuItem ({label:" Zoom Out" });

mnuMenu.dataProvider = provider;

Цей сценарій створює два підменю, що розкриваються — Правка та Вид — і додає у кожен з них по два пункти (рис. 6).

Рисунок 6 — Меню, створене за допомогою компонента MenuBar

Для обробки вибору пункту також, як і у випадку компонента Menu, використовується оброблювач події change.

6. Компонент NumericStepper

Компонент NumericStepper являє собою лічильник — поле введення з двома кнопками-стрілками, що спрямовані вверх та вниз (рис. 7). Це поле призначене для вибору числових значень. Значення можна задавати вручну та за допомогою кнопок-стрілок.

Рисунок 7 — Компонент NumericStepper

Властивості компонента NumericStepper перераховані в табл. 3.

Таблиця 3 — Властивості компонента NumericStepper

При зміні значення в полі компонента NumericStepper виникає подія change.

7. Компонент Tree

Компонент Tree являє собою звичайний ієрархічний список (вид дерева каталогів). Властивості компонента Tree перераховані в табл. 4.

Для заповнення рядка меню пунктами використовується постачальник даних — екземпляр об'єкта XML. Але для створення віток та пунктів списку використовується інший метод — addTreeNode:

<�постачальник даних>.addTreeNode (<�назва>, <�значення>);

В цьому випадку назва пункту або вітки та його (її) значення передається у вигляді окремих параметрів. Наприклад:

var provider = new XML ();

var i1 = provider. addTreeNode («Категория 1», 1);

i1.addTreeNode («Подкатегория 1.1», 11);

i1.addTreeNode («Подкатегория 1.2», 12);

var i2 = provider. addTreeNode («Категория 2», 2);

i2.addTreeNode («Подкатегория 2.1», 21);

i2.addTreeNode («Подкатегория 2.2», 22);

var i3 = provider. addTreeNode («Категория 3», 3);

i3.addTreeNode («Подкатегория 3.1», 31);

trvData.dataProvider = provider;

У результаті цього коду ми отримали ієрархічний список з трьома вітками (рис. 8).

Таблиця 4 — Властивості компонента Tree

Рисунок 8 — Ієрархічний список, створений за допомогою компонента Tree

Для одержання значення обраного пункту використовується такий код:

nodeData = trvData.selectedNode.attributes.data;

Цей код можна використовувати в оброблювачі події change, що успадкований компонентом Tree від компонента List (Список).