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

Показывать лекцию целиком

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

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

Сначала создается HTML-файл. Элемент управления Silverlight будет размещаться на этой странице. Для этого используется тег <object>. Вот пример:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
             "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" > 
  <head>
    <title>App1</title>
  </head>
  <body>
    <div id = 'errorLocation' style="font-size: small;color: Gray;">
    </div> 
    <div id="silverlightControlHost">
      <object  type="application/x-silverlight-2" width = "100%" 
           height="100%" id = "slPlugin">
        <param name="source" value="ClientBin/App1.xap"/>
        <param name="onerror" value="onSilverlightError" />
        <param name="background" value="white" />
        <param name="minRuntimeVersion" value="3.0.40624.0" />
        <param name="autoUpgrade" value="true" />
        <p>Silverlight isn't installed</p>
      </object>
      <iframe id = '_sl_historyFrame' 
          style='visibility:hidden;height:0;width:0;border:0px'></iframe>
    </div> 
  </body> 
</html>

С помощью тега <object> создается экземпляр Silverlight. Это стандартный HTML-тег, следовательно, он поддерживает стандартные параметры.

Параметры используемые в примере:

Атрибут Type (Тип) определяет тип загружаемого объекта. В данном случае задано значение application/x-silverlight-2, которое указывает браузеру загружать подключаемый модуль Silverlight для доступа к этому содержимому.

Атрибут Width (Ширина) определяет ширину элемента управления в процентном соотношении или в пикселах.

Атрибут Height (Высота) определяет высоту элемента управления в процентном соотношении или в пикселах.

Атрибут ID определяет имя элемента управления, используемое в коде JavaScript.

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

Возможны различные варианты обработки событий страницы для загрузки Silverlight.

Первый вариант - задать функцию JavaScript, которая будет вызываться в ответ на событие Onload (После загрузки) тега <Body> в HTML. Этот метод рекомендуется применять в случае выполнения проверки на возможность загрузки Silverlight, и не обязательно вашего приложения. Приложение Silverlight будет загружаться после выполнения вашей страницы, поэтому положительный ответ на загрузку страницы не означает возможности загрузки приложения Silverlight.

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

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

function handleLoad(control, userContext, rootElement) {}

Третий вариант - использование выделенного кода в Silverlight, в котором определяются действия, выполняемые в ответ на загрузку либо приложения, либо любого XAML-элемента вашего приложения (например, страницы по умолчанию).

Для Application стандартный шаблон приложения Silverlight определяет Application_Startup как обработчик события в файле выделенного кода App.xaml.cs.

Для отдельных страниц можно задать обработчик событий в параметре Loaded в XAML, как в данном примере:

<UserControl x:Class="SLTestApp1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="400" Height="300"
    Loaded="UserControl_Loaded" >
  <Grid x:Name="LayoutRoot" Background = "White">
  </Grid> 
</UserControl>

В этом случае в выделенном коде страницы необходим метод с такой сигнатурой, или Silverlight сформирует ошибку:

private void UserControl_Loaded(object sender, RoutedEventArgs e){}

Как альтернативный вариант, код можно выполнить в конструкторе страницы; если имя страницы MainPage.xaml, конструктор будет MainPage().

Реакция на события, возникающие в случае ошибки на странице

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>

Использование собственного обработчика ошибок

Можно использовать собственный обработчик ошибок. Для этого свойству onError элемента управления Silverlight необходимо задать специальную функцию обработчика ошибок. Она должна будет принимать два параметра: объект отправителя события и аргументы события, описывающие детали возникшей ошибки.

Существует три типа аргументов события. Первый тип - базовый объект ErrorEventArgs (Аргументы ошибки), содержащий тип сообщения об ошибке и код. Свойство errorType (Тип ошибки) определяет тип ошибки в виде строки, содержащей значения RuntimeError (Ошибка времени выполнения) или ParserError (Ошибка синтаксического анализатора). На основании этой информации используется один из двух производных типов ошибок.

При обработке в XAML ошибки синтаксического разбора используется объект ParserErrorEventArgs (Аргументы ошибки синтаксического анализатора). Он содержит ряд свойств:

Свойство charposition (позиция символа) содержит позицию символа, в котором возникла ошибка.

Свойство linenumber (номер строки) содержит номер строки, в которой возникла ошибка.

Свойство xamlFile (xaml-файл) определяет файл, в котором возникла ошибка.

Свойство xmlAttribute (xml-атрибут) определяет XML-атрибут, в котором возникла ошибка.

Свойство xmlElement (xml-элемент) определяет XML-элемент, в котором возникла ошибка.

Ошибки времени выполнения определяются в объекте RuntimeErrorEventArgs (Аргументы ошибки времени выполнения). Этот объект также включает ряд свойств:

Свойство charPosition определяет позицию символа, в котором возникла ошибка.

Свойство lineNumber определяет строку, в которой возникла ошибка.

Свойство methodName (имя метода) определяет метод, связанный с этой ошибкой.

Рассмотрим, как ошибку можно перехватить собственным обработчиком ошибок. Прежде всего, создается тег <object>, определяющий обработчик ошибок:

<div id="silverlightControlHost"> 
  <object data = "data:application/x-silverlight-2,"
          type="application/x-silverlight-2" 
          width = "100%" height="100%"> 
    <param name="source" value="doError.xaml"/>
    <param name="onerror" value="onSilverlightError" />
    <param name="background" value="white" />

    <param name="minRuntimeVersion" value="3.0.40624.0" />
    <param name="autoUpgrade" value="true" />
  </object>
  <iframe id = '_sl_historyFrame' 
     style='visibility:hidden;height:0;width:0;border:0px'>
  </iframe>
</div>

В этом фрагменте кода описывается JavaScript-функция onSilverlightError, которая будет вызываться в ответ на любую ошибку.

Рассмотрим пример функции, которая обрабатывает и сообщает об ошибке:

<script type="text/javascript">
function onSilverlightError(sender, args) {
  var appSource = ""; 
  if (sender != null  sender != 0) { 
   appSource = sender.getHost().Source;
  }
  var errorType = args.ErrorType; 
  var iErrorCode = args.ErrorCode;
  var errMsg = "Unhandled Error in Silverlight Application " + appSource + "\n" ;
  errMsg += "Code: "+ iErrorCode + " \n"; 
  errMsg += "Category: " + errorType + " \n"; 
  errMsg += "Message: " + args.ErrorMessage + " \n";
  if (errorType == "ParserError") {
    errMsg += "File: " + args.xamlFile + " \n"; 
    errMsg += "Line: " + args.lineNumber + " \n"; 
    errMsg += "Position: " + args.charPosition + " \n";
  }
  else if (errorType == "RuntimeError") {
    if (args.lineNumber != 0) {
      errMsg += "Line: " + args.lineNumber + " \n"; 
      errMsg += "Position: " + args.charPosition + " \n";
    }
    errMsg += "MethodName: " + args.methodName + " \n";
  }
  alert(errMsg);
}
</script>

Свойства элемента управления Silverlight

Элемент управления Silverlight имеет ряд свойств, некоторые из которых уже обсуждались в разделе "Размещение Silverlight в браузере". Свойства могут задаваться не только при инициализации элемента управления, но также с помощью сценария. Элемент управления разделяет свойства на три типа: непосредственные свойства, свойства содержимого и свойства настроек. Непосредственные свойства - это свойства самого элемента управления, которые доступны посредством синтаксиса control.uMRceoucmea. Доступ к свойствам содержимого и настроек осуществляется посредством синтаксиса control.content.uмяcвoйcтва и control.settings.uмяcвoйcтва, соответственно.

Непосредственные свойства

Ниже перечислены поддерживаемые непосредственные свойства:

initParams В этом свойстве хранятся параметры инициализации, передаваемые в элемент управления. Оно может быть задано только как часть инициализации элемента управления.

isLoaded Свойство isLoaded принимает значение true после загрузки элемента управления; в противном случае, оно имеет значение false. Является доступным только для чтения.

source Это XAML-содержимое, визуальное представление которого должно быть сформировано. Это может быть ссылка на файл, URI службы, формирующей XAML, или (в случае присутствия знака числа #) DIV, содержащий XAML-код в блоке сценария.

Свойства содержимого

Для организации доступа к свойствам содержимого может использоваться синтаксис control.content.uмяcвoйcтва. Например, если необходимо обратиться к свойству actualHeight, используется синтаксис control.content.actualHeight. Доступны следующие свойства содержимого:

actualHeight Возвращает высоту области отображения элемента управления Silverlightin в пикселах. Возвращаемое значение зависит от ряда критериев. Во-первых, от того, как высота элемента управления была задана изначально. Вспомним, что это может быть процентное соотношение или абсолютное значение в пикселах. В первом случае, свойство actualHeight возвращает текущую высоту элемента управления, но если пользователь изменит размеры браузера, ее значение изменится. Если высота задана абсолютным значением, будет возвращено это значение. При использовании элемента управления в полноэкранном режиме, это свойство будет возвращать разрешающую способность экрана по вертикали.

actualWidth Возвращает ширину экрана. Возвращаемое значение зависит от ряда критериев и аналогично параметру actualHeight.

fullScreen Переключает режим отображения элемента управления Silverlight между встроенным и полноэкранным режимами. По умолчанию имеет значение false, что обозначает встроенный режим. Когда этому свойству задано значение true, элемент управления Silverlight будет отображаться во весь экран.

Свойства настроек

Элемент управления Silverlight также имеет ряд свойств, которые определены как свойства настроек. Доступ к этим свойствам осуществляется посредством синтаксиса :

background Свойство background задает цвет фона элемента управления Silverlight. Может принимать значения в нескольких форматах, включая именованный цвет (например, Black), 8-разрядные значения Red/Green/Blue (RGB) с или без альфа-канала и 16-разрядные RGB-значения с или без альфа-канала.

enableFrameRateCounter (Счетчик частоты кадров включен) Если задано значение true, Silverlight будет отображать текущую частоту кадров (в кадрах в секунду) в строке состояния браузера. Значение по умолчанию - false.

enableHtmlAccess (Html-доступ включен) Если задано значение true, объектная модель документов (Document Object Model, DOM) браузера становится доступной из Silverlight. Значение по умолчанию - true.

enableRedrawRegions (Перерисовка областей включена) Если задано значение true, отображаются области объекта подключаемого модуля, перерисовываемые в каждом кадре. Это полезный инструмент оптимизации приложения. Значение по умолчанию - false.

maxFrameRate (Максимальная частота кадров) Определяет максимальную частоту кадров генерируемого содержимого Silverlight. По умолчанию принимает значение 24 и имеет абсолютный максимум 64.

version (версия) Сообщает об используемой в настоящий момент версии элемента управления Silverlight. Это строка, содержащая до четырех разделенных точками целых чисел: основной, дополнительный номера версий, номер сборки и номер редакции, - хотя обязательными являются только первые два значения (основной и дополнительный номера версии).

windowless Это свойство определяет режим отображения элемента управления: безоконный или оконный. Если задано значение true, используется безоконный режим, т.е. содержимое Silverlight отображается на странице "за" HTML-содержимым.

Методы элемента управления Silverlight

Элемент управления Silverlight имеет ряд методов, которые могут использоваться для управления его поведением и функционированием. Аналогично группам свойств Silverlight, методы Silverlight тоже сгруппированы в "семейства" методов. В настоящее время поддерживаются один непосредственный метод и три метода содержимого. Что есть что, будет представлено в следующих разделах, включая примеры, демонстрирующие синтаксис этих методов и способ доступа к ним.

Метод createFromXaml

Метод createFromXaml (создать из Xaml) является методом содержимого Silverlight, позволяющий задавать XAML-содержимое, которое динамически добавляется в элемент управления Silverlight. Этот метод принимает два параметра. Первый - строка, содержащая XAML, который будет использоваться, и второй - параметр namescope (область имен). Если второй параметр имеет значение true (значением по умолчанию является false ), предоставленном XAML создаются уникальные ссылки x:Name, не конфликтующие с именами существующих XAML-элементов.

createFromXaml позволяет задавать ограничение для XAML: в добавляемом 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

Метод createFromXamlDownloader (создать из загрузчика Xaml) является методом содержимого, используемым в паре с объектом Downloader (Загрузчик), который будет рассмотрен в данной главе позже. Этот метод принимает два параметра. Первый параметр - ссылка на объект Downloader, который загружает XAML-код или пакет, содержащий XAML-код. Второй параметр - имя пакета загружаемого содержимого, который должен использоваться. Если это .zip -файл, задается имя файла, содержащегося в .zip -архиве, в котором находится XAML-код, который предполагается использовать. Если загруженное содержимое не в пакете .zip, в качестве значения этого параметра должна быть задана пустая строка.

Метод createObject

Метод createObject (создать объект) является непосредственным методом, предназначенным для создания одноразового объекта для определенной функции. В Silverlight единственным таким поддерживаемым объектом является Downloader. Более подробно остановимся на этом в данной главе позже.

Метод findName

Метод содержимого findName (найти имя) позволяет выполнять поиск узла в XAML-коде по атрибуту x:Name. Если findName находит узел с заданным именем, он возвращает ссылку на него, в противном случае, возвращается null.

Занятие пройдено

Предыдущее занятие Занятие пройдено Следующее занятие

Вернуться к учебному плану