Статьи

Переходы между состояниями Flex UI

Больше сообщений Flex можно найти на blog.flexdevelopers.com



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

Традиционные веб-приложения инкапсулируют каждое представление в HTML-странице. На статическом веб-сайте количество просмотров напрямую зависит от количества HTML-страниц. Например, статический HTML-сайт с пятью HTML-страницами содержит пять просмотров.

Тем не менее, количество представлений увеличивается экспоненциально, когда в смесь вводятся динамические возможности. Динамические возможности обычно реализуются с помощью серверных сценариев (ColdFusion, PHP, JSP, .NET и т. Д.).

Серверные сценарии анализируют данные в соответствии с заранее определенным набором правил (логики) и соответственно генерируют элементы представления (HTML). Данные могут включать в себя данные базы данных, данные веб-служб, данные cookie и т. Д. Следовательно, веб-приложения, зависящие от данных для представления, а также контента, обычно называют «управляемыми данными» веб-приложениями. По мере роста данных и увеличения количества правил увеличивается количество уникальных представлений.

Асинхронные технологии (AJAX) и манипулирование DOM через JavaScript (DHTML) также способствуют увеличению числа просмотров.

Приложения Flex ничем не отличаются.

Однако в рамках Flex термин «представление» относится к пользовательскому интерфейсу (UI) в целом и представляет совокупность всех визуальных перестановок приложения. Это соглашение об именах отражает соглашение, принятое популярной архитектурой Flex, MVC (модель-представление-контроллер).

«Представление» состоит из компонентов представления (контейнеров и элементов управления), и каждая структурная (или компоновочная) дисперсия для компонента представления называется состоянием представления. Представления State применяются ко всем компонентам (элементам управления или контейнерам), которые расширяют класс UIComponent и, следовательно, наследуют
свойство
states . В
государствеСвойство представляет собой массив состояний просмотра для этого компонента представления. При значении по умолчанию NULL компоненты запускаются только с одним состоянием — базовым состоянием. Базовое состояние является корневым состоянием компонента и состоит только из свойств, стилей, обработчиков событий и дочерних элементов, которые вы изначально определили для компонента.

Добавление состояний представлений включает добавление одного или нескольких объектов
состояний к свойству состояний компонента. Каждый объект State требует имени и, необязательно, имени другого состояния, на котором он основан. Исключение
свойства
basedOn будет основывать ваше новое состояние на базовом состоянии.

Цель состояния — изменить внешний вид компонента в ответ на событие, инициированное пользователем или системой (например, нажатие кнопки). Изменение внешнего вида компонента предполагает использование переопределений через состояние. Допустимые переопределения включают в себя:

  • AddChild
  • RemoveChild
  • SetEventHandler
  • SetProperty
  • SetStyle

При использовании MXML для определения состояний подразумеваются переопределения, и тег переопределения не требуется.

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

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

<!-- Define State -->
<mx:states>
    <mx:State name="newButton">
        <mx:AddChild relativeTo="{h1}" position="firstChild">
            <mx:Button id="buttonNew" label="New Button"/>
        </mx:AddChild>
    </mx:State>
</mx:states>

<!-- Apply State via event handler -->
<mx:Button id="b1" label="Add a Button" click="currentState='newButton'"/>

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

Каждый переход инициируется изменением состояния компонента, как определено в
свойствах
fromState и
toState объекта Transition. Допустимые значения включают в себя:

  • Название штата
  • Пустая строка, представляющая базовое состояние
  • Звездочка (*), представляющая подстановочный знак, соответствующий ВСЕМ состояниям

Как упоминалось ранее, целью перехода является сопоставление одного или нескольких визуальных эффектов с одним или несколькими изменениями состояния.

Эффекты бывают разных вкусов и, как ожидается, расширяют класс Effect. Типы эффектов включают эффекты маски (класс MaskEffect), звуковые эффекты (класс SoundEffect) и эффекты анимации (класс TweenEffect).

Эффекты маски включают в себя:

  • Ирис
  • Протереть
  • WipeLeft
  • WipeRight
  • Вытирать

Твин эффекты включают в себя:

  • пятно
  • растворяться
  • увядать
  • пылать
  • Шаг
  • Пауза
  • Изменение размера
  • Поворот
  • Увеличить

Звуковые эффекты позволяют воспроизводить MP3 в ответ на событие.

Эффекты могут воспроизводиться изолированно, последовательно (один за другим) или параллельно (одновременно). Для нескольких эффектов требуется создание составного эффекта (класс CompositeEffect). Вариации составного эффекта могут включать в себя последовательные эффекты, параллельные эффекты или их комбинацию. В любом сценарии должен быть определен компонент для применения эффектов (целевой компонент).

Дополнительный контроль каждого эффекта обеспечивается за счет использования свойств эффекта. Свойства эффекта включают длительность, alphaFrom, alphaTo и т. Д. Подробную информацию о каждом эффекте можно найти в
Справочнике по языку Adobe Flex 3 .

В следующем примере демонстрируется использование перехода между состояниями:

<mx:transitions>
    <mx:Transition id="myTransition" fromState="*" toState="Advanced">
        <mx:Parallel target="{myVBox}">
            <mx:WipeDown duration="2000"/>
            <mx:Dissolve alphaFrom="0.0" alphaTo="1.0" duration="2000"/>
        </mx:Parallel>
    </mx:Transition>
    <mx:Transition id="yourTransition" fromState="Advanced" toState="*">
        <mx:Sequence target="{myButton}">
            <mx:Zoom duration="1000" zoomHeightTo=".9" zoomWidthTo=".9" />
            <mx:Zoom duration="1000" zoomHeightTo="1" zoomWidthTo="1" />
        </mx:Sequence >
    </mx:Transition>
</mx:transitions>

Обратите внимание, что использование эффекта не ограничивается переходом между состояниями. Эффекты могут применяться к компонентам следующим образом для создания поведения:

<!-- Define Effect -->
<mx:Zoom id="shrink" duration="100" zoomHeightTo=".9" zoomWidthTo=".9" />

<!-- Apply Behavior -->
<mx:Button id="myButton" label="Resize" mouseDownEffect="{shrink}" />

В предыдущем примере эффект был зарегистрирован с помощью триггера (mouseDownEffect), создающего поведение. Триггер + эффект = поведение.

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