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

Автор:

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

Опубликовано: 30 апреля 2007 г.

Продукты и технологии: Microsoft Silverlight (ранее известная под кодовым именем WPF/E), Microsoft Expression Blend

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

На этой странице…

Что такое Silverlight? Что такое Silverlight?
Эволюция разработки веб-приложений. Переход к Web.Next Эволюция разработки веб-приложений. Переход к Web.Next
Создание простого приложения по технологии Silverlight Создание простого приложения по технологии Silverlight
Создание пользовательского интерфейса для видеопроигрывателя Создание пользовательского интерфейса для видеопроигрывателя
Как вызывается Silverlight Как вызывается Silverlight
Заключение Заключение

Оригинал статьи (EN)

Что такое 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 (Создание проекта).

 Рис. 1. Создание нового проекта Silverlight с помощью Expression Blend

Нажмите кнопку ОК, и проект будет создан. Он будет содержать 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.

 Рис. 2. Добавление медиа-элемента на XAML-поле

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

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

 Рис. 3. Изменение XAML-кода в редакторе

Теперь, запустив приложение, мы обнаружим, что 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).

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

Показ: