Введение в Silverlight 2

Silverlight является следующим шагом в направлении к улучшению взаимодействия с пользователем через Веб. Цель Silverlight-обеспечить в Веб-приложениях точность отображения и качество пользовательского интерфейса (user interface, UI) доступное в настольных приложениях, позволяя Веб-разработчикам и дизайнерам реализовывать в создаваемых решениях особые требования заказчиков. Silverlight заполняет технологический вакуум между дизайнерами и разработчиками, предоставляя им общий формат для работы. Этот формат обрабатывается браузером и основывается на XML, что упрощает создание шаблонов и автоматическое формирование представления. Таким форматом является XAML - Extensible Application Markup Language (расширяемый язык разметки приложений).

До появления XAML дизайнер Веб-приложений создавал дизайн, используя какой-то определенный набор инструментов и хорошо знакомую ему технологию. Затем разработчик брал то, что сделал дизайнер, и интерпретировал это с помощью другой технологии по своему выбору. Трансформировать то, что было создано дизайнером, без проблем и правильно получалось не всегда, и разработчикам приходилось вносить множество изменений, которые подчас нарушали дизайн. С Silverlight дизайнер может с помощью определенных инструментов изобразить дизайн в виде XAML, передать этот XAML разработчику, который, в свою очередь, может наполнить его функциональностью при помощи кода и развернуть.

Microsoft Silverlight - это подключаемый модуль, который может использоваться в разных браузерах и на разных платформах, разработанный для обеспечения возможности создания сложных сценариев воспроизведения мультимедиа и создания насыщенных интерактивных Интернет-приложений с использованием современных технологий. Он предлагает завершенную модель программирования, которая поддерживает AJAX, .NET и такие динамические языки программирования, как Python и Ruby. Возможность программирования в Silverlight 1.0 обеспечивалась поддержкой существующих Веб-технологий, включая AJAX, JavaScript и DHTML В Silverlight 2 добавляется поддержка динамических языков программирования и языков программирования .NET, а также появляются новые возможности, доступные только при использовании .NET Framework, такие как Изолированное хранилище (Isolated Storage), Работа с сетью (Networking), обширный набор элементов управления и т.д.

В первой части данного курса представлены основы Silverlight 2 и предлагаемые инструменты для дизайна и разработки. Вторая часть курса посвящена более детальному рассмотрению модели программирования.

Silverlight и взаимодействие с пользователем

Silverlight создан как часть огромной экосистемы, используемой для обеспечения наилучшего взаимодействия с конечным пользователем. Существует ряд типовых сценариев доступа к информации через Интернет:

С годами ожидания пользователей относительно того, как должны работать эти приложения, изменились. Например, ожидание,что приложение на настольном компьютере должно быть более функциональным, чем приложение того же типа в мобильном устройстве. Мы как пользователи привыкли к намного большим возможностям настольных устройств по сравнению с мобильными. Кроме того, многие считают, что "так как приложение развернуто в Веб", оно может не обладать теми возможностями, которые предлагает аналогичное настольное приложение. Например, пользователь предъявляет меньшие требования к почтовому Веб-приложению, потому что не верит, что оно может предлагать те же возможности работы с электронной почтой, что и офисные программы, такие как обеспечивает Microsoft Office Outlook.

Однако по мере сближения этих платформ ожидания пользователя растут, и теперь для описания возможностей, превышающих текущий базовый уровень ожиданий, широко используется термин насыщенный (rich).Например, понятие "насыщенное Интернет-приложение" появилось в ответ на повышение уровня сложности приложений с поддержкой AJAX для обеспечения более широких динамических возможностей в таких сценариях, как работа с электронной почтой и картографическими системами. Эволюция ожиданий привела к появлению пользователей, которые хотят получать самые широкие возможности, отвечающие не только требованиям с точки зрения функциональности и эффективности приложения, но также обеспечивающие чувство удовлетворенности продуктами и службами компании, что может служить основной для установления длительных отношений между пользователем и компанией.

В результате, Microsoft направила свои ресурсы на Взаимодействие с пользователем (User Experience, UX) и поставляет инструменты и технологии, которые разработчики могут использовать для реализации UX насыщенных приложений. Кроме того, все эти средства согласованы, т.е. навыки разработки UX-ориентированных приложений будут применимы во всех областях разработки настольных и Веб-приложений. Итак, если требуется создать Веб-версию насыщенного настольного приложения, нет необходимости осваивать новые инструменты и технологии. Аналогично, если создается мобильное приложение и требуется Интернет-версия, нет необходимости иметь два набора навыков, два набора инструментов и две группы разработчиков.

На рис. 1.1 показаны доступные на сегодняшний день модели формирования представления и программирования с ориентированием на Веб. Как можно видеть, типовыми технологиями разработки Веб-приложений являются CSS/DHTML в модели представления и JavaScript/AJAX/ASP.NET в модели разработки. Для настольных приложений, создаваемых на .NET Framework 3.x, XAML обеспечивает модель представления, а модель разработки обеспечивается самой средой .NET. На пересечении этих технологий - браузер с поддержкой Silverlight, обеспечивающий объединение "лучшего из обоих миров".

Типовое насыщенное интерактивное приложение основывается на технологиях, располагающихся в категории "нерасширяемый браузер". Типовое настольное приложение находится в другой части диапазона, для его создания используются совершенно другие технологии. Объединить эти приложения в полнофункциональное легковесное приложение, выполняющееся в браузере, позволяет браузер с поддержкой Silverlight, обеспечивающий модель дизайна CSS/DHTML и XAML и модель программирования JavaScript/AJAX/.NET Framework.

Silverlight достигает этого за счет предоставления подключаемого модуля, расширяющего функциональность браузера такими типовыми технологиями насыщенных UI, как анимация с использованием временной шкалы, векторная графика и аудиовизуальные мультимедиа. Это возможно благодаря средствам формирования визуального представления XAML для браузера, предоставляемым Silverlight. Насыщенный UI может создаваться как XAML-код, и поскольку XAML - язык, основанный на XML, и XML - это просто текст, приложение является совместимым с брандмауэром и (потенциально) удобным для поискового механизма. Браузер получает XAML и визуализирует его.

В сочетании с такой технологией, как AJAX и JavaScript, это может быть динамическим процессом. Фрагменты XAML можно загружать и добавлять в UI, или можно редактировать, реорганизовывать или удалять XAML, находящийся в данный момент в дереве визуального представления, используя простое программирование на JavaScript.

Архитектура Silverlight

Как говорилось выше, основная функциональность Silverlight обеспечивается подключаемым модулем браузера. Этот модуль формирует визуальное представление XAML и обеспечивает модель программирования, которая может основываться либо на JavaScript, либо на .NET Framework и CLR. Поддерживающая это архитектура представлена на рис. 1.2. Основным механизмом программирования поведения приложения Silverlight 1.0 в браузере является JavaScript DOM API. Он позволяет перехватывать пользовательские события, возникающие в приложении (такие как перемещения мыши или щелчки определенного элемента), и вызывать код, определяющий реакцию на них. С помощью методов JavaScript DOM можно манипулировать элементами XAML, например, управлять воспроизведением мультимедиа или анимацией.

Для создания еще более насыщенного и функционального интерфейса доступны все возможности .NET Framework CLR. Помимо того, что можно сделать в JavaScript, данная возможность предлагает множество пространств имен и элементов управления, поставляемых как часть .NET Framework, что позволяет делать вещи, которые было очень сложно, или вообще невозможно, реализовать в JavaScript. Например, доступ к данным с помощью ADO.NET и LINQ, обмен информацией с Веб-сервисами, создание и использование пользовательских элементов управления и т.д.

Кроме того, среда формирования представления поставляется вместе с компонентами, необходимыми для обеспечения возможности воспроизведения в браузере таких файлов, как WMV, WMA и MP3, без всяких внешних зависимостей. Так, например, пользователям Macintosh не нужен проигрыватель Windows Media для воспроизведения WMV-содержимого, достаточно одного Silverlight. Основой всей среды формирования представления является код представления, и он управляет всем процессом визуализации. Все это встроено в подключаемый модуль браузера, поддерживающий основные браузеры Windows и Macintosh.

На рис. 1.3 представлена архитектура простого приложения, выполняющегося в браузере с использованием Silverlight.

В основе выполняющегося в браузере приложения обычно лежит HTML Эта разметка содержит вызовы для создания экземпляров подключаемого модуля Silverlight. При взаимодействии с приложением Silverlight пользователи генерируют события, которые могут быть обработаны функциями JavaScript или .NET Framework. В свою очередь, код программы может вызывать методы элементов содержимого Silverlight для управления ими, добавления нового или удаления существующего содержимого. Наконец, подключаемый модуль может читать и формировать визуальное представление XAML Сам XAML может быть встроен в страницу, существовать как внешний статический файл или как динамический XAML, возвращаемый сервером.

Silverlight и XAML

Теперь, получив общее представление об архитектуре Silverlight и о том, как будет выглядеть типовое приложение, обратимся к основе UX: XAML

XAML - это язык разметки на базе XML, используемый для определения визуальных элементов приложения. К ним относятся UI, графические элементы, анимации, мультимедиа, элементы управления и пр. XAML был представлен Microsoft в Windows Presentation Foundation (WPF), ранее называемом Avalon, который является технологией, ориентированной на выполнение на клиентском компьютере, и частью .NET Framework 3.0 и последующих версий. Как обсуждалось ранее, он разработан с целью заполнения технологической пропасти между дизайнерами и разработчиками при создании приложений.

XAML, используемый в Silverlight, отличается от XAML в WPF. В данном случае XAML - это подмножество,ориентированное на возможности Веб-приложений. Так что те, кто знаком с XAML из WPF, заметят отсутствие некоторых тегов и функциональности, например, элемента <Window>.

XAML использует XML для определения UI с помощью элементов XML Корнем всех XAML-документов Silverlight является элемент-контейнер, такой как Canvas (Холст), определяющий область, в которой будет отрисован ваш UI. При построении Silverlight-приложения корневой элемент Canvas будет содержать объявления пространств имен XML, необходимых Silverlight.

Рассмотрим пример XAML-документа в Silverlight 1.0:

<Canvas xmlns=" http://schemas.microsoft.com/client/2007"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xam l"
        Width="640" Height="480" Background = "White">   
</Canvas>

Можно заметить, что объявлены два пространства имен. Типовой документ XAML содержит базовый набор элементов и атрибутов и дополнительный набор, для описания которого обычно используется префикс x:. Примером дополнительного атрибута пространства имен является широко используемый x:Name,с помощью которого задается имя элемента XAML, что позволяет ссылаться на него в коде. Корневой элемент Canvas объявляет местоположение пространства имен всех элементов.

Элемент Canvas является контейнером. Это означает, что он может содержать другие элементы как дочерние. Эти элементы тоже могут быть контейнерами для других элементов, определяя UI как дерево XML-документа. Например, ниже представлен простой XAML-документ с рядом дочерних элементов, некоторые из которых сами являются контейнерами Canvas:

<Canvas xmlns=" http://schemas.microsoft.com/client/2007" 
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xam l" 
        Width="640" Height="480" Background = "Black" >
  <Rectangle Fill="#FFFFFFFF" Stroke="#FF000000" Width = "136" Height="80" 
             Canvas.Left="120" Canvas.Top="240"/>
  <Canvas>
    <Rectangle Fill="#FFFFFFFF" Stroke="#FF000000" Width = "104" Height="96" 
               Canvas.Left="400" Canvas.Top="320"/>
    <Canvas Width="320" Height="104" Canvas.Left="96" Canvas.Top="64">
      <Rectangle Fill="#FFFFFFFF" Stroke="#FF000000" Width="120" Height="96"/>
      <Rectangle Fill="#FFFFFFFF" Stroke="#FF000000" Width="168" Height="96" 
                 Canvas.Left=" 152" Canvas.Top="8"/>
    </Canvas>
  </Canvas>
</Canvas>

Здесь можно увидеть, что у корневого Canvas есть два дочерних элемента: Rectangle и другой Canvas. Второй Canvas также содержит Rectangle и Canvas, и в последнем Canvas находится еще два элемента Rectangle. Такая иерархическая структура позволяет логически группировать элементы управления и использовать для них общую компоновку и поведение.

XAML в Silverlight поддерживает ряд фигур, которые можно сочетать для получения более сложных объектов. Намного более подробно использование XAML рассматривается в лекц. 4, "Основы XAML", сейчас остановимся лишь на основных фигурах:

Помимо этого, XAML поддерживает кисти (brushes),которые определяют, как объект закрашивается на экране. Внутренняя область объекта закрашивается с помощью кисти fill, а контур объекта отрисовывается кистью stroke. Существует множество типов кистей, включая одноцветные кисти, градиентные, изображения и видео.

Рассмотрим пример использования кисти SolidColorBrush (Одноцветная кисть) для закрашивания эллипса:

<Ellipse Canvas.Top="10" Canvas.Left="24"
         Width="200" Height="150">
  <Ellipse.Fill>
    <SolidColorBrush Color="Black" />
  </Ellipse.Fill>
</Ellipse>

В данном случае кисть использует один из 141 поддерживаемых Silverlight именованных цветов, Black (черный). Также может использоваться стандартная шестнадцатеричная RGB-запись для создания цветов.

Заливки и обводки также могут иметь градиентную заливку. Для этого используется градиентная кисть. Градиент определяется рядом контрольных точек градиента (gradient stops) в нормированном пространстве (normalized space).Так, например, если требуется определить линейный градиент, в котором цвета будут изменяться слева направо от черного к белому через оттенки серого, необходимо задать соответствующие контрольные точки на нормированной линии. В этом случае начало нормированной линии принимается за точку 0, и конец - за точку 1. Таким образом, градиент слева направо в одномерном пространстве имеет две точки градиента, 0 и 1. Если необходимо получить градиент с переходами между несколькими цветами - от черного к красному и затем к белому, например, - пришлось бы задать третью точку где-то между 0 и 1. Однако следует помнить, что при создании заливки мы работаем в двумерном пространстве, поэтому верхний левый угол представляет точка (0,0), и нижний правый угол представляет точка (1,1). Таким образом, для заливки прямоугольника с помощью градиентной кисти использовалась бы LinearGradientBrush следующим образом:

<Rectangle Width="200" Height="150" >
  <Rectangle.Fill>
    <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
      <LinearGradientBrush.GradientStops>
        <GradientStop Color="Red" Offset="0" />
        <GradientStop Color="Black" Offset="1" />
      </LinearGradientBrush.GradientStops>
    </LinearGradientBrush>
    </Rectangle. Fill>
  </Rectangle>

XAML также поддерживает отображение текста. Для этого используется элемент TextBlock. Типовые свойства текста, такие как содержимое, тип шрифта, размер шрифта, обтекание и др., можно изменять через атрибуты. Вот простой пример:

<TextBlock TextWrapping= "Wrap" Width="100"> 
  Hello there, how are you? 
</TextBlock>

Трансформация объектов в XAML осуществляется с помощью ряда трансформаций. К ним относятся:

Возможна группировка трансформаций. Группируя существующие трансформации, можно создать сложную трансформацию. То есть можно, например, переместить объект с помощью трансляции, изменить его размер с помощью масштабирования и при этом повернуть его. Рассмотрим пример, в котором выполняется разворот и изменение масштаба холста:

<Canvas.RenderTransform>
  <TransformGroup>
    <RotateTransform Angle="-45" CenterX="50" CenterY="50"/>
    <ScaleTransform ScaleX="1.5" ScaleY="2" />
  </TransformGroup>
</Canvas.RenderTransform>

Поддержка анимации в XAML реализована посредством определения изменений свойств со временем. Для этого используется временная шкала. Временные шкалы располагаются в раскадровке (story-board).Существуют различные типы анимации:

Изменять свойства можно линейно, тогда свойство меняет значения с течением времени, или в режиме "ключевого кадра", когда определяется ряд контрольных точек, переходы между которыми и создают анимацию. Более подробно эти вопросы будут рассмотрены в лекц. 5, "Трансформация и анимация в XAML".

Но применение XAML выходит далеко за рамки рассмотренных здесь основных понятий. С помощью XAML описываются элементы управления и компоновка UI. Боле подробно это будет рассмотрено в лекц. 7, "Элементы управления Silverlight: представления и компоновки", и в лекциях части 2, "Программирование в Silverlight 2".

Silverlight и пакет инструментов Expression Studio

Компанией Microsoft был создан пакет инструментов Expression Studio. Это современный надежный набор инструментов для дизайнеров, позволяющий им создавать артефакты, которые затем могут быть включены разработчиками при работе с пакетом инструментов Microsoft Visual Studio.

В Expression Studio входит несколько продуктов:

При работе с Silverlight вы будете использовать некоторые или все эти приложения. Далее в данной лекции мы рассмотрим, как Design, Blend и Encoder расширяют ваш инструментарий для проектирования и построения Silverlight-приложений.

Silverlight и Expression Design

Expression Design - это инструмент графического дизайна, с помощью которого можно создавать графические ресурсы, используемые в приложениях. Это мощный и сложный инструмент, поэтому в данном курсе приводится просто обзор того, как он может применяться для Silverlight XAML. Expression Design позволяет сочетать векторные и растровые изображения для обеспечения абсолютной гибкости.

Он поддерживает импорт множества форматов графических файлов. В Expression Design можно импортировать файлы в форматах:

Поддерживается экспорт следующих типов изображений:

Как видите, Expression Design поддерживает экспорт графических ресурсов в виде XAML-файлов. Позже в данной лекции будет показано, как в Expression Design разрабатывается дизайн графических элементов простого приложения. Вы будете экспортировать эти элементы в виде XAML-кода, который сможете использовать для создания приложения в Expression Blend и Visual Studio.

На рис. 1.4 представлено диалоговое окно Export (Экспорт) в Expression Design. В нем можно увидеть несколько вариантов выбора формата, один из которых-XAML Silverlight Canvas (отображается выбранным). Выбор этой опции обеспечит форматирование рисунка с использованием подмножества элементов XAML, которые использует Silverlight, что позволит импортировать полученный в результате XAML в Visual Studio или Expression Blend для построения Silverlight приложения.

Это обеспечит экспорт содержимого в виде XML-документа, включающего элемент Canvas, в котором содержатся элементы вашего дизайна. Рассмотрим пример (сокращенный):

<?xml version="1.0" encoding="utf-8"?>
<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="Document">
  <Canvas x:Name="Layer 1" Width="640.219" Height="480.202" Canvas.Left="0" Canvas.Top="0">
    <Ellipse x:Name="Ellipse" Width="135" Height="161" Canvas.Left="0.546544"
      Canvas.Top="20.3998" Stretch="Fill" StrokeLineJoin="Round" Stroke="#FF000000"
      Fill = "#FFFFC800"/>
    <Path x:Name="Path" Width="135.103" Height="66.444" Canvas.Left="-0.555986"
      Canvas.Top="-0.389065" Stretch="Fill" StrokeLineJoin = "Round" Stroke="#FF000000"
      Fill="#FF000000" Data="..."/>
    <Path x:Name="Path  0" Width="19.4583" Height="23.9019" Canvas.Left="75.8927"
      Canvas.Top="76.1198" Stretch="Fill" StrokeLineJoin="Round" Stroke="#FF000000"
      Fill="#FF000000" Data="..."/>
    <Path x:Name="Path   1" Width="11.0735" Height="24.0564" Canvas.Left="60.473"
      Canvas.Top="106.4" Stretch = "Fill" StrokeLineJoin="Round" Stroke="#FF000000"
      Fill="#FF000000" Data="..."/>
    <Path x:Name="Path  2" Width="76" Height="29.8274" Canvas.Left="31.5465"
      Canvas.Top="127.4" Stretch="Fill" StrokeThickness="7" StrokeLineJoin="Round"
      Stroke="#FF000000" Data= "..."/>
    <Path x:Name="Path  3" Width="20.3803" Height="27.1204" Canvas.Left="31.2028"
      Canvas.Top="75.306" Stretch="Fill" StrokeLineJoin="Round" Stroke="#FF000000"
      Fill="#FF000000" Data="..."/>
  </Canvas>
</Canvas>

Теперь этот XAML можно вырезать и вставить в Expression Blend или Visual Studio, и вы сможете использовать графический элемент в своем приложении.

Silverlight и Expression Blend

Expression Blend обладает возможностью создания приложений Silverlight. При запуске Expression Blend и создании нового проекта предлагается два типа Silverlight проектов, как видно на рис. 1.5.

Этими двумя типами проектов Silverlight являются:

Проект Silverlight 1

При создании нового приложения Silverlight Script с использованием Blend получаемый проект будет содержать стандартный HTML-файл со всем необходимым JavaScript-кодом для создания экземпляра элемента управления Silverlight. Кроме того, Blend также создает базовую XAML-страницу Page.xaml и связанный с ней JavaScript-файл Page.xaml.js. Expression Blend трактует его как JavaScript-файл с выделенным кодом, аналогично тому как Visual Studio трактует C#-файл с выделенным кодом, связанный со страницей ASPX. Наконец, Blend предоставляет копию файла Silverlight.js, который является частью пакета для разработчика ПО (software development kit, SDK) Silverlight. Этот файл управляет созданием экземпляров и загрузкой подключаемого модуля Silverlight для ваших пользователей. Структура проекта представлена на рис. 1.6.

Веб-страница по умолчанию

В Листинге 1.1 представлен код базовой Веб-страницы, создаваемой Blend для проектов Silverlight.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url = (0014)about:internet -->
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>SilverlightSite1</title>
    <script type="text/javascript" src="Silverlight.js"></script>
    <script type="text/javascript" src="Page.xaml.js"></script>
    <style type="text/css">
      #silverlightControlHost 
      { 
       height: 480px; 
       width: 640px; 
      }
      #errorLocation 
      { 
       font-size: small; 
       color: Gray; 
      }
    </style>
    <script type="text/javascript">
      function createSilverlight() 
      { 
       var scene = new SilverlightSite1.Page(); 
       Silverlight.createObjectEx({ 
        source: "Page.xaml",
        parentElement: document.getElementById("silverlightControlHost"), 
        id: "SilverlightControl", 
        properties: { 
          width: "100%", 
          height: "100%", 
          version: "1.0" 
        }, 
        events: { 
          onLoad: Silverlight.createDelegate(scene, scene.handleLoad), 
          onError: function(sender, args) { 
            var errorDiv = document.getElementById("errorLocation"); 
            if (errorDiv != null) { 
              var errorText = args.errorType + "- " + args.errorMessage; 
              if (args.ErrorType == "ParserError") { 
                errorText += "<br>File: " + args.xamlFile; 
                errorText += ", line " + args.lineNumber; 
                errorText += " character " + args.charPosition; 
              }
              else if (args.ErrorType == "RuntimeError") { 
                errorText += "<br>line " + args.lineNumber; 
                errorText += " character " +  args.charPosition; 
              } 
              errorDiv.innerHTML = errorText; 
            } 
          } 
        }
       }); 
     }
     if (!window.Silverlight)
       Silverlight = {}; 
     Silverlight.createDelegate = function(instance, method) { 
       return function() {
         return method.apply(instance, arguments); 
       } 
     }
    </script>
  </head>
  <body>
    <div id= "silverlightControlHost">
      <script type="text/javascript">
        createSilverlight();
      </script>
    </div>
    <div id= 'errorLocation'></div>
  </body>
</html>

Как видите, здесь импортируются два JavaScript-файла: Silverlight.js и Page.xaml.js. Вскоре каждый из них будет рассмотрен более подробно.

Создание экземпляра элемента управления Silverlight происходит в элементе <div> внизу страницы. Для этого происходит вызов функции createSilverlight, которая реализована вверху страницы. Эта функция создает новый объект Silverlight, используя либо функцию createObjectEx (которая, в свою очередь, находится в Silverlight.js ), либо функцию createObject. Если применяется функция createObjectEx, параметры задаются с использованием синтаксиса JavaScript Object Notation (JSON), как показано в данном примере. В качестве альтернативы можно использовать функцию createObject, которая использует стандартные параметры.

Первый параметр - исходный XAML Это может быть ссылка на статический внешний файл (что используется в данном случае - Page.xaml ), ссылка на URL службы, которая может формировать XAML, или ссылка на именованный блок сценария на странице, содержащей XAML

Второй параметр - родительский элемент. Это имя элемента <div>, содержащего элемент управления Silverlight. Как можно видеть в Листинге 1.1, он называется SilverlightControlHost.

Третий параметр - ID, который будет использоваться для этого элемента управления. Если на странице располагается несколько элементов управления Silverlight, каждый из них должен иметь собственный уникальный ID.

Четвертый параметр - параметры свойств элемента управления. Сюда могут входить простые свойства, такие как ширина, высота и цвет фона, а также составные свойства. К более сложным параметрам свойств относятся:

Пятый параметр используется для сопоставления событий с обработчиками событий. События реализовываются в классе JavaScript, называемом scene (сцена), который был объявлен в начале функции:

var scene = new SilverlightSite1.Page();

Функция createSilverlight объявляет, что событие onLoad должно обрабатываться методом scene.handleLoad класса scene. Для этого создается делегат, используя следующий синтаксис:

onLoad: Silverlight.createDelegate(scene, scene.handleLoad)

Данный класс реализован в JavaScript-файле выделенного кода для Page.xaml под названием Page.xaml.js. Это можно видеть в Листинге 1.2.

if (!window.SilverlightSite1) 
  SilverlightSite1 = {};

SilverlightSite1.Page = function()
{
}

SilverlightSite1.Page.prototype = {
  handleLoad: function(control, userContext, rootElement) { 
    this.control = control;
    // Пример перехвата события:
    rootElement. addEventListener("MouseLeftButtonDown",       
                   Silverlight.createDelegate(this, this.handleMouseDown)); 
  },
  // Пример обработчика события 
  handleMouseDown: function(sender, eventArgs) { 
    // В      следующее строке кода показано, как находить элемент по имени 
    // this.control.content.findName("Storyboard1"). Beg in (); 
   } 
}

Здесь представлен код на JavaScript для создания класса SilverlightSite1.Page. Он содержит две функции-члены, handleLoad и handleMouseDown.

Функция handleLoad добавляет еще один обработчик события MouseLeftButtonDown, создавая делегат, связывающий это событие и функцию handleMouseDown, которая также определена в этом JavaScript-коде.

Таким образом, шаблонное приложение создает стандартный HTML-файл, который содержит экземпляр Silverlight с единственным холстом, формирующим события при загрузке. В обработчике события загрузки происходит регистрация обработчика события нажатия кнопки мыши. Это демонстрирует, что объявление события, делегирование и обработка доступны как во время проектирования, так и во время выполнения.

Silverlight и Expression Encoder

Expression Encoder-это приложение, обеспечивающее возможность кодирования, улучшения и публикации видеосодержимого с использованием Silverlight. Он поставляется с UI, единообразным по стилю, виду интерфейса и управлению с остальными приложениями Expression Studio, или с интерфейсом командной строки, который может использоваться для обработки в пакетном режиме. Expression Encoder показан на рис. 1.7.

Expression Encoder позволяет импортировать видео из любого формата , для которого в вашей системе доступен и установлен фильтр DirectShow . После этого Expression Encoder перекодирует видео в VC-1 WMV, используя один из множества предустановленных профилей, оптимизированных под конечного пользователя. Они включают настройки для устройств, а также для содержимого, доставляемого через Интернет путем потоковой передачи или по запросу.

Вы не ограничены возможностями, предлагаемыми предустановленными профилями. Все параметры кодирования аудио- и водеоданных можно переопределить. На рис. 1.8 (на странице 20) представлен пример настройки кодирования видеоданных.

Media Encoder включает ряд предустановленных медиаплееров для Silverlight. Они создадут для вашего видео Silverlight-приложение на базе JavaScript, которое может использоваться на любом Вебсервере и обеспечит полноценный просмотр с помощью Silverlight.

Кроме кодирования, в видео могут быть добавлены метаданные. Классический вариант введения метаданных- кодирование тегов в видео, после чего приложение реагирует на эти теги. С Expression Encoder вставлять теги очень просто. Курсор воспроизведения перетягивается в необходимую точку, выбирается команда Add Marker (Добавить маркер) и вводится соответствующая информация для маркера.

Это можно видеть на рис. 1.9 в правой части экрана, где для маркера заданы время и тип мяча, отображаемого в этот момент на экране.

На вкладке Output (Вывод) можно выбрать шаблон проигрывателя, который вы желаете использовать.

На рис. 1.10 показано, где выбирается шаблон, соответствующий линии продуктов Expression. Чтобы создать видеоплеер с использованием этого шаблона, просто импортируйте видео, выберите этот шаблон и нажмите кнопку Encode (Кодировать).

Сделав это, вы получите полнофункциональный медиаплеер в Silverlight для своего видео. Пример медиаплеера Silverlight можно увидеть на рис. 1.11.

В данном разделе мы лишь слегка прикоснулись к тому, что можно сделать с помощью Expression Encoder и как он может использоваться с Silverlight. Более детальную информацию можно найти на сайте http://www.microsoft. com/expression.

Заключение

В данной лекции представлен Silverlight 2 и показана его роль в мире Веб и UX. Показано, как технология Microsoft применяется к современным сценариям UX, и дан обзор архитектуры Silverlight, включая XAML и его использование для реализации насыщенных UI.

Кроме того, было показано, как Microsoft Expression Studio дополняет традиционные средства разработки, такие как Visual Studio, для создания приложений Silverlight. В частности, рассмотрено, как с помощью Expression Design создаются графические ресурсы и как они объединяются в интерактивное приложение с помощью Expression Blend, а также как можно управлять видеоресурсами, используя Expression Encoder.

Теперь пора идти дальше. В следующих нескольких лекциях вы больше узнаете о Silverlight API, и начнем мы с более тщательного рассмотрения Expression Blend и его использования в Silverlight в следующей лекции.