4 рисунка

Луч света в Интернете: Microsoft Silverlight 2

 

Александр Порубов, Сергей Пугачев

 

Современные веб-приложения предоставляют множество удобств и пользователям, и разработчикам. Только представьте: каждый пользователь может зайти на сайт с любого компьютера с помощью любого браузера и для работы с веб-приложением не понадобится ничего устанавливать и менять. А разработчику достаточно создать одну-единственную версию приложения, способную гарантированно работать на любой платформе. И при этом пользователи всегда будут получать только самую свежую версию. Но за все приходится платить: в веб-приложениях гораздо труднее реализовать функциональность, легко доступную для настольных программ, которые позволяют применять даже самую сложную графику, имеют лучшее время отклика, являются более интерактивными и производительными.


Решения для построения насыщенных интернет-приложений

Обычный веб-сайт создается из таких элементов, как HTML-разметка, CSS-стили и код на языке JavaScript или PHP. Надо заметить, данный набор изначально не предназначался для реализации полнофункционального пользовательского интерфейса. Поэтому сделать насыщенный веб-интерфейс, сравнимый по возможностям с настольными приложениями, порой оказывается весьма непросто. Частично задача может решаться с помощью технологии AJAX, но для достижения нужного эффекта ее, конечно, не хватает.

Выход все же есть. Между настольными и традиционными интернет-приложениями стоят насыщенные интернет-приложения (RIA -- Rich Internet Аpplications), совмещающие достоинства и тех и других. Под определение RIA подпадают несколько различных конкурирующих между собой технологий, например Adobe Flash/Flex и Sun JavaFX.

О создании насыщенных интернет-приложений на базе Adobe Flash/Flex мы уже писали на страницах нашего журнала (см. «Мир ПК» №3/08, с. 62 и №9/08, с. 60)

В этой статье речь пойдет о платформе Silverlight -- решении, предложенном Microsoft. Вторая версия данной технологии вышла 14 октября 2008 г., а сейчас уже доступна обновленная версия Silverlight 2 GDR1. В основе данной платформы лежит технология WPF (Windows Presentation Foundation, входящая в .NET Framework начиная с версии 3.0), которая позволяет снять любые технические ограничения на внешний вид приложений.

 

Silverlight-приложения

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

Первым крупным шагом к популяризации технологии стала прямая многопоточная онлайновая трансляция Олимпийских игр в Пекине, проведенная с помощью мультимедийной системы, написанной на Silverlight. Миллионы зрителей смогли насладиться Олимпиадой, не потерявшей зрелищности в процессе доставки через Всемирную паутину благодаря видеопотокам высокого разрешения.

Опыт, оказавшийся успешным, был применен при инаугурации нового президента США Барака Обамы. Объединенный комитет Конгресса по церемонии инаугурации выбрал для ее трансляции Silverlight (кстати, она же использовалась и для трансляции инаугурации Дмитрия Медведева). Это стало еще одним мощным толчком, благодаря которому последняя версия Silverlight имеется уже у каждого четвертого пользователя Интернета.

Кроме того, официальный сайт телеканала «Спорт» (Sportbox.ru) предоставляет возможность смотреть ролики спортивной тематики и прямые трансляции наиболее интересных матчей и соревнований с помощью Silverlight-плеера.

Но не думайте, что эта платформа пригодна лишь для передачи видео, это далеко не так. За примерами далеко ходить не нужно -- российский сайт журнала VOGUE (vogue.ru) прибегает к Silverlight, чтобы проводить показ коллекций одежды различных дизайнеров в интерактивном режиме. Технология Deep Zoom, входящая в состав Silverlight 2, позволяет перемещаться по галерее моды и одним щелчком мыши увеличивать интересующие фрагменты фотографий, чтобы более тщательно их изучить.

Невозможно пройти и мимо Бибигоши (Bibigosha.ru/silverlight) -- забавного виртуального мира для детей, в котором ребенок может путешествовать по разным локациям и играть в развивающие мини-игры, вплетенные в сюжет.

 

>>>picture 3.jpg. Подпись:

В Бибигошу играют не только дети

 

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



>> Picture 2.png.Подпись:

С помощью Silverlight был значительно улучшен интерфейс сайта hyper-v.ru



Работа с Silverlight-технологией

Сейчас технология Silverlight доступна на платформах Windows и Mac OS X. Кроме того, компания Novell в рамках проекта Moonlight по соглашению с Microsoft реализовала ее и для Linux. Значит, у 99% всех пользователей Интернета могут работать Silverlight-приложения.

Технология Silverlight -- клиентская, все приложения запускаются внутри браузера. Именно поэтому нет ограничений ни на используемый веб-сервер, которым может быть, например, IIS на Windows Server или Apache на Linux, ни на серверную технологию, включая ASP.NET, PHP, Perl, Ruby и т. д. Уже сейчас Silverlight официально поддерживают Internet Explorer 6 и выше, Firefox 1.0 и выше, Safari 1.0 и выше. Кроме того, браузеры Opera и Google Chrome справляются с запуском большинства Silverlight-приложений, несмотря на то, что в официальных документах об этом и не сказано. Так как почти у каждого пользователя есть хотя бы один из этих браузеров, нет никаких преград для создания Silverlight-проектов.

Сколько бы платформ и браузеров ни поддерживала технология, все равно для работы с ней пользователю надо установить на свой компьютер необходимые компоненты. А в случае с Silverlight достаточно один раз скачать и инсталлировать плагин для браузера, имеющий объем около 4,5 Мбайт. Это займет считаные секунды и потребует только одного нажатия кнопки мыши.

Поскольку Silverlight-приложения работают в изолированном пространстве, так называемой «песочнице» (sandbox), у них нет непосредственного доступа к компьютеру пользователя. Все взаимодействие происходит через безопасную библиотеку классов, являющуюся подмножеством библиотеки классов из .NET Framework. Поэтому пользователь может работать с Silverlight -приложениями, не опасаясь загрузить зловредный код.

А теперь перейдем к технической стороне вопроса. Как уже было сказано, Silverlight-приложения функционируют внутри браузера. Они поддерживают анимацию, векторную графику, аудио и видео (в том числе потоковую передачу, адаптивность к ширине канала и видео высокой четкости), а также связывание с данными (data binding), доступ к веб-сервисам по протоколам REST WS*/SOAP, POX, RSS, HTTP и многое другое. Кроме того, можно легко настраивать или даже изменять до неузнаваемости внешний вид любых элементов управления благодаря стилизации и развитой системе шаблонов, что особенно нравится дизайнерам.

С точки зрения программиста, Silverlight 2 представляет собой специальную мини-версию .NET Framework. Поэтому Silverlight-приложения можно разрабатывать с помощью знакомых языков программирования, например C#, Visual Basic, IronRuby, IronPython. Для создания пользовательского интерфейса в Silverlight, как и в WPF, применяется декларативный, основанный на XML, язык XAML (eXtensible Application Markup Language). При этом для работы Silverlight-приложений не требуется устанавливать большой .NET Framework какой-либо версии.

Итак, если вы пользователь, то просто установите Silverlight на компьютер и получайте удовольствие от работы насыщенных веб-приложений. Кроме того, инсталлировав Microsoft Expression Encoder, можно кодировать и редактировать видео для просмотра в онлайновом режиме, а также получить более десятка вариантов аудио/видеоплеера Silverlight, чтобы вставлять видео на веб-страницы.

Если же вы хотите заняться разработкой Silverlight-приложений, то вам понадобятся Microsoft Visual Studio 2008 (подойдет любая версия, в том числе и бесплатная -- Express) и Silverlight Tools for Visual Studio 2008 (можно скачать бесплатно). Они включают в себя дистрибутив Silverlight, дополнения для Visual Studio, а также Silverlight 2 SDK, содержащий документацию, примеры, дополнительные элементы управления и компоненты для интеграции с ASP.NET.

В случае, когда вы имеете опыт разработки .NET приложений, можете сразу начать создавать Silverlight-приложения. Большая часть необходимых знаний у вас уже есть. А потратив совсем немного времени на обучение, вы станете полноправным Silverlight-разработчиком. Однако тем, у кого нет опыта разработки под .NET, стоит изучить Silverlight. Основа всех .NET-приложений одна и та же, поэтому, когда вы разберетесь с Silverlight, вам не потребуется много времени, чтобы перейти к созданию настольных Windows-приложений, приложений для смартфонов (.NET Compact Framework), игр (XNA Game Studio), веб-приложений (ASP.NET) и даже программ для роботов (Robotics Studio). Язык везде один, базовая библиотека общая, как, впрочем, и среда разработки.

Microsoft выпускает также и инструмент для дизайнеров -- Microsoft Expression Blend (текущая версия -- 2.0 SP1), позволяющий создавать дизайн WPF- и Silverlight-приложений. Несмотря на то что и дизайнер, и разработчик используют разные инструменты, они работают с одними и теми же файлами благодаря языку XAML. Впрочем, применять непосредственно XAML дизайнеру обычно не приходится. Разработчик создает логику работы и базовый внешний вид Silverlight-приложения, а дизайнер, открыв тот же самый проект, делает красивый пользовательский интерфейс, не затрагивая логику работы. И все довольны. Поэтому если дизайнер освоит Expression Blend, то сможет, не прикладывая чрезмерных усилий, создавать внешний вид настольных и Silverlight-приложений.


Реализация на практике

Итак, давайте создадим простое приложение. Для этого требуются Visual Studio 2008 и Silverlight Tools for Visual Studio.

Откройте Visual Studio 2008 и в меню выберите File*New Project. Укажите тип проекта -- Visual C#*Silverlight*Silverlight Application (используется язык C#). Назовите приложение SLFirstApp и нажмите кнопку OK. После этого в окне Add Silverlight Application будет предложено несколько вариантов хостинга вашего приложения. Оставьте значения по умолчанию. Нажмите OK, и откроется окно Solution, содержащее проект Silverlight и ASP.NET-проект для тестирования Silverlight-приложения.

Посмотрите на проект SLFirstApp и откройте страницу Page.xaml (эта страница возникает при загрузке приложения). Внизу на ней появится окно редактора XAML-кода, а сверху -- ее графическое представление.

Страница, описываемая кодом на языке XAML, представляет собой элемент UserControl, внутри которого находится менеджер размещения Grid (сетка).

Замените свойства длины и ширины (Width и Height) на свойства минимальной длины и ширины (MinWidth и MinHeight). Это позволит приложению растягиваться на все доступное пространство.

Теперь измените фон страницы. Удалите свойство Background="White" и задайте градиентную заливку. Для этого внутрь тега вставьте следующий код:

<Grid.Background>

<LinearGradientBrush>

<LinearGradientBrush.GradientStops>

<GradientStop Offset="0" Color="Yellow" />

<GradientStop Offset="1" Color="Red"/>

LinearGradientBrush.GradientStops>

LinearGradientBrush>

Grid.Background>

После данного кода вставьте код для кнопки с текстом «Привет Silverlight» и именем «mainButton».

<Button x:Name="mainButton" Content="Привет Silverlight" Width="420" Height="240"/>

Сделайте так, чтобы при нажатии на кнопку вместо текста на ней проигрывалось видео. Нажмите правой кнопкой мыши на SLFirstApp в окне Solution Explorer, далее Add*Existing Item… и выберите любой видеофайл. В данном случае он называется silverlight.wmv. В окне Properties для видеофайла установите свойство Build Action в значение Content. А для того чтобы вы могли программно реагировать на нажатие кнопки, добавьте обработчик события Click. Внутри тега кнопки задайте атрибут Click -- появится подсказка . Дважды щелкните на ней, и атрибут примет значение mainButton_Click (а в коде на языке C# создастся обработчик данного события). Щелкните правой кнопкой мыши на mainButton_Click и в контекстном меню выберите View Code. Этой командой вы перейдете к C#-коду обработчика события. Измените его следующим образом:

private void mainButton_Click(object sender, RoutedEventArgs e)

{

mainButton.Content = new MediaElement() {

Source = new Uri("silverlight.wmv", UriKind.RelativeOrAbsolute) };

}

Ваше приложение готово. Оно представляет собой страницу, имеющую градиентный фон. На ней находится кнопка, при нажатии на которую текст на странице меняется на видео. Приложение можно запустить, нажав клавишу F5.


>>> picture 4.png. Подпись:

Простейшее Silverlight-приложение


Одна из самых интересных функций Silverlight 2 -- Deep Zoom, позволяющая сделать просмотр изображений увлекательным и быстрым. Используя эту технологию, можно загружать и просматривать только наиболее интересную для себя часть композиции. При этом навигация предельно проста, она осуществляется с помощью мыши или специальной панели управления.

Deep Zoom применяют, если изображение имеет достаточно большие размеры, но сжимать его нельзя, поскольку нужно сохранить четкость, да еще и на таком уровне, при котором все мельчайшие детали будут хорошо различимы. В обычной модели поведения пользователь должен загрузить всю картинку в исходном качестве, а уже затем исследовать ее. Но можно сэкономить трафик на загрузке той части, которую он просматривать не будет. Этим и занимается Deep Zoom. Изначально появляется уменьшенная копия исходного изображения, что требует небольшого трафика, и значит, загрузка происходит быстро. Если пользователь принимает решение более подробно рассмотреть какую-либо часть композиции, то, щелкнув на нужном месте, увеличивает необходимый фрагмент, который загружается в более высоком качестве и отображается на месте старого.

Подготовить изображение для использования с Deep Zoom поможет бесплатный инструмент Deep Zoom Composer. Он позволяет либо экспортировать получившийся проект на локальный компьютер, либо выложить его в Интернет, благо для этого существует специальный бесплатный хостинг.

Простоту и изящество Deep Zoom уже оценили такие ресурсы, как Memorabilia.HardRock.com, Vertigo.com, DeepZoomObama.com, Vogue.ru, Deepzoom.com, bbc.co.uk и др.


>>>Picture 1.png. Подпись:

Галерея Hard Rock Memorabilia -- прекрасный пример использования технологии Deep Zoom


Будущее Silverlight

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

* поддержка новых медиаформатов, в том числе H.264;

* поддержка 3D-графики и аппаратного ускорения;

* обновления элементов управления;

* улучшения в технологии связывания данных (data-binding);

* усовершенствование инструментов программирования.

Помимо улучшения самой Silverlight планируется расширить количество поддерживаемых платформ. Так, станет возможным запускать надстройку на мобильных устройствах с Windows Mobile и на смартфонах Nokia с Symbian на борту.

С любыми вопросами вы можете обращаться на наш форум по адресу www.silverlighter.ru/forums.


Полезные сайты

http://www.microsoft.com/silverlight/ -- официальный сайт-визитка;

http://www.silverlight.net -- официальный сайт технологии;

http://www.silverlighter.ru -- русскоязычное сообщество пользователей Silverlight;

http://msdn.microsoft.com/ru-ru/silverlight/default.aspx­­ -- центр разработки Silverlight на MSDN;

http://www.techdays.ru/Category.aspx?Tag=Silverlight -- доклады по Silverlight на русском языке.