Microsoft.com – это один из самых популярных сайтов в мире. В один прекрасный день при посещении этого сайта пользователям было предложено скачать плагин Microsoft Silverlight (рис. 1.1):
(рис 1.1) Предложение скачать Microsoft Silverlight. Загрузка начнется после одного клика
Можно, конечно, этого бы и не делать. Сайт в этом случае также будет полностью доступен. Но те, кто хотел просматривать сайт со всеми мультимедийными возможностями, после установки плагина получали все преимущества (рис. 1.2):
(рис 1.2) Сайт Microsoft.com с воспроизведением Silverlight
Что нужно сделать для того, чтобы на сайтах воспроизводился Silverlight? Идем на официальный сайт в раздел установки: http://www.microsoft.com/silverlight/resources/install.aspx. Для того чтобы браузер начал поддерживать Silverlight, необходимо скачать плагин последней версии (для Windows версия 2.0 занимает около 4.7 МБ), а затем его установить. Список поддерживаемых операционных систем и браузеров выглядит так (рис. 1.3):
(рис 1.3) Список поддерживаемых ОС и браузеров
(http://www.microsoft.com/silverlight/resources/install.aspx#sysreq).
И хотя браузеры Opera и Google Chrome не представлены в этом списке, после установки плагина они все-таки могут отображать Silverlight. Системные требования для воспроизведения Silverlight очень и очень скромные, по крайней мере, для PC (рис. 1.4):
(рис 1.4) Список минимальных системных требований
(http://www.microsoft.com/silverlight/resources/install.aspx#sysreq)
Такие параметры, как 500 МГц тактовой частоты процессора и 128 МБ оперативной памяти выглядят легко выполнимыми на сегодняшний день.
Итак, все, что нужно сделать пользователю, для того чтобы видеть сайты сделанные с использованием технологии Silverlight – это один раз скачать и установить плагин. Если в настройках плагина при установке оставить галочку "Enable Microsoft Update", то все последующие обновления будут осуществляться без всякого участия пользователя (рис. 1.5):
(рис 1.5) Включение автоматического обновления
Но для чего нужен Silverlight? Зачем большой армии .NET–разработчиков постепенно осваивать эту технологию? Они ведь не занимаются разработкой рекламных роликов для Интернета? Чаще всего приходится делать сайты или корпоративные системы для интранета, где исключительную важность играет электронный документооборот, взаимодействие с базами данных, удобство интерфейса пользователя. Но что, если перейти на качественно новый уровень разработки сайтов и систем управления предприятием? Patient Journey Demonstrator (http://www.mscui.net/PatientJourneyDemonstrator/) – это разработка британского подразделения Microsoft, демонстрирующая использование Silverlight в качестве бизнес-системы медицинского учреждения (рис. 1.6):
(рис 1.6) Patient Journey Demonstrator (http://www.mscui.net/PatientJourneyDemonstrator/)
Посетителю сайта предлагается воспользоваться функционалом трех различных модулей – администратора приемной, врача неотложной помощи и лаборатории. Все данные представляются в виде интерактивных диаграмм (рис. 1.7):
(рис 1.7) Модуль врача неотложной помощи http://www.mscui.net/PatientJourneyDemonstrator/PrimaryCare.htm
Данные анализов лаборатории включают в себя не только статичные картинки, но и видеозаписи (рис. 1.8):
(рис 1.8) Модуль лаборатории (http://www.mscui.net/PatientJourneyDemonstrator/SecondaryCare.htm)
Изображение сердца – трехмерное, его можно вращать с помощью курсора мыши. Кардиограмма – это видеозапись с возможностью масштабирования, выделения отдельных областей, добавления заметок.
Перечисление всех возможностей этого приложения займет отдельную лекцию. Лучше всего перейти на сайт, поработать с электронным гидом или просмотреть видео (http://www.mscui.net/PatientJourneyDemonstrator/).
Можно заметить, что изощренный интерфейс и многочисленные возможности делают похожими подобные сайты скорее на настольные приложения, чем на веб-проекты. Чтобы в этом окончательно убедиться, лучше всего проследовать на сайт Windows Vista (http://www.windowsvista.si/main.htm?lang=1033).
Нет, это не официальный сайт операционной системы. На сайте прямо в браузере доступна эмуляция, превращающая привычный интерфейс в виртуальную Windows Vista (рис. 1.9):
(рис 1.9) В браузере операционной системы Windows Vista эмулируется работа Windows Vista с просмотром видео-ролика об операционной системе Windows Vista (http://www.windowsvista.si/main.htm?lang=1033)
Перетаскивание "окон", их сворачивание и разворачивание, поиск, воспроизведение видео-роликов, всплывающие подсказки, выделение "файлов", трехмерные анимации – это лишь часть возможностей макета. Такие разработки называются богатыми Интернет-приложениями (Rich Internet applications, RIA). Они могут разрабатываться при помощи и других технологий, но поскольку мы рассматриваем Silverlight, то хочется видеть RIA, сделанные именно с использованием этой технологии. Такие примеры доступны на официальном сайте технологии в разделе Showcase (http://silverlight.net/showcase/default.aspx) (рис. 1.10):
(рис 1.10) Примеры сайтов на Silverlight (http://silverlight.net/showcase/default.aspx). Среди них есть и RIA
Игры, аналоги настольных приложений, карты, фотоальбомы – все это Silverlight. Разработчики из многих стран представили свои работы в эту коллекцию. Она может стать и готовым банком идей для стартапов.
Начать знакомство с WPF – родственной технологией Silverlight в Windows приложениях, лучше всего с помощью привычного инструмента разработки – Microsoft Visual Studio .NET 2008. Запускаем программу, создаем новый проект, в разделе Project types выбираем "Windows", а в категории "Templates" тип шаблона "WPF Application" (рис. 1.11):
(рис 1.11) Создание нового WPF-приложения.
Появляется рабочая область, интерфейс которой очень напоминает разработку обычного Windows-приложения. В окне "XAML" изменим код следующим образом:
<Window x:Class="FirstWPFProject.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300">
<Grid>
<Rectangle Width="100" Height="30" Fill="Blue"/>
</Grid>
</Window>
В результате на форме, прямо в режиме дизайна появляется синий прямоугольник (рис. 1.12):
(рис 1.12) Размещение графической фигуры на форме
Windows Presentation Foundation (WPF, кодовое название — Avalon) – это графическая система, входящая в состав .NET Framework 3.0. Фактически, это обновление технологического интерфейса операционной системы. Ранее, для отображения графики в Windows-приложениях использовалось ядро GDI+. WPF -приложения используют DirectX, позволяющий использовать возможности видеокарты, а значит формировать визуальный интерфейс, содержащий анимацию и трехмерные объекты. В качестве разметки графического интерфейса используется XAML (eXtensible Application Markup Language). Это язык, подобный XML, содержащий большое количество таких элементов как кнопки, радиопереключатели, текстовые поля, так и принципиально новые графические объекты – прямоугольники, окружности, градиентные заливки, кривые. Именно изучением графических элементов мы и будем заниматься в этом курсе.
WPF -приложение поддерживает C# код, который и размещается в отдельном файле. Эта концепция уже знакома Windows-программистам.
WPF -это не замена обычным Windows-приложениям. По-прежнему, Visual Studio .NET 2008 позволяет разрабатывать и "классические" Windows-проекты. В этом можно убедиться просто выбрав тип "Windows Forms Application " в окне шаблонов.
Запускаем наше приложение, нажимая клавишу F5. Появляется обычное Windows-приложение, которое содержит необычный синий прямоугольник (рис. 1.13):
(рис 1.13) WPF-приложение в режиме запуска
Возможность разрабатывать Windows-приложения с поддержкой графики, конечно, выглядит весьма заманчивой, однако C# программисты никогда особо не задумывались над тем, как загрузить видеокарту пользователя при работе с обычными бизнес-системами. Встроенного оформления в большинстве случаев хватало для реализации почти всех задач. Гораздо более интересной представляется именно ориентация платформы на веб-приложения. Здесь действительно есть множество мультимедийных задач, которые раньше .NET -разработчики с легкой завистью передавали своим коллегам, работающими с другими технологиями и средствами разработки. Теперь все изменилось. Для того чтобы разрабатывать Silverlight-приложения в среде Visual Studio .NET 2008 нужно сделать две вещи:
После выполнения этих действий, при создании нового проекта мы сможем выбрать Silverlight Application (рис. 1.14):
(рис 1.14) Создание нового Silverlight-проекта в Visual Studio .NET 2008
При этом среда создает весь набор файлов, необходимых для создания и тестирования Silverlight-сайтов. В частности, выбираем добавление виртуального хоста (рис. 1.15):
(рис 1.15) Добавление хоста для запуска Silverlight-проекта
Появляется рабочий интерфейс, который… Почти не отличается от интерфейса создания WPF -приложения. Изменим XAML-код следующим образом:
<UserControl x:Class="FirstSilverlightSite.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="200" Height="100">
<Grid x:Name="LayoutRoot" Background="White">
<Canvas>
<Rectangle Canvas.Left="50" Canvas.Top="40"
Width="100" Height="30" Fill="Blue"/>
</Canvas>
</Grid>
</UserControl>
В режиме дизайна появляется знакомый синий прямоугольник (рис. 1.16):
(рис 1.16) Размещение графической фигуры в Silverlight-проекте
В окне Solution Explorer мы снова видим связанный файл с кодом C#, а окно Toolbox содержит множество как обычных элементов, таких как кнопки и гиперссылки, так и графических – эллипсов и прямоугольников. Концепция представления пользовательского интерфейса в виде XAML -кода объединяет WPF и Silverlight -приложения. При этом возникает вопрос – означает ли это полную совместимость, при которой дизайн приложений абсолютно взаимозаменяем? К сожалению, на момент создания этого курса говорить о полной совместимости нельзя. Элементы XAML конечно, в большинстве случаев идентичны, более того, некоторые фрагменты кода можно использовать в разработках обоих типов банальным копированием и вставкой, но некоторые свойства и возможности специфичны. Это различие будет сглаживаться и дорабатываться в следующих версиях всей платформы. В этом курсе основной упор делается на разметку XAML для веб-проектов (Silverlight), однако, в некоторых случаях, аналогичная функциональность WPF также будет описываться.
Запускаем приложение, нажимая клавишу F5 – на этот раз прямоугольник появляется в окне браузера (рис. 1.17):
(рис 1.17) Silverlight-приложение в режиме запуска
Использовать Visual Studio .NET 2008 для работы с платформой можно. Более того, это средство будет предпочтительным для тех программистов, которые вообще не будут заниматься оформлением приложений. Однако перед нами стоит задача освоить именно графические возможности XAML -разметки. Поэтому мы двигаемся дальше и переходим к изучению еще одного продукта.
Microsoft Expression Studio – это набор, включающий в себя пять пакетов: Microsoft Expression Web, Microsoft Expression Blend, Microsoft Expression Design , Microsoft Expression Media и Microsoft Expression Encoder. Сама по себе Microsoft Expression Studio – это не отдельная программа, а просто название для набора. Последнюю версию можно скачать с официального сайта: http://www.microsoft.com/expression/try-it/default.aspx (517.7 МБ). Целый месяц все продукты будут полнофункциональными, после чего будет предложено приобрести лицензию.
Если не хочется приобретать весь набор, то можно использовать отдельные программы. Например, отдельный пакет Microsoft Expression Blend (231.3 МБ) – основной инструмент для работы с этим курсом. В любом случае, отдельный пакет или его собрат, входящий в набор, по своим функциональным возможностям будут совершенно одинаковы.
Мы продолжим знакомство все-таки с целым набором. После его скачивания приступим к установке. В первом шаге мастера отображаются сведения о программах, которые будут установлены (рис. 1.18):
(рис 1.18) Первый шаг мастера установки Microsoft Expression Studio
В следующем шаге предлагается выбрать, какие именно программы будут нужны (рис. 1.19):
(рис 1.19) Выбор программ для установки
После установки группа Microsoft Expression будет доступна для работы. Рассмотрим по отдельности программы набора.
Microsoft Expression Blend – это лучший инструмент для создания интерфейсов с помощью XAML. Программа поддерживает шаблоны WPF -приложений и Silverlight -сайтов. После установки создаем новый проект – на этот раз начнем с Silverlight (рис. 1.20):
(рис 1.20) Создание Silverlight-проекта в Microsfot Expression Blend
Редактор поддерживает три режима работы: "Design", когда можно забыть о XAML-разметке и просто использовать визуальные средства рисования, а среда будет генерировать код, "XAML", когда наоборот, нужно писать весь код вручную и, наконец, режим "Split", при котором доступны как визуальные средства, так и редактор кода (рис. 1.21):
(рис 1.21) Редактор Microsoft Expression Blend в режиме "Split". Silverlight-приложение
При виде такого редактора, конечно, возникает вопрос – зачем вообще изучать XAML, если есть удобный инструмент для визуального создания оформления? Эта ситуация здорово напоминает работу с обычным HTML – визуальные редакторы существуют уже очень давно, но по-прежнему все новые поколения веб-программистов начинают изучение языка с написания кода в блокноте. Наверное, ни один редактор не способен полностью заменить человеческий труд, особенно когда нужно создать сложный сайт. Кроме того, далее мы узнаем, что код, генерируемый средой не всегда является в точности таким же, как и написанный вручную.
Изменим код XAML так:
<Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="200" Height="100"
Background="White"
x:Name="Page">
<Rectangle Canvas.Left="50" Canvas.Top="40"
Width="100" Height="30" Fill="Blue"/>
</Canvas>
Для того чтобы убедиться в том, что XAML хранится в обычных текстовых файлах с расширением *.xaml, перейдем в директорию "C:\Users\Имя пользователя\Documents\Expression\Expression Blend Projects", где по умолчанию располгаются проекты Microsoft Expression. В созданной папке проекта мы видим, что файл "Page.xaml" действительно допускается редактировать с помощью блокнота (рис. 1.22):
(рис 1.22) Файл *xaml – это обычный текстовый файл
Кроме этого, в директории находится HTML-страница, в которую внедряется Silverlight и два файла с кодом JavaScript. Они содержат необходимую функциональность для работы с роликом, кроме того, в них осуществляется проверка на наличие установленного плагина для отображения Silverlight на стороне клиента.
В Microsfot Expression Blend проекты для тестирования запускаются точно так же, как и в Visual Studio .NET 2008, т.е. нажатием клавиши F5.
Шаблон документа XAML выглядит следующим образом:
<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="200" Height="100" Background="White" x:Name="Page"> </Canvas>
Элемент Canvas – это контейнер, который будет содержать другие элементы. Внутри элемента, с помощью атрибутов Width, Height, Background, задаются ширина, высота и фоновый цвет этого контейнера. Фактически, в браузере элемент Canvas представляет собой полотно ролика. Атрибут (свойство) x:Name задает имя элемента. Это имя используется для обращения к элементу программным образом. Наконец, пространство имен, задаваемое с помощью атрибутов xmlns и xmlns:x – обычная практика при работе с документами типа XML.
Определение прямоугольника осуществляется помещением элемента Rectangle внутри элемента Canvas
<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="200" Height="100" Background="White" x:Name="Page"> <Rectangle Canvas.Left="50" Canvas.Top="40" Width="100" Height="30" Fill="Blue"/> </Canvas>
Значения оси абсцисс возрастают при движении слева направо, а оси ординат – при движении сверху вниз. Координаты верхней левой точки элемента Rectangle отсчитываются относительно элемента Canvas так (рис. 1.23):
(рис 1.23) Расположение координатных осей XAML – документа
Подобное расположение координатных осей и точки отсчета знакомо .NET-программистам.
Элемент Canvas – это не единственный контейнер, внутри которого можно размещать элементы. Но далее в этом курсе, при рассмотрении Silverlight-проектов, мы будем считать его основным холстом.
Изучением других графических элементов мы займемся в следующих главах. В состав пакета Microsoft Expression Blend входит набор примеров приложений (Sample Pack). Полезно открыть его и поизучать – пример впечатляющего приложения "Magnifying Glass" сделан именно на Silverlight (рис. 1.24):
(рис 1.24) Приложение MagnifyingGlass
При перемещении курсора мыши происходит перемещение увеличительного стекла, что позволяет разглядывать бабочек.
Перейдем к рассмотрению WPF-приложений в Microsoft Expression Blend. При создании проекта выбираем тип "WPF Application (exe)" (рис. 1.25):
(рис 1.25) Создание WPF-приложения в Microsoft Expression Blend
И мы снова видим практически точно такой же интерфейс, как и в случае Silverlight-сайта (рис. 1.26):
(рис 1.26) Редактор Microsoft Expression Blend. WPF-приложение
Здесь контейнером является элемент Window, внутри которого размещается еще один контейнер Grid, а потом уже сам элемент Rectangle:
<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Class="FirstWPFProject.Window1" x:Name="Window" Title="Window1" Width="200" Height="100"> <Grid x:Name="LayoutRoot"> <Rectangle Width="100" Height="30" Fill="Blue"/> </Grid> </Window>
Расположение координатных осей остается точно таким же. Кроме того, файл *.xaml по-прежнему является текстовым (рис. 1.27):
(рис 1.27) Файл *.xaml – это текстовый файл
Запускается приложение также нажатием клавиши F5.
WPF-проекты могут содержать действительно необычный интерфейс, с интересными возможностями. Например, в составе набора Sample Pack приводится поисковая система, в качестве ядра использующая Live Search (рис. 1.28):
(рис 1.28) Приложение Web Search
И хотя функциональность этого приложения исключительно "интернетная", проект является именно настольным. Далее, в следующих лекциях мы по умолчанию будем считать, что все примеры выполняются в Microsoft Expression Blend.
Microsoft Expression Design – это графический векторный редактор, который будут использовать дизайнеры, когда им не хватит возможностей Microsoft Expression Blend. Как обычно, в состав программы входят примеры, по которым можно оценить, что вообще можно сделать с этой программой. Например, нарисовать дизайн сайта, который затем будет переведен в XAML (рис. 1.29):
(рис 1.29) Дизайн сайта в редакторе Microsoft Expression Design
Здесь нет непосредственного отображения кода XAML для всех создаваемых фигур. Код получается позже, при экспорте графики. Однако общая концепции, общая ориентация сохраняется. Например, WPF-приложения поддерживают в своем XAML-коде ряд растровых эффектов. Редактор Microsoft Expression Design содержит визуальные средства для применения этих эффектов к произвольным фигурам (рис. 1.30):
(рис 1.30) Применение размытия по Гауссу в Expression Design
А после применения эффекта в главном меню доступен пункт "Edit \ Copy XAML", который позволяет поместить в буфер обмена XAML-код всего документа (рис. 1.31):
(рис 1.31) Пункт меню "Edit \ Copy XAML".
В рассматриваемом случае, фрагмент кода, относящийся к прямоугольнику будет выглядеть так:
<Rectangle Width="300" Height="250" Canvas.Left="280" Canvas.Top="130" Stroke="Red" Fill="Red">
<Rectangle.BitmapEffect>
<BlurBitmapEffect KernelType="Gaussian" Radius="10"/>
</Rectangle.BitmapEffect>
</Rectangle>
Понятно, что изменяя параметры фильтра, можно понять, за что они отвечают и как фильтр работает вообще. Полученный XAML-код при помещении его в Microsoft Expression Blend будет работать точно также, как если бы он был в нем создан с помощью визуальных средств.
Silverlight-проекты пока не поддерживают эти эффекты. Конечно, можно экспортировать изображение в формате PNG, например и вставить его в ролик. Но полноценной поддержки с помощью тегов пока нет.
В следующих лекция мы будем иногда использовать Microsoft Expression Design.
Microsoft Expression Web – это редактор веб-страниц. Он занимает достойное место в ряду таких пакетов, как Adobe Dreamweaver и Visual Studio .NET. Даже если вы не работаете с Silverlight, даже если приходиться верстать сайты с поддержкой PHP, Microsoft Expression Web вполне стоит того, чтобы попробовать с ним работать (рис. 1.32):
(рис 1.32) Пакет Microsoft Expression Web
Отличные средства по работе с каскадными таблицами стилей, режимы "Design", "Split" и "Code", валидный HTML, верстка div'ами, вставка медиаобъектов (в том числе и Silverlight), словом, пакет поддерживает основные требования, предъявляемые к современному веб-редактору.
Microsoft Expression Media – пакет для создания каталогов цифровых ресурсов, таких как фотографии, видео-ролики, RAW-изображения. Все файлы можно просматривать с помощью миниатюр, сортировать, оценивать. Рассмотрим один пример использования этой программы, позволяющий создать Silverlight фотогалерею. Импортируем фотографии в программу из произвольной папки, например, образцы изображений Windows Vista (рис. 1.33):
(рис 1.33) Импортированные изображения в Microsoft Expression Media
Заметим, что мы можем просматривать EXIF-данные фотографий. В главном меню программы выбираем пункт "Make \ HTML Gallery". Появляется диалоговое окно, в котором мы выбираем тему оформления ( Theme ), размер миниатюр и полноразмерных изображений (рис. 1.34):
(рис 1.34) Настройки фотогалереи
Нажимаем кнопку "Make" и перед нами появляется веб-страница, в которой интегрировано Silverlight отображение миниатюр (рис. 1.35):
(рис 1.35) Фотогалерея, сделанная с помощью Microsoft Expression Media
Миниатюры реагируют на наведение мыши, а по нажатию происходит загрузка полноразмерных фотографий. Подобное решение может быть использовано как готовая часть сайта или в качестве подсказки для программиста, как создать фотогалерею на Silverlight.
Microsoft Expression Encoder – последняя программа, входящая в состав Microsoft Expression Studio. Это видеоредактор, предназначенный для подготовки роликов к размещению на Silverlight -сайтах. Мы рассмотрим его использование в восьмой лекции.
При изучении Silverlight иXAML полезно пользоваться тематическими ресурсами, на которых собрано множество примеров, видеороликов и учебной литературы. В следующем описании предлагаю перечень ресурсов, наиболее значимых на мой взгляд:
Microsoft.com – это один из самых популярных сайтов в мире. В один прекрасный день при посещении этого сайта пользователям было предложено скачать плагин Microsoft Silverlight (рис. 1.1):
(рис 1.1) Предложение скачать Microsoft Silverlight. Загрузка начнется после одного клика
Можно, конечно, этого бы и не делать. Сайт в этом случае также будет полностью доступен. Но те, кто хотел просматривать сайт со всеми мультимедийными возможностями, после установки плагина получали все преимущества (рис. 1.2):
(рис 1.2) Сайт Microsoft.com с воспроизведением Silverlight
Что нужно сделать для того, чтобы на сайтах воспроизводился Silverlight? Идем на официальный сайт в раздел установки: http://www.microsoft.com/silverlight/resources/install.aspx. Для того чтобы браузер начал поддерживать Silverlight, необходимо скачать плагин последней версии (для Windows версия 2.0 занимает около 4.7 МБ), а затем его установить. Список поддерживаемых операционных систем и браузеров выглядит так (рис. 1.3):
(рис 1.3) Список поддерживаемых ОС и браузеров
(http://www.microsoft.com/silverlight/resources/install.aspx#sysreq).
И хотя браузеры Opera и Google Chrome не представлены в этом списке, после установки плагина они все-таки могут отображать Silverlight. Системные требования для воспроизведения Silverlight очень и очень скромные, по крайней мере, для PC (рис. 1.4):
(рис 1.4) Список минимальных системных требований
(http://www.microsoft.com/silverlight/resources/install.aspx#sysreq)
Такие параметры, как 500 МГц тактовой частоты процессора и 128 МБ оперативной памяти выглядят легко выполнимыми на сегодняшний день.
Итак, все, что нужно сделать пользователю, для того чтобы видеть сайты сделанные с использованием технологии Silverlight – это один раз скачать и установить плагин. Если в настройках плагина при установке оставить галочку "Enable Microsoft Update", то все последующие обновления будут осуществляться без всякого участия пользователя (рис. 1.5):
(рис 1.5) Включение автоматического обновления
Но для чего нужен Silverlight? Зачем большой армии .NET–разработчиков постепенно осваивать эту технологию? Они ведь не занимаются разработкой рекламных роликов для Интернета? Чаще всего приходится делать сайты или корпоративные системы для интранета, где исключительную важность играет электронный документооборот, взаимодействие с базами данных, удобство интерфейса пользователя. Но что, если перейти на качественно новый уровень разработки сайтов и систем управления предприятием? Patient Journey Demonstrator (http://www.mscui.net/PatientJourneyDemonstrator/) – это разработка британского подразделения Microsoft, демонстрирующая использование Silverlight в качестве бизнес-системы медицинского учреждения (рис. 1.6):
(рис 1.6) Patient Journey Demonstrator (http://www.mscui.net/PatientJourneyDemonstrator/)
Посетителю сайта предлагается воспользоваться функционалом трех различных модулей – администратора приемной, врача неотложной помощи и лаборатории. Все данные представляются в виде интерактивных диаграмм (рис. 1.7):
(рис 1.7) Модуль врача неотложной помощи http://www.mscui.net/PatientJourneyDemonstrator/PrimaryCare.htm
Данные анализов лаборатории включают в себя не только статичные картинки, но и видеозаписи (рис. 1.8):
(рис 1.8) Модуль лаборатории (http://www.mscui.net/PatientJourneyDemonstrator/SecondaryCare.htm)
Изображение сердца – трехмерное, его можно вращать с помощью курсора мыши. Кардиограмма – это видеозапись с возможностью масштабирования, выделения отдельных областей, добавления заметок.
Перечисление всех возможностей этого приложения займет отдельную лекцию. Лучше всего перейти на сайт, поработать с электронным гидом или просмотреть видео (http://www.mscui.net/PatientJourneyDemonstrator/).
Можно заметить, что изощренный интерфейс и многочисленные возможности делают похожими подобные сайты скорее на настольные приложения, чем на веб-проекты. Чтобы в этом окончательно убедиться, лучше всего проследовать на сайт Windows Vista (http://www.windowsvista.si/main.htm?lang=1033).
Нет, это не официальный сайт операционной системы. На сайте прямо в браузере доступна эмуляция, превращающая привычный интерфейс в виртуальную Windows Vista (рис. 1.9):
(рис 1.9) В браузере операционной системы Windows Vista эмулируется работа Windows Vista с просмотром видео-ролика об операционной системе Windows Vista (http://www.windowsvista.si/main.htm?lang=1033)
Перетаскивание "окон", их сворачивание и разворачивание, поиск, воспроизведение видео-роликов, всплывающие подсказки, выделение "файлов", трехмерные анимации – это лишь часть возможностей макета. Такие разработки называются богатыми Интернет-приложениями (Rich Internet applications, RIA). Они могут разрабатываться при помощи и других технологий, но поскольку мы рассматриваем Silverlight, то хочется видеть RIA, сделанные именно с использованием этой технологии. Такие примеры доступны на официальном сайте технологии в разделе Showcase (http://silverlight.net/showcase/default.aspx) (рис. 1.10):
(рис 1.10) Примеры сайтов на Silverlight (http://silverlight.net/showcase/default.aspx). Среди них есть и RIA
Игры, аналоги настольных приложений, карты, фотоальбомы – все это Silverlight. Разработчики из многих стран представили свои работы в эту коллекцию. Она может стать и готовым банком идей для стартапов.
Начать знакомство с WPF – родственной технологией Silverlight в Windows приложениях, лучше всего с помощью привычного инструмента разработки – Microsoft Visual Studio .NET 2008. Запускаем программу, создаем новый проект, в разделе Project types выбираем "Windows", а в категории "Templates" тип шаблона "WPF Application" (рис. 1.11):
(рис 1.11) Создание нового WPF-приложения.
Появляется рабочая область, интерфейс которой очень напоминает разработку обычного Windows-приложения. В окне "XAML" изменим код следующим образом:
<Window x:Class="FirstWPFProject.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300">
<Grid>
<Rectangle Width="100" Height="30" Fill="Blue"/>
</Grid>
</Window>
В результате на форме, прямо в режиме дизайна появляется синий прямоугольник (рис. 1.12):
(рис 1.12) Размещение графической фигуры на форме
Windows Presentation Foundation (WPF, кодовое название — Avalon) – это графическая система, входящая в состав .NET Framework 3.0. Фактически, это обновление технологического интерфейса операционной системы. Ранее, для отображения графики в Windows-приложениях использовалось ядро GDI+. WPF -приложения используют DirectX, позволяющий использовать возможности видеокарты, а значит формировать визуальный интерфейс, содержащий анимацию и трехмерные объекты. В качестве разметки графического интерфейса используется XAML (eXtensible Application Markup Language). Это язык, подобный XML, содержащий большое количество таких элементов как кнопки, радиопереключатели, текстовые поля, так и принципиально новые графические объекты – прямоугольники, окружности, градиентные заливки, кривые. Именно изучением графических элементов мы и будем заниматься в этом курсе.
WPF -приложение поддерживает C# код, который и размещается в отдельном файле. Эта концепция уже знакома Windows-программистам.
WPF -это не замена обычным Windows-приложениям. По-прежнему, Visual Studio .NET 2008 позволяет разрабатывать и "классические" Windows-проекты. В этом можно убедиться просто выбрав тип "Windows Forms Application " в окне шаблонов.
Запускаем наше приложение, нажимая клавишу F5. Появляется обычное Windows-приложение, которое содержит необычный синий прямоугольник (рис. 1.13):
(рис 1.13) WPF-приложение в режиме запуска
Возможность разрабатывать Windows-приложения с поддержкой графики, конечно, выглядит весьма заманчивой, однако C# программисты никогда особо не задумывались над тем, как загрузить видеокарту пользователя при работе с обычными бизнес-системами. Встроенного оформления в большинстве случаев хватало для реализации почти всех задач. Гораздо более интересной представляется именно ориентация платформы на веб-приложения. Здесь действительно есть множество мультимедийных задач, которые раньше .NET -разработчики с легкой завистью передавали своим коллегам, работающими с другими технологиями и средствами разработки. Теперь все изменилось. Для того чтобы разрабатывать Silverlight-приложения в среде Visual Studio .NET 2008 нужно сделать две вещи:
После выполнения этих действий, при создании нового проекта мы сможем выбрать Silverlight Application (рис. 1.14):
(рис 1.14) Создание нового Silverlight-проекта в Visual Studio .NET 2008
При этом среда создает весь набор файлов, необходимых для создания и тестирования Silverlight-сайтов. В частности, выбираем добавление виртуального хоста (рис. 1.15):
(рис 1.15) Добавление хоста для запуска Silverlight-проекта
Появляется рабочий интерфейс, который… Почти не отличается от интерфейса создания WPF -приложения. Изменим XAML-код следующим образом:
<UserControl x:Class="FirstSilverlightSite.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="200" Height="100">
<Grid x:Name="LayoutRoot" Background="White">
<Canvas>
<Rectangle Canvas.Left="50" Canvas.Top="40"
Width="100" Height="30" Fill="Blue"/>
</Canvas>
</Grid>
</UserControl>
В режиме дизайна появляется знакомый синий прямоугольник (рис. 1.16):
(рис 1.16) Размещение графической фигуры в Silverlight-проекте
В окне Solution Explorer мы снова видим связанный файл с кодом C#, а окно Toolbox содержит множество как обычных элементов, таких как кнопки и гиперссылки, так и графических – эллипсов и прямоугольников. Концепция представления пользовательского интерфейса в виде XAML -кода объединяет WPF и Silverlight -приложения. При этом возникает вопрос – означает ли это полную совместимость, при которой дизайн приложений абсолютно взаимозаменяем? К сожалению, на момент создания этого курса говорить о полной совместимости нельзя. Элементы XAML конечно, в большинстве случаев идентичны, более того, некоторые фрагменты кода можно использовать в разработках обоих типов банальным копированием и вставкой, но некоторые свойства и возможности специфичны. Это различие будет сглаживаться и дорабатываться в следующих версиях всей платформы. В этом курсе основной упор делается на разметку XAML для веб-проектов (Silverlight), однако, в некоторых случаях, аналогичная функциональность WPF также будет описываться.
Запускаем приложение, нажимая клавишу F5 – на этот раз прямоугольник появляется в окне браузера (рис. 1.17):
(рис 1.17) Silverlight-приложение в режиме запуска
Использовать Visual Studio .NET 2008 для работы с платформой можно. Более того, это средство будет предпочтительным для тех программистов, которые вообще не будут заниматься оформлением приложений. Однако перед нами стоит задача освоить именно графические возможности XAML -разметки. Поэтому мы двигаемся дальше и переходим к изучению еще одного продукта.
Microsoft Expression Studio – это набор, включающий в себя пять пакетов: Microsoft Expression Web, Microsoft Expression Blend, Microsoft Expression Design , Microsoft Expression Media и Microsoft Expression Encoder. Сама по себе Microsoft Expression Studio – это не отдельная программа, а просто название для набора. Последнюю версию можно скачать с официального сайта: http://www.microsoft.com/expression/try-it/default.aspx (517.7 МБ). Целый месяц все продукты будут полнофункциональными, после чего будет предложено приобрести лицензию.
Если не хочется приобретать весь набор, то можно использовать отдельные программы. Например, отдельный пакет Microsoft Expression Blend (231.3 МБ) – основной инструмент для работы с этим курсом. В любом случае, отдельный пакет или его собрат, входящий в набор, по своим функциональным возможностям будут совершенно одинаковы.
Мы продолжим знакомство все-таки с целым набором. После его скачивания приступим к установке. В первом шаге мастера отображаются сведения о программах, которые будут установлены (рис. 1.18):
(рис 1.18) Первый шаг мастера установки Microsoft Expression Studio
В следующем шаге предлагается выбрать, какие именно программы будут нужны (рис. 1.19):
(рис 1.19) Выбор программ для установки
После установки группа Microsoft Expression будет доступна для работы. Рассмотрим по отдельности программы набора.
Microsoft Expression Blend – это лучший инструмент для создания интерфейсов с помощью XAML. Программа поддерживает шаблоны WPF -приложений и Silverlight -сайтов. После установки создаем новый проект – на этот раз начнем с Silverlight (рис. 1.20):
(рис 1.20) Создание Silverlight-проекта в Microsfot Expression Blend
Редактор поддерживает три режима работы: "Design", когда можно забыть о XAML-разметке и просто использовать визуальные средства рисования, а среда будет генерировать код, "XAML", когда наоборот, нужно писать весь код вручную и, наконец, режим "Split", при котором доступны как визуальные средства, так и редактор кода (рис. 1.21):
(рис 1.21) Редактор Microsoft Expression Blend в режиме "Split". Silverlight-приложение
При виде такого редактора, конечно, возникает вопрос – зачем вообще изучать XAML, если есть удобный инструмент для визуального создания оформления? Эта ситуация здорово напоминает работу с обычным HTML – визуальные редакторы существуют уже очень давно, но по-прежнему все новые поколения веб-программистов начинают изучение языка с написания кода в блокноте. Наверное, ни один редактор не способен полностью заменить человеческий труд, особенно когда нужно создать сложный сайт. Кроме того, далее мы узнаем, что код, генерируемый средой не всегда является в точности таким же, как и написанный вручную.
Изменим код XAML так:
<Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="200" Height="100"
Background="White"
x:Name="Page">
<Rectangle Canvas.Left="50" Canvas.Top="40"
Width="100" Height="30" Fill="Blue"/>
</Canvas>
Для того чтобы убедиться в том, что XAML хранится в обычных текстовых файлах с расширением *.xaml, перейдем в директорию "C:\Users\Имя пользователя\Documents\Expression\Expression Blend Projects", где по умолчанию располгаются проекты Microsoft Expression. В созданной папке проекта мы видим, что файл "Page.xaml" действительно допускается редактировать с помощью блокнота (рис. 1.22):
(рис 1.22) Файл *xaml – это обычный текстовый файл
Кроме этого, в директории находится HTML-страница, в которую внедряется Silverlight и два файла с кодом JavaScript. Они содержат необходимую функциональность для работы с роликом, кроме того, в них осуществляется проверка на наличие установленного плагина для отображения Silverlight на стороне клиента.
В Microsfot Expression Blend проекты для тестирования запускаются точно так же, как и в Visual Studio .NET 2008, т.е. нажатием клавиши F5.
Шаблон документа XAML выглядит следующим образом:
<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="200" Height="100" Background="White" x:Name="Page"> </Canvas>
Элемент Canvas – это контейнер, который будет содержать другие элементы. Внутри элемента, с помощью атрибутов Width, Height, Background, задаются ширина, высота и фоновый цвет этого контейнера. Фактически, в браузере элемент Canvas представляет собой полотно ролика. Атрибут (свойство) x:Name задает имя элемента. Это имя используется для обращения к элементу программным образом. Наконец, пространство имен, задаваемое с помощью атрибутов xmlns и xmlns:x – обычная практика при работе с документами типа XML.
Определение прямоугольника осуществляется помещением элемента Rectangle внутри элемента Canvas
<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="200" Height="100" Background="White" x:Name="Page"> <Rectangle Canvas.Left="50" Canvas.Top="40" Width="100" Height="30" Fill="Blue"/> </Canvas>
Значения оси абсцисс возрастают при движении слева направо, а оси ординат – при движении сверху вниз. Координаты верхней левой точки элемента Rectangle отсчитываются относительно элемента Canvas так (рис. 1.23):
(рис 1.23) Расположение координатных осей XAML – документа
Подобное расположение координатных осей и точки отсчета знакомо .NET-программистам.
Элемент Canvas – это не единственный контейнер, внутри которого можно размещать элементы. Но далее в этом курсе, при рассмотрении Silverlight-проектов, мы будем считать его основным холстом.
Изучением других графических элементов мы займемся в следующих главах. В состав пакета Microsoft Expression Blend входит набор примеров приложений (Sample Pack). Полезно открыть его и поизучать – пример впечатляющего приложения "Magnifying Glass" сделан именно на Silverlight (рис. 1.24):
(рис 1.24) Приложение MagnifyingGlass
При перемещении курсора мыши происходит перемещение увеличительного стекла, что позволяет разглядывать бабочек.
Перейдем к рассмотрению WPF-приложений в Microsoft Expression Blend. При создании проекта выбираем тип "WPF Application (exe)" (рис. 1.25):
(рис 1.25) Создание WPF-приложения в Microsoft Expression Blend
И мы снова видим практически точно такой же интерфейс, как и в случае Silverlight-сайта (рис. 1.26):
(рис 1.26) Редактор Microsoft Expression Blend. WPF-приложение
Здесь контейнером является элемент Window, внутри которого размещается еще один контейнер Grid, а потом уже сам элемент Rectangle:
<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Class="FirstWPFProject.Window1" x:Name="Window" Title="Window1" Width="200" Height="100"> <Grid x:Name="LayoutRoot"> <Rectangle Width="100" Height="30" Fill="Blue"/> </Grid> </Window>
Расположение координатных осей остается точно таким же. Кроме того, файл *.xaml по-прежнему является текстовым (рис. 1.27):
(рис 1.27) Файл *.xaml – это текстовый файл
Запускается приложение также нажатием клавиши F5.
WPF-проекты могут содержать действительно необычный интерфейс, с интересными возможностями. Например, в составе набора Sample Pack приводится поисковая система, в качестве ядра использующая Live Search (рис. 1.28):
(рис 1.28) Приложение Web Search
И хотя функциональность этого приложения исключительно "интернетная", проект является именно настольным. Далее, в следующих лекциях мы по умолчанию будем считать, что все примеры выполняются в Microsoft Expression Blend.
Microsoft Expression Design – это графический векторный редактор, который будут использовать дизайнеры, когда им не хватит возможностей Microsoft Expression Blend. Как обычно, в состав программы входят примеры, по которым можно оценить, что вообще можно сделать с этой программой. Например, нарисовать дизайн сайта, который затем будет переведен в XAML (рис. 1.29):
(рис 1.29) Дизайн сайта в редакторе Microsoft Expression Design
Здесь нет непосредственного отображения кода XAML для всех создаваемых фигур. Код получается позже, при экспорте графики. Однако общая концепции, общая ориентация сохраняется. Например, WPF-приложения поддерживают в своем XAML-коде ряд растровых эффектов. Редактор Microsoft Expression Design содержит визуальные средства для применения этих эффектов к произвольным фигурам (рис. 1.30):
(рис 1.30) Применение размытия по Гауссу в Expression Design
А после применения эффекта в главном меню доступен пункт "Edit \ Copy XAML", который позволяет поместить в буфер обмена XAML-код всего документа (рис. 1.31):
(рис 1.31) Пункт меню "Edit \ Copy XAML".
В рассматриваемом случае, фрагмент кода, относящийся к прямоугольнику будет выглядеть так:
<Rectangle Width="300" Height="250" Canvas.Left="280" Canvas.Top="130" Stroke="Red" Fill="Red">
<Rectangle.BitmapEffect>
<BlurBitmapEffect KernelType="Gaussian" Radius="10"/>
</Rectangle.BitmapEffect>
</Rectangle>
Понятно, что изменяя параметры фильтра, можно понять, за что они отвечают и как фильтр работает вообще. Полученный XAML-код при помещении его в Microsoft Expression Blend будет работать точно также, как если бы он был в нем создан с помощью визуальных средств.
Silverlight-проекты пока не поддерживают эти эффекты. Конечно, можно экспортировать изображение в формате PNG, например и вставить его в ролик. Но полноценной поддержки с помощью тегов пока нет.
В следующих лекция мы будем иногда использовать Microsoft Expression Design.
Microsoft Expression Web – это редактор веб-страниц. Он занимает достойное место в ряду таких пакетов, как Adobe Dreamweaver и Visual Studio .NET. Даже если вы не работаете с Silverlight, даже если приходиться верстать сайты с поддержкой PHP, Microsoft Expression Web вполне стоит того, чтобы попробовать с ним работать (рис. 1.32):
(рис 1.32) Пакет Microsoft Expression Web
Отличные средства по работе с каскадными таблицами стилей, режимы "Design", "Split" и "Code", валидный HTML, верстка div'ами, вставка медиаобъектов (в том числе и Silverlight), словом, пакет поддерживает основные требования, предъявляемые к современному веб-редактору.
Microsoft Expression Media – пакет для создания каталогов цифровых ресурсов, таких как фотографии, видео-ролики, RAW-изображения. Все файлы можно просматривать с помощью миниатюр, сортировать, оценивать. Рассмотрим один пример использования этой программы, позволяющий создать Silverlight фотогалерею. Импортируем фотографии в программу из произвольной папки, например, образцы изображений Windows Vista (рис. 1.33):
(рис 1.33) Импортированные изображения в Microsoft Expression Media
Заметим, что мы можем просматривать EXIF-данные фотографий. В главном меню программы выбираем пункт "Make \ HTML Gallery". Появляется диалоговое окно, в котором мы выбираем тему оформления ( Theme ), размер миниатюр и полноразмерных изображений (рис. 1.34):
(рис 1.34) Настройки фотогалереи
Нажимаем кнопку "Make" и перед нами появляется веб-страница, в которой интегрировано Silverlight отображение миниатюр (рис. 1.35):
(рис 1.35) Фотогалерея, сделанная с помощью Microsoft Expression Media
Миниатюры реагируют на наведение мыши, а по нажатию происходит загрузка полноразмерных фотографий. Подобное решение может быть использовано как готовая часть сайта или в качестве подсказки для программиста, как создать фотогалерею на Silverlight.
Microsoft Expression Encoder – последняя программа, входящая в состав Microsoft Expression Studio. Это видеоредактор, предназначенный для подготовки роликов к размещению на Silverlight -сайтах. Мы рассмотрим его использование в восьмой лекции.
При изучении Silverlight иXAML полезно пользоваться тематическими ресурсами, на которых собрано множество примеров, видеороликов и учебной литературы. В следующем описании предлагаю перечень ресурсов, наиболее значимых на мой взгляд:
Для получения официальных документов о завершении программы дополнительного профессионального образования (удостоверения о повышении квалификации, дипломов о профессиональной переподготовке и MBA) необходимо предоставить:
Внимание! Вы можете не заказывать доставку бумажной версии официального документы, а скачать его в электронном виде и распечатать самостоятельно. Информация о выданном документе в течение 1 месяца загружается в Федеральную информационную систему «Федеральный реестр сведений о документах об образовании и (или) о квалификации, документах об обучении» - ФИС ФРДО.
Доступ на новый сайт осуществляется с использованием адреса электронной почты, который был указан вами при регистрации на "старом". Мы постарались перенести все ваши данные с прежнего ресурса, однако не исключена вероятность потери части информации.
При возникновении проблемы со входом, воспользуйтесь функцией сброса пароля
Если вы обнаружите несоответствия, пожалуйста, сообщите нам.