Microsoft Expression стирает грань между дизайном и программированием

31 август, 2006 - 15:40Богдан Вакулюк

Около трех лет назад Microsoft приобрела небольшую софтверную компанию из Тайваня – Creature House, самым главным активом которой был небезызвестный векторный редактор Expression. Первоначально редмондский гигант планировал попросту переиздать этот продукт под собственной маркой и звучным названием Acrylic. Но недавно концепция радикально изменилась – теперь Expression станет мощным инструментом создания современных пользовательских интерфейсов.

Уже исходя из первых откликов критиков на публичную бета-версию графического редактора Microsoft Acrylic можно было предположить – его ждет незавидная судьба. По большому счету, Expression (на основе которого сделан Acrylic) никогда не дотягивал до «промышленного» редактора и всегда был программой для энтузиастов. Creature House оказалась слишком маленькой компанией для того чтобы устроить серьезный промоушн своему продукту, довести его, что называется, до ума и составить ощутимую конкуренцию таким грандам, как Adobe и Macromedia.

Тем менее этому пакету был присущ свой неповторимый шарм, который, безусловно, заключался в технологии имитации поведения реальных инструментов для живописи – кистей, карандашей, аэрографов – подобно тому, как это реализовано в знаменитом Corel Painter. Только, в отличие от последнего, Expression представлял виртуальные «мазки» в векторном виде, что давало дизайнеру в руки беспрецедентное средство для быстрого создания эффектных, легко масштабируемых иллюстраций.

Когда распространилась новость о том, что Creature House стал частью Microsoft, «посвященные» замерли в ожидании, полагая, что теперь в распоряжении команды талантливых тайваньских программистов будут необходимые ресурсы, и они выпустят мощный революционный и надежный редактор.

Microsoft Expression стирает грань между дизайном и программированием
Разработчики Microsoft дополнили «классический» интерфейс Expression множеством полезных мелочей, таких например, как preview объекта в палитре слоев

Он действительно вскоре появился, но уже под новым названием – Microsoft Acrylic. Правда как-то неуверенно, без шумных анонсов и исключительно в статусе CTP (Community Technology Preview) – это означает скорее «декларацию о намерениях», чем реальный продукт. На поверку оказалось, что пакет практически не изменился. То есть Microsoft Acrylic представлял собой точную копию Expression 3.0, к тому же еще более неустойчивую, чем ее прототип – видимо это было связано с тем, что разработчики из Редмонда пытались на скорую руку внедрить в код какие-то собственные функции, но выдающихся результатов не достигли.

Разумеется, все те же «посвященные» обрушили шквал критики и собственного разочарования на программистов – ведь они рассчитывали получить качественно новый продукт. Положительные отзывы высказывали только те пользователи, которые раньше не сталкивались с Expression – средства, предоставляемые Acrylic, казались им свежей струей в области графических редакторов.

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

Но как бы не злословили на счет редмондской компании, в бережливости и находчивости ее сотрудникам не отказать – практически ни одна идея, родившаяся в ее недрах, не пропала зря. Так случилось и с Expression. Недавно, перед казалось бы уже канувшим в Лету продуктом, забрезжили светлые перспективы. Теперь на его основе будут созданы сразу три редактора, ориентированных на создание графического контента и пользовательских интерфейсов, насыщенных элементами мультимедиа, предназначенных как для Web-страниц с высокой степенью интерактивности, так и для обычных Windows-приложений. Вероятно, эти пакеты станут неотъемлемой частью среды разработки программ для грядущего семейства операционных систем Windows Vista и Office 2007.

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

Экспрессивный триптих

Итак, под вывеской Expression пока анонсировано три продукта – Graphic Designer, Interactive Designer и Web Designer. Пакет Graphic Designer – прямой наследник Expression. Это комбинированный векторно-растровый редактор, предназначенный для создания иллюстративного контента любой направленности. Конечно, программа поддерживает экспорт в распространенные графические форматы – с помощью Graphic Designer можно делать полиграфические макеты, графику для Web, в конце концов, просто корректировать фотографии. Однако разработчики прозрачно намекают, что главная особенность пакета – это функция экспорта в формат описания графических элементов XAML (подробнее о XAML во врезке). Благодаря ей он становится мощным и уникальным (причем уникальным буквально – на сегодняшний день других графических редакторов XAML не существует) редактором XAML-элементов и системной графики для Windows Vista.

Microsoft Expression стирает грань между дизайном и программированием
Выверенный годами интерфейс а-ля Visual Studio, мощные инструменты для работы с CSS-макетами и стилями, развитые средства интеграции с источниками данных. Можно смело утверджать, что Expression Web Designer – редактор HTML нового поколения

Interactive Designer позиционируется Microsoft как конструктор сложных пользовательских интерфейсов с высокой степенью интерактивности и мультимедиа-фрагментами – параметрической анимацией, видеороликами, аудио, и даже 3D-объектами. Если воспользоваться аналогиями, он более всего похож на популярный Adobe Director (ранее Macromedia). Из разряда чисто «дизайнерских» программ в категорию RAD-пакетов его переводит все та же поддержка XAML, который собственно является внутренним форматом Interactive Designer. Средства пакета позволяют задавать несложную логику и общий алгоритм интерфейса – такое «окно» можно скомпилировать в самостоятельно исполняемое приложение (подобное презентациям Macromedia Shockwave), не прибегая к более сложным расчетам. Но все же рискнем предположить, что чаще всего Interactive Designer станет применяться в тесной связке с Visual Studio, где среда разработки VS будет отвечать за алгоритмы и программирование, а Interactive Designer – за визуальное оформление приложения.

Но, пожалуй, самый интересный, или лучше сказать – неожиданный, продукт в семействе Expression – визуальный HTML-редактор Web Designer. Долгие годы на рынке профессиональных (подчеркну – профессиональных) пакетов для создания Web-страниц безраздельно царил Macromedia (а теперь Adobe) Dreamweaver. С выходом Web Designer можно утверждать, что у него наконец появился достойный конкурент. Многие средства пакета (особенно в части работы с CSS) не только не уступают Dreamweaver по удобству и функциональности, но и значительно превосходят его. Чего только стоит, например, интегрированное окно просмотра дизайна, основанного на CSS-позиционировании с практически 100%-ной достоверностью или возможность расширения пакета с помощью VBA-скриптов и модулей! Не надо думать, что Web Designer – очередная инкарнация FrontPage и относиться к нему с вполне объяснимым скепсисом. Microsoft создала качественно новый продукт и, взяв у Dreamweaver все лучшее, дополнила редактор собственными ноу-хау.

К барьеру

В целом, если отойти от деталей и окинуть серию Expression общим взглядом, то складывается впечатление, что появление подобного набора продуктов напрямую связано с активным продвижением Adobe своей платформы быстрого создания приложений Flex. Кстати, несмотря на то что Flex позиционируется исключительно как инструмент разработки интернет-приложений, насыщенных мультимедийными вставками и элементами, она обладает всеми признаками системной архитектуры, такой, например, как .NET. Судите сами – все та же виртуальная машина (Flash), то же разделение средств разработки кода и графического интерфейса, та же ориентация на распределенные приложения (Web-интерфейсы, сетевой объектный брокер, встроенный механизм сериализации данных и кода).

Microsoft Expression стирает грань между дизайном и программированием
Для установки Expression Interactive Designer необходимо сначала инсталлировать бета-версию .NET Framework 3.0. Фактически, пакет просто представляет собой графический фронт-енд для набора виджетов .NET – об этом косвенно свидетельствует и размер загрузочного файла, составляющий около 7 мегабайт

В портфолио Adobe среди продуктов, родственных Flex, можно четко выделить связку, подобную Graphic/Interactive/Web Designer – Fireworks/Flash/Dreamweaver. Учитывая давнее желание Microsoft потеснить конкурента из Сан-Хосе в традиционных для него сферах, например с помощью создания универсального и открытого формата описания графических документов XPS (в противовес PDF), следует полагать, что Expression – очередной и далеко не последний шаг редмондцев в этом направлении. Вскоре за рынок графических приложений развернется серьезная битва. В связи с этим можно в шутку предположить, что вполне адекватным противодействием со стороны Adobe было бы выпустить собственную операционную систему, и в нее интегрировать все свои ноу-хау за последние десять лет. Вот это инструмент получился бы!

Впрочем, у Adobe и так есть серьезное конкурентное преимущество перед Expression и .NET – ее продукты действительно кросс-платформенны, т. е. средства разработки, конечно, ориентированы на две ключевые ОС – Windows и Mac OS, зато Flex-приложения свободно работают на любой платформе, для которой существует Flash-плеер. А таких много – помимо различных UNIX-вариаций для настольных компьютеров, проигрывателем Flash оснащено практически любое мобильное устройство, значит мультимедийные Flex-приложения имеют потенциально куда более широкую аудиторию, чем программы .NET.

WinFX и XAML

Новая программная модель построения приложений, которая будет реализована в Windows Vista, состоит из нескольких подсистем, и одна из ключевых – Windows Presentation Foundation (WPF), отвечающая за интерактивную составляющую пакетов. WPF представляет собой довольно внушительный набор спецификаций, но суть ее заключается в двух технологиях – API WinFX (один из компонентов .NET Framework) и язык XAML.

WinFX объединяет обширный набор объектов .NET, функциональность которых отражает различные аспекты создания GUI и интерактивных приложений. XAML – это XML-подобный язык для объединения объектов, входящих в WinFX, в древовидные структуры.

Таким образом, благодаря WinFX и XAML, Microsoft хочет коренным образом изменить подход к разработке Windows-приложений – теперь их можно создавать с помощью декларативного программирования, т. е. для того чтобы описать поведение интерфейса нет необходимости в наличии цепи процедур обработки сообщений от контрольных элементов окна, которые модифицируют визуальное представление приложения. Достаточно изобразить их поведение с помощью XML-дерева, а остальные функции возьмет на себя операционная система.

Более подробно о достоинствах декларативного программирования, API WinFX и методах создания графических интерфейсов с помощью XAML можно узнать по адресу: msdn.microsoft.com/winfx/.

Expression в деталях

Graphic Designer. Как уже говорилось выше, за основу для Graphic Designer был взят пакет Creature House Expression – графический интерфейс и набор функций последнего полностью перекочевали в продукт Microsoft. Редактор позволяет эффективно работать с контурами и пиксельными изображениями. Для этого разработчики разделили слои на два типа – векторные и растровые. Некоторые инструменты, например, Live Effects (параметрические эффекты типа размытия, отбрасывания теней и т. д.) или Warp Mesh (искажение изображения на основе сетки направляющих) взаимодействуют исключительно с растровыми слоями, другие же, такие как Emboss, можно в равной степени применять как для векторных, так и для растровых элементов.

Microsoft снабдила новый редактор мощными креативными средствами, упрощающими создание фотографических коллажей и композиций. Модуль PhotoMontage предназначен для автоматического создания панорам из набора снимков. В инструменте SmartSelect реализован интеллектуальный алгоритм определения краев объекта и отделения его от фона. Кроме того, в Graphic Designer есть и отдельный простой пиксельный редактор – его следует использовать, когда в макете присутствует множество растровых объектов и корректировать их по месту затруднительно.

Microsoft Expression стирает грань между дизайном и программированием
Пакет позволяет оперировать новыми мощными контрольными элементами, реализованными в WinFX – в этой сцене можно видеть объект «отражение» в реальном времени, объект spotlight, полупрозрачность, DirectX-трансформации и другое

На высоте и инструменты работы с контурами – помимо уже упомянутых стилей, имитирующих натуральные кисти для живописи, в Graphic Designer есть ряд уникальных средств. Например, в пакете реализован механизм построения кривых с помощью B-сплайнов. У редактора нет функции создания контурных и цветовых переходов (Blend) – для их замены предназначен эффект Effect Lines, позволяющий заполнять пространство между двумя кривыми набором линий. Панель Variations используется для псевдослучайного клонирования объекта, при этом варьируются его основные параметры – цвет, толщина штриха и пр.

Разработчики позаботились и о том чтобы макеты, созданные в Graphic Designer были пригодны для использования в других приложениях. Кроме уже упомянутого экспорта в XAML, пакет поддерживает интеграцию с PowerPoint – графические фрагменты можно копировать в презентацию просто через буфер, при этом сохраняются такие эффекты как прозрачность, векторные элементы и другие.

Interactive Designer. Пакет для создания графических интерфейсов отличается от других подобных продуктов тем, что поддерживает полный спектр мультимедийных форматов и технологий. Окна, образованные с помощью Interactive Designer, могут содержать видеофрагменты, компрессированные разными кодеками и с разрешением вплоть до HD-Video, растровые и векторные изображения в формате XAML. Одно из главных его ноу-хау – возможность прямого импорта трехмерных моделей и редактирование базовых параметров сцены, таких как положение и угол поворота объекта, текстуры (позволяет накладывать видеофрагменты!), установки виртуальной камеры. Также у Interactive Designer богатый набор инструментов для работы с текстом, позволяющий создавать интерфейсы со сложной типографикой, которые одинаково хорошо выглядят на экране и печатаются на бумаге.

Сложно представить, что такие мультимедийные GUI смогут обеспечивать приемлемое быстродействие, если будут основаны на обычных механизмах GDI – разумеется, в стандартных требованиях WinFX присутствует аппаратная акселерация 3D. Именно благодаря ей пакет позволяет создавать столь яркие и динамичные графические интерфейсы.

С помощью встроенных функций также можно разрабатывать довольно сложные сценарии поведения интерфейса – для чего применяются разнообразные триггеры событий, таймеры, анимационные линии, стили элементов и пр. Приложение поддерживает широкий набор контейнеров, обеспечивающих автоматическое перепозиционирование элементов при изменении размера окна или содержимого отдельных его частей. Некоторые из них уже хорошо знакомы разработчикам, например Dock и Grid, другие будут широко распространены в новом поколении продукта для Windows Vista – Flow, Stack.

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

Web Designer. HTML-редактор от Microsoft ориентирован на разработку страниц, где позиционирование элементов и разметка макета выполняется с помощью CSS 2.0. Этот факт определяет набор инструментов, которые реализованы в продукте.

Сердце пакета – CSS-движок визуализации HTML, основанный на технологиях Internet Explorer. Это позволяет Web Designer практически со 100%-ной точностью отображать окончательный вид страницы в браузере. В деле редактирования и построения CSS-стилей ему нет равных, например, он может автоматически создавать подклассы при изменении отдельных атрибутов повторяющихся элементов. При настройке вручную на помощь Web-дизайнеру приходят мощные вспомогательные средства, такие как автодополнение тегов или панель, на которой указаны все возможные функции некоторого класса или тега.

Не менее мощные и инструменты визуального редактирования. Их сложно перечислить в небольшом обзоре, но самые характерные мы приведем: прямая интерактивная установка границ и отступов (соответствует параметрам padding и margin), позиционирование большинства элементов методом dragndrop и т. д.

Для тех, кто предпочитает наиболее критичные элементы страниц «тюнинговать» в режиме кода, также есть свой инструментарий. В него входят уже ставшие привычными функции автодополнения тегов и рефакторинга кода. В пакет интегрирована поддержка ASP .NET – это заметно как на уровне написания кода Web-приложений, так и во время отладки. Для проверки их работоспособности предусмотрено подключение специальной облегченной версии Web-сервера – ASP.NET Development Server. При его наличии нет необходимости каждый раз загружать страницу на удаленный сервер или устанавливать локальный.

Пакет поставляется с набором профессиональных CSS2-шаблонов – на их основе можно буквально за считаные часы создать мощный динамический сайт со множеством мультимедийных элементов.

Эволюция продолжается

Несмотря на то что опробовать пакеты Microsoft Expression можно уже сегодня, они по-прежнему находятся в стадии разработки и распространяются как CTP-версии. Работа многих функций зависит от конечной реализации .NET Framework 3.0 – об этом прямо говорится в документации. Кстати, для того чтобы в полной мере оценить потенциал приложений, необходимо установить бета-версию API. В файлах помощи отсутствуют целые разделы, а те, что есть, изобилуют аббревиатурой TBD (to be determined), а это означает, что окончательный набор возможностей редакторов Expression предполагает существенные изменения и его эволюция продолжается.

Дополнительную информацию и CTP-версии пакетов можно найти по адресу: www.microsoft.com/expression.