Главная Услуги Работы Персона Юзабилити анализы
IMG тел. +7(901) 370-1796
Microsoft Expression Blend – инструмент создания интерфейсов. Функциональность, взаимодействие XAML и процедурного кода




ПОИСК по сайту


    Полный список статей
/ Microsoft Expression Blend / Версия для печати / translit / абракадабра :-)


<-предыдущая следующая ->

 
  google.com bobrdobr.ru del.icio.us technorati.com linkstore.ru news2.ru rumarkz.ru memori.ru moemesto.ru smi2.ru twitter.com Яндекс закладки text20.ru RuSpace RuSpace toodoo

Появление языка описания пользовательских интерфейсов XAML (произносится – зáммель) и новой среды разработки Expression Blend позволяет заметно ускорить и облегчить проектирование и построение пользовательских интерфейсов как для веб-, так и для настольных приложений.

Данный язык позволяет описывать внешний вид и поведение интерфейсных элементов, устанавливать взаимодействие этих элементов с различными данными и событиями. Допускает прямое подключение к Common Language Runtime (CLR), что обеспечивает большую гибкость при проектировании ПО.

Функциональность, взаимодействие XAML и процедурного кода

XAML – это скриптовый язык, базирующийся на XML, он имеет набор правил, которые устанавливают взаимодействие между объектами и классами, атрибутами и свойствами или событиями и пространствами имен XML и CLR. Для описания элементов, панелей, свойств текста, векторной графики и т.п. используются теги.

<Button VerticalAlignment="Top" Width="Auto" Height="Auto" Content="Button"/>

Каждый тег в XAML имеет соответствующий класс в WPF, который имеет набор инструкций, как выполнить этот тег. XAML включает в себя: панели, элементы управления, элементы управления документами и элементы векторной графики.

При создании проекта в Expression Blend каждый файл на XAML имеет файл-соратник (code-behind) на C# или VB.

XAML взаимодействует с кодом на C# или VB посредством обработчика событий, который прописывается внутри тега объекта.

Код на XAML
<Button Content="Button" Click="Button_Click"/>
Пример обработчика события Button_Click на C#
private void Button_Click(object sender, System.Windows.RoutedEventArgs e)

{

MessageWindow MessageWindow = new MessageWindow();

MessageWindow.ShowDialog();

Microsoft Expression Blend

Есть несколько визуальных редакторов позволяющих создавать и редактировать XAML: Microsoft XamlPad, Microsoft Visual Studio 2005, 2008, Microsoft Expression Blend, Mobiform Avrora, XamlHack.

Подробно хочу остановиться на основном приложении для работы с XAML – Microsoft Expression Blend, далее просто Blend.

Blend представляет собой современное средство визуального проектирования интерфейсов, оснащенное встроенным редактором XAML, что позволяет, с одной стороны проектировать интерфейсы не обращая внимания на исходный код, а с другой стороны, позволяет более «тонко» настраивать создаваемый интерфейс.

Так как свойства объектов в Blend неразрывно связаны с возможностями XAML, дальнейшее описание элементов проводится через представление этих объектов в Blend, как графических, так и интерактивных, т.е. так как видит это дизайнер.

Интерфейс Blend

Blend имеет современный интерфейс, привычный как дизайнерам графикам, так и веб-дизайнерам.

Рабочее пространство разделено на три основные части.

Рабочее пространство Microsoft Expression Blend: панель инструментов (подкрашена красным), панели Interaction и Objects and Timeline (пурпурным) слева, основное рабочее пространство с панелью инструментов и вкладками переключения вида Design, XAML или Split посередине и панель Results в центре снизу (подкрашено зеленым) и панели Project, Properties, Resourses и Data справа (синие).

Все панели позволяют переключаться в «плавающий» режим или исчезать с экрана при помощи «горячих» клавиш. В меню Tools/Options/Workspace есть возможность настройки размеров панелей. Blend использует большое количество «горячих» клавиш, спасибо разработчикам о заботе, большинство сочетаний хорошо известны всем дизайнерам, работающим с графическими программами от Adobe.

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

По умолчанию в Blend включены две библиотеки интерфейсных элементов System Controls – стандартные элементы и Simple Styles – библиотека-пример построения пользовательских интерфейсных элементов, раскрывающая возможности XAML.

Инструменты рисования

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

Инструменты для построения и редактирования векторной графики типичны для многих векторных редакторов и включают в себя редактор кривых, представленный инструментами: Перо (Pen), Карандаш (Pencil), инструмент выделения (Selection) и инструмент непосредственного выделения (Direct Selection), а также инструментами для построения простых геометрических форм: Прямоугольник (Rectangle), Овал (Ellipse) и Линия (Line).

Blend позволяет:

  • создавать составные векторные объекты (Compound paths).
  • создавать векторные объекты посредством логических операций (вычитание, сложение и т.д.) (Combining paths).
  • переводить шрифт в векторный объект (Convert to Path)
  • кадрировать как растровое, так и векторное изображение (Clipping paths)
  • создавать маски прозрачности (Opacity masks)

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

Остановимся подробнее на некоторых из них:

  • Возможность раздельно задавать толщину линий образующих стороны объектов типа Граница (Border) и Прямоугольник (Rectangle).
  • Возможность раздельно задавать радиус скругления для всех углов в объекте Граница (Border).

Пример построения пользовательского элемента с кодом на XAML

<Border Height="22" BorderThickness="1,0,1,3" BorderBrush="#FFFF0000"
CornerRadius="0,0,2,2" Width="100"/>

Настройка внешнего вида объектов

Внешний вид объектов зависит от свойств, которые задаются как при помощи прямых настроек, так и при помощи кистей (Brushes):

  • Прозрачность (Opacity)
  • Видимость (Visibility)
  • Заливка (Fill)
  • Штрих (Stroke)
  • Фон (Background)
  • Передний план (Foreground)
  • BorderBrush (Граница)
  • Маска прозрачности (Opacity masks)

Кисти используются для задания внешнего вида объектов и могут быть следующих типов:

  • Одноцветная кисть (Solid color brush)
  • Линейный градиент (Linear gradient brush)
  • Радиальный градиент (Radial gradient brush)
  • Кисть растровое изображение (Image brush)
  • Кисть векторное изображение (Drawing brush)
  • Кисть визуальных эффектов (Visual brush)

Кисти можно конвертировать в ресурсы и многократно применять к различным объектам.

Blend имеет стандартный редактор цветов позволяющий оперировать четырьмя цветовыми моделями: RGB, HLS, HSB и CMYK, а так же специальный инструмент для настройки градиентов (Brush transform tool) и инструменты для переноса свойств объектов (Eyedropper и Paint Bucket).

Особо бы хотелось отметить наличие в Blend специальных растровых эффектов (Bitmap effects):

  • Размытие (Blur)
  • Внешнее свечение (Outer glow)
  • Тень (Drop shadow)
  • Фаска (Bevel)
  • Рельеф (Emboss)

Все фильтры работают в реальном масштабе времени и могут применятся ко всем без исключения интерфейсным элементам, в том числе и генерируемым «на лету»

Работа с текстом

Blend является специализированным инструментом для построения пользовательских интерфейсов и имеет несколько типов текстовых объектов:

  • Текстовое поле (TextBox)
  • Текстовое поле с расширенными возможностями (RichTextBox)
  • Текстовый блок (TextBlock)
  • Поле пароля (PasswordBox)
  • Метка (Label)
  • Текстовый блок с расширенным содержимым и полосой прокрутки (FlowDocumentScrollViewer)

Настройки текста зависят от типа объекта и его функциональности.

Библиотека интерфейсных элементов

Библиотека интерфейсных элементов содержит все типы стандартных интерфейсных элементов, специфические элементы Blend и элементы, содержащиеся в стиле SimpleStyles.

Список интерфейсных элементов доступных из встроенной библиотеки

Элементы подразделяются на следующие категории:

  • Панели разметки (Layout Panels), используются как контейнеры, для других элементов определяя их местоположение относительно друг друга.
  • Интерфейсные элементы (Controls)

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

Создание интерфейсов в Expression Blend

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

Стили и шаблоны

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

Стили описываются содержимым заключенным в тег <Style> и могут содержать следующие элементы:

  • Кисти всех типов (Brush)
  • Геометрические свойства элементов (Высота, ширина, скругление углов, толщина линий и т.д.)
  • Специальные эффекты (BitmapEffects и Visual brush)
  • Интерфейсные элементы
  • Векторные графические объекты.

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

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

Создание пользовательских интерфейсных элементов

Есть два пути для создания элементов: можно выучить синтаксис XAML и «писать» элементы кодом или же можно воспользоваться Blend. Второй способ проще, нагляднее и быстрее.

Для создания пользовательского вида интерфейсного элемента в Blend имеется возможность как редактирования существующего, так и создания нового элемента. Для того чтобы отредактировать элемент достаточно «щелкнуть» по нему правой кнопкой мыши и выбрать Edit Control Parts (Template). Появится «начинка» элемента и вы можете изменить внешний вид – с помощью графического редактора Blend или изменить поведение элемента, редактируя переключатели событий (Event Triggers) или задать анимацию, используя Timeline.

Разметка

Разметка документа осуществляется специальными панелями (Layout Panels), которые могут включать в себя как сами панели, так и интерфейсные элементы. Доступ к панелям осуществляется на панели инструментов и что самое неожиданное, как функция Группировки (Group), наконец то группировка перестала быть абстрактной сущностью!

Панели разметки могут быть следующих типов:

  • Холст (Canvas panel)
  • Стыковочная панель (Dock panel), содержимое панели может пристыковываться к заданным сторонам панели
  • Таблица (Grid panel), содержимое находится внутри ячеек таблицы
  • Стопка (Stack panel), содержимое группируется в последовательном порядке по горизонтали или вертикали
  • Панель с возможностью скрытия содержимого (Wrap panel) – если содержимое не помещается внутри панели, например, при изменении размера панели, содержимое скрывается определенным образом.

Расположение объектов, привязки и выравнивание

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

Визуальная привязка

Инструмент визуальной привязки (Snap) имеет уникальное свойство, а именно предопределяемое свойство показывать заданный размер границы между элементами (Default margin и Default padding). Эта функция здорово ускоряет расположение элементов в форме: достаточно просто выбросить элемент на плоскость и Blend сам покажет нужные для него отступы.

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

Функция выравнивания (Align) работает не совсем обычно: выравнивание элементов происходит не относительно друг друга, как это обычно практикуется в графических программах, а относительно Панели разметки (Layout Panels) в которой находятся элементы, что очень удобно, но непривычно. Если элементы находятся внутри Таблицы (Grid Panel), то появляется возможность управлять поведением элементов при изменении размеров окна приложения, имеется 3 вида поведения:

  • Auto – при изменении размеров таблицы изменяется размер заключенных в нее элементов.
  • Pixel – строка или столбец таблицы имеют фиксированное значение в пикселях.
  • Star – изменяет размеры элементов аналогично изменению размеров в процентах в HTML.

Данные свойства устанавливаются, как на строки, так и столбцы таблицы и могут применяться в любой комбинации.

Плюсы и минусы Expression Blend

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

Плюсы: Минусы:

Удобный минималистический интерфейс

Встроенный редактор векторной графики с разветвленным инструментарием

Встроенный редактор XAML с подсветкой синтаксиса

Встроенный компилятор

Наличие привычных для дизайнеров «горячих» клавиш

Наличие уникальных инструментов и интерфейсных решений

Программа предназначена для дизайнеров с хорошим знанием или отношением к XML подобным языкам разметки

Требует установки .NET Framework 3 или 3.5 (даже для просмотра готового проекта.exe) и еще желательно Visual Studio (для редактирования C# файлов)

Неустойчиво и медленно работает (Бета-версия).

Требует вмешательство в XAML код, т.к. не все свойства могут устанавливаться из графического интерфейса Blend.

Стандартные библиотечные элементы не всегда корректно сверстаны, требуется переделка некоторых из них.

Справочная система не достаточно проработана.

Разветвленная система файлов, необходимых для проекта.

Blend и классические способы создания прототипов интерфейсов

По большому счету, сравнение классических технологий прототипирования интерфейсов и новой технологии WPF – представителем которой является Blend, является не совсем корректным.

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

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

Что несет нам новая технология?

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

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

Список литературы

XAML Overview

C. Sells and I. Griffits, Programming WPF, O'Reilly Media, Inc.; 2 edition, 2007

G., Leete and M., Leete, Microsoft Expression Blend Bible, Wiley Publishing, Inc., Indianapolis, Indiana, 2007.

Сергей Швецов usethics.ru/lib/ms_blend.html


Создание эксклюзивных сайтов, юзибилити анализ и бесплатный анализ под запросы основных поисковых машин
Контактная информация :
тел. +7(901) 370-1796

Написать письмо на e-mail
icq 415547094  romverрейтинг на mail.ru сайта romverinbox.ru
© 1997 - 2017 romver.ru

Полная карта сайта Display Pagerank  
CMS version 3.6.3 | PTG 0,0245 s.