Как с помощью Flex 2 изменить впечатления пользователя?

Автор: Christophe Coenraets (оригинал статьи)

Перевод: Андрей Горбатов (блог)

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

По отдельности эти элементы не уникальны, уникально то, что они доступны вместе в виртуальной машине Flash плеера, который может быть во всех основных браузерах и операционных системах.

Выразительность

Одной из особенностей, которая отличает Flex, является использование векторной графики. Линии, формы и изображения представлены в виде геометрических формул вместо растра. Во Flex вы имеете полный доступ к API векторной графики, но обычно вы просто используете компоненты Flex framework, которые активно используют векторную графику.
Например, вам нужно нарисовать красный, полупрозрачный Panel с закругленными углами, пожалуйста:

<Panel  backgroundColor="#FF0000" backgroundAlpha="0.5"  cornerRadius="6"/>

Хотя это кратко и красиво, но не революционно: достичь это результата можно,  нарезав изображения. Но с векторной графикой вы можете делать все, что угодно: растягивать, сужать, вращать, изменять форму объектов любым возможным образом. Другими словами, это позволяет добавить реализм в поведение объектов.
Простым примером является рулетка Flickr, созданная Ely Greenfield:
http://bridge.quietlyscheming.com/flickr/ajax
Векторная графика может широко использоваться в приложениях. Например, при построении графиков, они могут быть прорисованы и анимированы на клиентской стороне, помогая конечному пользователю наглядно понять динамику данных. Вот пример:
http://examples.adobe.com/flex2/inproduct/sdk/dashboard/dashboard.html

Производительность

Низкая производительность и отсутствие just-in-time компилятора всегда указывались как недостатки браузера. Но здесь все иначе: Flex и виртуальная машина Flash могут все изменяют. Flex приложения доставляются клиенту в виде байткода, который исполняется виртуальной машиной Flash с помощью JIT компилятора. Это может существенно изменить выполнение кода и сделать возможными использование  desktop-приложений.
Производительность важна как для пользовательских, так и для бизнес приложений. В пользовательских приложениях, высокая производительность обеспечивает плавную работу. В бизнес-приложениях, помогает обрабатывать большое количество данных.

Работа в реальном времени

Модель запросов/ответов браузера является далеко не совершенной для слежения за событиями, инициированными сервером или другими клиентами. Flash Player поддерживает бинарные сокеты, позволяющие обмениваться информацией в обоих направлениях с любым сокет-сервером.
Flex Message Service обеспечивает обмен сообщениями в реальном времени между клиентами и серверами с помощью publish/subscribe системы сообщений. Flex Message Service также интегрируется с существующими Enterprise системами, такими как JMS системы.

Богатый медиа-контент

Видео и аудио быстро стали ключевыми компонентами приложений. Но видео в сети не является новинкой. Однако удобство его использования далеко не оптимально: неверная версия плеера влечет за собой загружать мегабайты правильной версии, ограниченное управление видео потоком, ограниченное взаимодействие между видео и остальным приложением.
Flash плеер включает возможность проигрывания видео и аудио. Для публикации видео используют этот формат такие гранды как Google Video и YouTube.
Во Flex, видео – это не только пассивное воспроизведение, которое мы часто встречаем в сети. Видео может быть тесно связано с остальным приложением. Видео может обрабатывать события во время воспроизведения, управлять поведением других компонентов. Эта возможность может быть использована в видео-уроках, интерактивных приложениях типа «вопрос-ответ», видеоконференциях и видео-чатах и т.д.

Локальное хранение и offline поддержка

Flex приложения могут хранить данные на клиентской стороне в локальном хранилище данных (известном как local shared object). Приложение имеет доступ (на чтение/запись) к этому хранилищу при работе в offline.
Desktop плеер, который в данный момент находится в разработке (кодовое название Apollo), позволит запускать Flex-приложения вне браузера. (Более подробно на русском здесь.)

Изменение впечатлений разработчика

Разработка приложений, включающих вышеперечисленные возможности, довольно легка. Модель программирования Flex мощна и элегантна: комбинация диалекта XML -  MXML  и ActionScript, который является ECMAScript-совместимым языком программирования. Также модель программирования Flex включает библиотеку из более 100 компонентов.
Хотя, лучше один раз увидеть, чем сто раз услышать:
Вам надо вызвать метод Java объекта, расположенного на среднем уровне и отобразить результат в DataGrid?

<mx:RemoteObject id="ro" destination="portfolio"/>
<mx:DataGrid dataProvider="{ro.getStocks.lastResult}" />
<mx:Button label="Get Data" click="ro.getStocks()"/>

Вам нужно создать линейную диаграмму, получающую данные из веб-сервиса?

<WebService id="ws" wsdl="sales.wsdl"/>
<Button label="Get Data" click="ws.getData()"/>
<LineChart dataProvider="{ws.getData.lastResult}">
        <horizontalAxis>
               <CategoryAxis categoryField="name"/>
        </horizontalAxis>
        <series>
               <LineSeries yField="revenue"/>
        </series>
</LineChart>

Вам нужно потоковое видео?

<VideoDisplay id="videoFMS" autoBandWidthDetection="true" source="streamName"/> 

Вам нужно распарсить XML документ и извлечь значение узла zip из шестого узла employee? Просто используйте E4X (ECMAScript for XML) выражение:

employees.employee[5].address.zip 

Вам нужно создать Panel, которая будет анимировано расширятся? Просто создайте два состояния:

<states>
        <State name="expanded">
               <SetProperty target="{myPanel}" name="height" value="100%"/>
       </State>
</states>
 
<Panel id="myPanel" width="100%" height="50%" resizeEffect="Resize"/>
<Button label="Button" click="currentState='expanded'"/> 

Вам нужно подписаться к JMS топику и при каждой публикации сообщений вызывать метод?

<Consumer destination="myJMSTopic" message="myHandler()"/>  

Итог

Есть более подробные описания причин использования Flex для построения RIA  (например, Richard Ziade представил свой список здесь), но я считаю, что выразительность, производительность, богатый медиа-контент, работа в реальном времени и offline поддержка могут по настоящему изменить впечатления пользователя от работы в сети!