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

Adobe Flex (Флекс) — це споріднена з Flash технологія, яка дозволяє швидко і просто створювати «насичені інтернет-додатки»* (модне нині слово «RIA» — rich internet applications), а також традиційні програми. Flex — продукт з відкритим вихідним кодом.

Результатом компілювання Flex-модулів, як і у випадку з Flash, є SWF-файл. Це доволі компактний файл, для відтворення якого (частіше всього в броузері) потрібен програвач Flash Player. А, оскільки той стоїть на 99% комп’ютерів, то проблем з розповсюдженням не повинно виникати.

Рис. 1. Приклад веб-сервісу, створеного за технологією Flex.

На Flex можна створювати:

• Інтернет-додатки, які відтворюються Flash Player’ом.
• Настільні програми, що працюють в середовищі AIR.

Таким чином, вивчаючи і застосовуючи Flex, ви вбиваєте одразу двох зайців, адже можете писати програми не лише під Веб, але й т. з. традиційне програмне забезпечення.

Приклади Flex-проектів

• Korax Site Statistics, Analyse and Visualisations Site Visiters.
• CRUD.
• Dashboard.

Чому б не використовувати Flash?

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

Сильні сторони Flex

• Швидкий поріг входження для розробників з досвідом роботи на HTML чи XML.
• Хороша система обробки подій.
• Багатий набір безкоштовних компонентів. В Інтернет присутня демонстраційна сторінка від Adobe, на якій можна візуально ознайомитися з роботою базових компонентів — Adobe Flex 3 Component Explorer.
• Можливість створювати красиві ефекти (візуальні компоненти Flex мають стандартний набір графічних фільтрів і ефектів).
• Flex надає повні мультимедійні можливості платформи Flash (потокове відео, звук).
• До переваг також варто віднести технологію зв’язування даних (англ. Data Binding). Зв’язування даних полягає в тому, що ви можете з легкістю пов’язувати два об’єкта між собою, що дозволяє підтримувати їх синхронізацію. Не зовсім зрозуміло? Не біда. Гарна стаття по цій темі є на Хабрахабр — Flex Data Binding Tricks (рос.).
• Потужна підтримка «скінів» (skins) додатків. Щоб не бути багатослівним, раджу завітати на сторінку «Skins for Flex and AIR» і самим переконатися.

Рис. 2. «Cкіни» для Flex-додатків на сайті scalenine.com.

MXML та ActionScript

В основі технології лежать дві різні мови:

• MXML (мова розмітки, яка базується на XML) і
• ActionScript (об’єктно-орієнтована мова програмування зі строгою типізацією; використовується також у Flash).

Якщо MXML потрібна для опису компоновки і структури додатку, то ActionScript відповідає за взаємодію з користувачем.

MXML — це звичайний текст, який легко читати і модифікувати в простому текстовому редакторі. Код ActionScript можна розміщувати прямо поміж MXML-теґами (цей прийом видасться знайомим тим, хто до того працював з парою HTML + JavaScript).

Хочу наголосити, що Flex-додаток можна написати виключно за допомогою мови програмування ActionScript без використання MXML. Адже в процесі компіляції всі MXML-теґи конвертуються в ActionScript-код, який в свою чергу компілюється в SWF-файл. Обидві мови в кінцевому рахунку описують одні і ті ж об’єкти, але з різним синтаксисом. Для чого тоді було придумувати MXML? Для зручності і простоти. Давайте детальніше зупинимося на цьому моменті.

Скажімо, щоб за допомогою ActionScript створити кнопку, ви мали б написати наступний код (текст, що йде після двох косих рисок (//) є коментарем, його можна не брати до уваги):

// здійснюємо імпорт mx.controls.Button
// (повідомляємо компілятор про необхідність
// підготувати компонент Button до використання)
import mx.controls.Button;

// створюємо екземпляр кнопки
myButton = new Button();

// прописуємо текст на кнопці
myButton.label = "Я - кнопка ;)";

// поміщаємо кнопку в список для відображення
addChild (myButton);

За допомогою MXML той же результат досягається кодом:

<mx:Button id="myButton" label="Я - кнопка ;)" />

Лаконічно, логічно і зручно, чи не так.

(Забігаючи наперед, скажу, що за допомогою Flex Builder не потрібно руками набирати і цього коду, достатньо перетягнути кнопкою миші компонент в потрібне місце і прописати в певному полі властивість «label».)

Зручні інструменти для роботи

Нагадаю, Flex розповсюджується абсолютно безкоштовно. Тому при бажанні ви можете редагувати свій додаток у звичайному текстовому редакторі та компілювати його в режимі командного рядка. Але в такому разі ви вчините не раціонально. Краще використати спеціалізоване середовище.

На чому зручно розробляти Flex-додатки?

• Flex Builder — платний візуальний редактор Flex, створений розробниками Adobe на базі Eclipse IDE.
• FlashDevelop — вільне середовище розробки і редактор, що дозволяє створювати Rich Internet Application за допомогою Flex SDK, haxe (тільки для Windows).
• … або ж можна використовувати плагін для Eclipse.

Рис. 3. Flex Builder 3 в режимі дизайнера.

Як на мене, то найкращим інструментом для створення Flex-додатків є Flex Builder, тому його я і використовую для роботи. Flex Builder значно підвищує ефективність проектування і розробки. Нагадаю, програма платна, але має trial-версію (60 днів), яку варто спробувати, хоча б для того, щоб мати з чим порівнювати.

Коли не варто використовувати Flex?

• Якщо ваша мета — нескладна анімація, то краще використати Flash;
• Не варто також робити звичайні (контентні) сайти, які орієнтовані на хорошу індексацію пошуковими системами, повністю на Flex’і. Чому? Тому, що сайти на звичайному HTML індексуються краще.
• Також зверніть увагу на той факт, що SWF-файл, отриманий після компіляції вашого проекту, має чималу вагу (як для веб’у звісно ж). Інколи цей фактор є критичним.

Що почитати?

Серед друкованої літератури я маю хіба-що книжку Аларіка Коула (Alaric Cole) «Вивчаємо Flex 3. Керівництво з розробки насичених інтернет-додатків» (рос., 384 ст.). Книга (спільний проект O’Reilly Media Inc. та Adobe Systems) являє собою вступ в світ Adobe Flex і стане хорошим покроковим керівництвом для всіх, хто хоче вивчити цю технологію «з нуля» (заради цього я її і купляв). Щоправда, доволі швидко її стає замало (не сприйміть за недолік).

Матеріал в Інтернеті для швидкого старту:

• Короткий посібник користувача по Flex для HTML і PHP розроблювачів (англ.).
• Російськомовна Flex-вікі (рос.).
• Документація від Adobe (англ.).

Якщо будете «копати в глиб», то раджу взяти на замітку наступні ресурси:

• Flex.org (англ.) — Flex спільноти.
• Flex Examples (англ.) — мабуть, кращий блоґ по Flex’і, з яким я здибався.
• Блоґ про Flex (англ.).
• Блоґ про Flex від Гілеля Корена (Hillel Coren) (англ.).
• Flex 2, 3, 4 & Co (рос.) — нотатки на тему Adobe Flex 2, 3, 4.
• 33 корови (рос.) — RIA розробка, Flash, Flex, Adobe AIR, Статті про розробку Flex-додатків.

* Під терміном «насичений інтернет-додаток» слід розуміти програму, доступну через Інтернет, яка багата функціональністю традиційних настільних програм, що не підтримується браузерами безпосередньо.

** Схожі до Flex технології: Microsoft Silverlight, JavaFX. Увагу слід звернути на Silverlight — конкурент Flex.

Популярність: 30%