| Что такое 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. Их более чем достаточно, чтобы начать создавать Интернет нового поколения. Это будет популярная платформа — не пропустите!
| 
