Byte/RE ИТ-издание

Silverlight – технология Microsoft для мультимедийных порталов

История создания, недостатки и возможности технологии Microsoft Silverlight.

В последнее время при разработке корпоративных систем все чаще приходится иметь дело как с «толстыми» клиентами, так и с Web-приложениями, функциональность которых сильно пересекается, — отсюда и естественное желание унифицировать разработку обоих типов. История создания Silverlight началась с технологии Windows Presentation Foundation (WPF), которая появилась в Microsoft .NET Framework 3.5. WPF представляет собой высокоуровневый объектно-ориентированный функциональный слой (framework), позволяющий создавать графические 2D- и 3D-интерфейсы. Основной элемент WPF — язык XAML (eXtensible Application Markup Language), декларативный XML-подобный язык, который описывает все представления, отображаемые подсистемой WPF. В XAML имеются четыре основные категории элементов: панели, элементы управления, элементы, связанные с документом, и графические фигуры. Основным минусом технологии WPF было то, что она предназначена для создания настольных приложений, и потому следующим логичным шагом в ее развитии стал перевод на мобильную платформу. Эта новая технология и получила название Silverlight.

Silverlight представляет собой средство создания графических интерфейсов для Web-приложений. Фактически это плагин для браузера (на данный момент поддерживаются Internet Explorer, Firefox в среде Windows, Safari и Firefox для Mac OS X), который позволяет показывать на страницах разработанные приложения. Любое приложение Silverlight содержит код JavaScript, который проверяет наличие установленного плагина, а при его отсутствии предлагает его загрузить. С помощью XAML в Silverlight описываются все графические элементы приложения, а также динамические изменения этих элементов. Кроме того, ключевыми нововведениями можно считать удобную работу с медиаконтентом и функциональность полного экрана, когда приложение Silverlight раскрывается на весь экран пользователя — без меню, строк состояния, навигации и т. д. На данный момент существуют две версии Silverlight — 1.0 Release и 2.0 Beta. Первая ориентирована на работу с мультимедиа, во второй предполагаются более широкие возможности, однако код, написанный на Silverlight 1.0, не может быть перенесен на Silverlight 2.0. Выпуск версии Silverlight 2.0 планируется на IV квартал 2008 г.

Silverlight 1.0 — достоинства и недостатки

Одной из предпосылок для создания технологии Silverlight стало то, что наиболее популярные сегодня технологии создания мультимедиа и презентаций — Adobe Flash и Web — имеют ряд недостатков. Основной из них связан с тем, что в одном коде тесно пересекаются логика и дизайнерские решения, и такое пересечение влечет за собой многочисленные проблемы при совмещении элементов графического дизайна и программного кода. Если при создании настольных приложений есть стандартные формы, и они понятны как разработчику, так и дизайнеру, то при разработке Web-приложений дело обстоит иначе.

Web предполагает большую свободу в выборе представлений, и дизайнеры в своей работе используют и изображения, и HTML, и другие возможности. Разработчикам же предстоит в них разбираться и переводить представление информации в удобный для разработки вид, что реализуется достаточно сложно: разработчик не всегда может точно перевести в приложение представления, созданные дизайнером, или же дизайнер вносит изменения, которые заставляют разработчика переделывать все заново. Такой процесс разработки подразумевает множество итераций и длительные сроки, подчас трудно прогнозируемые. Чтобы избежать подобного хода событий, участникам процесса нужно общаться на одном языке: или дизайнеры должны стать хорошими разработчиками (а добиться этого не так-то просто), или же разработчики должны научиться разбираться во всех представлениях, созданных дизайнером, что тоже достаточно проблематично (рис. 1).

Silverlight разработан именно для того, чтобы избавить разработчиков и дизайнеров от этих проблем, разделив их работу. Основные элементы Silverlight — это язык XAML, который описывает все представления, пакет программ для работы дизайнера Expression Studio и средство разработки Visual Studio, знакомое любому, кто занимается разработкой на платформе Microsoft.

В состав Expression Studio входят четыре инструмента:

  • Expression Web — проектирование Интернет-сайтов;
  • Expression Design — графический редактор для векторной графики;
  • Expression Blend — проектирование интерфейсов приложений в XAML;
  • Expression Media — организация работы с медиасодержимым на диске;
  • Expression Encoder — кодирование видео в различные форматы.

Сначала дизайнер подготавливает векторную графику с помощью Expression Design, CorelDraw или Adobe Illustrator. Далее в Expression Design графика экспортируется в XAML, с которым работает Expression Blend (рис. 2).

Инструмент Expression Blend ориентирован именно на дизайнера и предоставляет ему удобную среду для разработки. Описание интерфейса можно разделить на две части — статику и динамику. Импортировав графические элементы из Expression Design, дизайнер получает набор объектов (Canvas), на который накладывает динамику (Storyboard) — перемещение, изменение прозрачности, вращение и т. д. Таким образом, XAML представляет собой объектно-ориентированную модель — объекты и действия с ними, причем описание объекта может содержать в себе все действия над ним. При описании действий дизайнер оперирует временной шкалой и для каждой единицы времени может задать набор параметров объекта — местоположение, прозрачность, размеры и т. д. (рис. 3).

Далее разработчик, не вникая в дизайнерские элементы, оперирует ими целиком и пишет код в привычной для него среде Visual Studio. Если дизайнеру требуется внести изменения, он делает их независимо от разработчика. Таким образом, в Silverlight граница взаимодействия прописана гораздо четче, чем в технологиях Web или Adobe Flash, и процесс конвертации исчезает как таковой. Дизайнер и разработчик работают одновременно, не мешая друг другу. Языком разработки служит JavaScript с дополнительным набором классов. Чтобы получить или изменить свойство любого именованного объекта, описанного в XAML, достаточно простого вызова (элемент прячется под все остальные):

source.findName(‘ThumbImage’)["canvas.ZIndex"] = -1;

При создании Silverlight 1.0 акцент делался на богатые мультимедиа-возможности и удобную работу с аудио- и медиаконтентом. Однако взаимодействие элементов, обработка действий пользователя и другая логика работы интерфейса описываются с помощью JavaScript, что усложняет промышленную разработку с использованием данной технологии. Собственно приложение Silverlight состоит из HTML-страницы с кодом вызова Silverlight, XAML c описанием интерфейса и набора файлов JavaScript, описывающих логику. Тем не менее, если задача, например, состоит в разработке Web-приложения для проигрывания видео (плеер), Silverlight представляется оптимальным решением. Так, код для проигрывания видео с помощью Windows Media Player на странице вряд ли можно считать простым и понятным для разработки, а кроме того, он практически не позволяет настроить дизайн под себя:

<object width="320" height="285" id="playwideo" type="application/x-oleobject" standby="Loading Microsoft Media Player components…" codebase="http://www. microsoft.com/ntserver/netshow/download/en/nsmp2inf.cab#Version=5,1,51,415" 0080c74c7e95="" classid="CLSID:22D6f312-B0F6-11D0-94AB-"&rt; <param value="true" name="autostart"&rt;</param&rt; <param value="mms://video.rfn.ru/rtr-vesti/134527.asf" name="filename"&rt;</param&rt; <param value="true" name="controltype"&rt;</param&rt; <param value="false" name="showdisplay"&rt;</param&rt; <param value="true" name="showcontrols"&rt;</param&rt; <param value="high" name="quality"&rt;</param&rt; <embed width="320" height="285" id="playwideo" showcontrols="1" showdisplay="0" src="mms://video.rfn.ru/rtr-vesti/134527.asf" pluginspage="http://www.microsoft.com/windows/mediaplayer/download/default.asp" type="video/x-ms-asf-plugin"&rt;</embed&rt; </object&rt;

В то же время Silverlight cодержит стандартный XAML-элемент, который позволяет проигрывать видео- или аудиоконтент:

<mediaelement x:name="VideoWindow" width="636" height="480" canvas.left="2" canvas.top="35" source=" mms://video.rfn.ru/rtr-vesti/134527.asf"&rt; </mediaelement&rt;

Этот элемент можно органично встроить в нужный интерфейс, и он не будет из него стилистически выпадать. Далее с помощью JavaScript разработчик может управлять этим элементом:

source.findName(‘VideoWindow’).play();

Еще одним новшеством, упрощающим работу с медиаконтентом, стала возможность развернуть окно приложения на весь экран клиента (рис. 4.). Управление таким переходом и возвратом в нормальное состояние тривиально и входит в число стандартных функций Silverlight:

root.getHost().content.fullScreen = !root.getHost().content.fullScreen;

Пример проекта

Одним из первых в России проектов с использованием технологии Silverlight стал сайт трансляции видеоматериалов для телеканала «Спорт», разработанный компанией «Аплана» (www.aplana.ru). Этот проект показателен с точки зрения сроков реализации — они были весьма жесткими, поэтому классическая схема, когда сначала дизайнеры разрабатывают интерфейсы, а далее к процессу подключаются разработчики, не годилась. В проекте для телеканала «Спорт» за счет использования технологии Silverlight работы шли параллельно, и в результате сроки были сокращены вдвое. Несмотря на то что дизайн несколько раз переделывался, на деятельность разработчиков это никак не повлияло, поскольку все изменения дизайнеры вносили внутри объектов, а разработчики оперировали этими объектами как единым целым.

Silverlight — хронология развития

В октябре 2003 г. Microsoft (www.microsoft. com) объявила о намерении создать ОС Windows нового поколения, которая получила кодовое название Longhorn. Тогда же было сказано, что эта ОС будет базироваться на новой модели программирования WinFX, состоящей из трех основных компонентов, один из которых, Avalon, отвечал за реализацию пользовательского интерфейса приложений. Одной из ключевых идеей Avalon было использование декларативной модели программирования интерфейса с применением нового языка XAML и с переходом от растровой графики к векторной. В последующие три года все эти идеи и концепции постепенно приобретали форму конкретных технологий: Longhorn получила официальное имя Vista, WinFX — .NET Framework 3.0, Avalon — Windows Presentation Foundation (WPF).

Однако примерно в 2005 г. стало понятно, что вектор развития средств разработки направлен в сторону RIA (rich interface application), что подразумевает, в частности, возможность создавать Web-приложения с функциональностью интерфейса, имевшейся к тому времени только у «толстых» Windows-приложений. Решение этой задачи требовало создания дополнительной среды исполнения для Web-браузеров. Проблема же заключалась в том, что если браузеры базируются на некоторых отраслевых спецификациях, то для подобных RIA-расширений никаких единых стандартов выработать не удалось, и в этой сфере началась борьба поставщиков.

В начале 2006 г. в борьбу на поле RIA вступила Microsoft, объявив о намерении создать свой базовый операционный слой Windows Presentation Foundation/Everywhere (WPF/E), предназначенный для кросс-исполнения приложений в среде Web-браузеров. Уже из самого названия понятно, что WPF/E представлял собой усеченный вариант WPF, адаптированный для Web.

Предварительный вариант WPF/E был представлен разработчиками еще весной 2006 г., а окончательный вариант был обещан к концу года. Но оказалось, что реализация данного проекта не так проста, — сроки выпуска WPF/E несколько раз сдвигались. И это при том, что конкуренты (в первую очередь Adobe и сообщество Eclipse) быстро увеличивали свою активность в этом направлении. Конкуренция заставила Microsoft также форсировать события: в апреле 2007 г. корпорация заявила, что WPF/E теперь будет официально называться Silverlight («Серебряный рассвет»), и представила первую его бета-версию.

Тогда же было объявлено о скором начале поставок нового продукта Expression Studio, предназначенного для широкого круга профессионалов, занимающихся созданием функционально насыщенных Web-решений. Сильная сторона этого пакета — тесная интеграция с Visual Studio, что дает разработчикам и дизайнерам возможность одновременно работать над созданием интерфейсов клиентских приложений, в том числе используя новейшие платформенные технологии Windows Presentation Foundation и Silverlight.

В сентябре 2007 г. Microsoft объявила о доступности Silverlight 1.0 для свободного скачивания. В этом варианте технологии главный акцент явно был сделан на работу с мультимедийной информацией, в частности с потоковым видео. Предполагалось, что дополнительные возможности для использования Silverlight в бизнес-приложениях появятся в версии 1.1, которая планировалась на конец того же года. Но в ноябре стало известно, что версии 1.1 не будет: следующим станет выпуск Silverlight 2.0, который откладывался на 2008 г.

Уже в момент выпуска Silvetlight 1.0 был виден главный ее недостаток по сравнению, например, с технологиями Adobe, — ограниченный спектр поддерживаемых платформ, как ОС, так и Web-браузеров. Но Microsoft предприняла некоторые шаги в этом направлении: в момент объявления технологии Silverlight 1.0 компания сообщила, что она совместно с Novell готовит к запуску проект ее поддержки для Linux (пока Silverlight работает только на платформах Windows и Macintosh). Проект получил название Moonlight и реализуется на open source-платформе mono-project.com (независимая реализация среды .NET для Linux).

В мае 2008 г. Microsoft представила обновленный пакет инструментов для Web-разработчиков и дизайнеров Expression Studio 2. В состав первого варианта пакета, выпущенного годом ранее, входили три инструмента: Expression Web (EW), Expression Blend (EB) и Expression Design (ED), ориентированные соответственно на Web-разработчиков, дизайнеров и разработчиков клиентских Windows-приложений. Все эти средства получили развитие во второй версии. В частности, EW 2 теперь поддерживает язык программирования PHP и позволяет импортировать файлы из Adobe Photoshop. В EB 2 в дополнение к полной поддержке Silverlight реализована поддержка векторной анимации, пользовательский интерфейс стал более удобным за счет одновременного представления панелей «Дизайн» и XAML. В ED 2 улучшены функции экспорта, включая возможность экспортировать разметку проекта.

Кроме того, в Expression Studio 2 включены два новых инструмента: Expression Media (EM) — решение для управления ресурсами, предназначенными для профессиональных фотографов и дизайнеров, и Expression Encoder (EE) — средство оптимизации видеоконтента и его размещения в Интернете в виде потокового видео, мультимедийной рекламы и других форматов Web 2.0.

В июне 2008 г. была выпущена вторая бета-версия Silverlight 2, представленная в виде лицензии Go Live (пригодной для коммерческой разработки). Тогда же стало известно, что компания NBC Universal намерена именно с ее помощью вести Интернет-трансляции с Олимпийских игр в Пекине. В июле должны также выйти предварительные версии Expression Blend 2.5 June 2008 Preview и Microsoft Silverlight Tools beta 2 for Visual Studio 2008.

Андрей Колесов

Разработанный сайт обеспечивает удобный доступ к перечню трансляций и более качественное воспроизведение видео- и аудиотрансляций при относительно небольших требованиях к ресурсам. В рамках проекта были улучшены пользовательские качества сайта, удобнее стало и работать с каталогом трансляций, и просматривать видео. Благодаря новому функционалу все пользователи сайта могут просматривать видеоматериалы на странице видеоархива и в двух полноэкранных режимах — просмотра каталога трансляций и просмотра видео.

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

Silverlight 2.0

Тем не менее версия Silverlight 1.0 ориентирована скорее на мультимедиа и не подходит для полномасштабной разработки Web-приложений. В конце 2008 г. ожидается релиз второй версии, к которому Microsoft начала готовиться сразу после выхода первой.

В качестве одного из способов обсуждения проблем текущей версии и сбора пожеланий к последующим Microsoft практикует организацию конференций для разработчиков, на которых демонстрирует направление развития технологий и общается с разработчиками со всего мира. На семинаре для разработчиков в среде Silverlight, состоявшемся в начале 2008 г. в штаб-квартире Microsoft в Редмонде, среди наиболее интересных тем для обсуждения были следующие: организация взаимодействия с источниками данных с помощью технологии LINQ (Language Integrated Query — проект добавления синтаксиса языка запросов, напоминающего SQL, в языки программирования платформы .NET Framework), сетевое взаимодействие, поддержка работы мобильных устройств, элементы управления. Там же была представлена технология Sea Dragon, предназначенная для так называемого глубокого масштабирования (deep zoom), которую можно использовать для картографических систем. В конце каждой презентации раздавались анкеты под названием One hundred dollar questions, где предлагалось отдать 100 виртуальных долларов за выбранные возможности из числа тех, которые предполагается реализовать в последующих версиях. Результаты опросов Microsoft не разглашает, но на основе обсуждений участников наибольшее внимание было уделено в первую очередь пользовательским элементам управления (DataGrid и стандартным — Combobox, Calendar и т. д.), а далее — усовершенствованиям DataBinding, поддержке различных платформ, собственной разработке клика правой кнопки мыши, усовершенствованию работы с перехватом событий нажатия кнопок на клавиатуре. Будут ли данные пожелания учтены, пока неизвестно, но о некоторых недостатках первой версии, которые будут исправлены в новой, можно говорить с уверенностью.

Один из главных недостатков Silverlight 1.0 — использование JavaScript. Это неформализованный язык, с ним тяжелее работать, он требует больших навыков. Разработчики Silverlight это понимают, поэтому самым главным улучшением во второй версии станет переход на языки .NЕТ (C#, Visual Basic, C++). Использование этих языков значительно улучшает процесс разработки, так как они более формализованы, на них легче вести разработку, их проще развивать и поддерживать.

Второй большой минус, который ограничивал возможности Silverlight 1.0, — это отсутствие стандартных элементов управления. Изначально Silverlight 1.0 развивался по пути Adobe Flash — технологии создания анимационных и мультимедийных порталов. Для этого в Silverlight 1.0 был предусмотрен широкий набор готовых к использованию плееров со всеми «обвязками» — воспроизведение, пауза, громкость, перемотка и т. д. По сравнению с Adobe Flash в Silverlight 1.0 на этом сделан больший акцент, использовать их намного проще, и это безусловный плюс продукта. Минус же заключается в отсутствии стандартных элементов управления, которые позволяли бы создать какие-либо поля ввода данных и установить двустороннее взаимодействие с пользователем. Это неудобно, и потому разработчики Silverlight обогащают версию 2.0 как стандартными, так и новыми элементами управления, которые позволят строить полномасштабные мультимедиапорталы без вкрапления инородных технологий.

Наконец, третьим заметным улучшением технологии Silverlight станет поддержка работы мобильных устройств. На сегодня версия 1.0 поддерживает наиболее популярные браузеры для настольных компьютеров; в Silverlight 2.0 планируется расширить их число за счет поддержки мобильных устройств.

Вам также могут понравиться