Кожний фреймворк має вирішувати свою певну задачу. Поглянем на світ Java, там Hibernate вирішує питання маппінгу СУБД і об´єктної моделі, Spring чудовий фреймворк для створення незалежних компонентів і т.п. Якщо ж ви бачите в використанні флекс фреймворків так званий «silver bullet», який позбавить вас всіх проблем, то наврядчи досягнете успіхів. Створення програм — це нетривіальний процес незалежно від технічних засобів.

Неофициальная часть в баре «Роберта Домса» запомнится мне очень надолго. Особенно тот волшебный танец с Ростом, особенно новость о том что уже 22:28 (поезд отправлялся в 22:47), особенно тот факт, что я забыл свои вещи в камере хранения на Львовском вокзале (теперь думаю как их вернуть) — в общем, всё было очень особенно.

Спасибо за отличную компанию всем участникам. А также, отдельная признательность Андрею Панасу, который, по словам авторитетов, был основным инициатором создания украинской FPUG.

UPD: Рюкзак мне сегодня довёз тру-флексер (который на конфе задавал больше всего вопросов) — Сергей Шичинов. Честь и уважение.

Быстро рассмотрим типы приложений, что бы составить план обзора и поиска благоприятной почвы для старта разработки на Flex. По-видимому, все интересующие нас приложения уже можно разделить на вебтопные и десктопные. Веб-приложения могут быть обычными или RIA, и каждые из них могут иметь как front-end — собственно внешний сайт, так и back-end — админку. Не забудем так же и о том, что они могут быть как internet — для обычных обывателей сети, так и intranet — для корпоративных пользователей. С помощью механизма Adobe AIR, Flex стал доступен и на десктопе, но там его использование подчинено сходным требованиям как и в вебе.

Веб-приложения, которые не RIA

Flex практически никогда не нужен при разработке классических сайтов. Классическими я называю: домашние странички, сайты-визитки, новостные сервисы, форумы, блоги, порталы, социальные сети и т.п. Все, кто пытался реализовать их не на связке HTML+JS, в результате получал негибкую, тяжелую поделку, которая плохо индексируется, плохо рендерит текст, не поддерживает стандартную взаимосвязь с броузером и т.п.

Я участвовал в разработке подобного проекта в компании Sonopia. Мы разрабатывали социальную сеть на Flex, которую изначально, под впечатлением тезисов RIA, руководство хотело позиционировать как насыщеную медиа контентом и прочими ультра-штучками. В результате мы получили набор стандартных сервисов: Dashboard, Profile, Photos, Guestbook, которые выглядели как минимум нелепо. В гостевой книге пользователи не могли вставлять теги форматирования текста и ссылки на фотки или флеш виджеты. Перемещение по разделам нормально не синхронизировалось с кнопкой «Back» в броузере. Выполняя минимальный функционал приложение весило 1,5 Мб. В какой-то момент, все заметили что скорость разработки того, что должно быть не Flex, где-то в два раза дольше чем на HTML и большую часть проекта дописывали уже используя стандартные технологии. В результате нам добавилось проблем с синхронизацией обоих частей проекта. Затем команду Flex разработчиков расформировали, а чуть позже старт-ап провалился.

Ещё один пример — портал top4top.ru, пусть он и писался, предусмотрительно, на чистом Action Script, тем не менее это хрестоматийный пример неправильного позиционирования технологии (не говоря уже об общей идейной направленности).

Для персонального интереса, во время изучения Flex, я сделал на нём пару стандартных сайтов для группы Etwas Unders (есть описание) и для студии JMAK. Так как количество разделов и контента было не велико, то они выглядели сносно. Хотя многие посетители недоумевали, зачем там вообще Flex? Согласен — ни к чему. Единственный выигрыш — отсутствие проблем с версткой под основные броузеры (не отрицаю, что для кого-то это будет ключевой бонус).

Не так давно попалась ссылка на сайт http://xoalt.com/, интернет-каталог товаров. Подобные проекты, как и интернет магазины или просто справочники чего-либо вообще запрещено разрабатывать на Flex. Самый главный критерий таких проектов — это высокая доступность поисковым машинам, с чем Flex, как и все флеш-приложения традиционно слабы.

Разработка админок, которые в последнее время часто делают на Flex, так же под вопросом. Если нужна гибкая работа с текстом — будут проблемы, если же вывод табличных данных с необходимостью редактирования, то Flex с AdvancedDataGrid компонентом может помочь быстро справиться с заданием. Drag-n-drop возможен и на JS, но, не спорю, на Flex это можно сделать быстрее и проще.

RIA

Как это ни странно, Flex рулит далеко не всегда и в этом лагере тоже. Иногда кажется, что в общем случае флеш плэер используется только для проигрования видео и музыки. Но, скоро ожидается повсемесное использование HTML 5 с поддержкой данных штучек, что же, получается Flex так и не найдёт свою стабильную нишу и всегда будет только альтернативой? К счастью не всё так, и есть ряд критериев, при которых Flex просто необходим. Я опишу приблизительные тексты технического задания при котором можно смело выбирать Flex:

«Нужно разработать большую кросс-браузерную веб-систему, по мониторингу/управлению/статистике определённых процессов определённого предприятия или продукта. В системе ожидается много иерархических или табличных данных которые нужно сортировать, групировать и редактировать. Нужно запрограммировать более десятка разнообразных форм ввода и изменения данных. Код должен реализовывать практики ООП и быть самодокументированным так как проект долгий и текучка кадров неизбежна.»

«Нам нужна on-line система по обработке видеосигналов с нескольких источников, а так же соотвествующий UI по базовому редактированию и сохранению контента на сервер.»

Можно придумать ещё несколько подобных условий задач, но их будет объединять общий схожий мотив, который и есть ключевым коньком Flex. 

Flex – это наилучшее средство для разработки веб-приложений с большим количеством форм включая наборы нестандартных контролов ввода, с возможностью их скинования, включая все мультимедийные фичи флеш плеера, на основе легко сопровождаемого объектно-ориентированного программного кода.

Так как подобные критерии чаще всего удовлетворяют корпоративные системы, мы и не видим очень много популярных Flex приложений среди известных пользовательских интернет-сервисов. Разве что он-лайн фотошопы и видео-редакторы.

Сейчас, я как раз и занят разработкой подобной корпоративной системы по управлению рекламным контентом на телевидении. Вместо долгих описаний, я приведу пару UI-заготовок, которые должны быть реализованы в сжатые сроки:

Думаю, коментарии, почему в данном случае выбран именно Flex излишни. По-сути, вся данная статья — один большой коментарий вызванный данным проектом.

В заключении можно всё резюмировать банальными фразами. Ваша цель как программиста взвесить многие факторы будущего приложения и основываясь на них не выбрать (чаще всего) или выбрать Flex. Если же вас принимают на вакансию Flex программиста в проект, где его роль сомнительна или абсурдна, подумайте обстоятельно, что бы исскуственно не стать «слабым звеном» в глазах нахальных жавистов или гордых сишарпщиков — сотрудников по проекту (и такое на моём опыте бывало).

Поддавшись на восторженые отзывы риа-гуру я решил разобратся что и к чему. Не надейтесь, я не собирась тут расписывать по-русски о модели работы Mate, я опишу несколькими предложениями. Это действительно круто! И я отвечаю за свои слова.

Я считаю, успех Mate связан с тем, что это не портированый фреймворк, а написаный именно под Flex. Он использует основные (возможно и не очень правильные) принципы и особенности Flex фреймворка, такие как:

• наследование всех классов от EventDispatcher, которое позволяет использовать bubbling-события, как основные носители сообщений между View, Model и прочими сущностями;
• довольно идентичную особенность биндинга, с помощью которой Mate наладило ненавязчивый IOC (Inversion of Controls);
• разметку mxml для описания деклараций связующих механизмов приложения в простой и понятной форме.

И все это работает поверх сущностей вашего приложения, без необходимости наследования утомляющих абстрактных классов команд, медиаторов, моделей и пр. Ну и на десерт, Mate фреймворк отлично расширяется путем наследования ваших дополнений от базовых управляющих классов.

В общем, листая документацию сайта, можно получить первое впечатление не более чем за час. Просмотр исходного кода подтвердает подозрения, что авторы проекта — отличные профессионалы, которые обернули нюансы Flex в бонусы. Нужно пользоваться!

Скорее всего, я буду формировать еще одну команду флексеров (в уже существующей ключевую позицию занимает, также бывший сонопиец, Сергей Шичинов). По-этому, если кто-то заинтересован по-сотрудничать со мной лично, обращайтесь. Так как в Киеве хорошо подготовленых флексеров с надежными знаниями ООП не так и много, по-этому набирать будем даже начинающих или тех, кто заинтересован в Flex будучи, например, C# или Java программистом.

В общем, я социализировался :-).

 
Программа доступна для ознакомительной установки. Наврядли удастся как-то использовать на практике, без соответствующего ПО для серверной стороны.

Некоторые детали:

Интерфейс программы выполнен без дополнительного «скинования». Я не использовал никаких фреймворков. Поддерживается undo/redo для всех операций. Из интересных архитектурных моментов могу описать процесс декларации метаданных для передачи информации в редактор свойств выбранного элемента в дереве.

По-сути, каждый элемент дерева это наследник базового класса TreeNode, в котором объявлены специфические для его типа свойста, например:

public class PagesBaseNode extends TreeNode {

        [Bindable]
        [Serializable]
        [Editable(group="General", dependentGroup="Page", editor="CheckBoxEditor",
            label="page", bindable="true", index="5")]
        public function get page() : Boolean {
            return _page;
        }

        public function set page(value : Boolean) : void {
            _page = value;
        }

        [Serializable]
        [Editable(group="Page", editor="StringEditor", label="start template:", index="0")]
        public function get startTemplate() : String {
            return _startTemplate;
        }

        public function set startTemplate(value : String) : void {
            _startTemplate = value;
        }

        [Serializable]
        [Editable(group="Page", editor="CollectionEditor", label="aliases:",
            itemsEditor="TwoStringsEditor", itemsClass="PageAliasEntry",
            itemField1="alias", itemField2="target", index="1")]
        public function get pageAliases() : ArrayCollection {
            if (_pageAliases == null) {
                _pageAliases = new ArrayCollection();
            }
            return _pageAliases;
        }

        private var _page : Boolean;

        private var _startTemplate : String;

        private var _pageAliases : ArrayCollection;
    }

С помощью метаданных Serializable я указываю какое значение нужно сохранять в результирующем XML, блок Editable описывает тип редактора, подпись, позицию в наборе, а также, если свойство имеет списочный тип — класс элементов списка и названия полей в которые будут сохранятся значения.

Данное решение очень удобно тем, что при наличии более 10 типов элементов дерева в среднем с 5 уникальными свойствами в каждом из них, я избегаю разработки массы различных форм с разными наборами идентичных контролов для редактирования. При каждом выборе элемента дерева, редактор свойств, используя Repeater, генерирует набор из стандартных, предварительно запрограммированных редакторов: StringEditor, CheckboxEditor, CollectionEditor, TwoStringsEditor etc.

Cчитывание метаданных из объекта — дело техники, это не сложно.

Я подумывал о том, что-бы вычленить базовые классы TreeEditor, TreeArrow и TreeNode как отдельную open source библиотеку. А так же, можно добавить код по обработке метаданных элементов дерева и редактора свойств туда же. Если в коментариях отпишется хотя-бы один человек, кому бы это пригодилось — я это сделаю.

На разработку, в общей сложности и в одиночку, я потратил 6 месяцев. Первые четыре на программирование, вторые два на исправление ошибок. Заказчик очень доволен и не хочет останавливаться на достигнутом. Я, правда, не уверен буду ли я учавствовать в этом продолжении.

Краткое описание: нужно создать swf компонент, который представляет из себя игру - разгадку кроссворда. Поле (матрица) слов всегда одинаковая, выглядит так

Компонент подгружает из сервера набор слов и описывающих их предложений (задача кроссворда), а также массив номеров ячеек из которых формируется ответ. После решения компонент отправляет на сервер емейл, дату, правильность решения. Подробности, после соглашения на разработку, можно будет обсудить с заказчиком (или мной если проблемы с английским).

 
UPD: Проект выполнен и закрыт. Готовую работу можно увидеть по адрессу http://kzoomail.nl/dagpuzzel/. Также, можно установить себе опубликованную выше AIR-версию.

От конференции остались самые положительные эмоции. Особенно, от того факта, что я сэкономил $200 на вход :-).

После того как стартап прогорел и флексеров разогнали, мы с Максимом решили позаботиться о коде, который был довольно проектно-независим, выделив его отдельный open-source набор полезных классов. Так и образовалась Go!Verla Flex Library, которая, по-видимому, навсегда останется в alpha-версии, без документации, понятной только нескольким людям — нам.

Но, вы, конечно, можете также присоединиться к нашей мечте.

(пример)

Компонент org.goverla.containers.ResizeableLayoutBox предназначен для построения оконных интерфейсов типа dockable IDE. В связке с ним нужно использовать контейнер org.goverla.containers.CollapsablePanel, который предоставляет возможность сжимать и разворачивать панели.

В данной реализации можно использовать как вертикальное (по типу Accordion), так и горизонтальное позиционирование панелей. Для того что-бы изменить размер панели, нужно мышкой тянуть за её заголовок. При растягивании принимаются в расчет параметры minWidth, maxWidth, minHeight, maxHeight.

Классы можно взять из библиотеки Go!Verla.

Впринципе их можно понять, ведь в приложениях написаных для AIR нужна поддержка drag-n-drop с ОС, но не давать возможности выбирать, это, как всегда, плохо. Существует очень грязный хак: нужно присоединить исходники Flex Framework к нашему проекту Project Preferences -> Flex Build Path -> Source Path, которые находятся в /Applications/Adobe Flex Builder 3 Plug-in/sdks/3.0.0/frameworks/projects/framework/src. После этого мы можем поменять в классе SystemManager функцию docFrameHandler(), нужно оставить только данный код:

Singleton.registerClass("mx.managers::IDragManager",
Class(getDefinitionByName("mx.managers::DragManagerImpl")));

После перекомпиляции мы получим DragManager который использует DragManagerImpl по умолчанию.