Закончил (почти) предпоследнюю главу книги, которая оказалась первой. Это только первый драфт, объем материала будет увеличен процентов на 30. Да, я это еще не читал, поэтому ошибки встречаются:)
Создавая Web-приложения, программист ограничен скромными возможностями по реализации интерфейсов. Независимо от того, какая технология будет использована для создания Web-приложения, пользователь будет использовать браузер, который способен отображать только HTML. Используя HTML и JavaScript можно добиться некоторой динамики и интерактивности интерфейса, но интерфейсы Web-приложений все еще далеки от интерфейсов Windows-приложений. Кроме того Windows-приложения продолжают активно развиваться. Так с выходом Windows Presentation Foundation (одной из составляющих .NET Framework 3.0) программист получил возможность создавать абсолютно произвольные интерфейсы, наполненные элементами управления, вид которых ограничивается лишь фантазией программиста.
Еще перед выходом Windows Presentation Foundation компания Microsoft заявила о разработке технологии, которая переносит возможности WPF в Web. Эта технология получила кодовое название WPF/Everywhere. И только весной 2007 года на конференции Mix 2007 в Лас-Вегасе была представлена бета версия технологии WPF/Everywhere, получившая коммерческое название SilverLight (все материалы конференции Mix07 доступны на сайте http://sessions.visitmix.com).
Проводя аналогию с WPF можно сформулировать, что технология SilverLight позволяет создавать приложения в Web с «богатым» интерфейсом, то есть интерфейсом, наполненным графикой, анимацией, медиа компонентами. Приложения, разработанные на SilverLight выполняются в окне браузера пользователя, внутри специального подключаемого компонента (plug-in). Фактически, возможности подключаемого компонента и определяют возможности SilverLight приложений. На текущий момент существует две версии Silverlight, а следовательно и две версии встраиваемого компонента: версия 1.0 доступна в релизе с сентября 2007 года; версия 2 появилась в релизе летом 2008 года. В этой книге речь пойдет исключительно о SilverLight 2. Именно эта версия позволяет разрабатывать Web-приложения с поддержкой библиотек .NET Framework. При этом разработчик может использовать такие языки программирования как C# или VB.NET.
Лучший способ понять и оценить возможности SilverLight – исследовать существующие примеры, с которыми можно ознакомиться на сайте http://silverlight.net/showcase.
Для разработки SilverLight приложений используются две технологии, это XAML – язык, позволяющий описывать векторный интерфейс и один из управляемых или динамических языков программирования, позволяющий реализовать логику приложения. Таким образом, разработчик не сталкивается с проблемой изучения принициально новых технологий, а использует накопленные ранее знания. Кроме того, разработчик может использовать существующие утилиты, начиная от текстового редактора Notepad и заканчивая Visual Studio 2008.
Говоря о технологии для создания Web-приложениях, необходимо сделать акцент на независимость SilverLight от браузера и платформы.
Если говорить о платформенной независимости, то следует вспомнить, что SilverLight является технологией, выполняющей приложения на машине пользователя. Фактически, пользователь должен иметь только встраиваемый компонент для запуска приложения. Специфичные для SilverLight cерверные ресурсы не используются, как и отсутствует привязка к определенной серверной платформе или Web серверу. Последнее означает, что для того, чтобы опубликовать SilverLight приложение на Web сервер, его достаточно скопировать. В качестве Web сервера можно использоваться Internet Information Service (IIS), Apach или любой другой. При этом сайт, куда внедряется SilverLight приложение, может быть реализован на технологиях, начиная от простого HTML или PHP и заканчивая ASP.NET.
Независимость от браузера достигается поддержкой встраиваемого компонента для различных типов браузеров. Так встраиваемый компонент для SilverLight 2 поддерживается такими браузерами, как Internet Explorer 6, 7 и 8 версий, FireFox 1.5 и 2.0, Safari. Компания Microsoft реализует поддержку встраиваемого компонента на таких платформах как Windows и MacOS. В то же время компания Microsoft не имет возможности реализовывать и поддерживать компонент на платформе Linux. Несмотря на это, пользователи этой операционной системы не были обижены. Так в 2007 году, компания Microsoft заключила договор о сотрудничестве с компанией Novell. Результатом этого сотрудничества стал выпуск встраиваемого компонента на платформе Linux. Компонент имеет название MoonLight и поддерживает приложения, разработанные на SilverLight.
Таким образом, SilverLight является независимой от браузера и от платформы.
Попробуем реализовать простейшее приложение на SilverLight. Для реализации этого приложения необходимо установить подключаемый компонент к браузеру, который можно скачать с сайта http://www.microsoft.com/silverlight.
Кроме подключаемого компонента нам понадобится Microsoft Expression Blend 2.5, который можно скачать с сайта http://www.microsoft.com/expression. Эта утилита позволит на выполнить создание интерфейса, используя только графический редактор и не вдаваться в подробности XAML.
Замечание. Для создания SilverLight приложений следует использовать версию 2.5 утилиты Microsoft Expression Blend, так как первая версия вышла значительно раньше появления технологии SilverLight 2 и, следовательно, не поддерживает соответствующие шаблоны и возможности. На момент написания книги Microsoft Expression Blend 2.5 можно было скачать в одной из предварительных версий, работающих в течении 180 дней. Но даже после выхода релиза, эту утилиту можно будет скачать в пробном варианте на 30 дней.
Замечание. Microsoft Expression Blend 2.5 является одной из утилит пакета Microsoft Expression Studio. Речь об этом пакете пойдет в одной из последних глав этой книги.
Запустите Microsoft Expression Blend 2.5 и создайте новый проект. В результате чего на экране появится следующее окно:
Рис. 1.1 Создание проекта в Microsoft Expression Blend 2.5
Среди доступных шаблонов нужно выбрать SilverLight 2 Application и ввести имя проекта, после чего нажать кнопку ОК. В результате этих действий на экране отобразится рабочее окно:
Рис. 1.2 Окно Microsoft Expression Blend 2.5 после создания нового проекта
Реализуем небольшое приложение, отображающее видео на фоне некоторой надписи. Для этого нам понадобится специальный элемент, который называется MediaElement. По умолчанию его нет на панели инструментов. Для того, чтобы отобразить этот элемент, нажмите кнопку Asset Library на панели инструментов (последняя кнопка) и в появившемся окне выберите Show All.
Рис. 1.3 Выбор Media элемента
Разместите MediaElement в рабочей области и в окне Properties на закладке Media установите свойство Source, выбрав один из видео файлов, поддерживаемых Windows. В результате MediaElement отобразит первый кадр из выбранного видео файла.
Выберите на панели инструментов элемент управления TextBlock и разместите его поверх видео элемента. Введите любую надпись (например Hello), выбрав шрифт и размер таким образом, чтобы буквы было достаточно хорошо видно. Рабочая область вашего окна должна выглядеть примерно следующим образом:
Рис. 1.4 Размещение видео и текста
На последнем этапе используйе вкладку Objects and Timeline окна Interactions и выделите MediaElement и TextBlock в одну группу. Используйте пункт меню Objects->Path и выберите Make Clipping Path. Приложение готово.
Запустив приложение с помощью пункта меню Project->Test Site можно посмотреть на созданное приложение, работающее в окне браузера.
Рис. 1.5 Результат работы приложения
Expression Blend 2.5 является мощной утилитой и позволяет сделать сколь угодно сложный дизайн интерфейса. В тоже время эта утилита совершенно не подходит для написания кода, например на C#. Один из привычных инструментов для разработчика, это Visual Studio. Новая версия этого продукта - Visual Studio 2008 поддерживает шаблоны для создания SilverLight-приложений.
Создадим новый проект, используя шаблон SilverLight Project. Перед созданием проекта, необходимо выбрать, нужно ли создавать Web-приложение для тестирования либо генерировать тестовую страницу на лету.
Рис. 1.6 Настройка параметров приложения
В результате будет создан проект, структура которого будет рассматриваться в следующей главе. Модифицируем код страницы Page.xaml, как показано ниже:
Page.xaml
<UserControl x:Class=" SilverLight1_2.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="300">
<Grid x:Name="LayoutRoot" Background="White">
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Rectangle Fill="Aqua" Grid.Column="0" Grid.Row="0"></Rectangle>
<Rectangle Fill="Chocolate" Grid.Column="0" Grid.Row="1"></Rectangle>
<Rectangle Fill="Green" Grid.Column="1" Grid.Row="0"></Rectangle>
<Rectangle Fill="SeaGreen" Grid.Column="1" Grid.Row="1"></Rectangle>
</Grid>
</UserControl>
Этот код описывает один из элементов компановки Grid, содержащий два столбца и две строки. В каждую из ячеек элемента Grid мы размещаем элемент Rectangle, определяющий прямоугольник заданного цвета.
Если запустить это приложение из Visual Studio, то можно увидеть лишь четыре прямоугольника, раскрашенные в разные цвета. Добавим к этому приложению немного интерактивности. Для этого определим обработчики события MouseEnter для каждого из элементов. Это можно сделать прямо в XAML файле.
Page.xaml
<Rectangle Fill="Aqua" Grid.Column="0" Grid.Row="0" MouseEnter="Mouse_Enter"></Rectangle>
<Rectangle Fill="Chocolate" Grid.Column="0" Grid.Row="1" MouseEnter="Mouse_Enter"></Rectangle>
<Rectangle Fill="Green" Grid.Column="1" Grid.Row="0" MouseEnter="Mouse_Enter"></Rectangle>
<Rectangle Fill="SeaGreen" Grid.Column="1" Grid.Row="1" MouseEnter="Mouse_Enter"></Rectangle>
Определим наш обработчик таким образом, чтобы он менял цвет у прямоугольника.
Page.xaml.cs
private void Mouse_Enter(object sender, MouseEventArgs args)
{
Rectangle rect = (Rectangle)sender;
Random r=new Random();
rect.Fill = new SolidColorBrush(
Color.FromArgb((byte)r.Next(255), (byte)r.Next(255), (byte)r.Next(255), (byte)r.Next(255)));
}
Запустив приложение снова, на экране отображаются четыре прямоугольника, которые меняют цвет всякий раз, если наводить на них мышку.
Рис. 1.7 Результат работы приложения
Что дальше?
Итак, SilverLight позволяет создавать Web-приложения. Рассмотрим основные составляющие этой технологии.
Как было сказано выше, для описания интерфейса SilverLight-приложения используется XAML. Этот язык является подмножеством XML и позволяет описывать векторные изображения. Разрабатывая интерфейс, дизайнер фактически редактирует XAML. Это можно делать «ручным» методом, редактируя элементы непосредственно, либо использовать один из дизайнеров. Так в Visual Studio 2008 встроен визуальный редактор для работы XAML файлами. В то же время для дизайнера предпочтительней использовать Expression Blend, который предоставляет больше возможностей.
Замечание. Для обеспечения интеграции между дизайнером и разработчиком, Expression Blend работает с проектами в том же формате, что и Visual Studio. Это дает возможность наладить совместую работу дизайнера и разработчика над одним проектом.
Все элементы, доступные в SilverLight имеют свое описание в виде XAML. Например, следующая часть кода, описывает элемент, отображающий видеофайл:
<MediaElement Margin="0,0,0,0" Source="Butterfly.wmv"/>
При этом, если есть необходимость создавать элементы динамически, то это можно делать, используя аналогичные классы из кода на одном из поддерживаемых языков:
MediaElement m = new MediaElement();
m.Margin = new Thickness(0, 0, 0, 0);
m.Source = new Uri("........");
LayoutRoot.Children.Add(m);
Элементы можно разбить на несколько условных групп.
Элементы компановки. Сюда входят такие элементы-контейнеры, как Canvas, StackPanel и Grid. Первый элемент Canvas позволяет размещать элементы управления с абсолютной привязкой по позиции. StackPanel позволяет упорядочить элементы по горизонтали или вертикали. Последний элемент Grid позволяет разбить заданную область на ячейки и привязать элементы к каждой из ячеек.
Элементы управления. SilverLight 2 предлагает достаточно большой набор элементов управления, начиная от элемента Button, описывающего кнопку и заканчивая гридами по работе с данными. Описание всех элементов и принципы работы с ними будут описаны в третьей главе.
Графические примитивы. Сюда входят такие элементы как Line, Rectangle, элементы позволяющие определить градиентную заливку и многие другие.
Управление видео и анимацией. Именно простота внедрения видео, звука и анимации в Web-приложения делает SilverLight интересным для большинства разработчиков.
Кроме элементов, SilverLight включает несколько важных библиотек.
Работа с данными. Сюда входит набор классов, которые позволяют работать с XML данными, связывать данные и элементы управления, поддерживать работу через LINQ.
Работа с сетью. SilverLight 2 поддерживает такие механизмы работы, как Windows Communication Foundation, SOAP, ASP.NET AJAX для взаимодействия со службами всех типов.
Базовые классы. Работа с SilverLight удобна еще тем, что для разработчика можно использовать стандартные классы и подходы при разработке логики приложения.
В следующих главах мы рассмотрим работу со всеми группами элементов и библиотек более детально.
SilverLight 2 – новая технология от Microsoft, которая позволяет разрабатывать Web приложения с «богатым» интерфейсом, наполненным графикой, видео, анимацией. Использование управляемых языков для бизнес-логики делает технологию SilverLight достаточно удобной для программистов, ранее разрабатывавших проекты на платформе .NET Framework. При этом есть возможность использовать динамические языки программирования, или даже JavaScript, который является «мостом», связывающим SilverLight модель с документной моделью приложения в браузере (DOM). Это дает неограниченные возможности по манипуляции не только SilverLight приложением, но и содержимым всей страницы.
Используя встраиваемый компонент в браузер, включающий все необходимые возможности для запуска приложений, технология SilverLight снимает ограничения с операционной системы, установленной на клиенте. Так, нет необходимости устанавливать .NET Framework или дополнительные библиотеки. Достаточно встраиваемого компонента, который поддерживается на всех популярных ОС и во всех современных браузерах. Запуск и выполнение SilverLight приложений на клиенте делает технологию независимую от серверной части, что позволяет размещать SilverLight приложения под любым Web сервером и внедрять в приложения, написанные на любом языке программирования, например PHP.