Элемент управления браузера 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]);
} }