Опубликован: 24.03.2009 | Доступ: свободный | Студентов: 2294 / 114 | Оценка: 4.24 / 3.93 | Длительность: 17:47:00
Лекция 6:

Элемент управления браузера Silverlight

< Лекция 5 || Лекция 6: 12345 || Лекция 7 >
Аннотация: В этой лекции рассмотрена объектная модель Silverlight и возможность ее использования при программировании на JavaScript. Показано, как разместить элемент управления Silverlight в браузере, как элемент управления может быть настроен с помощью контекста и специальных параметров. Также представлена полная поддерживаемая им модель свойств, методов и событий. Кроме того, читатель научится реализовывать собственный обработчик событий и использовать основной стандартный обработчик событий.

В данной лекции будет подробно рассмотрены вопросы разработки решений для Silverlight с использованием XAML-кода и JavaScript. Мы исследуем, как объект подключаемого модуля Silverlight размещается в браузере, а также полную модель свойств, методов и событий, поддерживаемую этим элементом управления. Также будут рассмотрены поддержка событий загрузки и ошибок, а также обработка параметризации и контекста. Будет показан стандартный обработчик ошибок, предоставляемый Silver-light, и то, как его можно переопределить собственными обработчиками ошибок. Мы детально остановимся на объекте Downloader, предоставляемом Silverlight, и выясним, как он может использоваться для динамического введения содержимого в приложение. Наконец, будет рассмотрена модель программирования элементов пользовательского интерфейса (UI), составляющих модель элементов управления XAML, и показано использование их методов и событий в модели программирования JavaScript.

Размещение Silverlight в браузере

Для использования и создания приложений Silverlight не требуется никакого специального программного обеспечения, кроме самого подключаемого модуля Silverlight и файла Silverlight.js, который обеспечивает загрузку и установку подключаемого модуля для клиентов, не имеющих его. Создавать сайты на Silverlight можно, используя любое ПО для разработки Веб-сайтов, начиная от Notepad, до Eclipse, Expression Web или Expression Blend, - выбор за вами.

Данный раздел представляет базовое руководство по тому, как начать использовать Silverlight. До сих пор в этом курсе всю сложную работу за вас выполнял шаблон Expression Blend или Microsoft Visual Studio, но теперь пришло время узнать, как самостоятельно создать и запустить простое приложение Silverlight, не используя никаких других инструментов, кроме Windows Explorer и Notepad.

Первый и самый важный файл, который нам понадобится, - стандартный файл Silverlight.js. Он доступен в Silverlight Software Development Kit (SDK), который можно скачать на Веб-сайте http://www.microsoft.com/silverlight

Далее необходимо создать HTML-файл, который будет ссылаться это этот JavaScript-файл. Элемент управления Silverlight будет размещаться на этой странице. Вот пример:

<HTML>
  <HEAD> 
   <script type="text/javascript" src="Silverlight.js" />
  </HEAD>
  <BODY>
  </BODY> 
</HTML>

Файл Silverlight.js включает методы createObject и createObjectEx, с помощью которых могут создаваться экземпляры Silverlight. Разница между этими методами в том, что createObjectEx может использовать JavaScript Object Notation (JSON)1 для сериализации параметров.

Эти функции принимают набор параметров, используемых для создания экземпляра элемента управления. Данные параметры представлены в табл. 6.1.

Таблица 6.1. Параметры методов createObject и createObjectEx
Имя параметра Описание
source Задает источник XAML-кода или XAP-приложения, который формируется элементом управления. Это может быть ссылка на файл (т.е. "source.xap"), URI (т.е., http://server/generatexaml.aspx) или ссылка на встроенный XAML, содержащийся в DIV (т.е., #xamlcontent для DIV под именем xamlcontent ).
parentElement Это имя DIV, в котором находится элемент управления Silverlight на вашей HTML-странице.
ID Это уникальный ID, присваиваемый вами экземпляру элемента управления Silverlight.
width Ширина элемента управления в пикселах или в процентном соотношении.
height Высота элемента управления в пикселах или в процентном соотношении.
background Определяет цвет фона элемента управления. Задание цветов подробно рассматривается в разделе "SolidColorBrush" "Основы XAML" , "Основы XAML". Можно использовать ARGB -значение, например #FFAA7700, или именованный цвет, например Black.
framerate Задает максимально допустимую частоту кадров анимации. Значение по умолчанию равно 24.
isWindowless Может принимать значения true или false, значение по умолчанию -false. Если задано true, визуальное представление содержимого Silverlight формируется позади HTML-содержимого, так что HTML-содержимое может отображаться поверх его.
enableHtmlAccess Определяет возможность доступа к содержимому, располагающемуся в элементе управления Silverlight, из DOM1 браузера. Значение по умолчанию - true.
inplaceInstallPrompt Silverlight имеет два режима установки. Установка inplace (на месте) включает принятие лицензии на ПО и прямую загрузку элемента управления без перехода с сайта, на котором он будет размещаться. При установке indirect (непрямая) пользователю приходится переходить на сайт Microsoft для загрузки Silverlight и уже там принимать лицензионное соглашение и скачивать элемент управления. С помощью этого свойства задается, какой из методов будет использоваться. Значение true обеспечивает пользователю прямую inplace установку; значение false приводит к использованию непрямой установки.
version Задает минимально необходимую поддерживаемую версию Silverlight.
onLoad Задает функцию, вызов которой будет происходить при загрузке элемента управления.
onError Задает функцию, вызов которой будет происходить в случае возникновения ошибки.
onFullScreenChange Это событие формируется при изменении свойства FullScreen (Во весь экран) элемента управления Silverlight.
onResize Это событие формируется при изменении свойства ActualWidth или ActualHeight элемента управления Silverlight.
initParams Задает определяемый пользователем набор параметров для элемента управления. Более подробно это рассматривается в разделе "Обработка параметров" далее в данной лекции.
userContext Задает уникальный идентификатор, который может передаваться как параметр в функцию обработки события onLoad. Более подробно это рассматривается в разделе "Ответ на события загрузки страницы" далее в данной лекции.

Пожалуйста, обратите внимание, что при создании экземпляра элемента управления свойства width, height, background, framerate, isWindowless, enableHtmlAccess, version и inplaceInstallPrompt задаются в массиве свойств, и onLoad и onError- в массиве событий.

Ниже приведен один из примеров метода createObject:

Silverlight.createObject( "Scene.xaml",
document.getElementById("SilverlightControlHost"), "mySilverlightControl", {
width:'300', height:'300',
inplaceInstallPrompt: false, background:'#D6D6D6', isWindowless:'false', framerate:'24', version:'2.0' }, {
onError:null, onLoad:null }, null);

Теперь вернемся к нашей HTML-странице и настроим ее, чтобы она могла обрабатывать этот элемент управления Silverlight. Как видите, при задании имени компонента Silverlight необходимо было задать родительский DIV под именем SilverlightControlHost, в котором этот компонент будет размещаться. DIV задается через его свойство ID. Вот полный HTML-код:

<html>
  <head>
    <script type="text/javascript" src="Silverlight.js"></script>
    <script type="text/javascript">
      function createSilverlight() {
      Silverlight.createObject( "Page.xaml",
      document. getElementById("SilverlightControlHost"), 
               "mySilverlightControl", 
               { width:'300', height:'300',
               inplaceInstallPrompt:false, 
               background:'#D6D6D6', 
               isWindowless:'false', 
               framerate:'24', version:'2.0' }, 
               { onError: null, onLoad:null },
               null); }
    </script>
  </head>
  <body>
    <div id="SilverlightControlHost">
      <script type="text/javascript">
        createSilverlight();
      </script>
    </div>
  </body>
</html>

Наконец, элементу управления Silverlight необходим файл с исходным XAML-кодом. В данном примере используется XAML-файл Scene.xaml.

Далее представлен простой XAML-файл, содержащий с надписью TextBlock "Hello, World!" (Здравствуй, мир!):

<Canvas xmlns="http://schemas.microsoft.com/client/2007"
        xmlns:x=" http://schemas.microsoft.com/winfx/2006/xaml"
        Width = "640" Height="480" Background="White" x:Name="Page">
  <TextBlock Text="Hello, World!"></TextBlock>
</Canvas>

Вот все, что необходимо для настройки и подготовки к работе приложения Silverlight. По мере добавления функциональности в приложение код будет усложняться, но эти три файла - HTML-страница для размещения элемента управления, XAML-файл и Silverlight.js, - как правило, присутствуют в каждом проекте.

Использование тега Object напрямую

В предыдущем примере экземпляр элемента управления Silverlight создавался с помощью функции Silverlight.createObject, находящейся в Silverlight.js. Но существует возможность создать экземпляр подключаемого модуля Silverlight напрямую, без применения это функции. Сделать это позволяет стандартный тег <object>, имеющий дочерний элемент <param> для задания параметров. Вот пример реализации:

<object data="data:application/x-silverlight,"
type="application/x-silverlight-2"
width=" 100%" height="100%">
  <param name="source" value="Page.xaml"/>
  <param name="onerror" value="onSilverlightError" />
  <param name="background" value="white" />
  <param name="minRuntimeVersion" value="2.0.31005.0" /> 
</object>
Примечание Пожалуйста, обратите внимание на различие типов MIME в Silverlight 2 RTW и ранее использованных бета-версиях, так как в Beta 2 использовался тип MIME "application/x-silverlight-2-b2". Если возникают проблемы с распознанием объекта Silverlight браузером, убедитесь, что этот параметр задан правильно, соответственно используемой версии Silverlight. Для Silverlight 2 RTW тип MIME "application/x-silverlight-2".

Замечательная особенность тега <object> в том, что он является наращиваемым, в том смысле, что если создать экземпляр исходного <object> не удалось, браузер на этом месте сформирует визуальное представление следующей части HTML, при условии что HTML располагается до закрывающего тега </object>. Поэтому, если Silverlight не установлен, на его место на экране без труда можно поставить простой баннер.

Рассмотрим пример:

<object data="data:application/x-silverlight," type="application/x-silverlight-2" 
        width=" 100%" height="100%">
  <param name="source" value="Page.xaml"/>
  <param name="onerror" value="onSilverlightError" />
  <param name="background" value="white" />
  <a href="..." style="text-decoration: none;">
    <img src="..." alt="Get Microsoft Silverlight" style = "border-style: none"/>
  </a>
</object>

В данном случае в объект встроена гиперссылка (тег <a> ), поэтому если Silverlight не установлен в системе, этот тег обеспечит ссылку, по которой можно будет перейти на сайт загрузки Microsoft.

Данный подход исключительно полезен, если требуется встроить Silverlight в Веб-сайт, где JavaScript недоступен.

Реакция на события загрузки страницы

Обработчик событий JavaScript задается для управления событиями загрузки страницы с помощью параметра onLoad (после загрузки), представленного в табл. 6.1. Он запускается после полной загрузки XAML-содержимого элемента управления Silverlight. Обратите внимание, что если для какого-либо XAML-элемента UI будет определено аналогичное событие, оно будет сформировано до формирования события onLoad элемента управления Silverlight. Кроме того, у элемента управления есть доступное только для чтения свойство IsLoaded (Загружен), которое устанавливается непосредственно перед формированием события onLoad.

При использовании обработчика события onLoad функция JavaScript должна принимать три параметра: первый - ссылка на элемент управления, второй - пользовательский контекст, и третий - ссылка на корневой элемент XAML. Рассмотрим пример:

function handleLoad(control, userContext, rootElement) {
... }

Обработка параметров

При вызове функции createObject для создания экземпляра Silverlight в нее можно передавать параметры с помощью свойства initParams (Параметры инициализации). Это свойство строкового типа, поэтому если необходимо задать несколько значений, они могут указываться через запятую в виде строки с разделяющими запятыми. Синтаксический разбор такой строки в JavaScript не представляет большого труда. Далее представлен пример описания элемента управления Silverlight с тремя параметрами:

function createSilverlight() 
{ 
Silverlight.createObject( "Scene.xaml", 
         document. getElementById("SilverlightControlHost"), 
         "mySilverlightControl", 
        { width:'300', height:'300', 
          inplaceInstallPrompt: false, 
          background:'#D6D6D6',
          isWindowless:'false',
          framerate:'24',
          version:'2.0'
        }, 
        { onError:null,
          onLoad:handleLoad 
        }, "p1, p2, p3", // Список параметров 
          null ); 
}

В данном случае параметры p1, p2 и p3 заданы как строка с разделяющими запятыми. В JavaScript есть строковый метод split (разделить), который позволяет разбивать строки с разделяющими запятыми в массив значений.

Далее представлен пример обработчика событий onLoad, который использует этот метод для разделения списка параметров в массив строк и для отображения каждого из них в окне предупреждения:

function handleLoad(control, userContext, rootElement) {
var params = control.initParams.split(",");
for (var i = 0; i< params.length; i++)
{
alert(params[i]);
} }
< Лекция 5 || Лекция 6: 12345 || Лекция 7 >
Дмитрий Казимиров
Дмитрий Казимиров
Россия, Омск
Александр Будник
Александр Будник
Израиль, Иерусалим