На этой неделе (неожиданно для меня) состоялся релиз продукта 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, но, пожалуй, это просто не уместилось в рамки заметки.
Красиво, но уже не актуально. В любом случае спасибо.
ОтветитьУдалитьинтересно было бы с вами лично пообщаться )) вы в аське бываете? или в скайпе?...
ОтветитьУдалитьПишите письма. Все контакты есть вверху страницы.
ОтветитьУдалить