Опубликован: 24.05.2010 | Уровень: специалист | Доступ: платный
Лекция 15:

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