Пример приложения

Expression Blend --- SketchFlow --- Пример приложения

А теперь, когда вам стали более понятными функциональные возможности компонента SketchFlow, рассмотрим его применение на конкретном примере. Но вместо создания специального прототипа воспользуемся одним из готовых примеров проектов, чтобы сделать краткий обзор основных инструментальных средств SketchFlow. Благодаря этому станут понятнее особенности работы с SketchFlow в контексте более крупного, реального проекта. Итак, запустите Expression Blend на выполнение и выберите команду Help -- Welcome Screen из главного меню. Затем щелкните на вкладе Samples и выберите пример проекта PCGamingSketch:

Панель SketchFlow Map

После загрузки выбранного примера проекта вы непременно обнаружите новый элемент пользовательского интерфейса в среде Expression Blend IDE — панель SketchFlow Map (Составление блок-схемы эскизного проекта), пристыкованную ниже монтажного стола:

Панель SketchFlow Map выполняет роль графического редактора, в котором можно определить структуру, блок-схему, навигационные средства и составные части разрабатываемого приложения. В отличие от монтажного стола, который дает возможность уделить основное внимание содержимому пользовательского интерфейса главного окна (объекта типа Window) или элемента управления на начальной веб-странице (объекта типа UserControl), панель SketchFlow Map позволяет сосредоточиться на общей структуре приложения.

Каждый узел на панели SketchFlow Map обозначает конкретный экран в прототипе приложения, который обычно соотносится с отдельным объектом типа Window или UserControl. В рассматриваемом здесь примере проекта PCGamingSketch три крайних слева узла называются MouseWheel (Колесико мыши), Internal Page (Внутренняя страница), Refined (Уточненный вариант) и Version Approved (Утвержденный вариант) соответственно.

Все эти узлы обозначают ряд экранов, на которых демонстрируется окончательно утвержденный вариант первоначальных макетов графического пользовательского интерфейса приложения. Если дважды щелкнуть на любом из этих узлов (или вообще на любом узле блок-схемы проекта в SketchFlow), на монтажном столе появится соответствующий экран для последующего просмотра. В качестве примера на рисунке приведен экран, представляющий узел Version Approved:

Так, если вы откроете узел Refined, то обнаружите формализованную компоновку пользовательского интерфейса, составленную из диспетчеров компоновки, которые обычно применяются в приложениях на платформе Silverlight (например, Grid и Canvas), а также из целого ряда элементов управления пользовательского интерфейса (типа TextBlock, специальных компонентов и пр.) и объектов поведения, доступных в Expression Blend:

Рассматриваемые здесь узлы связаны друг с другом направленными стрелками на панели SketchFlow Map. Так, из узла Version Approver исходят три стрелки, связывающие его с тремя крайними слева узлами. Этими стрелками обозначаются взаимосвязи в элементарной блок-схеме пользовательского интерфейса. Подобные взаимосвязи могут быть проверены в редакторе навигации проигрывателя SketchFlow Player (о том, как это делается, речь пойдет далее).

Вы можете также воспользоваться различными объектами навигационного поведения, чтобы быстро смоделировать реакцию на действия пользователя (щелчки на кнопках, выбор пунктов меню и пр.). Но самое замечательное, что все эти навигационные взаимосвязи можно оперативно изменять по ходу дела средствами Expression Blend. Более подробно применение редакторов навигации будет рассматриваться по мере изложения материала данного руководства.

Назначение узла Start

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

Если хотите заменить узел запуска, щелкните правой кнопкой мыши на любом другом узле блок-схемы прототипа и выберите команду Set as Start (Установить в качестве узла запуска) из всплывающего контекстного меню. После этого входящая зеленая стрелка переместится к выбранному узлу. В качестве упражнения назначьте узел Version Approved в качестве узла запуска:

Цветовое кодирование

Для каждого узла блок-схемы прототипа может быть назначен особый цвет, что упрощает визуальное различение ряда связанных друг с другом узлов. И хотя цвет узла не оказывает никакого влияния на поведение прототипа приложения во время его выполнения, по умолчанию голубым цветом обозначается так называемый экран навигации (Navigation), а зеленым цветом — экран компонента (Component). Как поясняется далее, на экранах компонентов определяются фрагменты повторяющегося содержимого пользовательского интерфейса, например, навигационное меню, которое отображается на многих экранах навигации.

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

Создание и связывание узлов

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

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

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

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

Присваивание стилей отдельным переходам

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