Что такое Silverlight
Введение
Microsoft Silverlight 2 — это кросс-браузерная, кросс-платформенная технология для разработки богатых интерактивных Web приложений (RIA — Rich Interactive Applications) следующего поколения. Не смотря на то, что Silverlight 2 основан на технологии Microsoft .NET, он не требует установки полного .NET Framework какой-либо версии. Для работы Silverlight приложений достаточно только один раз скачать дистрибутив размером около 4.5 Мб и произвести установку, которая займёт не более нескольких секунд.
Silverlight приложения работают в таких браузерах, как Internet Explorer, Firefox и, скажем, Safari. Из операционных систем поддерживается не только Windows, но и MacOS X для которой Microsoft выпускает официальный дистрибутив, а благодаря проекту Moonlight по соглашению Novell с Microsoft, Silverlight работает и на Linux. Также Silverlight в скором времени будет работать на мобильных устройствах с Windows Mobile и на смартфонах от Nokia.
Графический Фреймворк в Silverlight является подмножеством технологии Windows Presentation Foundation (WPF), дебютировавшей в .NET Framework 3.0. Благодаря этому в Silverlight для описания разметки приложений используется язык XAML (eXtensible Application Markup Language, расширяемый язык разметки приложений). Он позволяет в декларативном стиле описывать внешний вид приложений, создавать анимацию, шаблоны и стили элементов управления, а также производить связывание с данными (Data Binding). Ниже представлен простой пример на языке XAML. Данный код описывает страницу, содержащую кнопку с надписью «Нажми меня»:
<UserControl x:Class="HelloWorldApp.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
MinWidth="400" MinHeight="300">
<Grid x:Name="LayoutRoot">
<Button x:Name="mainButton" Content="Привет Silverlight"
Width="150" Height="75"
Click="mainButton_Click"/>
</Grid>
</UserControl>
Однако, не обязательно в ручную писать код на языке XAML, поддерживается и визуальное редактирование, позволяющее создавать самые сложные графические эффекты несколькими кликами мышки.
Версии Silverlight
На данный момент существуют две принципиально разные версии технологии Microsoft Silverlight.
- Microsoft Silverlight 1.0
- Microsoft Silverlight 2
Обе версии поддерживают богатое мультимедийное содержимое, аудио и видео высокого разрешения. У обоих версий есть потрясающие графические возможности, а для разметки приложений используется язык XAML. Однако, Silverlight 2, в отличие от Silverlight 1.0, основан на технологии Microsoft .NET и поддерживает разработку на таких языках программирования как C# и Visual Basic (и даже IronRuby и IronPython). При этом доступна некоторая (весьма большая, надо сказать) часть библиотеки классов из .NET Framework (FCL – Framework Class Library). А Silverlight 1.0 приложения создаются с использованием языка JavaScript. Поэтому те возможности, к которым Вы привыкли, разрабатывая, скажем, C# приложения, доступны только для Silverlight второй версии. Кроме того, возможности Silverlight 2 по сравнению с Silverlight 1.0 просто гораздо шире. Тут вам и элементы управления(Controls), и локальное изолированное хранилище (Local Storage), и связывание с данными, и не один десяток других, порой, впечатляющих возможностей (таких как, скажем, Deep Zoom).
Исходя из вышесказанного, в данной статье будет рассматриваться преимущественно Silverlight второй версии, хотя часть материала относится также и к Silverlight 1.0.
Инструменты для разработки Silverlight приложений
По сути, инструменты для разработки Silverlight приложений используются те же, что и для разработки Windows Presentation Foundation и вообще любых .NET приложений. Это позволяет разработчикам и дизайнерам использовать существующие знания и опыт, и не тратить время сначала для обучения созданию настольных приложений, а потом созданию Silverlight web приложений. Имея опыт в одной из этих областей, освоить другую труда не составит.
Инструменты для разработки Silverlight приложений имеют одну интересную особенность. Они специфичны в зависимости от роли в команде того, кто этими инструментами пользуется. Для разработчиков основной инструмент – это Microsoft Visual Studio, а для дизайнеров – Microsoft Expression Blend. Естественно никто не запрещает одному человеку совмещать несколько ролей и использовать оба эти инструмента одновременно. Ведь так как Visual Studio и Expression Blend используют одни и те же файлы исходного кода проекта, взаимодействие меду ними становится очень простой задачей. Кроме того, так как весь графический интерфейс приложения описывается в текстовом виде на языке XAML, то и дизайнер теперь тоже может эффективно использовать системы контроля версий, а все изменения, в графическом интерфейсе, сделанные дизайнером уже в проекте и уже работают, при этом исходный код, скажем, на языке C# остаётся прежнем. Ещё хочется отметить то, что Microsoft Expression Blend, который ориентирован на визуальную разработку, является профессиональным пакетом для дизайнеров, он выглядит и работает так, как этого ожидают дизайнеры. А Microsoft Visual Studio, который ориентирован на работу с кодом, выглядит и работает так, как этого ожидают программисты.
Что мне надо скачать/установить?
Для того чтобы начать разрабатывать Silverlight приложения требуется установить Visual Studio 2008 Standard или выше, а также:
- Microsoft Silverlight Tools for Visual Studio 2008, которые включают в себя:
- Дистрибутив Silverlight;
- Add-on для Visual Studio 2008;
- Silverlight 2 SDK, который содержит документацию, примеры, дополнительные элементы управления и компоненты для интеграции с ASP.NET.
- Expression Blend 2.0 SP1, а также, если требуется, Expression Encoder 2, который позволит Вам перекодировать и импортировать видео с различным качеством и разрешением из множества популярных форматов для использования его в Silverlight приложениях.
- Для работы с технологией Deep Zoom установите Deep Zoom Composer.
Deep Zoom
Что такое Deep Zoom? Это технология, которая обеспечивает удобный просмотр и масштабирование огромных, а иногда и гигантских, изображений. Просмотр изображений осуществляется в браузере с помощью технологии Microsoft Silverlight 2. В случае огромных изображений пользователю не придётся загружать всё изображение целиком, загружаются только необходимые для отображения части картинок. Когда картинка отображается на клиенте, сначала она показывается в минимальном разрешение, а затем происходит постепенная загрузка и отображение частей картинки в лучшем качестве.
Для этого специальное приложение (Deep Zoom Composer) генерирует файлы с изображениями и XML файл с описанием. Благодаря этому пользователь может просматривать гигапиксельные изображения или коллекции изображений, не загружая при этом лишние детали и части изображения, а значит уменьшаются требования к каналу связи. Надо сказать, что использование этой технологии не требует от разработчика существенных усилий, так как практически всё происходит автоматически.
Подробнее о технологии Deep Zoom можно узнать, посмотрев данный вебкаст (на русском).
Создание простого Silverlight приложения
Итак, после описания того, что такое Silverlight и некоторых его возможностей, давайте перейдём к практической части и создадим реальное, Hello World, Silverlight приложение. Итак, установлены все требуемые компоненты, открыта Visual Studio 2008 и мы начинаем.
В Visual Studio 2008 выберите в меню File->New Project, откроется окно «New Project»,в котором для того чтобы создать Silverlight приложение на языке C# мы выберем тип проекта Visual C#->Silverlight->Silverlight Application.
Назовём приложение «HelloWorldApp» и нажмём на кнопку «OK». После этого появится окно «Add Silverlight Application». В котором нам предложат создать ASP.NET web сайт или web приложение для хостинга и тестирования нашего Silverlight приложения. Так как Silverlight приложение не работает само по себе, а работает в среде браузера, нам нужна web страница, внутри которой наше приложение и будет находиться. В создаваемом ASP.NET проекте как раз и будет несколько таких страниц. Есть ещё второй вариант: динамически генерировать HTML страницу и не создавать ASP.NET проект. У каждого варианта есть свои плюсы и минусы, но в данной демонстрации мы выберем первый. Нажмите на кнопку «OK» и через несколько секунд перед нами откроется солюшен (Solution) нашего Silverlight приложения.
Внутри солюшена находятся два проекта. Первый – это ASP.NET приложение, в котором находятся страницы «HelloWorldAppTestPage.aspx» и «HelloWorldAppTestPage.html». На их примере можно увидеть, как производится хостинг Silverlight приложений внутри ASP.NET и HTML страниц соответственно. А второй проект — «HelloWorldApp», и есть собственно наше Silverlight приложение. После сборки(build) проекта Silverlight приложения, Visual Studio автоматически скопирует скомпилированный файл с расширением «.xap» (произносится «зап»), в папку «ClientBin» ASP.NET проекта. Благодаря этому Silverlight приложение и станет доступным для web страниц внутри ASP.NET проекта.
Так как Silverlight приложения не требуют какого-либо определённого web сервера, то нет и ограничений и на серверные технологии. Silverlight можно использовать совместно с ASP.NET, PHP, Ruby и любой другой серверной технологией, при этом сам web сервер (скажем, Apache) может работать на базе любой операционной системы, например Linux или FreeBSD.
Теперь посмотрим на проект «HelloWorldApp». Страница «Page.xaml» представляет собой главную страницу, именно её и уведет пользователь при загрузке нашего приложения. Давайте откроем данную страницу, если она ещё не открыта. Перед нами внизу появится окно редактора XAML кода, а сверху мы сможем увидеть графическое представление страницы. С помощью кнопки со стрелками можно поменять местами окно с кодом и графическим представлением. А кнопки в правой части панели позволяют расположить данные окна не горизонтально, а вертикально или даже скрыть одно из них.
Итак, страница описывается кодом на языке XAML. Она представляет собой UserControl, внутри которого находится менеджер размещения(Layout Manager) Grid (сетка). Именно внутри этого менеджера размещения и будет располагаться всё, что увидит пользователь: контролы, другие менеджеры размещения, богатая графика и.т.д.
Grid не единственный менеджер размещения, также могут быть использованы Canvas, DockPanel, StackPanel, Border и другие. Какой менеджер размещения использовать зависит от конкретного приложения.
Давайте удалим свойства длинны и ширины (Width и Height) у UserControl и вместо них зададим свойства минимальной длинны и ширины (MinWidth и MinHeight) со значениями 400 и 300 соответственно. Это позволит нашему приложению растягиваться на всю длину и ширину браузера, но при этом иметь размер не менее 400 на 300 единиц.
Теперь давайте изменим фон страницы. Для этого внутрь тега <Grid> вставим следующий код:
<Grid.Background>
<LinearGradientBrush>
<LinearGradientBrush.GradientStops>
<GradientStop Offset="0" Color="Yellow" />
<GradientStop Offset="1" Color="Red"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Grid.Background>
И удалим свойство Background="White", задающее белый цвет для фона страницы. Теперь наша страница имеет градиентную заливку, от жёлтого к красному, в качестве фона. Обратите внимание на два способа задания свойств объекта в языке XAML. Изначально у тега Grid было задано значение атрибута, устанавливающее фон. Мы же задали XAML код внутри самого тега. Значение любого свойства может быть установлено обоими способами, какой из них использовать зависит от специфики задачи.
Код, задающий свойство Grid.Background, создаёт новую градиентную кисть (LinearGradientBrush) и устанавливает эту кисть фоном менеджера размещения. Для градиентной кисти задаётся два цвета и указывается положение этих цветов на оси заливки.
Давайте теперь зададим имя «gradientRed» для второго элемента GradientStop, имеющего красный цвет. Это делается для того, чтобы к этому элементу можно было обращаться из других частей кода. Для этого мы зададим атрибут «x:Name» тега GradientStop:
<GradientStop Offset="1" Color="Red" x:Name="gradientRed"/>
Теперь добавим анимацию для фона. Для этого внутрь тега <Grid> вставим следующий код:
<Grid.Triggers>
<EventTrigger RoutedEvent="Grid.Loaded">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetName="gradientRed"
Storyboard.TargetProperty="Color" Duration="0:0:3"
To="WhiteSmoke" RepeatBehavior="Forever" AutoReverse="True"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Grid.Triggers>
Здесь задаётся триггер для сетки. Триггер представляет собой код, срабатывающий при каких-либо обстоятельствах. В данном случае триггер срабатывает по событию, о чём говорит его название — EventTrigger. Событие, по которому срабатывает триггер – это загрузка сетки Grid.Loaded, а сетка загружается вмести со страницей. Это значит, что триггер сработает при загрузке страницы. Когда триггер срабатывает, выполняются действия, заданные внутри триггера, а именно в секции EventTrigger.Actions. В данном случае есть одно такое действие – воспроизвести раскадровку (Storyboard). Внутри раскадровки находится анимация, которая и изменяет один из цветов в градиентной заливке (Storyboard.TargetName = "gradientRed" и Storyboard.TargetProperty = "Color") на оттенок белого (To = "WhiteSmoke"). Изменение происходит плавно за 3 секунды (Duration = "0:0:3"), а по завершению цвет возвращается в исходное состояние (AutoReverse = "True"). При этом данная анимация повторяется бесконечное число раз (RepeatBehavior = "Forever"). Существуют и другие виды анимация для разлиных типов свойств.
Теперь добавим на нашу страницу кнопку с текстом «Привет Silverlight» и именем «mainButton»:
<Button x:Name="mainButton" Content="Привет Silverlight"
Width="150" Height="75"
Click="mainButton_Click"/>
А для того, чтобы мы могли программно прореагировать на нажатие кнопки давайте добавим обработчик события «Click». Пишем внутри тега кнопки атрибут «Click», появляется подсказка «<New Event Handler>», два раза щёлкаем по подсказке и атрибут принимает значение «mainButton_Click». При этом в исходном коде на языке C# создаётся обработчик данного события. Щёлкаем правой кнопкой мыши в редакторе и в появившемся контекстном меню выбираем «View Code». Этой командой мы перешли к файлу исходного кода, в котором находим следующие строки:
private void mainButton_Click(object sender, RoutedEventArgs e)
{
}
Это обработчик события нажатия кнопки. Давайте установим в этом обработчике новое значение контента (в нашем случае контентом, то есть содержимым кнопки будет текстовая строка) для кнопки и добавим код, подсчитывающий количество нажатий:
static int i;
private void mainButton_Click(object sender, RoutedEventArgs e)
{ i++;
mainButton.Content = String.Format("Кнопка нажата {0} раз(а)", i.ToString());}
Для подсчёта нажатий мы добавим статическую переменю «i», значение которой будет увеличиваться на единицу при каждом нажатии кнопки. При загрузке страницы переменная инициализируется нулевым значением автоматически.
Итак, наше первое приложение готово, вот его полный XAML код:
<UserControl x:Class="HelloWorldApp.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
MinWidth="400" MinHeight="300">
<Grid x:Name="LayoutRoot">
<Grid.Triggers>
<EventTrigger RoutedEvent="Grid.Loaded">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetName="gradientRed"
Storyboard.TargetProperty="Color" Duration="0:0:3"
To="WhiteSmoke" RepeatBehavior="Forever" AutoReverse="True"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Grid.Triggers>
<Grid.Background>
<LinearGradientBrush>
<LinearGradientBrush.GradientStops>
<GradientStop Offset="0" Color="Yellow" />
<GradientStop Offset="1" Color="Red" x:Name="gradientRed"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Grid.Background>
<Button x:Name="mainButton" Content="Привет Silverlight"
Width="150" Height="75"
Click="mainButton_Click"/>
</Grid>
</UserControl>
Приложение представляет собой страницу, имеющую градиентный фон. Цвета градиентной заливки постоянно изменяются. На странице находится кнопка, при нажатии на которую текст на кнопке меняется, отражая количество нажатий.
Итак, сколько же занимает только что созданное нами Silverlight приложение? Откроем в Проводнике папку «ClientBin» из ASP.NET приложения. Напомню, в эту папку автоматически помещается скомпилированные Silverlight приложения. Наше приложение «HelloWorldApp.xap» весит 4.55Кб. Именно столько придётся скачать пользователю, чтобы данное приложение работало. Согласитесь, размер приложения весьма и весьма скромный.
Также хочется отметить, что «.xap» файл является ZIP архивом, вы можете сменить расширение файла с «.xap» на «.zip», разархивировать его и посмотреть что находится внутри.
Портирование приложения на Windows Presentation Foundation
Давайте теперь сделаем из нашего Silverlight приложения настольное WPF приложение. Для этого откроем ещё один экземпляр Visual Studio и создадим проект Visual C#->Windows->WPF Application. Скопируем XAML код внутри тега , находящийся на странице «Page.xaml» Silverlight приложения в файл «Window1.xaml» WPF приложения. Также скопируем код обработчика нажатия на кнопку мыши. Запустим получившееся приложение.
Как видите для портирования нашего Silverlight приложения на Windows платформу и полноценный .NET Framework 3.5 нам не потребовалось в данном случае вносить никаких изменений. Иногда, всё же, требуется внести некоторые изменения, но обычно они не значительны.
Итак, в данной статье было рассказано о технологии Silverlight и на примере показан процесс создания простого Silverlight приложения. Желаю вам удачи в изучении этой потрясающей технологии. И надеюсь, что c помощью технологии Silverlight вы создадите не одно потрясающее web приложение!
Пример кода к статье (532 Кб).