Мой дядя самых честных правил программ исходники за так ...

9 сент. 2007 г.

Фокус на Silverlight

На этой неделе (неожиданно для меня) состоялся релиз продукта Microsoft Silverlight 1.0. Решил немного поглядеть на его содержимое.

Примечание: Эта статья про первую версию Silverlight и в данный момент уже устарела. Но я сделал обзор и второй части.

Что мне понадобилось для препарирования: Silverlight 1.0, Silverlight SDK 1.0, Expression Blend 2 August Preview (графический редактор, который позволяет создавать и проекты Silverlight).

Установка проходит быстро и безболезненно, единственный момент, что юзабилити окна окончания установки желает лучшего:

Кусочек льда(?) на сплеше-подобном окне, конечно, выглядит красиво, но мало того, что браузер надо рестартовать самому, так и совершенно неясно, что же делать дальше - приходится прерывать свой ступор и закрывать окно крестиком сверху.

Поехали дальше.

Без неожиданностей в нашей работе (конечно же речь о программистах) обычно не обойтись, так и в этот раз. В Firefox плагин Silverlight конечно же сразу не заработал: первым делом, я попытался открыть QuickStart, а там во всех местах, где должен был появится Silverlight - мне предлагалось его скачать "Get Silverlight Now!". Подозрение в подпольной подрывной деятельности пало, естественно, на расширения с блокирующим функционалом: и после отключения AdBlock и FlashBlock - Silverlight всё таки заработал (виноват в конечном итоге оказался FlashBlock, который очень любит блокировать тэг <object>).

Замечание: В Mozilla Firefox проигрыватель Silverlight устанавливается именно как плагин (plug-in), а не расширение (extension, или add-on) - это можно увидеть в окне about:plugins.

Теперь кратко о том, что же такое Silverlight: по старому названию wpf/e (где буква e - это everywhere) можно сразу понять было, что внутри, наверняка, можно увидеть XAML (для тех кто знаком с WPF конечно, одной из ключевых технологий .Net Framework 3.0). Собственно со сменой названия, суть продукта не сменилась - это всё также - проигрыватель XAML-файлов, реализованный в виде расширений к известным браузерам (на текущий момент это IE, Firefox и Safari). По сути же, эта технология, полностью аналогична Adobe (ранее Macromedia) Flash Player и конечно же Microsoft планирует целиком и полностью вытеснить флэш (правда они чуть задержались, вот включили бы Silverlight в поставку с IE 7 и ...).

Простейший проект Silverlight состоит из 3 файлов: silverlight.js, sample.html, sample.xaml, самый первый из которых поставляется в Silverlight SDK и обеспечивает создание объекта проигрывателя (включая проверку наличия плагина, проверку браузера).

Ну и создадим, конечно же, простейший Hello, World.

Sample.xaml:

    1 <?xml version="1.0" encoding="utf-8" ?>

    2 <Canvas

    3     xmlns="http://schemas.microsoft.com/client/2007"

    4     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    5     >

    6 

    7     <TextBlock>Hello, Silverlight World!</TextBlock>

    8 

    9 </Canvas>

Здесь собственно и комментировать нечего. Это простейший XAML файл, который должен вывести надпись, приветствующую мир.

Замечание: Кстати, схему xsd для редактирования Silverlight XAML можно найти в папке Tools внутри Silverlight SDK.

Sample.html:

    1 <!DOCTYPE html PUBLIC

    2     "-//W3C//DTD XHTML 1.0 Transitional//EN"

    3     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    4 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">

    5 <head>

    6     <title>Hello, Silverlight World!</title>

    7     <script type="text/javascript" src="silverlight.js"></script>

    8     <script type="text/javascript">

    9     function CreateSlvObject( host )

   10     {       

   11         Silverlight.createObject(

   12             "sample.xaml",    // Что проигрывать

   13             host,            // Где проигрывать

   14             "slvPlugin",    // Уникальный идентификатор объекта плеера.

   15             {                // Свойства создаваемого объекта.

   16                 width: '400',

   17                 height: '20',

   18                 inplaceInstallPrompt: false,

   19                 background: '#D6D6D6',

   20                 isWindowless: 'false',

   21                 framerate: '24',

   22                 version: '1.0'

   23             },

   24             {},

   25             null

   26         );

   27     }

   28 

   29     // добавим кроссбраузерности к IE :-)

   30     if(window.attachEvent)

   31     {

   32         window.addEventListener = function( eventName, func, args ) {

   33             window.attachEvent("on" + eventName,

   34                 function() {

   35                     func(window.event, args);

   36                 })

   37             };

   38     }

   39 

   40     // Обработка события onload, создание объекта Silverlight.

   41     window.addEventListener("load",

   42         function() {

   43             var slvHost = document.getElementById( 'slvHost' );

   44             CreateSlvObject( slvHost );

   45             },

   46             null

   47         );

   48     </script>

   49 </head>

   50 <body>

   51     <h1>Пример создания объекта Silverlight</h1>

   52     <div id="slvHost"></div>

   53 </body>

   54 </html>

Прокомментирую содержимое.

Первое и основное, что нам нужно – это некоторый DOM–элемент, который будет "хостить" объект проигрывателя (div id=”slvHost”). А далее вся кухня создания проигрывателя скрыта внутри javascript API Silverlight.createObject.

Чтобы усложнить жизнь всем кто будет читать этот код, я туда добавил реализацию кроссбраузерной функции window.addEventListener (которая присутствует в стандарте W3C DOM и отсутствует в IE).

Что же происходит:

  • По событию загрузки документа (“load”, “onload”), вызывается функция CreateSlvObject с параметром "DOM-элемент".
  • Вызывается API Silverlight.createObject с параметрами создания объекта (ширина, высота, фон, версия проигрывателя).
  • Далее внутри проверяются исходные параметры, и создаётся объект-плеера или же возникает ошибка.

Теперь, если всё это запустить, то можно увидеть желанную надпись:

Конечно же, интересно заглянуть внутрь этого всего. Используя расширение Firebug, можно увидеть такую картину:

    1 <div id="slvHost">

    2     <object type="application/x-silverlight" data="data:," id="slvPlugin" height="20"

    3         width="400">

    4         <param name="background" value="#D6D6D6">

    5         <param name="source" value="sample.xaml">

    6         <param name="windowless" value="false">

    7         <param name="maxFramerate" value="24">

    8         <param name="onLoad" value="__slLoad0">

    9         <param name="onError" value="__slError0">

   10     </object>

   11 </div>

В принципе, ничего неожиданного. Создаётся объект типа application/x-silverlight, который и обрабатывается плеером-плагином.

На этом, в принципе, и всё. Хотя я конечно и не упомянул о роли Expression Blend, но, пожалуй, это просто не уместилось в рамки заметки.

3 комментария:

  1. Красиво, но уже не актуально. В любом случае спасибо.

    ОтветитьУдалить
  2. интересно было бы с вами лично пообщаться )) вы в аське бываете? или в скайпе?...

    ОтветитьУдалить
  3. Пишите письма. Все контакты есть вверху страницы.

    ОтветитьУдалить

Публикуются только комментарии, которые показались автору блога заслуживающими внимания.