В данной лекции будет подробно рассмотрены вопросы разработки решений для Silverlight с использованием XAML-кода и JavaScript. Мы исследуем, как объект подключаемого модуля Silverlight размещается в браузере, а также Downloader, предоставляемом Silverlight, и выясним, как он может использоваться для динамического введения содержимого в приложение. Наконец, будет рассмотрена модель программирования элементов пользовательского интерфейса (UI), составляющих модель элементов управления XAML, и показано использование их методов и событий в модели программирования JavaScript.
Для использования и создания приложений 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), который можно скачать на Веб-сайте
Далее необходимо создать 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 (т.е., ) или ссылка на встроенный XAML, содержащийся в DIV (т.е., #xamlcontent для DIV под именем xamlcontent ). |
||
parentElement |
Это имя DIV, в котором находится элемент управления Silverlight на вашей HTML-странице. | ||
ID |
Это уникальный ID, присваиваемый вами экземпляру элемента управления Silverlight. | ||
width |
Ширина элемента управления в пикселах или в процентном соотношении. | ||
height |
Высота элемента управления в пикселах или в процентном соотношении. | ||
background |
Определяет цвет фона элемента управления. Задание цветов подробно рассматривается в разделе "SolidColorBrush" лекц. 4, "Основы XAML". Можно использовать ARGB -значение, например #FFAA7700, или именованный цвет, например Black. |
||
framerate |
Задает максимально допустимую частоту кадров анимации. Значение по умолчанию равно 24. | ||
isWindowless |
Может принимать значения true или false, значение по умолчанию -false. Если задано true, визуальное представление содержимого Silverlight формируется позади HTML-содержимого, так что HTML-содержимое может отображаться поверх его. |
||
enableHtmlAccess |
Определяет возможность доступа к содержимому, располагающемуся в элементе управления Silverlight, из DOM1 браузера. Значение по умолчанию - true. |
||
inplaceInstallPrompt |
Silverlight имеет два режима установки. Установка inplace (на месте) включает принятие лицензии на ПО и прямую загрузку элемента управления без перехода с сайта, на котором он будет размещаться. При установке 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-файл
Далее представлен простой 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, - как правило, присутствуют в каждом проекте.
В предыдущем примере экземпляр элемента управления 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 должна принимать три параметра: первый - ссылка на элемент управления, второй -
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]);
} }
В элемент управления Silverlight может передаваться дополнительный параметр - параметр контекста. Он включается непосредственно в событие onLoad как второй параметр. Обычно для него используется имя userContext (
Далее представлен пример страницы, на которой размещаются три элемента управления Silverlight. Обратите внимание, что переменные имени и контекста заданы в этой странице-хосте и передаются как параметры в JavaScript, создающий элемент управления Silverlight:
<html>
<head>
<script type="text/javascript" src="Silverlight.js"></script>
<script type="text/javascript">
function handleLoad(control, userContext, rootElement)
{
alert(userContext);
}
function createSilverlight(parentElement, cid, context) {
Silverlight.createObject( "Page.xaml",
document.getElementById(parentElement), cid, {
width:'300', height:'300',
inplaceInstallPrompt:false, background:'#D6D6D6',
isWindowless:'false', framerate:'24', version:'2.0' },
{onError:null, onLoad :handleLoad
},
"p1,p2,p3", context, null); }
</script>
</head>
<body>
<div id="SilverlightControlHost1">
<script type="text/javascript">
createSilverlight("SilverlightControlHost1", "ctrl1","the first control");
</script>
</div>
<div id="SilverlightControlHost2">
<script type="text/javascript">
createSilverlight("SilverlightControlHost2", "ctrl2","the second control");
</script>
</div>
<div id="SilverlightControlHost3">
<script type="text/javascript">
createSilverlight("SilverlightControlHost3", "ctrl3","the third control");
</script>
</div>
</body>
</html>
HTML-страница имеет обработчик события onLoad, который представлен здесь:
<script type="text/javascript">
function handleLoad(control, userContext, rootElement)
{
alert(userContext);
}
</script>
Он принимает параметр userContext и отображает значение контекста в окне предупреждения. Как это выглядит на экране, показано на рис. 6.1, на котором HTML-страница представляет контекст первого элемента управления
(рис 6.1) Вывод на экран пользовательского контекста
Silverlight предоставляет несколько методов обработки ошибок в зависимости от типа ошибки. Ошибки возникают в случаях, когда синтаксический анализатор XAML сталкивается с проблемой, загрузка не завершается соответствующим образом, возникает ошибка времени выполнения и если описанным в XAML-документе обработчикам событий не поставлены в соответствие JavaScript-функции.
При инициализации элемента управления с помощью обработчика событий onError задается функция JavaScript, которая будет вызываться при возникновении ошибки. Однако если такая функция не будет задана (или если она задана как null ), то никакого уведомления об ошибке не будет происходить, и будет отображаться пустая серая область на месте элемента управления Silverlight. Но в проектах, созданных из Expression Blend, описывается стандартный обработчик ошибок.
Стандартный обработчик событий JavaScript обеспечит вывод на экран сообщения об ошибке с основными деталями возникшей ошибки Silverlight, включая код и тип ошибки, а также сообщение с указанием конкретной проблемы и имени вызванного метода.
Далее представлен пример неправильно сформированного XAML-документа, в котором сделана ошибка в имени закрывающего тега элемента TextBlock, он ошибочно назван </TextBlok>:
<Canvas xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x=" http://schemas.microsoft.com/winfx/2006/xaml">
<TextBlock>
Hello, World!
</TextBlok>
</Canvas>
Если используется обработчик, созданный Expression Blend no умолчанию, он обеспечит вывод на экран сообщения об ошибке Silverlight, как показан на рис. 6.2.
(рис 6.2) Сообщение об ошибке
Можно использовать собственный обработчик ошибок. Для этого свойству onError элемента управления Silverlight необходимо задать специальную функцию обработчика ошибок. Она должна будет принимать два параметра: объект отправителя события и аргументы события, описывающие детали возникшей ошибки.
Существует три типа аргументов события. Первый тип - базовый объект ErrorEventArgs (Аргументы ошибки), содержащий тип сообщения об ошибке и код. Свойство errorType (Тип ошибки) определяет тип ошибки в виде строки, содержащей значения RuntimeError (Ошибка времени выполнения) или ParserError (Ошибка синтаксического анализатора). На основании этой информации используется один из двух производных типов ошибок.
При обработке в XAML ошибки синтаксического разбора используется объект ParserErrorEventArgs (Аргументы ошибки синтаксического анализатора). Оно содержит ряд свойств:
charposition (позиция символа) содержит позицию символа, в котором возникла ошибка.linenumber (номер строки) содержит номер строки, в которой возникла ошибка.xamlFile (xaml-файл) определяет файл, в котором возникла ошибка.xmlAttribute (xaml-атрибут) определяет xml-атрибут, в котором возникла ошибка.xmlElement (xaml-элемент) определяет xml-элемент, в котором возникла ошибка.Ошибки времени выполнения определяются в объекте RuntimeErrorEventArgs (Аргументы ошибки времени выполнения). Этот объект также включает ряд свойств:
charPosition определяет позицию символа, в котором возникла ошибка.lineNumber определяет строку, в которой возникла ошибка.methodName (имя метода) определяет метод, связанный с этой ошибкой.Рассмотрим, как ошибку можно перехватить собственным обработчиком ошибок. Прежде всего, создается метод createSilverlight(), выполняющий настройку обработчика ошибок:
function createSilverlight() {
Silverlight.createObject( "Scene.xaml",
document.getElementById("firstControl"), "agc1", {
width:'300',
height:'300',
inplaceInsta llPrompt: false,
background :'#D6D6D6',
isWindowless:'false',
framerate:'24',
version:'2.0' }, {
on Error: handleError,
onLoad:null },
null); }
Далее представлен HTML-файл, который вызывает этот измененный метод создания элемента управления Silverlight и содержит функцию handleError, заданную как обработчик ошибок в атрибуте onError:
<html>
<head>
<script type="text/javascript" src="Silverlight.js"></script>
<script type="text/javascript" src="createSilverlight.js"></script>
<script type="text/javascript">
function handleError(sender, errorArguments) {
var strError = "Error Details: \n";
strError+= "Type: " + errorArguments.errorType + "\n";
strError+= "Message: " + errorArguments.errorMessage + "\n";
strError+= "Code: " + errorArguments.errorCode + "\n";
// Мы знаем (в данном случае), что это ошибка синтаксического анализатора.
// Чтобы обработчик ошибок был более универсальным,
// тип ошибки должен определяться до вызова
// свойств аргументов определенного типа.
strError+= "Xaml File: " + errorArguments.xamlFile + "\n";
strError+= "Xaml Element: " + errorArguments.xmlElement + "\n";
strError+= "Xaml Attribute: " + errorArguments.xmlAttribute + "\n";
strError+= "Line: " + errorArguments.lineNumber + "\n";
strError+= "Position: " + errorArguments.charPosition + "\n";
alert(strError);
}
</script>
</head>
<body>
<div id="firstControl">
<script type="text/javascript">
createSilverlight();
</script>
</div>
</body>
</html>
Если при выполнении этого кода возникает ошибка, на экран будет выведено окно предупреждения с содержимым ошибки. На рис. 6.3 приведен пример собственного окна предупреждения.
(рис 6.3) Использование собственного обработчика ошибок
Элемент управления Silverlight имеет ряд свойств, некоторые из которых уже обсуждались в разделе "Размещение Silverlight в браузере". Свойства могут задаваться не только при инициализации элемента управления, но также с помощью сценария. Элемент управления разделяет свойства на три типа: непосредственные свойства, свойства содержимого и свойства настроек. Непосредственные свойства - это свойства самого элемента управления, которые доступны посредством синтаксиса control.uMnceoucmea. Доступ к свойствам содержимого и настроек осуществляется посредством синтаксиса control.content.uMxceoucmea и control.settings.uMnceoucmea, соответственно.
Ниже перечислены поддерживаемые непосредственные свойства:
initParams В этом свойстве хранятся параметры инициализации, передаваемые в элемент управления. Оно может быть задано только как часть инициализации элемента управления.isLoaded Это свойство принимает значение true после загрузки элемента управления; в противном случае, оно имеет значение false. Является доступным только для чтения.source Это XAML-содержимое, визуальное представление которого должно быть сформировано. Это может быть ссылка на файл, URI службы, формирующей XAML, или (в случае присутствия префикса #) DIV, содержащий XAML-код в блоке сценария.Для организации доступа к свойствам содержимого используется синтаксис control.content.uMnceoucmea. Например, если необходимо обратиться к свойству actualHeight, используется синтаксис control.content.actualHeight Доступны следующие свойства содержимого:
actualHeight Возвращает высоту области отображения элемента управления Silverlightin в пикселах. Возвращаемое значение зависит от ряда критериев. Во-первых, от того, как высота элемента управления была задана изначально. Вспомним, что это может быть процентное соотношение или абсолютное значение в пикселах. В первом случае, свойство actualHeight возвращает текущую высоту элемента управления, но если пользователь изменит размеры браузера, ее значение изменится. Если высота задана абсолютным значением, будет возвращено это значение. При использовании элемента управления в полноэкранном режиме, это свойство будет возвращать разрешающую способность экрана по вертикали.actualWidth Возвращает ширину экрана. Возвращаемое значение зависит от ряда критериев и аналогично параметру actualHeight.fullScreen Переключает режим отображения элемента управления Silverlight между встроенным и полноэкранным режимами. По умолчанию имеет значение false, что обозначает встроенный режим. Когда этому свойству задано значение true, элемент управления Silverlight будет отображаться во весь экран.Элемент управления Silverlight также имеет ряд свойств, которые определены как свойства настроек. Доступ к этим свойствам осуществляется посредством синтаксиса control.settings.uMnceoucmea:
background Это свойство задает цвет фона элемента управления Silverlight. Может принимать значения в нескольких форматах, включая именованный цвет (например, Black ), 8-разрядные значения Red/Green/Blue (RGB) с или без альфа-канала и 16-разрядные RGB -значения с или без альфа-канала.enableFrameRateCounter ( Счетчик частоты кадров включен ) Если задано значение true, Silverlight будет отображать текущую частоту кадров (в кадрах в секунду) в строке состояния браузера. Значение по умолчанию - false.enableHtmlAccess ( Html-доступ включен ) Если задано значение true, XAML-содержимое становится доступным из DOM браузера. Значение по умолчанию - true.enableRedrawRegions ( Перерисовка областей включена ) Если задано значение true, отображаются области объекта подключаемого модуля, перерисовываемые в каждом кадре. Это полезный инструмент оптимизации приложения. Значение по умолчанию -false.maxFrameRate ( Максимальная частота кадров ) Определяет максимальную генерируемую частоту кадров. По умолчанию принимает значение 24 и имеет version ( версия ) Сообщает об используемой в настоящий момент версии элемента управления Silverlight. Это строка, содержащая до четырех разделенных точками целых чисел: основной, дополнительный номера версий, номер сборки и номер редакции, - хотя обязательными являются только первые два значения (основной и дополнительный номер версии).windowless Это свойство определяет режим отображения элемента управления: безоконный или оконный. Если задано значение true, используется безоконный режим, т.е. содержимое Silverlight отображается на странице "за" HTML-содержимым.Элемент управления Silverlight имеет ряд методов, которые могут использоваться для управления его поведением и функционированием. Аналогично группам свойств Silverlight, методы Silverlight тоже сгруппированы в "семейства" методов. В настоящее время поддерживаются один непосредственный метод и три метода содержимого. Что есть что, будет представлено в следующих разделах, включая примеры, демонстрирующие синтаксис этих методов и способ доступа к ним.
Метод createFromXaml (создать из Xaml) является методом содержимого Silverlight, позволяющий задавать XAML-содержимое, которое динамически добавляется в элемент управления Silverlight. Этот метод принимает два параметра. Первый - строка, содержащая XAML, который будет использоваться, и второй - параметр namescope (область имен). Если второй параметр имеет значение true (значением по умолчанию является false ), в предоставленном XAML будут созданы уникальные ссылки x:Name, которые не будут конфликтовать с именами существующих XAML-элементов.
Для createFromXaml существует ограничение: в добавляемом XAML должен быть всего один корневой узел. Поэтому, если необходимо добавить несколько элементов, убедитесь, что все они располагаются в одном узле, включающем элемент Canvas.
Кроме того, createFromXaml не добавляет XAML в элемент управления Silverlight до тех пор, пока он не будет добавлен в дочерний элемент одного из элементов Canvas элемента управления. Итак, при вызове createFromXaml вы получаете ссылку на узел, и эта ссылка затем используется для добавления этого узла в дерево визуального представления. Рассмотрим пример:
function handleLoad(control, userContext, sender) {
var xamlFragment = '<TextBlock Canvas.Top="60" Text="A new TextBlock" />';
textBlock = control.content.createFromXaml(xamlFragment);
sender.children.add(textBlock); }
Здесь создается XAML-код для элемента управления TextBlock с текстом "A new TextBlock" (Новый TextBlock). Этот XAML-код затем используется для создания XAML-узла в содержимом элемента управления. Когда это будет выполнено, Silverlight возвратит ссылку на TextBlock. Эта ссылка добавляется в дерево визуального представления элемента управления Silverlight и используется для прорисовки TextBlock.
Метод createFromXamlDownloader (создать из загрузчика Xaml) является методом содержимого, используемым в паре с объектом Downloader (Загрузчик), который будет рассмотрен в данной лекции позже. Этот метод принимает два параметра. Первый параметр - ссылка на объект Downloader, который загружает XAML-код или пакет, содержащий XAML-код. Второй параметр - имя пакета загружаемого содержимого, который должен использоваться. Если это .zip-файл, задается имя файла, содержащегося в .zip-архиве, в котором находится XAML-код, который предполагается использовать. Если загруженное содержимое не в пакете .zip, в качестве значения этого параметра должна быть задана пустая строка.
Метод createObject (создать объект) является непосредственным методом, предназначенным для создания одноразового объекта для определенной функции. В Silverlight единственным таким поддерживаемым объектом является Downloader. Более подробно остановимся на этом в данной лекции позже.
Этот метод содержимого позволяет выполнять поиск узла в XAML-коде по атрибуту x:Name. Если findName (найти имя) находит узел с заданным именем, он возвращает ссылку на него, в противном случае, возвращается null.
Элемент управления Silverlight предоставляет объект, который обеспечивает возможность загружать дополнительные элементы, используя функциональность асинхронной загрузки. Это позволяет скачивать отдельные ресурсы или ресурсы в виде .zip-архива.
Объект Downloader поддерживает следующие свойства:
downloadProgress ( показатель процесса загрузки ) Это свойство обеспечивает нормализованное значение (между 0 и 1), которое представляет объем загруженного содержимого в процентном соотношении к его общему размеру, где значение 1 эквивалентно 100% загрузки.status ( состояние ) Это свойство принимает код состояния HTTP для текущего состояния процесса загрузки. Возвращает стандартный код состояния HTTP, например, "404" для "Not Found" (не найден) или "200" для "OK".uri Это свойство содержит URI объекта, к которому в настоящий момент обращается загрузчик.Объект Downloader поддерживает следующие методы:
abort ( отменить ) Отменяет текущую загрузку и возвращает все свойства в исходное состояние.getResponseText ( получить текст ответа ) Возвращает строковое представление загруженных данных. Принимает обязательный параметр, который используется для указания именованного блока в загружаемом пакете.open ( открыть ) Запускает сеанс загрузки. Принимает три параметра. Первый - команду действия. Набор команд HTTP задокументирован W3C; однако, Silverlight поддерживает только GET (Получить). Второй параметр - URI ресурса, который должен будет загружаться.send ( отправить ) Выполняет запрос загрузки, который был запущен командой open.Объект Downloader поддерживает следующие события:
completed ( завершен ) Это событие формируется по завершении загрузки. Оно принимает два параметра. Первый - объект, сформировавший это событие (в данном случае, сам элемент управления downloader), и второй - набор аргументов события ( eventArgs ).downloadProgressChanged ( показатель процесса загрузки изменился ) Это событие формируется в ходе загрузки. Оно формируется при каждом изменении показателя процесса загрузки (значение которого меняется от 0 до 1) на 0,05 (5%) или более, а также когда он достигает значения 1,0 (100%). По достижении 1,0 также формируется событие completed.Объект Downloader позволяет выполнять доступ к ресурсам сети из JavaScript. Пожалуйста, обратите внимание, что этот объект будет работать, только если приложение Silverlight выполняется с Вебсервера, и будет формировать ошибку в случае загрузки страницы просто из файловой системы.
Объект Downloader создается методом createObject, предоставляемым элементом управления Silverlight. Рассмотрим пример:
< script type="text/javascript" >
function handleLoad(control, userContext, sender)
{ var downloader = control.createObject("downloader");
} </script>
Следующий шаг - запустить сеанс загрузки. Для этого с помощью метода open объекта Downloader объявляется URI файла и вызывается метод send для начала загрузки. Далее представлен пример, в котором выполняется загрузка файла фильма movie.:
function handleLoad(control, userContext, sender) {
var downloader = control.createObject("downloader");
downloader.open ("GET","movie.wmv");
downloader.send(); }
Для отслеживания процесса загрузки и момента ее завершения понадобится создать соответствующие обработчики событий. Далее представлена та же функция, но в нее были внесены необходимые дополнения:
function handleLoad(control, userContext, sender)
{
var downloader = control.createObject("downloader");
downloader.addEventListener("downloadProgressChanged","handleDLProgress");
downloader.addEventListener("completed","handleDLComplete");
downloader.open ("GET","movie.wmv");
downloader.send();
}
Теперь можно применить эти обработчики событий. В данном примере событие downloadProgressChanged связано с функцией JavaScript handleDLProgress, и событие completed - с функцией JavaScript handleDLComplete. Эти функции представлены в данном фрагменте кода:
function handleDLProgress(sender, args) {
var ctrl = sender.getHost();
var t1 = ctrl.content.findName("txt1");
var v = sender.downloadProgress * 100;
t1.Text = v + "%"; }
function handleDLComplete(sender, args) {
alert("Download complete"); }
Downloader может использоваться только для приложений, размещенных на Вебсервере. В случае попытки его использования со страницы, загружаемой из файловой системы, будет сформирована ошибка.XAML предоставляет ряд визуальных элементов для создания UI. Все они были перечислены и подробно рассмотрены в лекциях 4 и 5. К элементам UI относятся Canvas, Ellipse, и другие.
Каждый из этих элементов поддерживает полнофункциональный набор методов и событий, которые будут перечислены и рассмотрены в следующих нескольких разделах.
Кроме того, Silverlight 2 обладает богатым набором элементов управления. Они используются из .NET-кода для создания насыщенных UI, которые подробно обсуждаются в лекц. 7, "Элементы управления Silverlight: представления и компоновки".
Элементы UI предоставляют функции, которые могут вызываться из JavaScript. Эти функции позволяют манипулировать элементами UI для создания сложных сценариев взаимодействия с приложением и являются общими для всех элементов UI.
Метод AddEventListener (Добавить обработчик события) используется для привязки к элементу UI обработчика события во время выполнения. Это полезно для разделения дизайна и разработки: разработчик ничего не добавляет непосредственно в XAML, создаваемый дизайнером, а вводит код обработки события в файл (или блок) JavaScript. События элементов UI, которые могут обрабатываться, обсуждаются в данной лекции позже.
Далее представлен пример привязки обработчика события во время выполнения. Здесь добавляется обработчик события, который отслеживает щелчок мыши и определяет, что событие должно обрабатываться функцией JavaScript handleMouse (обработка мыши). Эта функция, как большинство обработчиков событий, принимает два параметра: аргументы отправителя и события. Поскольку обрабатывается событие мыши, данная функция принимает экземпляр объекта MouseEventArgs (Аргументы события мыши), предоставляющий координаты х и у положения мыши в момент формирования события:
<script type="text/javascript">
function handleLoad(control, userContext, sender)
{
sender.addEventListener("mouseLeftButtonDown", handleMouse);
}
function handleMouse(sender, mouseEventArgs)
{
alert(mouseEventArgs.getPosition(null).x + ":"
+ mouseEventArgs.getPosition(null).y);
}
</script>
Вы можете уничтожить подключение во время выполнения, используя метод RemoveEventListener (Удалить обработчик события). В него можно передать либо целочисленный маркер, который был возвращен addEventListener, либо имя события.
Этот метод используется для выполнения поиска именованного объекта в дереве элементов XAML Он возвращает ссылку на заданный объект, если он существует; в противном случае, он возвратит null. Например, рассмотрим код XAML:
<Canvas xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x=" http://schemas.microsoft.com/winfx/2006/xaml"
Height="400" Width="400">
<TextBlock Canvas.Top="0" x:Name="txt1" Text="TextBlock1" />
<TextBlock Canvas.Top="20" x:Name="txt2" Text="TextBlock2" />
<TextBlock Canvas.Top="40" x:Name="txt3" Text="TextBlock3" />
</Canvas>
В этом коде с помощью свойства x:Name задается три элемента TextBlock: txt1, txt2 и txt3. Теперь с помощью метода findName можно найти именованный узел, получить ссылку на него и, используя эту ссылку, редактировать его. В данном случае, все это выполняется в обработчике события handleLoad (обработка загрузки).
<script type="text/javascript">
function handleLoad(control, userContext, sender) {
var t1 = sender.findName("txt1"); t1.Text = "TextBlock1 has changed"; } </script>
Элементы UI предоставляют метод GetHost (Получить хост). Он может использоваться для доступа к элементу управления Silverlight, в котором располагается данный элемент. Это особенно полезно, если требуется запросить у объекта некоторые сведения, например, номер версии.
Возможны случаи, когда требуется обратиться к родителю элемента UI. Получение ссылки на элемент управления Silverlight и затем использование findName для получения родителя является очень неэффективным способом, поэтому предоставляется метод getParent (Получить родителя). В случае успешного выполнения он возвращает ссылку на родительский элемент; в противном случае, возвращается null.
Доступ к обычным свойствам всегда можно организовать с помощью традиционного синтаксиса с использованием точки (объект.имясвойства),но для поддержки присоединенных свойств существует альтернативная методика с использованием метода GetValue (Получить значение). Например, если необходимо обратиться к свойству Canvas.Top, вы не можете сделать это через o6beKm.Canvas.Top.В этом случае должен использоваться синтаксис o6beKm.GetValue("Canvas.Top"). GetValue также может использоваться для доступа к неприсоединенным (простым) свойствам как эквивалент нотации с использованием точки.
Аналогично, можно применять метод SetValue (Задать значение) для задания значения, как простого, так и присоединенного свойства. Этот метод принимает два параметра. Первый - имя свойства, и второй - присваиваемое значение. Рассмотрим пример:
var t1 = ctrl.content.findName("txt1");
t1.setValue("Canvas.Top",20);
tl["Canvas.Top"] = 20.Элемент TextBlock поддерживает дополнительный метод SetFontSource (Задать источник шрифта), который позволяет использовать в TextBlock загруженный шрифт. Итак, если для отображения текста вы хотите использовать новый шрифт- например, если необходимо поддерживать набор иностранных символов (такой как используется для языков Восточной Азии), - вы можете скачать этот шрифт с помощью объекта Downloader и передать этот объект в метод SetFontSource. После этого TextBlock сможет использовать данный шрифт. Для применения этого метода необходимо обладать правами на распространение шрифта (или его подмножества).
Далее приведен пример использования метода SetFontSource. В данном случае, имеется XAML-документ, описанный с помощью Expression Blend, в котором есть некоторый текст на китайском языке:
<Canvas xmlns=" http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="640" Height="480" Background = "White">
<TextBlock x:Name="myTextBlock" Width="152" Height="64"
Canvas.Left="184" Canvas.Top="56" Text="fr^f4? "
TextWrapping="Wrap" MouseLeftButtonDown="handleIt" />
</Canvas>
В Silverlight 2 имеется стандартный шрифт для этих символов. Если требуется отображать их особым шрифтом, который, вероятно, не доступен на всех пользовательских компьютерах, можно скачать этот шрифт с помощью объекта Downloader. В приведенном выше XAML-коде был описан обработчик события handleIt. Вот эта функция:
// Обработчик события для инициализации и выполнения запроса на скачивание файла шрифта.
function handleIt(sender, eventArgs)
{
// Извлекаем ссылку на элемент управления.
var control = sender.getHost();
// Создаем объект Downloader.
var downloader = control.createObject("downloader");
// Добавляем событие Completed.
downloader.addEventListener("Completed", "onCompleted");
// Инициализируем запрос Downloader.
downloader.open("GET", "MyFontName.TTF");
// Выполняем запрос Downloader.
downloader.send(); }
Данный код обеспечивает создание объекта загрузки. Этот объект скачивает шрифт и описывает обработчик события onCompleted (по завершении), который будет обрабатывать событие Completed, формируемое по завершении загрузки. Это событие будет задавать в качестве источника шрифта для TextBlock дополнительный шрифт, и тогда Silverlight будет формировать визуальное представление китайских иероглифов, используя этот новый источник шрифта.
// Обработчик события Completed.
function onCompleted(sender, eventArgs)
{// Извлекаем объект TextBlock.
var myTextBlock = sender.findName("myTextBlock");
// Добавляем файлы шрифтов, содержащиеся в загруженном объекте
// в коллекцию шрифтов типа
TextBlock. myTextBlock. setFontSource(sender);
// Задаем свойству FontFamily удобное для пользователя имя шрифта.
myTextBlock.fontFamily = "Simhei";
}
Элементы UI поддерживают ряд событий, которые могут быть ассоциированы с функциями JavaScript либо через AddEventListener для добавления их во время выполнения, либо путем использования соответствующего атрибута XAML для добавления их во время разработки. Например, чтобы ассоциировать событие MouseLeftButtonDown (Нажатие левой кнопки мыши) с помощью JavaScript, применяется метод AddEventListener:
t1.addEventListener("MouseLeftButtonDown", handleMouseDown);
Чтобы ассоциировать событие в XAML, можно использовать атрибут, имя которого аналогично имени рассматриваемого события (например, "MouseLeftButtonDown"). Рассмотрим пример:
<TextBlock Canvas.Top="0" x:Name="txt1" Text="Status" MouseLeftButtonDown=" handleMouseDown"/>
Элемент UI поддерживает следующие события:
GotFocus ( Получение фокуса ) Это событие формируется, когда элемент получает фокус мыши.KeyDown ( Нажатие клавиши ) Это событие возникает для элемента, находящегося в фокусе, при нажатии клавиши. Обработчик данного события принимает два параметра. Первый параметр, sender (отправитель), представляет ссылку на объект, сформировавший событие. Второй параметр - объект KeyEventArgs, имеющий ряд собственных свойств. Одно из них - key (клавиша), является целым значением, представляющим нажатую клавишу. Это значение не является характерным для операционной системы, и соответствия между ним и конкретными клавишами можно найти в Silverlight SDK. Другое свойство - platformKeyCode (код клавиши для конкретной ОС) относится к операционной системе. Кроме фактической клавиши, предоставляются Булевы свойства shift и ctrl. Они показывают, были ли нажаты клавиши Shift и Ctrl. (Обратите внимание, что это событие не формируется, когда Silverlight выполняется в полноэкранном режиме.)KeyUp ( Удерживаемая клавиша отпущена ) Это событие возникает для элемента, находящегося в фокусе, когда удерживаемая клавиша отпускается. Оно предусматривает все те же два параметра, что и событие KeyDown. (Заметьте, что это событие не формируется, когда Silverlight выполняется в полноэкранном режиме.)Loaded Это событие формируется, когда содержимое Silverlight загружено в элемент управления Silverlight и проведен его синтаксический разбор, но перед формированием его визуального представления.LostFocus ( Потеря фокуса ) Это событие, противоположное GotFocus: оно формируется, когда объект теряет фокус.MouseEnter ( Вход курсора мыши ) Это событие формируется, когда курсор мыши входит в границы объекта.MouseLeave ( Выход курсора мыши ) Это событие, противоположное MouseEnter: оно формируется, когда курсор мыши покидает область, ограничивающую объект.MouseLeftButtonDown Это событие возникает при нажатии пользователем левой кнопки мыши, когда курсор находится над элементом UI.MouseLeftButtonUp ( Удерживаемая левая кнопка мыши отпущена ) Это событие возникает при отпускании удерживаемой левой кнопки мыши.MouseMove ( Перемещение мыши ) Это событие формируется при перемещении курсора по элементу UI.С помощью обработчиков событий мыши и методов Silverlight CaptureMouse (Перехватывать события мыши) и ReleaseMouseCapture (Приостановить
Прежде всего, давайте рассмотрим XAML-документ, содержащий несколько фигур, которые могут перемещаться по холсту методом "drag-and-drop". Обработчики событий мыши ( MouseLeftButtonDown, MouseLeftButtonUp и MouseMove ) в этих фигурах связаны с функциями onMouseDown, onMouseUp и onMouseMove, соответственно.
<Canvas xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x=" http://schemas.microsoft.com/winfx/2006/xaml"
Height="400" Width = "400">
<Ellipse Canvas.Top="0" Height="10" Width="10" Fill= "Black"
MouseLeftButtonDown ="onMouseDown"
MouseLeftButtonUp="onMouseUp"
MouseMove="onMouseMove" />
<Ellipse Canvas.Top="20" Height="10" Width = "10" Fill= "Black"
MouseLeftButtonDown ="onMouseDown"
MouseLeftButtonUp="onMouseUp"
MouseMove="onMouseMove"/>
<Ellipse Canvas.Top="40" Height="10" Width = "10" Fill="Black"
MouseLeftButtonDown ="onMouseDown"
MouseLeftButtonUp="onMouseUp" MouseMove="onMouseMove"/>
<Ellipse Canvas.Top="60" Height="10" Width = "10" Fill= "Black"
MouseLeftButtonDown ="onMouseDown"
MouseLeftButtonUp="onMouseUp" MouseMove="onMouseMove"/>
</Canvas>
Теперь, рассмотрим каждую функцию-обработчик события в отдельности. Сначала обратимся к обработчику события MouseDown (Нажатие кнопки мыши). При перетягивании элемент управления должен "владеть" событиями мыши, таким образом, используется метод captureMouse. Также необходимо запоминать исходные точки перед перетягиванием, эта информация также будет сохраняться обработчиком события. Наконец, с помощью булевой переменной isMouseDown (кнопка мыши нажата) мы обозначаем, что кнопка мыши нажата.
var beginX;
var beginY;
var isMouseDown = false;
function onMouseDown(sender, mouseEventArgs)
{
beginX = mouseEventArgs.getPosition(null).x;
beginY = mouseEventArgs.getPosition(null).y;
isMouseDown = true;
sender.captureMouse();
}
Операция "drag-and-drop" заключается в перемещении элемента с помощью мыши. Поэтому, когда возникает событие MouseMove, текущие координаты курсора мыши запоминаются, чтобы затем использоваться для определения того, куда должен быть перемещен элемент.
Текущие х- и у-координаты курсора мыши получаем из объекта mouseEventArgs. В примере выполняется перетягивание объекта Ellipse, т.е. он является sender. Задать его свойства Top и Left можно, добавляя приращение координат к исходным х- и у-координатам.
Также заметьте, что событие onMouseMove будет сформировано независимо от того, выполняется ли перетягивание или нет, поэтому для проверки используется событие isMouseDown. (Помните, оно было задано в предыдущем обработчике события MouseDown.)
function onMouseMove(sender, mouseEventArgs)
{
if (isMouseDown == true) {
var currX = mouseEventArgs.getPosition(null).x;
var currY = mouseEventArgs.getPosition(null).y;
sender["Canvas.Left"] += currX - beginX;
sender["Canvas.Top"] += currY - beginY;
beginX = currX;
beginY = currY;
}
}
Наконец, когда кнопка мыши отпущена, будет приостановлено отслеживание событий мыши и переменная isMouseDown возвращена в исходное состояние. Эллипс останется на новом месте.
function onMouseUp(sender, mouseEventArgs) {
isMouseDown = false;
sender.releaseMouseCapture(); }
На рис. 6.4 показано 4 эллипса, для которых активирована возможность перемещения методом "drag-and-drop". На рис. 6.5 показано размещение этих эллипсов после перетягивания.
(рис 6.4) Четыре эллипса, для которых активирована возможность перемещения методом "drag and drop"
(рис 6.5) Перемещение эллипсов методом "drag and drop"
В данной лекции рассмотрена объектная модель Silverlight и возможность ее использования при программировании на JavaScript. Вы узнали, как разместить элемент управления Silverlight в браузере, включая то, как инициализировать его и задать исходное состояние с помощью его модели свойств. Было показано, как элемент управления может быть настроен с помощью контекста и специальных параметров. Также представлена полная поддерживаемая им модель свойств, методов и событий. Кроме того, вы научились реализовывать собственный обработчик событий и использовать основной стандартный обработчик событий.
Мы рассмотрели, как добавлять в элемент управления внешнее содержимое с помощью объекта Downloader, и как перехватывать события, которые он формирует, для обеспечения обратной связи о процессе загрузки. Вы познакомились с предлагаемыми XAML элементами UI, с предоставляемыми ими методами, событиями и свойствами и возможностями их программирования.
Теперь, когда вы познакомились с Silverlight и его возможностями, пришло время переходить на следующий уровень и изучить богатый и мощный набор элементов управления и модель программирования, предлагаемые Silverlight 2. И начнем мы это в следующей лекции с базового набора элементов управления Silverlight.
В данной лекции будет подробно рассмотрены вопросы разработки решений для Silverlight с использованием XAML-кода и JavaScript. Мы исследуем, как объект подключаемого модуля Silverlight размещается в браузере, а также Downloader, предоставляемом Silverlight, и выясним, как он может использоваться для динамического введения содержимого в приложение. Наконец, будет рассмотрена модель программирования элементов пользовательского интерфейса (UI), составляющих модель элементов управления XAML, и показано использование их методов и событий в модели программирования JavaScript.
Для использования и создания приложений 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), который можно скачать на Веб-сайте
Далее необходимо создать 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 (т.е., ) или ссылка на встроенный XAML, содержащийся в DIV (т.е., #xamlcontent для DIV под именем xamlcontent ). |
||
parentElement |
Это имя DIV, в котором находится элемент управления Silverlight на вашей HTML-странице. | ||
ID |
Это уникальный ID, присваиваемый вами экземпляру элемента управления Silverlight. | ||
width |
Ширина элемента управления в пикселах или в процентном соотношении. | ||
height |
Высота элемента управления в пикселах или в процентном соотношении. | ||
background |
Определяет цвет фона элемента управления. Задание цветов подробно рассматривается в разделе "SolidColorBrush" лекц. 4, "Основы XAML". Можно использовать ARGB -значение, например #FFAA7700, или именованный цвет, например Black. |
||
framerate |
Задает максимально допустимую частоту кадров анимации. Значение по умолчанию равно 24. | ||
isWindowless |
Может принимать значения true или false, значение по умолчанию -false. Если задано true, визуальное представление содержимого Silverlight формируется позади HTML-содержимого, так что HTML-содержимое может отображаться поверх его. |
||
enableHtmlAccess |
Определяет возможность доступа к содержимому, располагающемуся в элементе управления Silverlight, из DOM1 браузера. Значение по умолчанию - true. |
||
inplaceInstallPrompt |
Silverlight имеет два режима установки. Установка inplace (на месте) включает принятие лицензии на ПО и прямую загрузку элемента управления без перехода с сайта, на котором он будет размещаться. При установке 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-файл
Далее представлен простой 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, - как правило, присутствуют в каждом проекте.
В предыдущем примере экземпляр элемента управления 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 должна принимать три параметра: первый - ссылка на элемент управления, второй -
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]);
} }
В элемент управления Silverlight может передаваться дополнительный параметр - параметр контекста. Он включается непосредственно в событие onLoad как второй параметр. Обычно для него используется имя userContext (
Далее представлен пример страницы, на которой размещаются три элемента управления Silverlight. Обратите внимание, что переменные имени и контекста заданы в этой странице-хосте и передаются как параметры в JavaScript, создающий элемент управления Silverlight:
<html>
<head>
<script type="text/javascript" src="Silverlight.js"></script>
<script type="text/javascript">
function handleLoad(control, userContext, rootElement)
{
alert(userContext);
}
function createSilverlight(parentElement, cid, context) {
Silverlight.createObject( "Page.xaml",
document.getElementById(parentElement), cid, {
width:'300', height:'300',
inplaceInstallPrompt:false, background:'#D6D6D6',
isWindowless:'false', framerate:'24', version:'2.0' },
{onError:null, onLoad :handleLoad
},
"p1,p2,p3", context, null); }
</script>
</head>
<body>
<div id="SilverlightControlHost1">
<script type="text/javascript">
createSilverlight("SilverlightControlHost1", "ctrl1","the first control");
</script>
</div>
<div id="SilverlightControlHost2">
<script type="text/javascript">
createSilverlight("SilverlightControlHost2", "ctrl2","the second control");
</script>
</div>
<div id="SilverlightControlHost3">
<script type="text/javascript">
createSilverlight("SilverlightControlHost3", "ctrl3","the third control");
</script>
</div>
</body>
</html>
HTML-страница имеет обработчик события onLoad, который представлен здесь:
<script type="text/javascript">
function handleLoad(control, userContext, rootElement)
{
alert(userContext);
}
</script>
Он принимает параметр userContext и отображает значение контекста в окне предупреждения. Как это выглядит на экране, показано на рис. 6.1, на котором HTML-страница представляет контекст первого элемента управления
(рис 6.1) Вывод на экран пользовательского контекста
Silverlight предоставляет несколько методов обработки ошибок в зависимости от типа ошибки. Ошибки возникают в случаях, когда синтаксический анализатор XAML сталкивается с проблемой, загрузка не завершается соответствующим образом, возникает ошибка времени выполнения и если описанным в XAML-документе обработчикам событий не поставлены в соответствие JavaScript-функции.
При инициализации элемента управления с помощью обработчика событий onError задается функция JavaScript, которая будет вызываться при возникновении ошибки. Однако если такая функция не будет задана (или если она задана как null ), то никакого уведомления об ошибке не будет происходить, и будет отображаться пустая серая область на месте элемента управления Silverlight. Но в проектах, созданных из Expression Blend, описывается стандартный обработчик ошибок.
Стандартный обработчик событий JavaScript обеспечит вывод на экран сообщения об ошибке с основными деталями возникшей ошибки Silverlight, включая код и тип ошибки, а также сообщение с указанием конкретной проблемы и имени вызванного метода.
Далее представлен пример неправильно сформированного XAML-документа, в котором сделана ошибка в имени закрывающего тега элемента TextBlock, он ошибочно назван </TextBlok>:
<Canvas xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x=" http://schemas.microsoft.com/winfx/2006/xaml">
<TextBlock>
Hello, World!
</TextBlok>
</Canvas>
Если используется обработчик, созданный Expression Blend no умолчанию, он обеспечит вывод на экран сообщения об ошибке Silverlight, как показан на рис. 6.2.
(рис 6.2) Сообщение об ошибке
Можно использовать собственный обработчик ошибок. Для этого свойству onError элемента управления Silverlight необходимо задать специальную функцию обработчика ошибок. Она должна будет принимать два параметра: объект отправителя события и аргументы события, описывающие детали возникшей ошибки.
Существует три типа аргументов события. Первый тип - базовый объект ErrorEventArgs (Аргументы ошибки), содержащий тип сообщения об ошибке и код. Свойство errorType (Тип ошибки) определяет тип ошибки в виде строки, содержащей значения RuntimeError (Ошибка времени выполнения) или ParserError (Ошибка синтаксического анализатора). На основании этой информации используется один из двух производных типов ошибок.
При обработке в XAML ошибки синтаксического разбора используется объект ParserErrorEventArgs (Аргументы ошибки синтаксического анализатора). Оно содержит ряд свойств:
charposition (позиция символа) содержит позицию символа, в котором возникла ошибка.linenumber (номер строки) содержит номер строки, в которой возникла ошибка.xamlFile (xaml-файл) определяет файл, в котором возникла ошибка.xmlAttribute (xaml-атрибут) определяет xml-атрибут, в котором возникла ошибка.xmlElement (xaml-элемент) определяет xml-элемент, в котором возникла ошибка.Ошибки времени выполнения определяются в объекте RuntimeErrorEventArgs (Аргументы ошибки времени выполнения). Этот объект также включает ряд свойств:
charPosition определяет позицию символа, в котором возникла ошибка.lineNumber определяет строку, в которой возникла ошибка.methodName (имя метода) определяет метод, связанный с этой ошибкой.Рассмотрим, как ошибку можно перехватить собственным обработчиком ошибок. Прежде всего, создается метод createSilverlight(), выполняющий настройку обработчика ошибок:
function createSilverlight() {
Silverlight.createObject( "Scene.xaml",
document.getElementById("firstControl"), "agc1", {
width:'300',
height:'300',
inplaceInsta llPrompt: false,
background :'#D6D6D6',
isWindowless:'false',
framerate:'24',
version:'2.0' }, {
on Error: handleError,
onLoad:null },
null); }
Далее представлен HTML-файл, который вызывает этот измененный метод создания элемента управления Silverlight и содержит функцию handleError, заданную как обработчик ошибок в атрибуте onError:
<html>
<head>
<script type="text/javascript" src="Silverlight.js"></script>
<script type="text/javascript" src="createSilverlight.js"></script>
<script type="text/javascript">
function handleError(sender, errorArguments) {
var strError = "Error Details: \n";
strError+= "Type: " + errorArguments.errorType + "\n";
strError+= "Message: " + errorArguments.errorMessage + "\n";
strError+= "Code: " + errorArguments.errorCode + "\n";
// Мы знаем (в данном случае), что это ошибка синтаксического анализатора.
// Чтобы обработчик ошибок был более универсальным,
// тип ошибки должен определяться до вызова
// свойств аргументов определенного типа.
strError+= "Xaml File: " + errorArguments.xamlFile + "\n";
strError+= "Xaml Element: " + errorArguments.xmlElement + "\n";
strError+= "Xaml Attribute: " + errorArguments.xmlAttribute + "\n";
strError+= "Line: " + errorArguments.lineNumber + "\n";
strError+= "Position: " + errorArguments.charPosition + "\n";
alert(strError);
}
</script>
</head>
<body>
<div id="firstControl">
<script type="text/javascript">
createSilverlight();
</script>
</div>
</body>
</html>
Если при выполнении этого кода возникает ошибка, на экран будет выведено окно предупреждения с содержимым ошибки. На рис. 6.3 приведен пример собственного окна предупреждения.
(рис 6.3) Использование собственного обработчика ошибок
Элемент управления Silverlight имеет ряд свойств, некоторые из которых уже обсуждались в разделе "Размещение Silverlight в браузере". Свойства могут задаваться не только при инициализации элемента управления, но также с помощью сценария. Элемент управления разделяет свойства на три типа: непосредственные свойства, свойства содержимого и свойства настроек. Непосредственные свойства - это свойства самого элемента управления, которые доступны посредством синтаксиса control.uMnceoucmea. Доступ к свойствам содержимого и настроек осуществляется посредством синтаксиса control.content.uMxceoucmea и control.settings.uMnceoucmea, соответственно.
Ниже перечислены поддерживаемые непосредственные свойства:
initParams В этом свойстве хранятся параметры инициализации, передаваемые в элемент управления. Оно может быть задано только как часть инициализации элемента управления.isLoaded Это свойство принимает значение true после загрузки элемента управления; в противном случае, оно имеет значение false. Является доступным только для чтения.source Это XAML-содержимое, визуальное представление которого должно быть сформировано. Это может быть ссылка на файл, URI службы, формирующей XAML, или (в случае присутствия префикса #) DIV, содержащий XAML-код в блоке сценария.Для организации доступа к свойствам содержимого используется синтаксис control.content.uMnceoucmea. Например, если необходимо обратиться к свойству actualHeight, используется синтаксис control.content.actualHeight Доступны следующие свойства содержимого:
actualHeight Возвращает высоту области отображения элемента управления Silverlightin в пикселах. Возвращаемое значение зависит от ряда критериев. Во-первых, от того, как высота элемента управления была задана изначально. Вспомним, что это может быть процентное соотношение или абсолютное значение в пикселах. В первом случае, свойство actualHeight возвращает текущую высоту элемента управления, но если пользователь изменит размеры браузера, ее значение изменится. Если высота задана абсолютным значением, будет возвращено это значение. При использовании элемента управления в полноэкранном режиме, это свойство будет возвращать разрешающую способность экрана по вертикали.actualWidth Возвращает ширину экрана. Возвращаемое значение зависит от ряда критериев и аналогично параметру actualHeight.fullScreen Переключает режим отображения элемента управления Silverlight между встроенным и полноэкранным режимами. По умолчанию имеет значение false, что обозначает встроенный режим. Когда этому свойству задано значение true, элемент управления Silverlight будет отображаться во весь экран.Элемент управления Silverlight также имеет ряд свойств, которые определены как свойства настроек. Доступ к этим свойствам осуществляется посредством синтаксиса control.settings.uMnceoucmea:
background Это свойство задает цвет фона элемента управления Silverlight. Может принимать значения в нескольких форматах, включая именованный цвет (например, Black ), 8-разрядные значения Red/Green/Blue (RGB) с или без альфа-канала и 16-разрядные RGB -значения с или без альфа-канала.enableFrameRateCounter ( Счетчик частоты кадров включен ) Если задано значение true, Silverlight будет отображать текущую частоту кадров (в кадрах в секунду) в строке состояния браузера. Значение по умолчанию - false.enableHtmlAccess ( Html-доступ включен ) Если задано значение true, XAML-содержимое становится доступным из DOM браузера. Значение по умолчанию - true.enableRedrawRegions ( Перерисовка областей включена ) Если задано значение true, отображаются области объекта подключаемого модуля, перерисовываемые в каждом кадре. Это полезный инструмент оптимизации приложения. Значение по умолчанию -false.maxFrameRate ( Максимальная частота кадров ) Определяет максимальную генерируемую частоту кадров. По умолчанию принимает значение 24 и имеет version ( версия ) Сообщает об используемой в настоящий момент версии элемента управления Silverlight. Это строка, содержащая до четырех разделенных точками целых чисел: основной, дополнительный номера версий, номер сборки и номер редакции, - хотя обязательными являются только первые два значения (основной и дополнительный номер версии).windowless Это свойство определяет режим отображения элемента управления: безоконный или оконный. Если задано значение true, используется безоконный режим, т.е. содержимое Silverlight отображается на странице "за" HTML-содержимым.Элемент управления Silverlight имеет ряд методов, которые могут использоваться для управления его поведением и функционированием. Аналогично группам свойств Silverlight, методы Silverlight тоже сгруппированы в "семейства" методов. В настоящее время поддерживаются один непосредственный метод и три метода содержимого. Что есть что, будет представлено в следующих разделах, включая примеры, демонстрирующие синтаксис этих методов и способ доступа к ним.
Метод createFromXaml (создать из Xaml) является методом содержимого Silverlight, позволяющий задавать XAML-содержимое, которое динамически добавляется в элемент управления Silverlight. Этот метод принимает два параметра. Первый - строка, содержащая XAML, который будет использоваться, и второй - параметр namescope (область имен). Если второй параметр имеет значение true (значением по умолчанию является false ), в предоставленном XAML будут созданы уникальные ссылки x:Name, которые не будут конфликтовать с именами существующих XAML-элементов.
Для createFromXaml существует ограничение: в добавляемом XAML должен быть всего один корневой узел. Поэтому, если необходимо добавить несколько элементов, убедитесь, что все они располагаются в одном узле, включающем элемент Canvas.
Кроме того, createFromXaml не добавляет XAML в элемент управления Silverlight до тех пор, пока он не будет добавлен в дочерний элемент одного из элементов Canvas элемента управления. Итак, при вызове createFromXaml вы получаете ссылку на узел, и эта ссылка затем используется для добавления этого узла в дерево визуального представления. Рассмотрим пример:
function handleLoad(control, userContext, sender) {
var xamlFragment = '<TextBlock Canvas.Top="60" Text="A new TextBlock" />';
textBlock = control.content.createFromXaml(xamlFragment);
sender.children.add(textBlock); }
Здесь создается XAML-код для элемента управления TextBlock с текстом "A new TextBlock" (Новый TextBlock). Этот XAML-код затем используется для создания XAML-узла в содержимом элемента управления. Когда это будет выполнено, Silverlight возвратит ссылку на TextBlock. Эта ссылка добавляется в дерево визуального представления элемента управления Silverlight и используется для прорисовки TextBlock.
Метод createFromXamlDownloader (создать из загрузчика Xaml) является методом содержимого, используемым в паре с объектом Downloader (Загрузчик), который будет рассмотрен в данной лекции позже. Этот метод принимает два параметра. Первый параметр - ссылка на объект Downloader, который загружает XAML-код или пакет, содержащий XAML-код. Второй параметр - имя пакета загружаемого содержимого, который должен использоваться. Если это .zip-файл, задается имя файла, содержащегося в .zip-архиве, в котором находится XAML-код, который предполагается использовать. Если загруженное содержимое не в пакете .zip, в качестве значения этого параметра должна быть задана пустая строка.
Метод createObject (создать объект) является непосредственным методом, предназначенным для создания одноразового объекта для определенной функции. В Silverlight единственным таким поддерживаемым объектом является Downloader. Более подробно остановимся на этом в данной лекции позже.
Этот метод содержимого позволяет выполнять поиск узла в XAML-коде по атрибуту x:Name. Если findName (найти имя) находит узел с заданным именем, он возвращает ссылку на него, в противном случае, возвращается null.
Элемент управления Silverlight предоставляет объект, который обеспечивает возможность загружать дополнительные элементы, используя функциональность асинхронной загрузки. Это позволяет скачивать отдельные ресурсы или ресурсы в виде .zip-архива.
Объект Downloader поддерживает следующие свойства:
downloadProgress ( показатель процесса загрузки ) Это свойство обеспечивает нормализованное значение (между 0 и 1), которое представляет объем загруженного содержимого в процентном соотношении к его общему размеру, где значение 1 эквивалентно 100% загрузки.status ( состояние ) Это свойство принимает код состояния HTTP для текущего состояния процесса загрузки. Возвращает стандартный код состояния HTTP, например, "404" для "Not Found" (не найден) или "200" для "OK".uri Это свойство содержит URI объекта, к которому в настоящий момент обращается загрузчик.Объект Downloader поддерживает следующие методы:
abort ( отменить ) Отменяет текущую загрузку и возвращает все свойства в исходное состояние.getResponseText ( получить текст ответа ) Возвращает строковое представление загруженных данных. Принимает обязательный параметр, который используется для указания именованного блока в загружаемом пакете.open ( открыть ) Запускает сеанс загрузки. Принимает три параметра. Первый - команду действия. Набор команд HTTP задокументирован W3C; однако, Silverlight поддерживает только GET (Получить). Второй параметр - URI ресурса, который должен будет загружаться.send ( отправить ) Выполняет запрос загрузки, который был запущен командой open.Объект Downloader поддерживает следующие события:
completed ( завершен ) Это событие формируется по завершении загрузки. Оно принимает два параметра. Первый - объект, сформировавший это событие (в данном случае, сам элемент управления downloader), и второй - набор аргументов события ( eventArgs ).downloadProgressChanged ( показатель процесса загрузки изменился ) Это событие формируется в ходе загрузки. Оно формируется при каждом изменении показателя процесса загрузки (значение которого меняется от 0 до 1) на 0,05 (5%) или более, а также когда он достигает значения 1,0 (100%). По достижении 1,0 также формируется событие completed.Объект Downloader позволяет выполнять доступ к ресурсам сети из JavaScript. Пожалуйста, обратите внимание, что этот объект будет работать, только если приложение Silverlight выполняется с Вебсервера, и будет формировать ошибку в случае загрузки страницы просто из файловой системы.
Объект Downloader создается методом createObject, предоставляемым элементом управления Silverlight. Рассмотрим пример:
< script type="text/javascript" >
function handleLoad(control, userContext, sender)
{ var downloader = control.createObject("downloader");
} </script>
Следующий шаг - запустить сеанс загрузки. Для этого с помощью метода open объекта Downloader объявляется URI файла и вызывается метод send для начала загрузки. Далее представлен пример, в котором выполняется загрузка файла фильма movie.:
function handleLoad(control, userContext, sender) {
var downloader = control.createObject("downloader");
downloader.open ("GET","movie.wmv");
downloader.send(); }
Для отслеживания процесса загрузки и момента ее завершения понадобится создать соответствующие обработчики событий. Далее представлена та же функция, но в нее были внесены необходимые дополнения:
function handleLoad(control, userContext, sender)
{
var downloader = control.createObject("downloader");
downloader.addEventListener("downloadProgressChanged","handleDLProgress");
downloader.addEventListener("completed","handleDLComplete");
downloader.open ("GET","movie.wmv");
downloader.send();
}
Теперь можно применить эти обработчики событий. В данном примере событие downloadProgressChanged связано с функцией JavaScript handleDLProgress, и событие completed - с функцией JavaScript handleDLComplete. Эти функции представлены в данном фрагменте кода:
function handleDLProgress(sender, args) {
var ctrl = sender.getHost();
var t1 = ctrl.content.findName("txt1");
var v = sender.downloadProgress * 100;
t1.Text = v + "%"; }
function handleDLComplete(sender, args) {
alert("Download complete"); }
Downloader может использоваться только для приложений, размещенных на Вебсервере. В случае попытки его использования со страницы, загружаемой из файловой системы, будет сформирована ошибка.XAML предоставляет ряд визуальных элементов для создания UI. Все они были перечислены и подробно рассмотрены в лекциях 4 и 5. К элементам UI относятся Canvas, Ellipse, и другие.
Каждый из этих элементов поддерживает полнофункциональный набор методов и событий, которые будут перечислены и рассмотрены в следующих нескольких разделах.
Кроме того, Silverlight 2 обладает богатым набором элементов управления. Они используются из .NET-кода для создания насыщенных UI, которые подробно обсуждаются в лекц. 7, "Элементы управления Silverlight: представления и компоновки".
Элементы UI предоставляют функции, которые могут вызываться из JavaScript. Эти функции позволяют манипулировать элементами UI для создания сложных сценариев взаимодействия с приложением и являются общими для всех элементов UI.
Метод AddEventListener (Добавить обработчик события) используется для привязки к элементу UI обработчика события во время выполнения. Это полезно для разделения дизайна и разработки: разработчик ничего не добавляет непосредственно в XAML, создаваемый дизайнером, а вводит код обработки события в файл (или блок) JavaScript. События элементов UI, которые могут обрабатываться, обсуждаются в данной лекции позже.
Далее представлен пример привязки обработчика события во время выполнения. Здесь добавляется обработчик события, который отслеживает щелчок мыши и определяет, что событие должно обрабатываться функцией JavaScript handleMouse (обработка мыши). Эта функция, как большинство обработчиков событий, принимает два параметра: аргументы отправителя и события. Поскольку обрабатывается событие мыши, данная функция принимает экземпляр объекта MouseEventArgs (Аргументы события мыши), предоставляющий координаты х и у положения мыши в момент формирования события:
<script type="text/javascript">
function handleLoad(control, userContext, sender)
{
sender.addEventListener("mouseLeftButtonDown", handleMouse);
}
function handleMouse(sender, mouseEventArgs)
{
alert(mouseEventArgs.getPosition(null).x + ":"
+ mouseEventArgs.getPosition(null).y);
}
</script>
Вы можете уничтожить подключение во время выполнения, используя метод RemoveEventListener (Удалить обработчик события). В него можно передать либо целочисленный маркер, который был возвращен addEventListener, либо имя события.
Этот метод используется для выполнения поиска именованного объекта в дереве элементов XAML Он возвращает ссылку на заданный объект, если он существует; в противном случае, он возвратит null. Например, рассмотрим код XAML:
<Canvas xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x=" http://schemas.microsoft.com/winfx/2006/xaml"
Height="400" Width="400">
<TextBlock Canvas.Top="0" x:Name="txt1" Text="TextBlock1" />
<TextBlock Canvas.Top="20" x:Name="txt2" Text="TextBlock2" />
<TextBlock Canvas.Top="40" x:Name="txt3" Text="TextBlock3" />
</Canvas>
В этом коде с помощью свойства x:Name задается три элемента TextBlock: txt1, txt2 и txt3. Теперь с помощью метода findName можно найти именованный узел, получить ссылку на него и, используя эту ссылку, редактировать его. В данном случае, все это выполняется в обработчике события handleLoad (обработка загрузки).
<script type="text/javascript">
function handleLoad(control, userContext, sender) {
var t1 = sender.findName("txt1"); t1.Text = "TextBlock1 has changed"; } </script>
Элементы UI предоставляют метод GetHost (Получить хост). Он может использоваться для доступа к элементу управления Silverlight, в котором располагается данный элемент. Это особенно полезно, если требуется запросить у объекта некоторые сведения, например, номер версии.
Возможны случаи, когда требуется обратиться к родителю элемента UI. Получение ссылки на элемент управления Silverlight и затем использование findName для получения родителя является очень неэффективным способом, поэтому предоставляется метод getParent (Получить родителя). В случае успешного выполнения он возвращает ссылку на родительский элемент; в противном случае, возвращается null.
Доступ к обычным свойствам всегда можно организовать с помощью традиционного синтаксиса с использованием точки (объект.имясвойства),но для поддержки присоединенных свойств существует альтернативная методика с использованием метода GetValue (Получить значение). Например, если необходимо обратиться к свойству Canvas.Top, вы не можете сделать это через o6beKm.Canvas.Top.В этом случае должен использоваться синтаксис o6beKm.GetValue("Canvas.Top"). GetValue также может использоваться для доступа к неприсоединенным (простым) свойствам как эквивалент нотации с использованием точки.
Аналогично, можно применять метод SetValue (Задать значение) для задания значения, как простого, так и присоединенного свойства. Этот метод принимает два параметра. Первый - имя свойства, и второй - присваиваемое значение. Рассмотрим пример:
var t1 = ctrl.content.findName("txt1");
t1.setValue("Canvas.Top",20);
tl["Canvas.Top"] = 20.Элемент TextBlock поддерживает дополнительный метод SetFontSource (Задать источник шрифта), который позволяет использовать в TextBlock загруженный шрифт. Итак, если для отображения текста вы хотите использовать новый шрифт- например, если необходимо поддерживать набор иностранных символов (такой как используется для языков Восточной Азии), - вы можете скачать этот шрифт с помощью объекта Downloader и передать этот объект в метод SetFontSource. После этого TextBlock сможет использовать данный шрифт. Для применения этого метода необходимо обладать правами на распространение шрифта (или его подмножества).
Далее приведен пример использования метода SetFontSource. В данном случае, имеется XAML-документ, описанный с помощью Expression Blend, в котором есть некоторый текст на китайском языке:
<Canvas xmlns=" http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="640" Height="480" Background = "White">
<TextBlock x:Name="myTextBlock" Width="152" Height="64"
Canvas.Left="184" Canvas.Top="56" Text="fr^f4? "
TextWrapping="Wrap" MouseLeftButtonDown="handleIt" />
</Canvas>
В Silverlight 2 имеется стандартный шрифт для этих символов. Если требуется отображать их особым шрифтом, который, вероятно, не доступен на всех пользовательских компьютерах, можно скачать этот шрифт с помощью объекта Downloader. В приведенном выше XAML-коде был описан обработчик события handleIt. Вот эта функция:
// Обработчик события для инициализации и выполнения запроса на скачивание файла шрифта.
function handleIt(sender, eventArgs)
{
// Извлекаем ссылку на элемент управления.
var control = sender.getHost();
// Создаем объект Downloader.
var downloader = control.createObject("downloader");
// Добавляем событие Completed.
downloader.addEventListener("Completed", "onCompleted");
// Инициализируем запрос Downloader.
downloader.open("GET", "MyFontName.TTF");
// Выполняем запрос Downloader.
downloader.send(); }
Данный код обеспечивает создание объекта загрузки. Этот объект скачивает шрифт и описывает обработчик события onCompleted (по завершении), который будет обрабатывать событие Completed, формируемое по завершении загрузки. Это событие будет задавать в качестве источника шрифта для TextBlock дополнительный шрифт, и тогда Silverlight будет формировать визуальное представление китайских иероглифов, используя этот новый источник шрифта.
// Обработчик события Completed.
function onCompleted(sender, eventArgs)
{// Извлекаем объект TextBlock.
var myTextBlock = sender.findName("myTextBlock");
// Добавляем файлы шрифтов, содержащиеся в загруженном объекте
// в коллекцию шрифтов типа
TextBlock. myTextBlock. setFontSource(sender);
// Задаем свойству FontFamily удобное для пользователя имя шрифта.
myTextBlock.fontFamily = "Simhei";
}
Элементы UI поддерживают ряд событий, которые могут быть ассоциированы с функциями JavaScript либо через AddEventListener для добавления их во время выполнения, либо путем использования соответствующего атрибута XAML для добавления их во время разработки. Например, чтобы ассоциировать событие MouseLeftButtonDown (Нажатие левой кнопки мыши) с помощью JavaScript, применяется метод AddEventListener:
t1.addEventListener("MouseLeftButtonDown", handleMouseDown);
Чтобы ассоциировать событие в XAML, можно использовать атрибут, имя которого аналогично имени рассматриваемого события (например, "MouseLeftButtonDown"). Рассмотрим пример:
<TextBlock Canvas.Top="0" x:Name="txt1" Text="Status" MouseLeftButtonDown=" handleMouseDown"/>
Элемент UI поддерживает следующие события:
GotFocus ( Получение фокуса ) Это событие формируется, когда элемент получает фокус мыши.KeyDown ( Нажатие клавиши ) Это событие возникает для элемента, находящегося в фокусе, при нажатии клавиши. Обработчик данного события принимает два параметра. Первый параметр, sender (отправитель), представляет ссылку на объект, сформировавший событие. Второй параметр - объект KeyEventArgs, имеющий ряд собственных свойств. Одно из них - key (клавиша), является целым значением, представляющим нажатую клавишу. Это значение не является характерным для операционной системы, и соответствия между ним и конкретными клавишами можно найти в Silverlight SDK. Другое свойство - platformKeyCode (код клавиши для конкретной ОС) относится к операционной системе. Кроме фактической клавиши, предоставляются Булевы свойства shift и ctrl. Они показывают, были ли нажаты клавиши Shift и Ctrl. (Обратите внимание, что это событие не формируется, когда Silverlight выполняется в полноэкранном режиме.)KeyUp ( Удерживаемая клавиша отпущена ) Это событие возникает для элемента, находящегося в фокусе, когда удерживаемая клавиша отпускается. Оно предусматривает все те же два параметра, что и событие KeyDown. (Заметьте, что это событие не формируется, когда Silverlight выполняется в полноэкранном режиме.)Loaded Это событие формируется, когда содержимое Silverlight загружено в элемент управления Silverlight и проведен его синтаксический разбор, но перед формированием его визуального представления.LostFocus ( Потеря фокуса ) Это событие, противоположное GotFocus: оно формируется, когда объект теряет фокус.MouseEnter ( Вход курсора мыши ) Это событие формируется, когда курсор мыши входит в границы объекта.MouseLeave ( Выход курсора мыши ) Это событие, противоположное MouseEnter: оно формируется, когда курсор мыши покидает область, ограничивающую объект.MouseLeftButtonDown Это событие возникает при нажатии пользователем левой кнопки мыши, когда курсор находится над элементом UI.MouseLeftButtonUp ( Удерживаемая левая кнопка мыши отпущена ) Это событие возникает при отпускании удерживаемой левой кнопки мыши.MouseMove ( Перемещение мыши ) Это событие формируется при перемещении курсора по элементу UI.С помощью обработчиков событий мыши и методов Silverlight CaptureMouse (Перехватывать события мыши) и ReleaseMouseCapture (Приостановить
Прежде всего, давайте рассмотрим XAML-документ, содержащий несколько фигур, которые могут перемещаться по холсту методом "drag-and-drop". Обработчики событий мыши ( MouseLeftButtonDown, MouseLeftButtonUp и MouseMove ) в этих фигурах связаны с функциями onMouseDown, onMouseUp и onMouseMove, соответственно.
<Canvas xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x=" http://schemas.microsoft.com/winfx/2006/xaml"
Height="400" Width = "400">
<Ellipse Canvas.Top="0" Height="10" Width="10" Fill= "Black"
MouseLeftButtonDown ="onMouseDown"
MouseLeftButtonUp="onMouseUp"
MouseMove="onMouseMove" />
<Ellipse Canvas.Top="20" Height="10" Width = "10" Fill= "Black"
MouseLeftButtonDown ="onMouseDown"
MouseLeftButtonUp="onMouseUp"
MouseMove="onMouseMove"/>
<Ellipse Canvas.Top="40" Height="10" Width = "10" Fill="Black"
MouseLeftButtonDown ="onMouseDown"
MouseLeftButtonUp="onMouseUp" MouseMove="onMouseMove"/>
<Ellipse Canvas.Top="60" Height="10" Width = "10" Fill= "Black"
MouseLeftButtonDown ="onMouseDown"
MouseLeftButtonUp="onMouseUp" MouseMove="onMouseMove"/>
</Canvas>
Теперь, рассмотрим каждую функцию-обработчик события в отдельности. Сначала обратимся к обработчику события MouseDown (Нажатие кнопки мыши). При перетягивании элемент управления должен "владеть" событиями мыши, таким образом, используется метод captureMouse. Также необходимо запоминать исходные точки перед перетягиванием, эта информация также будет сохраняться обработчиком события. Наконец, с помощью булевой переменной isMouseDown (кнопка мыши нажата) мы обозначаем, что кнопка мыши нажата.
var beginX;
var beginY;
var isMouseDown = false;
function onMouseDown(sender, mouseEventArgs)
{
beginX = mouseEventArgs.getPosition(null).x;
beginY = mouseEventArgs.getPosition(null).y;
isMouseDown = true;
sender.captureMouse();
}
Операция "drag-and-drop" заключается в перемещении элемента с помощью мыши. Поэтому, когда возникает событие MouseMove, текущие координаты курсора мыши запоминаются, чтобы затем использоваться для определения того, куда должен быть перемещен элемент.
Текущие х- и у-координаты курсора мыши получаем из объекта mouseEventArgs. В примере выполняется перетягивание объекта Ellipse, т.е. он является sender. Задать его свойства Top и Left можно, добавляя приращение координат к исходным х- и у-координатам.
Также заметьте, что событие onMouseMove будет сформировано независимо от того, выполняется ли перетягивание или нет, поэтому для проверки используется событие isMouseDown. (Помните, оно было задано в предыдущем обработчике события MouseDown.)
function onMouseMove(sender, mouseEventArgs)
{
if (isMouseDown == true) {
var currX = mouseEventArgs.getPosition(null).x;
var currY = mouseEventArgs.getPosition(null).y;
sender["Canvas.Left"] += currX - beginX;
sender["Canvas.Top"] += currY - beginY;
beginX = currX;
beginY = currY;
}
}
Наконец, когда кнопка мыши отпущена, будет приостановлено отслеживание событий мыши и переменная isMouseDown возвращена в исходное состояние. Эллипс останется на новом месте.
function onMouseUp(sender, mouseEventArgs) {
isMouseDown = false;
sender.releaseMouseCapture(); }
На рис. 6.4 показано 4 эллипса, для которых активирована возможность перемещения методом "drag-and-drop". На рис. 6.5 показано размещение этих эллипсов после перетягивания.
(рис 6.4) Четыре эллипса, для которых активирована возможность перемещения методом "drag and drop"(рис 6.5) Перемещение эллипсов методом "drag and drop"
В данной лекции рассмотрена объектная модель Silverlight и возможность ее использования при программировании на JavaScript. Вы узнали, как разместить элемент управления Silverlight в браузере, включая то, как инициализировать его и задать исходное состояние с помощью его модели свойств. Было показано, как элемент управления может быть настроен с помощью контекста и специальных параметров. Также представлена полная поддерживаемая им модель свойств, методов и событий. Кроме того, вы научились реализовывать собственный обработчик событий и использовать основной стандартный обработчик событий.
Мы рассмотрели, как добавлять в элемент управления внешнее содержимое с помощью объекта Downloader, и как перехватывать события, которые он формирует, для обеспечения обратной связи о процессе загрузки. Вы познакомились с предлагаемыми XAML элементами UI, с предоставляемыми ими методами, событиями и свойствами и возможностями их программирования.
Теперь, когда вы познакомились с Silverlight и его возможностями, пришло время переходить на следующий уровень и изучить богатый и мощный набор элементов управления и модель программирования, предлагаемые Silverlight 2. И начнем мы это в следующей лекции с базового набора элементов управления Silverlight.
Для получения официальных документов о завершении программы дополнительного профессионального образования (удостоверения о повышении квалификации, дипломов о профессиональной переподготовке и MBA) необходимо предоставить:
Внимание! Вы можете не заказывать доставку бумажной версии официального документы, а скачать его в электронном виде и распечатать самостоятельно. Информация о выданном документе в течение 1 месяца загружается в Федеральную информационную систему «Федеральный реестр сведений о документах об образовании и (или) о квалификации, документах об обучении» - ФИС ФРДО.
Доступ на новый сайт осуществляется с использованием адреса электронной почты, который был указан вами при регистрации на "старом". Мы постарались перенести все ваши данные с прежнего ресурса, однако не исключена вероятность потери части информации.
При возникновении проблемы со входом, воспользуйтесь функцией сброса пароля
Если вы обнаружите несоответствия, пожалуйста, сообщите нам.