Элемент управления браузера 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.
Имя параметра | Описание | ||
---|---|---|---|
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>
Замечательная особенность тега <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]); } }