Стаття присвячена швидкій розробці додатків для Flash, причому з використанням флагманського продукту Adobe Flex Builder 3. Слід зауважити, що традиційне середовище для Flash - Adobe Flash, але вона в основному призначена для малювання та створення анімації. Програмувати ж набагато простіше за допомогою Flex Builder.

У даній статті буде показано, як створити досить просте і одночасно типове додаток - каталог продукції з можливістю підрахунку вартості замовлення і з урахуванням додаткових опцій. Така програма призначена для ресторанів: користувачеві буде доступний каталог страв, розділених на категорії, а також опція «доставка» і вказівку числа замовляються порцій.

Потрібно визнати, що установка на сайт навіть простої системи підтримки інтернет-магазину вирішила б як цю, так і інші проблеми (зокрема, формування кошика замовлення або відправку його по e-mail). Однак не слід забувати, що це буде лише демонстрацією наступних можливостей:

• Перерахунок вартості на льоту, без перезавантаження сторінки. При використанні HTML довелося б вдаватися до допомоги JavaScript, що не завжди просто. Крім того, треба було б постійно зберігати вибрані користувачем опції.

• Використання анімаційних ефектів при завантаженні фотографій.

• Реалізація каталогу продукції за допомогою 40 рядків програмного коду.

Зрозуміло, для подальшої роботи над додатком потрібно мати уявлення про те, що таке XML (це мова структурного представлення даних, докладніше див. Http://ru.wikipedia.org/wiki/XML), і мати хоча б невеликим досвідом розробки настільних додатків (в середовищі Delphi або Visual Studio).

Тож почнемо. Для роботи вам знадобиться встановлений Adobe Flex Builder 3.

Відразу після запуску ви побачите вітальне вікно, в якому пропонується познайомитися з посиланнями на уроки зі створення додатків. Це можна зробити і пізніше - початківцям корисно повчитися. Щоб приступити до реалізації програмного проекту, перш за все потрібно викликати команду меню File • New • Flex Project. У вікні створення нового проекту введіть ім'я проекту і те місце, де він буде розташовуватися. Серед додаткових опцій виберіть Web application і Application server: None (оскільки поки не планується використовувати ніякого складного взаємодії з сервером), а потім натисніть кнопку Finish.

Вся робоча область Flex Builder розділена на чотири частини, в яких розташовані:

• вікно навігатора проекту (Flex Navigator), що відбиває структуру файлів;

• вікно Outline, що відбиває структуру програми або доступні компоненти (при перемиканні в режим дизайну);

• основне вікно програми з двома вкладками - Source (редактор коду) і Design (режим візуального проектування);

• вікно Problems, де виводяться повідомлення компілятора, налагоджувальна інформація і інші службові повідомлення.

Якщо ви зміните дизайн програми, то виявите, що його код також змінився. Це правильно, оскільки, по суті, ви працюєте з MXML-кодом. Мова MXML призначений для опису інтерфейсу додатків (ряду компонентів, можливо вкладених один в одного) в XML-форматі. Схожу технологію під назвою XAML використовує корпорація Microsoft при розробці Silverlight-додатків.

Тепер трохи про специфіку створюваного додатка:

• страви в створюваному каталозі діляться на категорії (закуски, другі страви, десерт, напої);

• для кожного з блюд дані фотографія, назва, опис і ціна;

• передбачена можливість замовити кілька порцій і доставку.

Вам знадобляться зображення, а також інформація про страви в структурованому вигляді.

Для зображень слід створити в папці src проекту (його основний папці) підпапку img і скласти туди потрібні об'єкти. Кожна страва має ідентифікатор (наприклад, 53), і великий фотографії страви назва присвоюється за шаблоном 53big.jpg, а маленькій - 53mini.jpg.

Дані необхідно помістити в файл config.xml і розташувати його в папці src. Такий файл показаний в лістингу 1.

У XML-файлі вказані групи страв (group). У кожну з них може входити кілька страв (item), у яких вказані ідентифікатор картинки (img), назва (name), ціна в рублях (price) і многострочное опис (desc). В кінці конфігураційного файлу окремим елементом йде вартість доставки в рублях (dostavka).

Тепер переходите безпосередньо до інтерфейсу програми та для початку визначте розмір його вікна: 800 × 500 пікселів. Можна було б зробити і «тягнеться» додаток, що заповнює весь екран, але поки краще обмежитися таким, у якого фіксовані ширина і висота.

Потім розмістіть на сцені два статичних тексту (компонент Label), що розкривається категорій (компонент ComboBox), галерею вибору страви (компонент HorizontalList), три змінюються текстових елемента - назва, ціна і кінцева вартість (також компоненти Label), компонент для зміни кількості порцій (NumericStepper), прапорець вибору доставки (CheckBox). Крім того, кожному компоненту надайте ідентифікатор (ID в панелі властивостей компонента).

А зараз почнеться безпосередньо програмування поведінки Flash-додатки. Для цього вам буде потрібно розібратися з двома поняттями: джерело даних (Data provider) і зв'язування даних (Data binding).

джерела даних

Візьмемо для прикладу список, де можна вибрати вид страви ( «Закуски», «Напої» і т.д.). Джерелом даних для нього служить XML-файл, описаний в самому початку.

Середовище програмування Flex надає автоматичні засоби для роботи з джерелами зв'язування даних. По-перше, у більшості компонентів, які працюють зі списками, таблицями, деревами, є властивість dataProvider, здатне посилатися на необхідні дані. По-друге, є спеціальні конструкції, що дозволяють посилатися на списки всередині XML-документа, наприклад перелік груп страв, описаний набір ключових слів всередині документа.

Щоб реалізувати подібну концепцію, виконайте наступне (див. Лістинг 2).

1. Задайте джерело даних. В даному випадку завантажте дані з файлу config.xml і задайте їм ідентифікатор configXML.

2. Вкажіть джерело даних для списку - dataProvider =? © {configXML.group}? ©.

3. Вкажіть, яке з XML-властивостей має бути використано для завдання текстів всередині списку. Припустимо, ви б хотіли (з урахуванням створеного вами XML-файла), щоб елементами списку стали атрибути name відповідного тега group (тобто назви - «Закуски», «Десерти» і т.д.). Для цього встановіть властивість labelField =? © @ name? © (символ @ означає, що ви маєте справу з атрибутом, а не вкладеним тегом), і тоді елементами відповідного списку стануть ваші групи.

зв'язування даних

Припустимо, що ви змінили категорію обраних страв в списку. Очевидно, що тоді повинен змінитися і їх набір. Для цього призначена спеціальна директива, що позначається фігурними дужками ({}). Вона має на увазі наступне: «Якщо змінився джерело даних, то необхідно змінити і відображення даних в поточному компоненті».

Як застосовувати це на практиці? У вас є компонент HorizontalList, що відображає набір фотографій страв категорії (закусок або напоїв), і компонент ComboBox, де можна вибрати категорію згідно XML-даними. І що чудово, ComboBox (а також більшість компонентів облікового типу у Flex) має властивість selectedItem. Його значення змінюється в залежності від того, який з елементів списку обраний користувачем і містить він відповідну вибору частину джерела даних. В даному випадку, коли джерелом даних служить XML, це властивість буде включати XML-поддерево обраної групи страв.

Розглянемо, як така концепція реалізується на практиці, і перерахуємо нижче, що для цього потрібно встановити:

• ідентифікатор списку: id =? © cmbGroup? ©;

• джерело даних для списку страв dataProvider =? © {cmbGroup.selectedItem.item}? ©.

До речі, подібна поведінка потрібно реалізувати і при виборі окремого страви - поміняти його зображення, назва, ціну та опис. Для цього встановіть наступне:

• ідентифікатор списку вибору страв: id =? © lstProduct? ©;

• джерело даних для адреси ваших картинок: source =? © img / {lstProduct.selectedItem.img} .big.jpg? © (Flex підтримує і такі складні конструкції для зв'язування даних); • джерела даних для всіх текстових елементів, наприклад для ціни (text =? © Ціна: {lstProduct.selectedItem.price} р.? ©).

Після виконання таких дій ви отримаєте повноцінно працюючий каталог товарів, який змінює список товарів при виборі іншої категорії, а опис - при зміні товару. Зауважимо, що ви не написали жодного рядка програмного коду! Вже один цей факт свідчить про те, що програмування для Flash за допомогою інструментів Flex - вкрай захоплююче заняття.

Програмний код вам потрібно лише для обчислення суми замовлення. Код пишеться всередині спеціальних тегів (див. Лістинг 2). Вам потрібно визначити процедуру onChange (), і вона буде викликатися кожен раз, коли користувач зробить одне з трьох дій:

1. Вибере інший продукт. Для кожного компонента при виникненні якоїсь особливої ​​ситуації генерується подія, яке може бути оброблено програмним чином. В даному випадку ви повинні встановити обробку події change (зміна обраного страви) для списку страв: change =? © onChange () ;? ©

2. Змінить стан прапорця «Включити доставку». Аналогічно change =? © onChange () ;? © для прапорця «Доставка». 3. Чи змінить кількість замовлених порцій. Таким же чином change =? © onChange () ;? © для поля введення числа порцій.

На цьому основна частина вашого застосування завершена. А тепер дещо про можливості «полірування» його зовнішності:

• щоб головна картинка не виглядала самотньою, варто додати до неї ефект підсвічування сірим за допомогою рядка програми filters =? © {[new GlowFilter (0x888888,1,4,4)]}? ©; крім того, можна застосовувати і інші графічні ефекти;

• щоб при зміні блюд зображення не змінювалося миттєво, а красиво випливало, доданий ефект появи: completeEffect =? © {Fade}? ©. До речі, при невеликих додаткових зусиллях можна було б налаштувати його тривалість, а також реалізувати ефекти збільшення (Zoom) і руху (Move), які підтримуються всередині Flex. Тут наведено найпростіший варіант.

* * *

Через обмежений обсяг статті мені довелося «приховати» одну важливу особливість - організацію списку картинок страв в компоненті HorizontalList. Для цього потрібно було б створити невеликий додатковий компонент ItemImg (ще три рядки коду, але опис такого процесу зайняло б багато місця) і встановити властивість itemRenderer =? © ItemImg? ©.

Крім того, я свідомо опустив аспекти подгрузки конфігураційного XML-файла (з використанням поточного коду він «вшивається» в програму), відправки обраних страв і створення кошика, оскільки все це збільшило б обсяг статті за рахунок не надто цікавих технічних деталей.

У даній статті я прагнув продемонструвати ефективність використання Flash (і Flex) на прикладі в общем-то не найпростішим завдання створення каталогу товарів. Вийшло рішення (включаючи інтерфейс) укладається в 40 рядків коду і може бути опубліковано прямо на сторінках журналу. На мій погляд, це найкращий доказ ефективності створення додатків на Flash в порівнянні з додатками на HTML і JavaScript. Безумовно, зроблений тут висновок вірний не завжди. Однак, сподіваюся, я підвів вас до думки про те, що окремі завдання можна вирішити просто і красиво за допомогою Flash.

Працююче додаток, використане тут для прикладу, наведено з незначними поліпшеннями на «Мир ПК-диску»

При створенні програми в Flex Builder можна вибирати між опціями Web application і Desktop application. У другому випадку створене додаток буде працювати в так званій віртуальній машині AIR (Adobe Integrated Runtime, інтегроване середовище виконання Adobe), завдяки чому отримає доступ до файлів, автозапуску і іншим властивостям комп'ютера. Віртуальна машина AIR зараз доступна для Windows, Macintosh і деяких Linux-систем, що дозволяє ефективно створювати крос-платформні настільні додатки з використанням стандартних можливостей Flash. Особисто я вже давно віддаю перевагу цій можливості перед розробкою додатків на Delphi.

Оскільки назва програми Flex приводило в замішання деяких замовників, розробники оголосили, що її наступна версія буде називатися Adobe Flash Builder 4. Зараз вона знаходиться на стадії бета-тестування.

До речі, Adobe Flex Builder офіційно безкоштовно доступна для учнів різного віку, від школярів до аспірантів. Щоб познайомитися з цим докладніше, варто зайти на http://habrahabr.ru/blogs/flex/41597/, https://freeriatools.adobe.com/flex/ .

Вид додатки в режимі дизайну

Кінцевий вигляд робочого додатки