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

Насыщенное интернет-приложение (Rich Internet application - RIA) - это приложение, доступное через Интернет и обладающее функциональностью традиционных настольных приложений, которая не поддерживается непосредственно браузерами.

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

Традиционные веб-приложения ориентированы клиент-серверную архитектуру с тонким клиентом, который делегирует все задачи по обработке информации на сервер, самостоятельно реализуя лишь отображения статического контента (чаще всего в HTML формате). Это требует постоянной отправки данных на сервер, ожидания ответа сервера, и загрузки страницы обратно в браузер, что существенно замедляет работу пользователей. При выполнении приложений на стороне клиента интенсивность взаимодействия RIA приложения с пользователем существенно увеличивается.

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

Рассмотрим какие преимущества дает применение технологий RIA.

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

При работе с насыщенными интернет-приложениями следует учитывать их недостатки:

Платой за те возможности, которые предоставляются насыщенными интернет-приложениями, является сложность разработки таких приложений, а именно:

Основными причинами, усложняющими процесс разработки насыщенных интернет-приложений, являются следующие:

Adobe Flash

Adobe Flash (ранее Macromedia Flash) - мультимедийная платформа, используемая для создания векторной анимации и интерактивных приложений, а также для интеграции видео в веб-страницы.

Adobe Flash позволяет работать с векторной, растровой и ограниченно с трёхмерной графикой, а также поддерживает двунаправленную потоковую трансляцию аудио и видео. В основе Flash лежит векторный морфинг, то есть плавное "перетекание" одного ключевого кадра в другой. Это позволяет делать сложные мультипликационные сцены, задавая лишь несколько ключевых кадров для каждого персонажа.

В качестве основных средств разработки используются пакеты Adobe Flash Professional и Adobe Flash Builder 4 (ранее Adobe Flex Builder), позволяющие создавать интерактивные приложения (в том числе, веб-приложения, игры и мультфильмы).

Стандартным расширением для скомпилированных Flash-файлов (анимации, игр и интерактивных приложений) является .SWF (Shockwave Flash). Видеоролики в формате Flash представляют собой файлы с расширением FLV). Расширение FLA соответствует формату рабочих файлов в среде разработки.

Flash-контент воспроизводится с помощью целого ряда программных средств, но доминирующее положение на рынке занимает Adobe Flash Player, распространяемый в качестве бесплатного плагина для большинства современных браузеров. SWF-файлы исполняются Flash Player-ом. Сам Flash Player существует в виде плагина к веб-браузеру, а также как самостоятельное исполняемое приложение. Во втором случае возможно создание исполняемых exe-файлов, когда SWF-файл включается во Flash Player. FLV-файлы воспроизводятся через Adobe Flash Player или через мультимедийные проигрыватели, такие как Quicktime и Windows Media Player, при наличии соответствующих плагинов.

Flash использует язык программирования ActionScript, основанный на ECMAScript.

К основным недостаткам недостаткам Flash-приложений можно отнести следующие:

ActionScript

ActionScript - объектно-ориентированный язык программирования, один из диалектов EcmaScript. ActionScript исполняется виртуальной машиной (ActionScript Virtual Machine), которая является составной частью Flash Player. ActionScript компилируется в байткод, который включается в SWF-файл.

JavaFX

JavaFX - еще одна платформа для создания насыщенных интернет-приложений, которые могут запускаться на персональных компьютерах и мобильных устройствах. Технология JavaFX позволяет создавать приложения для работы с мультимедийным контентом, графические интерфейсы пользователя для бизнес-приложений, игры для персональных компьютеров и мобильных устройств, насыщенные графикой, мультимедиа веб-сайты и др.

Платформа JavaFX 1.0 была анонсирована в 2008 г. и включает в себя следующие компоненты:

Приложения JavaFX создаются с помощью декларативного языка программирования JavaFX Script. Для разработки приложений на языке JavaFX Script необходимо скачать и установить JavaFX 1.0 SDK. Из кода, написанного на языке JavaFX Script, можно обращаться к любым библиотекам Java. Поэтому совместное использование языков Java и JavaFX Script позволяет решать разнообразные задачи, например, логика бизнес-приложения может быть написана на Java, а графический интерфейс пользователя - на JavaFX Script.

Приложения, написанные на языке JavaFX Script можно запускать на компьютерах с установленной средой исполнения Java 1.5 и выше. В настоящее время JavaFX приложения поддерживаются следующими операционными системами: Windows, Mac OS X, GNU/Linux и Solaris.

Microsoft Silverlight

Microsoft Silverlight - это модуль расширения для веб-браузера, который позволяющий запускать приложения, содержащие анимацию, векторную графику, аудио- и видео- ролики. Что позволяет отнести приложения Silverlight к насыщенных интернет-приложениям (RIA).

(рис 20.1) Официальный логотип MS Silverlight.

Silverlight предоставляет графическую систему, схожую с Windows Presentation Foundation, и объединяет мультимедиа, графику, анимацию и интерактивность в одной программной платформе. Она была разработана для работы с XAML и с языками Microsoft .NET. XAML используется для разметки страниц, использующих векторную графику и анимацию. Текст, содержащийся в Silverlight приложениях, доступен для поисковых систем, так как его код доступен в виде XAML, т.е. имеет текстовый формат как и XML.

Silverlight:

Начиная с версии 2.0, логика программы может быть описана в любом из языков .NET.

Первая бета-версия Silverlight была выпущена в декабре 2006 года. Архитектура Silverlight 1.0 представлена на рис. 20.2.

Версия Silverlight 2.0 была выпущена 14 октября 2008 года и включала в себя подмножестово библиотек .NET Framework.

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

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

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

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

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

Новые возможности Silverlight 3

Объединяя свои возможности с Microsoft Visual Studio и Microsoft Expression Blend, Silverlight 3 позволяет миллионам разработчиков приложений для платформы .NET создавать современные RIA-приложения и мультимедийные интерфейсы. Благодаря Silverlight, RIA-приложения стали полноправными участниками современной ИТ-среды.

Silverlight 3 предоставляет следующие новые возможности и функции, полностью поддерживаемые Visual Studio и Expression Blend:

- Значительные усовершенствования в работе с мультимедиа. Веб-приложения могут выполняться вне браузера, прямо на рабочем столе.

- Значительное усовершенствование работы с графикой. Они включают поддержку трехмерной графики, видео-стандарта H.264 и аппаратное ускорение (GPU).

- Многие другие возможности, повышающие эффективность разработки RIA-приложений.

Кроме того, чтобы обеспечить полную интеграцию со всеми средствами разработки .NET, пакетыVisual Studio 2010 и Visual Web Developer Express будут поддерживать полностью интерактивный и редактируемый дизайнер для Silverlight 3.

Нововведения Silverlight 4

XAML

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

XAML, используемый в Silverlight, отличается от XAML в WPF. В данном случае XAML - это подмножество, ориентированное на возможности Веб-приложений.

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

Рассмотрим пример XAML-документа:
<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. Такая иерархическая структура позволяет логически группировать элементы управления и использовать для них общую компоновку и поведение.

На рис. 20.4 представлен результат исполнения Silverlight в браузере.

XAML в Silverlight поддерживает ряд фигур, которые можно сочетать для получения более сложных объектов. Из основных можно назвать следующие фигуры:

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

В примере ниже используется кисть SolidColorBrush для закрашивания эллипса:

<Ellipse Canvas.Top="15" Canvas.Left="30"
    Width="250" Height="180">
  <Ellipse.Fill>
    <SolidColorBrush Color="Black" />
  </Ellipse.Fill>
</Ellipse>

Заливки и обводки также могут иметь градиентную заливку. Для этого используется градиентная кисть.

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

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

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

<Grid.RenderTransform>
  <TransformGroup>
    <RotateTransform Angle="45" 
        CenterX="150" CenterY="80"/>
    <ScaleTransform  ScaleX="1.1" 
              ScaleY="1.2" />  
  </TransformGroup>
</Grid.RenderTransform>

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

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

Размещение 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=149156v=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 тег, следовательно, он поддерживает стандартные параметры. Ниже приводится лишь неполный список параметров (тех, которые были использованы в предыдущем примере):

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

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

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

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

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

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

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

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

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

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

Кроме этих форматов, элемент управления 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".