НОУ ИНТУИТ | Перспективные технологии и языки веб-разработки. Лекция 13: Насыщенные интернет-приложения

Учитесь и получайте официальные документы БЕСПЛАТНО. Вы можете поддержать наш проект.

Регистрация Вход

Твой путь к знаниям!

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

|

Вам нравится? Нравится 48 студентам

| Поделиться |

Поддержать программу

Размещение Silverlight в браузере

Ниже приводится HTML код веб-страницы, использующей Silverlight приложение:

<!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> SilverlightSample </title>

  <style type="text/css">
    html, body {
      height: 100%;
      overflow: auto;
    }
    body {
      padding: 0;
      margin: 0;
    }
    #silverlightControlHost {
      height: 100%;
      text-align:center;
    }
  </style>

  <script type="text/javascript" src="Silverlight.js"></script>
  <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;

    if (errorType == "ImageError" || errorType == "MediaError") {
    return;
    }

    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";
    }

    throw new Error(errMsg);
    }
  </script>

</head>

<body>
  <form name="form1" method="post" 
      action="SilverlightSampleTestPage.aspx" id="form1" 
      style="height:100%">
    <div>
      <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" 
          value="/wEPDwUJNzgzNDMwNTMzZGQ/xyUlnh+Njw13GNNCd7VpDXlAuQ==" />
    </div>

    <div id="silverlightControlHost">

      <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" 
          width="100%" height="100%">
        <param name="source" value="ClientBin/SilverlightSample.xap"/>
        <param name="onError" value="onSilverlightError" />
        <param name="background" value="white" />
        <param name="minRuntimeVersion" value="3.0.40624.0" />
        <param name="autoUpgrade" value="true" />
        <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40624.0" 
            style="text-decoration:none">

        <img src="http://go.microsoft.com/fwlink/?LinkId=108181" 
            alt="Get Microsoft Silverlight" 
            style="border-style:none"/>

        </a>
      </object>
      <iframe id="_sl_historyFrame" 
          style="visibility:hidden;height:0px;width:0px;border:0px">
      </iframe>
    </div>
  </form>
</body>
</html>

Как видно из кода, на веб-странице используется сценарий Silverlight.js, который обеспечивает загрузку и установку подключаемого модуля для клиентов, не имеющих его, и элемент <object>, исходный код для которого содержится в файле с расширением XAP, созданным в Microsoft Visual Studio или Microsoft Visual Web Developer Express.

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

Для этого, прежде всего, необходимо создать HTML-файл. Элемент управления Silverlight будет размещаться на этой странице путем вставки в нее тега <object>, как в приведенном выше примере. Только вместо файла с расширением XAP - указывается XAML файл.

С помощью тега <object> создается экземпляр Silverlight. Это стандартный HTML тег, следовательно, он поддерживает стандартные параметры. Ниже приводится лишь неполный список параметров (тех, которые были использованы в предыдущем примере):

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

Объекты поддерживают разные наборы настраиваемых параметров, поэтому HTML-тег <object> поддерживает список элементов <Param>, позволяющие задавать нестандартные параметры. Эти элементы используются для определения пар имя/значение.

Программирование элементов UI

XAML предоставляет ряд визуальных элементов для создания UI. К элементам UI относятся Canvas, Ellipse, Glyphs, Image, Line, MediaElement, Path, Polygon, Polyline, Rectangle, Run, Shape, TextBlock и другие.

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

Элемент UI поддерживает следующие события:

GotFocus (Получение фокуса) .
KeyDown (Нажатие клавиши).
Key Up (Удерживаемая клавиша отпущена).
Loaded. Это событие формируется, когда содержимое Silverlight загружено в элемент управления Silverlight и проведен его синтаксический разбор, но перед формированием его визуального представления.
LostFocus (Потеря фокуса).
MouseEnter (Вход курсора мыши).
MouseLeave (Выход курсора мыши).
MouseLeftButtonDown. Это событие возникает при нажатии пользователем левой кнопки мыши, когда курсор находится над элементом UI.
MouseLeftButtonUp (Удерживаемая левая кнопка мыши отпущена).
MouseMove (Перемещение мыши).

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

Silverlight предлагает ряд прикладных программных интерфейсов (APIs), обеспечивающих возможность работы с удаленными данными. Например, предоставляет в распоряжение разработчика классы для работы с сетью и для связи с веб-сервисам (WebClient, HttpWebRequest, HttpWebRespose и др.).

Элемент управления MediaElement

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

Элемент управления MediaElement поддерживает следующие форматы.

Видео:
- WMV1: Windows Media Video 7
- WMV2: Windows Media Video 8
- WMV3: Windows Media Video 9
- WMVA: Windows Media Video Advanced Profile (не-VC-1)
- WMVC1: Windows Media Video Advanced Profile, VC-1
- H.264: Видео, кодированное в популярном формате H264 (только Silverlight 3+).
Аудио:
- WMA7 (Windows Media Audio 7)
- WMA8 (Windows Media Audio 8)
- WMA9 (Windows Media Audio 9)
- WMA10 (Windows Media Audio 10)
- MP3 (ISO/MPEG Layer 3)
- Моно или стерео
- Частоты дискретизации от 8 до 48 кГц
- Скорости передачи двоичных данных от 8 до 320 Кбит/с
- Переменная скорость передачи двоичных данных

Кроме этих форматов, элемент управления MediaElement также поддерживает списки воспроизведения ASX и протоколы HTTP, HTTPS и MMS.

Если говорить о потоковой передаче видео и/или аудио, MediaElement поддерживает потоковое вещание и потоковую передачу по запросу от сервера, выполняющего Windows Media. Если для URI задан протокол MMS, потоковая передача включена; в противном случае, загрузка и воспроизведение файла осуществляются путем прогрессивной загрузки, при которой воспроизведение начинается только после заполнения буфера воспроизведения и затем эти два процесса выполняются параллельно.

Если определен протокол HTTP или HTTPS, то MediaElement сначала делает попытку выполнить прогрессивную загрузку, и в случае неудачи пытается использовать потоковую передачу файла.

Чтобы начать работу с элементом управления MediaElement, достаточно добавить его на свою страницу и задать в качестве значения его атрибута Source - URL видеофайла, который требуется воспроизвести:

<UserControl x:Class="SilverlightApplication.MainPage"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
  mc:Ignorable="d" d:DesignWidth="1280" d:DesignHeight="720"> 

  <Grid x:Name="LayoutRoot" Background="White">
    <MediaElement x:Name="vid" Source="Wildlife.wmv"/>
  </Grid>

</UserControl>

Технология Deep Zoom

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

Deep Zoom позволяет создавать изображения с высочайшим разрешением и отображать их без предварительной полной загрузки.

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

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

Для работы с такими изображениями удобно использовать программу Deep Zoom Composer, создающую на выходе граф сцены для XAML с несколькими изображениями в специального XML файла, который в дальнейшем используется элементом управления MultiScaleImage, формирующим представление содержимого Deep Zoom:

<MultiScaleImage x:Name="msi" Source="/GeneratedImages/dzc_output.xml"/>

Как и для всех элементов управления Silverlight для MultiScaleImage дает возможность определить методы обработки событий. Например, для перемещения изображения можно обрабатывать обычные события, связанные с мышью: MouseLeftButtonDown, MouseLeftButtonUp и MouseMove. При этом они обрабатываются так же, как это делается при перемещении любого элемента методом "drag-and-drop".

Дальше >>

Профессиональный веб-дизайн

Перспективные технологии и языки веб-разработки

Насыщенные интернет-приложения

Размещение Silverlight в браузере

Программирование элементов UI

Элемент управления MediaElement

Технология Deep Zoom

Вопросы и ответы

Авторизоваться

Профессиональный веб-дизайн

Перспективные технологии и языки веб-разработки

Насыщенные интернет-приложения

Размещение Silverlight в браузере

Программирование элементов UI

Элемент управления MediaElement

Технология Deep Zoom

Вопросы и ответы