Элементы управления Silverlight в ASP.NET

Обеспечение доступа к HTML

С помощью свойства EnableHtmlAccess можно получить или задать для элемента управления Silverlight доступ к DOM HTML По умолчанию это свойство имеет значение true, что активирует доступ к DOM.

Для работы с DOM браузера в приложении используется пространство имен System.Windows.Browser. Это обеспечивает вам доступ к классам, таким как HtmlPage, используемым для запроса метаданных страницы, на которой располагается элемент управления Silverlight, а также возможность поиска определенного элемента в документе. Элементы HTML могут быть представлены в .NET классом HtmlElement (HTML-элемент).

Например, если в HTML имеется элемент <DIV> под именем testDiv, к нему можно обращаться и изменять из кода Silverlight следующим образом:

HtmlElement testDiv = HtmlPage.Document.GetElementById("testDiv"); 
testDiv.SetAttribute("innerText", "This is the testDiv");

Очень полезный класс - HtmlPage.BrowserInformation, он предоставляет метаданные, такие как Browser Version (Версия браузера), Sub Version (Дополнительная версия), Name (Имя), Platform (Платформа), User Agent (Агент пользователя) и включена поддержка cookie или нет.

Вот пример его содержимого во время выполнения:

? HtmlPage.BrowserInformation {System.Windows.Browser.BrowserInformation}
BrowserVersion: {4.0}
CookiesEnabled: true
Name: "Microsoft Internet Explorer"
Platform: "Win32" UserAgent: "Mozilla/4.0 (compatible; MSIE 7.0; 
Windows NT 6.0; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; 
.NET CLR 3.0.04506; InfoPath.2; .NET CLR 3.5.21022; MS-RTC LM 8)"
? Html Page.BrowserInformation.BrowserVersion {4.0}
Build: -1
Major: 4
Minor: 0 Revision: -1

Использование перерисовываемых областей

Другой наглядный пример, который поможет понять работу приложения Silverlight, - концепция перерисовываемой области (Redraw Region).Это визуальный индикатор, указывающий на части элемента управления Silverlight, которые перерисовываются. С помощью атрибута EnableRedrawRegions, задавая ему значение true вместо используемого по умолчанию false, можно включить эти маркеры. Итак, если вернуться к примеру с вращающейся линией и изменить разметку элемента управления ASP.NET, как показано в следующем коде, индикация перерисовываемых областей будет включена:

<asp:Silverlight ID="Xaml1" runat="server" 
      Source="~/ClientBin/ASP1.xap" Version="2.0" 
      Width = "100%" Height="100%" 
      EnableFrameRateCounter="true" EnableRedrawRegions="true" />

На рис. 13.3 показан создаваемый этим кодом эффект; перерисовываемые области выделены.

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

Задание свойства PluginBackground

С помощью свойства PluginBackground (Фон подключаемого модуля) можно задавать цвет фона подключаемого модуля. Вспомним, что элемент управления ASP.NET выполняется на сервере и формирует разметку, что позволяет использовать свойства System.Color, включая некоторые системные цвета (такие как Window или ActiveBorder ), и также именованные системные цвета.

Как можно увидеть на рис. 13.4, Visual Studio IntelliSense позволяет выбирать системные и именованные цвета для фона подключаемого модуля.

На рис. 13.5 показано, как будет выглядеть содержимое Silverlight, когда свойству PluginBackground задано значение WindowFrame. Заметьте, что вам придется изменить фон элемента управления Grid в XAML, или он переопределит это значение. Если вы хотите, чтобы цвет фона подключаемого модуля распространялся на все элементы, можно просто удалить это свойство в других элементах.

Если сейчас взглянуть на исходный код страницы, можно увидеть, что значение параметра Background объекта Grid с именем LayoutRoot жестко задано в коде. В примере, представленном на рис. 13.5 для подключаемого модуля задан цвет фона #FF646464.

Управление установкой подключаемого модуля

Если в системе клиента не установлен Silverlight, при переходе на страницу, включающую содержимое Silverlight, пользователь увидит стандартный значок установки Silverlight, как показано на рис. 13.6.

Переопределить это поведение можно специальным HTML-шаблоном. Этот HTML будет отображаться вместо значка установки, поэтому он должен содержать ссылку на ресурс загрузки. Microsoft предлагает удобный URL, который определяет используемые браузер и ОС и обеспечивает соответствующий файл для загрузки. Этот URL - http://www.microsoft.com/silverlight/handlers/getsilverlight.ashx?v=2.0.

Итак, изменить схему установки для Silverlight можно с помощью дочернего тега <PluginNotInstalledTemplate> (Шаблон 'подключаемый модуль не установлен') элемента управления ASP.NET Silverlight. Рассмотрим пример:

<asp:Silverlight ID="Xaml1" runat="server" 
     Source="~/ClientBin/ASP1.xap" Version = "2.0" 
     Width="100%" Height="100%" PluginBackground = "WindowFrame" > 
  <PluginNotInstalledTemplate> 
    <a href="http://www.microsoft.com/silverlight/handlers/getsilverlight.ashx?v=2.0"> 
       If you want to install the Silverlight control, you can click here! 1
    </a> 
  </PluginNotInstalledTemplate> 
</asp:Silverlight>

Здесь используется гиперссылка (тег <a> ) на вышеупомянутый URL по которому располагается элемент управления Silverlight, и также задается некоторый доброжелательный текст. Конечно, можно предоставить пользователям что-то намного более вычурное, но здесь мы просто демонстрируем возможности. Попадая на вашу страницу, пользователь, не имеющий Silverlight, будет видеть содержимое, которое покажет, как установить Silverlight. Если Silverlight у пользователя установлен, он будет видеть Silverlight-содержимое.

Использование режима Stretch

Пользователь может менять размер браузера, при этом желательно, чтобы элемент управления Silver-light менялся соответственно. Это можно реализовать в коде, перехватывая события изменения размеров, или автоматически с помощью свойства ScaleMode (Режим масштабирования).

Существует три возможных значения этого свойства:

None Содержимое будет оставаться как есть, поэтому даже при изменении размера браузера, размеры содержимого будут оставаться неизменными.

Stretch Silverlight-содержимое будет менять размеры при изменении размера браузера и менять пропорции соответственно.

Zoom Silverlight-содержимое будет менять размеры при изменении размера браузера, но будет сохранять свои пропорции.

Рис.13.7 и 13.8 демонстрируют использование Stretch и Zoom, соответственно.

Использование режима Windowless

По умолчанию Silverlight перекрывает все содержимое HTML-страницы, попадающее в область его отображения. Используя режим Windowless, можно обеспечить обратное поведение, т.е. HTML-содержимое будет отображаться поверх содержимого Silverlight. Это полезно, если требуется улучшить существующие приложения с помощью Silverlight. Элементы управления HTML (или другой HTML, создаваемый ASP.NET, JSP или другими серверами) могут просто отображаться поверх содержимого Silverlight. Например, есть элементы управления, доступные в HTML и недоступные (пока) в Silverlight, такие как редактор Rich Text Box (Насыщенное текстовое поле), или, возможно, вы хотите использовать другой Input Method Editor (IME), отличный от предлагаемого Silverlight. В этих случаях, если существуют доступные элементы браузера, обеспечивающие требуемое поведение, можно записать их содержимое поверх содержимого Silverlight.

Рассмотрим пример:

<asp:ScriptManager ID="ScriptManager1" runat= "server">
</asp:ScriptManager> 
<div style="position: absolute; width: 600px; height: 100px; z-index: 1;
     left: 0px; top: 0px"> 
  <form action=""> 
    <textarea style="height:100px; width:300px; left:30px; top:30px" 
        title="TextArea"> 
    </textarea> 
  </form> 
</div>
<div  style="position: absolute; height:100%;top:0px;"> 
  <asp:Silverlight ID="Xaml1" runat="server" 
       Source="~/ClientBin/ASP1.xap" Version="2.0" 
       Width = "100%" Height="100%" PluginBackground="WindowFrame" 
       ScaleMode="Stretch" Windowless="true"> 
  </asp:Silverlight> 
</div>

Обратите внимание, что для элементов <DIV>, включающих элемент управления HTML TextArea (Текстовая область), и Silverlight-содержимого задана абсолютная позиция 0 пикселов от верхней границы. Таким образом, они будут находиться в одном и том же месте на экране. Если бы параметру Windowless не было задано значение true, мы видели бы только Silverlight-содержимое. Однако когда Windowless задано значение true, HTML-содержимое отображается сверху (рис. 13.9).

Режим Windowless следует использовать аккуратно, потому что он может оказывать негативное влияние на производительность, особенно при большом количестве анимаций.

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

Серверный элемент управления также предоставляет ряд событий, которые могут перехватываться обработчиками событий JavaScript. К ним относятся:

Таким образом, элемент управления ASP.NET позволяет задавать все, необходимое объекту, выполняющемуся на стороне клиента. То есть, можно делать все то же самое, что вы делали с помощью тега <Object> и при помощи ASP.NET!

Элемент управления MediaPlayer в ASP.NET

Элемент управления MediaPlayer обеспечивает доставку полнофункционального Silverlight-медиаплеера (видео и/или аудио) на страницу. Он предоставляет ряд шаблонов оформления, которые не только обеспечивают представление медиаплеера, но также полную функциональность управления воспроизведением, остановкой, приостановкой, маркерами, звуком, переходом в полноэкранный режим и многое другое. Также хочу обратить внимание, что элемент управления ASP.NET MediaPlayer имеет все свойства, методы и события типового элемента управления Silverlight, который обсуждался в первой части данной лекции. Таким образом, все, что было сказано о нем здесь, включая настройку Windowless или других свойств, также может применяться к MediaPlayer.

Работать с элементом управления MediaPlayer очень легко: необходимо просто добавить его экземпляр на рабочую поверхность Веб-формы ASP.NET. В верхнем правом углу имеется кнопка, открывающая помощник MediaPlayer Tasks (Задания MediaPlayer), как показано на рис. 13.10.

Настройка при помощи MediaPlayer Tasks

Помощник MediaPlayer Tasks поможет задать основные свойства, которые обеспечат использование медиаплеера на вашем сайте:

Если внимательней посмотреть на рис. 13.11, можно заметить, что ползунок громкости установлен посередине, потому что значение громкости по умолчанию в помощнике MediaPlayer Tasks (рис. 13.10) -0,5. Это демонстрирует гибкость данного элемента управления; вы можете настраивать медиаплеер соответственно конкретным нуждам своего приложения.

Существует ряд других свойств, которые не представлены в помощнике MediaPlayer Tasks. Например, свойство AutoLoad (Автозагрузка). Когда ему задано значение true, мультимедиа автоматически загружается в базовый элемент управления, несмотря на действия пользователя. Когда AutoLoad задано значение false, мультимедиа не будет загружаться до тех пор, пока пользователь или программа не начнут воспроизведение.

Свойство EnableCaptions (Включить титры) используется для включения/выключения скрытых титров, если они кодированы в потоке.

Взаимодействие с мультимедиа

Прежде чем продолжить наш разговор, не помешало бы найти подходящий медиафайл, содержащий маркеры. Хороший пример того, как это можно сделать, представлен в лекц. 11, "Мультимедиа, рукописный ввод и Deep Zoom".

Если в видеопотоке кодированы маркеры, можно написать код, реагирующий на них, и элемент мультимедиа Silverlight будет формировать события, при встрече с этими маркерами. При использовании серверного элемента управления ASP.NET необходим способ ассоциировать эти маркеры с функциями-обработчиками. Рад сообщить, что существуют атрибуты, позволяющие сделать это. Например, OnClientChapterStarted (Начало раздела) определяет функцию JavaScript, которая будет вызываться в начале каждого нового раздела видео. Разделы определяются в Expression Encoder и кодируются в видео или задаются в разметке ASP.NET. Вот пример второго варианта:

<asp:MediaPlayer ID="MediaPlayer1" ScaleMode="Stretch " 
      runat="server" MediaSource="~/ClientBin/balls.wmv" 
      Height="325px" MediaSkinSource="~/Classic.xaml" 
      Width = "461px" OnClientChapterStarted = "doChapter" > 
  <Chapters>
    <asp:MediaChapter Position ="1.0" Title = "Chapter1" /> 
    <asp:MediaChapter Position="2.0" Title = "Chapter2" />
  </Chapters> 
</asp:MediaPlayer>

По достижении очередного раздела будет вызываться JavaScript-функция, определенная в OnClientChapterStarted.

С помощью свойства currentState элемента управления MediaElement можно отслеживать, что происходит с мультимедиа. Это рассматривается в лекц. 11. Данное свойство возвращает значения, представляющие текущее состояние воспроизведения мультимедиа, такие как "playing" (воспроизведение), "buffering" (буферизация), "paused" (приостановлено) и т.д. Если необходимо настроить обработчик события, например, события, которое формируется при изменении состояния, используется атрибут OnCurrentStateChanged элемента управления ASP.NET, определяющий необходимую JavaScript-функцию.

Маркеры подобны разделам с той точки зрения, что они тоже являются фрагментами метаданных, кодированными в видеопоток. По умолчанию все маркеры определены как разделы. С помощью атрибута OnMarkerReached (По достижении маркера) элемента управления ASP.NET можно задать JavaScript-функцию, которая будет вызываться при встрече с маркером.

Кроме того, можно задать действия, выполняющиеся при открытии, закрытии и сбое мультимедиа, используя атрибуты OnMediaOpened (При открытии мультимедиа) , OnMediaEnded (При закрытии мультимедиа) и OnMediaFailed (При сбое мультимедиа), соответственно.

Заключение

В данной лекции рассмотрены два элемента управления ASP.NET, поставляемых с Silverlight SDK. Элемент управления Silverlight используется для управления и развертывания Silverlight-содержимого с использованием парадигмы программирования на стороне сервера. Элемент управления MediaPlayer используется для доставки клиентам медиасодержимого с разным стилевым оформлением. Это чрезвычайно полезные с точки зрения производительности средства в случае использования ASP.NET для доставки Silverlight сайта, и они, безусловно, заслуживают времени, потраченного на их изучение. В следующей лекции рассматривает новое захватывающее дополнение Silverlight 2 - поддержка динамических языков.