Прототип приложения на Silverlight

Expression Blend --- SketchFlow --- Прототип приложения на Silverlight

А теперь перейдем непосредственно к созданию в SketchFlow прототипа приложения на платформе Silverlight, моделирующего ряд типичных экранов, которые можно нередко встретить в приложениях электронной коммерции. С этой целью создайте новый проект по шаблону Silverlight SketchFlow Application, присвоив ему имя OnlineStoreApp в диалоговом окне New Project:

После создания нового проекта появится единственный экран Screen 1, составленный как начальный экран нового прототипа. Перейдите к панели SketchFlow Map и переименуйте этот начальный экран на MainScreen (главный экран), щелкнув на его узле правой кнопкой мыши в блок-схеме прототипа и выбрав команду Rename из всплывающего контекстного меню.

Организация проекта приложения в SketchFlow немного отличается от организации проекта типичного приложения на платформе WPF или Silverlight. Поэтому перейдите к панели Projects, обратив внимание на то, что текущее решение содержит два связанных вместе проекта, как показано на рисунке:

Первый проект OnlineStoreApp содержит общую логику приложения в файлах разметки App.xaml и исходного кода App.xaml.cs. Кроме того, в этом проекте имеются ссылки на ряд сборок Expression Blend SketchFlow с префиксом Microsoft.Expression в их именах.

Во втором проекте OnlineStoreAppScreens содержатся ссылки на те же самые сборки, предназначенные для создания прототипов. Именно в нем и будет размещаться каждый экран, добавляемый в приложение на панели SketchFlow Map. В настоящей момент в нем присутствует только экран MainScreen. Кроме того, в данном проекте будет определен ряд дополнительных компонентов, представляющих особый интерес. К их числу относятся следующие компоненты:

Файл разметки SketchStyles.xaml

Этот XAML-файл содержит стили для оформления элементов пользовательского интерфейса прототипа приложения в SketchFlow.

Файл Sketch.Flow

Этот документ содержит данные, считываемые для отображения на панели SketchFlow Map узлов и линий, которые их соединяют. Обычно этот файл не правится, поскольку он обновляется автоматически во время работы в среде Expression Blend SketchFlow IDE.

Папка со шрифтами

В ней хранится несколько типов шрифтов, применяемых в стилях оформления, входящих в состав SketchFlow.

Стили оформления в SketchFlow будут применяться автоматически при выборе элементов управления созданием прототипов из библиотеки ресурсов. Но для особо любопытных сообщим — можно просмотреть каждый из этих стилей на панели Resources.

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

При разработке приложения на платформе WPF или Silverlight обычно принято создавать систему навигации, общую для ряда связанных с ней объектов типа Window или UserControl. Такая система навигации может представлять собой традиционную систему меню, специальную схему навигации, состоящую из оживляемых графических элементов, древовидную или иную систему навигации.

На экранах компонентов в SketchFlow можно определить схему навигации, чтобы связать ее с любым экраном, которому для навигации требуется соответствующий пользовательский интерфейс. По своей внутренней структуре экран компонента представляет собой объект типа UserControl (в проектах на обеих платформах WPF и Silverlight), добавляемый в диспетчер компоновки того элемента пользовательского интерфейса, в котором его предполагается использовать. Это, конечно, удобно, поскольку для изменения внешнего вида системы навигации достаточно лишь внести коррективы в пользовательский интерфейс экрана компонента, а остальные узлы будут обновлены при последующем построении проекта.

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

Прежде всего наведите курсор мыши на узел MainScreen, чтобы открыть всплывающую панель инструментов, а затем щелкните на кнопке Create and insert a Componentscreen (Создать и ввести экран компонента):

Сделав это, переименуйте новый узел в NavSystem (система навигации) и перетащите его в сторону от узла MainScreen для удобства просмотра. Обратите внимание на то, что узлы экранов компонентов выделяются по умолчанию зеленым цветом и соединяются зеленой стрелкой, направленной от узла экрана компонента к использующему его экрану:

Если вы перейдете к монтажному столу узла MainScreen, то обнаружите на нем систему навигации. А если проанализируете приведенную ниже исходную разметку в XAML, то заметите, что объект типа UserControl, представляющий эту систему, введен в корневой диспетчер компоновки, хотя эта разметка может оказаться у вас несколько иной в зависимости от расположении элементов на экране:

<Grid x:Name="LayoutRoot" Background="White">
		<local:NavSystem HorizontalAlignment="Left" VerticalAlignment="Top" d:IsPrototypingComposition="True"/>
	</Grid>

А теперь активизируйте экран NavSystem в интегрированной среде разработки и найдите раздел Sketch Styles в категории Styles библиотеки ресурсов. Здесь вы обнаружите элементы управления созданием прототипов, которые обычно используются в проектах, разрабатываемых в SketchFlow. Вы, конечно, вольны использовать какой угодно элемент управления в прототипе своего приложения, но не забывайте, что главное преимущество этих специально стилизованных для SketchFlow элементов заключается в том, что они явно дают клиенту понять, что он имеет дело с прототипом, а не с готовым к эксплуатации приложением:

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

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

Цель преследуемая этой системой навигации, состоит в том, чтобы предоставить пользователю возможность переходить к трем разным экранам, производя щелчок на соответствующей форме звезды. Обработку событий от мыши в подобной системе навигации можно, конечно, организовать в специально написанном вручную коде, но в среде Expression Blend IDE имеется возможность автоматизировать этот процесс с помощью различных объектов поведения в SketchFlow.

Прежде чем перейти к построению дополнительных экранов, завершите компоновку экрана MainScreen, введя простой описательный текст этого экрана в поле элемента управления типа TextBlock:

Перейдя к панели SketchFlow Map, сформируйте два новых экрана, щелкнув правой кнопкой мыши на любом пустом участке и выбрав команду Create a Screen (Создать экран) из всплывающего контекстного меню. По завершении переименуйте эти экраны в ViewCart (Просмотр содержимого тележки для покупок) и Checkout (Подсчет сделанных покупок):

Введите на экране ViewCart текст, описывающий назначение этого экрана, графический элемент, например, простой серый квадрат, заменяющий тележку для покупок, а также кнопку, представленную элементом управления типа Button. На рисунке ниже приведен один из возможных вариантов компоновки экрана ViewCart:

Ниже приведен вариант компоновки CheckOut:

Теперь, когда экраны ViewCart и Checkout скомпонованы, можно ввести элементы навигации графического пользовательского интерфейса в диспетчер компоновки каждого из этих экранов, еще раз воспользовавшись панелью SketchFlow Map. В частности воспользуйтесь мышью, чтобы перетащить весь узел экрана компонента на тот экран где он будет использоваться, связав их друг с другом. По завершении блок-схема прототипа вашего приложения должна выглядеть таким же образом, как и на рисунке:

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

С этой целью активизируйте монтажный стол экрана компонента NavSystem и щелкните правой кнопкой мыши на той геометрической форме звезды, которая должна переносить пользователя на главный экран. Выберите из всплывающего контекстного меню команду Navigate to --> MainScreen. Повторите эти же действия для остальных геометрических форм и связанных с ними экранов.

Что же предпринято в среде Expression Blend IDE в ответ на эти действия? Если вы внимательно проанализируете разметку, автоматически сформированную в коде XAML для описания экрана компонента NavSystem, то заметите, что вся логика навигации реализуется объектом поведения типа NavigateToScreenAction в SketchFlow. Ниже приведен фрагмент разметки, описывающей логику поведения первой геометрическойформы звезды:

<ed:RegularPolygon HorizontalAlignment="Right" InnerRadius="0.47211" 
         Margin="0,17,57,83" PointCount="5" Stretch="Fill" Stroke="Black" UseLayoutRounding="False" Width="100">
			<i:Interaction.Triggers>
				<i:EventTrigger EventName="MouseLeftButtonDown">
					<pi:NavigateToScreenAction TargetScreen="OnlineStoreAppScreens.Checkout"/>
				</i:EventTrigger>
			</i:Interaction.Triggers>
			<ed:RegularPolygon.Fill>
				<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
					<GradientStop Color="#FFEFE4D0" Offset="0"/>
					<GradientStop Color="#FFF9A207" Offset="1"/>
				</LinearGradientBrush>
			</ed:RegularPolygon.Fill>
		</ed:RegularPolygon>

Для выполнения навигационных действий можете связать отдельные элементы пользовательского интерфейса и вручную, выбрав соответствующий объект поведения из раздела Behaviors в категории SketchFlow библиотеки ресурсов, а затем настроив его на панели Properties.

Аналогично любым другим элементам, объекты поведения можно переместить с панели Objects and Timeline на монтажный стол и затем изменить их исходные установки.

Более подробно с каждым объектом поведения в SketchFlow можно ознакомиться в руководстве пользователя Expression Blend. Нет ничего удивительного в том, что объекты поведения действуют в SketchFlow аналогично, а то и совершенно одинаково с упоминавшимися ранее объектами поведения в Expression Blend.

Так или иначе, на данной стадии работы над прототипом приложения в его блок-схеме на панели SketchFlow Map должен быть отражен не только тот факт, что на каждом из экранов используется экран компонента, но и навигационные связи между ними, обозначаемые соединительными линиями:

Запустите прототип своего приложения на выполнение, нажав функциональную клавишу <F5>. Теперь вы сможете переходить от одного экрана к другому, пользуясь панелью Navigate проигрывателя SketchFlow Player и щелкая кнопкой мыши на выбранной геометрической форме (в данном случае — звезды).