Знакомство с Silverlight

• Лоренс Морони (Laurence Moroney), Корпорация Майкрософт

В данном техническом документе содержится общий обзор технологии Silverlight и определяется ее место среди инструментов разработки веб-приложений нового поколения. (8 печатных страниц)

Что такое Silverlight?

Silverlight — это название новой технологии представления данных в Интернете, предназначенной для запуска на различных платформах. Она позволяет создавать насыщенные, визуально привлекательные веб-страницы, работающие в различных обозревателях, устройствах и настольных операционных системах (например Apple Macintosh). Ключом к возможностям Silverlight, как и ко всей технологии представления WPF (Windows Presentation Foundation) платформы Microsoft .NET Framework 3.0, является XAML (eXtensible Application Markup Language, расширяемый язык разметки приложений).

Эта статья познакомит вас с основами технологии Silverlight и с тем, как использовать для создания насыщенных графикой страниц инструменты корпорации Майкрософт Expression Blend, Microsoft Visual Studio 2005 и XAML. Начнем с описания предпосылок возникновения Silverlight и места этой технологии в наборе инструментов разработчика.

Эволюция разработки веб-приложений. Переход к Web.Next

Когда Тим Бернерс-Ли, сотрудник CERN, изобретал современную технологию «веб», он задумывал ее как систему, позволяющую хранить и связывать между собой статические документы в сетевой среде. С течением времени и развитием технологий следующим логическим шагом стало появление «активных» обновляемых документов, которые создаются по запросу с учетом пользовательской информации или временных параметров. Это стало возможным благодаря таким технологиям, как CGI. Еще какое-то время спустя, возможность создания документов в Интернете стала основной, а технология прошла путь от CGI через Java и ASP к ASP.NET.

Технология ASP.NET стала вехой на пути разработчика к быстрому созданию качественных веб-приложений с помощью парадигмы разработки на стороне сервера и оптимально подобранных инструментов серии Visual Studio.

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

Объект XMLHttpRequest, выпущенный Майкрософт в составе Internet Explorer 5 в 2000 г, открыл дорогу для технологии Asynchronous JavaScript и XML (AJAX), позволившей веб-приложениям более динамично реагировать на действия пользователя, обновляя небольшие части веб-страницы и не требуя ее полной перезагрузки. Инновационные решения, построенные на основе AJAX, например карты Windows Live Local, приблизили веб-приложения к уровню удобства обычных клиентских программ.

Технология Silverlight — следующий шаг на пути расширения возможностей, которые разработчики и дизайнеры могут предоставить потребителям. Она дает дизайнерам возможность выразить свои творческие идеи и сохранить результат в том формате, который можно сразу же публиковать в Интернете. Дизайнеры могли и раньше проектировать веб-страницы, предоставляющие богатые возможности пользователю, но программисты, реализующие их замыслы, были вынуждены считаться с ограничениями веб-платформ. В рамках модели Silverlight любое созданное дизайнерами решение сохраняется в виде XAML. Этот XAML-документ впоследствии автоматически встраивается в веб-страницу с помощью среды выполнения Silverlight. В результате дизайнер и программист могут работать над конечным результатом более слаженно, чем когда-либо ранее.

Поскольку технически XAML — это XML, он представляет собой простой текст, а значит, не вызывает конфликтов с брандмауэрами, легко доступен для просмотра, и при этом описывает различное содержимое. Некоторые технологии – Java, ActiveX, Flash – в настоящее время широко применяются в дополнение к языкам DHTML, CSS и JavaScript и расширяют содержимое веб-страниц, но их роднит один недостаток — данные передаются в обозреватель в двоичном виде. Такую информацию сложно проверить на предмет безопасности, не говоря уже о сложности ее обновления — для реализации любых изменений требуется переустановка всего приложения, что неудобно для пользователя и зачастую приводит к торможению веб-страниц. При изменении содержимого страницы средствами Silverlight новый XAML-файл создается на стороне сервера. При следующем просмотре страницы происходит загрузка этого файла, а значит, потребность в переустановке отпадает.

Сердцем технологии Silverlight является модуль расширения для обозревателя, который обрабатывает XAML и отображает итоговое изображение в поле обозревателя. Загрузочный файл невелик (менее 2 MБ), и может быть установлен при посещении пользователем узла с содержимым, создававшимся с использованием Silverlight. Модуль предоставляет разработчикам доступ к функциям XAML-страницы на языке JavaScript, таким образом, становится возможным взаимодействие с содержимым на уровне страницы и разработчик может, например, создать обработчики событий или управлять содержимым XAML-страницы с помощью JavaScript-кода.

Однако, хватит с нас теории. Давайте перейдем к практике и посмотрим, каким получится наш первый проект Silverlight.

Создание простого приложения по технологии Silverlight

Для начала попробуем создать с помощью Microsoft Expression Blend очень простое XAML-приложение для Silverlight. Для этого в меню File (Файл) выберем пункт New project (Создать проект), после чего появится диалоговое окно New Project (Создание проекта).

Нажмите кнопку ОК, и проект будет создан. Он будет содержать HTML-страницу по умолчанию с фоновым кодом JavaScript, документ XAML, фоновый JavaScript-код для него и файл Silverlight.js.

Последний содержит код для загрузки и создания экземпляра элемента управления Silverlight. Все это — часть комплекта Silverlight SDK.

Файл Default.html — стандартная веб-страница на языке HTML. Она содержит три ссылки на файлы с кодом JavaScript — Silverlight.js, Default.html.js (содержит зависящий от приложения код создания экземпляра Silverlight) и Scene.xaml.js (содержит обработчики событий, определенных приложением в XAML).

Такая схема используется для разделения страницы (default.html), кода создания экземпляров (default.html.js), дизайна (Scene.xaml) и обработчиков событий (Scene.xaml.js). Но хватит теории, приступим к разработке.

Создание пользовательского интерфейса для видеопроигрывателя

Добавим к проекту видеофайл. Для этого нужно щелкнуть правой кнопкой мыши окно Project Files (Файлы проекта) в правом верхнем углу экрана и выбрать пункт Add Existing Item... (Добавить существующий элемент...). .

Выбрав файл WMV и добавив его к проекту, мы увидим, как тот появится в обозревателе проекта, а на поле будет добавлен элемент Media.

Теперь можно запустить проект — запустится обозреватель, а в нем будет проигрываться видео!

Автоматическое проигрывание видео можно отменить, отредактировав XAML. Справа от конструктора XAML находятся две вкладки: Design (Конструктор) и XAML. Перейдем на вкладку XAML. Откроется редактор (рис. 3). Используем его для правки XAML элемента MediaElement: добавим атрибут AutoPlay=False.

Теперь, запустив приложение, мы обнаружим, что Silverlight показывает первый кадр видео, но не проигрывает его.

Добавление в видеопроигрыватель элементов управления

Добавим к приложению два текстовых блока, приписав им текст Play (Воспроизведение) и Stop (Остановка) и имена txtPlay и txtStop соответственно. По завершении XAML-код будет выглядеть примерно так:

<Canvas
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   Width="640" Height="480"
   Background="White"
   >
   
<MediaElement AutoPlay="False" x:Name="Movie_wmv" 
	Width="320" Height="240" Canvas.Left="128" Canvas.Top="56" 
	Source="Movie.wmv" Stretch="Fill"/>
   
<TextBlock x:Name="txtPlay" Width="72" Height="24" 
	Canvas.Left="136" Canvas.Top="336" Text="Play" 
	TextWrapping="Wrap"/>
 
   <TextBlock x:Name="txtStop" Width="80" Height="24" 
   Canvas.Left="136" Canvas.Top="368" Text="Stop" 
   TextWrapping="Wrap"/>
</Canvas>

Теперь добавим в код этих блоков обработчики событий. Для этого объявим обработчик щелчка мыши с помощью атрибута MouseLeftButtonDown. К текстовому блоку txtPlay добавим обработчик DoPlay, а к блоку txtStop — обработчик DoStop. По завершении XAML будет выглядеть так:

<TextBlock x:Name="txtPlay" Width="72" Height="24" 
			Canvas.Left="136" 
      Canvas.Top="336" Text="Play" TextWrapping="Wrap"  
      MouseLeftButtonDown="javascript:DoPlay"/>
 
<TextBlock x:Name="txtStop" Width="80" Height="24" Canvas.Left="136" 
      Canvas.Top="368" Text="Stop" TextWrapping="Wrap" 
      MouseLeftButtonDown="javascript:DoStop"/>

Теперь, если пользователь щелкнет мышью на любом из блоков, возникнет событие, которое можно перехватить и обработать в функции на JavaScript.

Обработка событий на языке JavaScript

В шаблон проекта входит файл Scene.xaml.js, используемый для перехвата и обработки на JavaScript событий, инициируемых пользователем. Указав в XAML обработчики DoPlay и DoStop, мы должны реализовать их в этом файле:

function DoPlay(sender, eventArgs)
{
   var theHost = document.getElementById("SilverlightControl");
   var theMedia = theHost.content.findName("Movie_wmv");
   theMedia.Play();
}
 
function DoStop(sender, eventArgs)
{
   var theHost = document.getElementById("SilverlightControl");
   var theMedia = theHost.content.findName("Movie_wmv");
   theMedia.Stop();
}

Здесь элемент управления Silverlight назван SilverlightControl, а переменная JavaScript с именем theHost содержит ссылку на него. С ее помощью находится элемент Media, который в нашем случае назван Movie_wmv. Этот элемент был создан при добавлении в проект видеофайла, и его имя сгенерировано на основе имени файла. Раз файл назывался Movie.wmv, элемент получил имя Movie_wmv. Если бы имя файла было другим, другим было бы и имя элемента управления.

У медиа-элемента есть методы Play и Stop, используемые для запуска и остановки воспроизведения.

Раз у нас есть ссылка на этот элемент, мы можем вызывать эти методы, запуская и останавливая воспроизведение видео (рис. 4).

Мы создали наше первое приложение на Silverlight! Подробнее об этой технологии можно узнать в новом центре разработчиков Silverlight (EN) и на веб-узле http://www.silverlight.net/ (EN).

Как вызывается Silverlight

HTML-страница содержит вызов метода createSilverlight(), находящегося в фоновом коде Default.html.js.

Sys.Silverlight.createObjectEx({
      source: "Scene.xaml",
      parentElement: document.getElementById("SilverlightControlHost"),
      id: "SilverlightControl",
      properties: {
         width: "100%",
         height: "100%",
         version: "0.9"
      },
      events: {
         onLoad: Sys.Silverlight.createDelegate(scene, scene.handleLoad)
      }
   });

В него передается ряд свойств, в том числе те, что используются для указания отображаемого XAML-кода, внешнего вида элемента управления Silverlight и обработчиков событий onLoad и onError.

Свойство source: используется для определения XAML, который нужно отобразить на странице. Это может быть внешний файл (как в нашем случае) или расположенный на странице именованный тег <script>, содержащий XAML-код.

Размещая элемент управления Silverlight на странице, нужно поместить его в именованный тег <DIV>. Свойству parentElement: следует присвоить имя этого тега <DIV>.

Идентификатор элемента управления указывается в свойстве id:.

Физические характеристики — высота, ширина и версия — задаются с помощью массива, передаваемого свойству properties:. Полный список этих свойств см. в документации Silverlight SDK (EN).

Заключение

В этой статье дан общий обзор технологии Microsoft Silverlight и того, какое место она занимает среди средств разработки нового поколения веб-приложений. Было продемонстрировано, как в языке XAML сочетаются язык дизайна, инструмент программиста и способ представления контента пользователю. Рассмотрен инструмент Expression Blend и то, как с его помощью разрабатывается пользовательский интерфейс веб-страниц, управляемый языком JavaScript.

Все это — лишь мизерная доля возможностей, которыми обладает Silverlight. Их более чем достаточно, чтобы начать создавать Интернет нового поколения. Это будет популярная платформа — не пропустите!