Программные приложения содержат большое количество уникальных представлений. Представление состоит из структурных элементов и контента, расположенных в соответствии с предпочтениями дизайнера / разработчика (макета) и отображаемых на экране пользователя.
Традиционные веб-приложения инкапсулируют каждое представление в 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. Решение за вами.