Спонсор: Microsoft
Опубликован: 01.03.2010 | Доступ: свободный | Студентов: 942 / 39 | Оценка: 4.38 / 4.31 | Длительность: 09:26:00
Лекция 1:

Обзор современных средств разработки интерактивных приложений

Лекция 1: 123 || Лекция 2 >

Архитектура приложений Silverlight

Основная функциональность Silverlight обеспечивается подключаемым модулем браузера. Этот модуль формирует визуальное представление XAML и обеспечивает модель программирования, которая может основываться либо на JavaScript, либо на .NET Framework и общеязыковой среде выполнения (common language runtime, CLR). На рис. 1.1 представлена архитектура, которая поддерживает это.

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

увеличить изображение
Рис. 1.1. Архитектура Silverlight

Основным механизмом программирования поведения приложения Silverligth 1.0 в браузере является прикладной программный интерфейс (application programming interface (API) объектной модели документов (Document Object Model (DOM) JavaScript. Он позволяет перехватывать пользовательские события, возникающие в приложении (такие как перемещения мыши или щелчки определенного элемента), и вызывать код, определяющий реакцию на них. С помощью методов JavaScript DOM можно манипулировать элементами XAML, например, управлять воспроизведением мультимедиа или анимацией.

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

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

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

Архитектура приложения, использующего Silverlight.

Рис. 1.2. Архитектура приложения, использующего 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. В корневом элементе Canvas Веб-приложения Silverlight располагаются объявления пространств имен XML, необходимых Silverlight.

Рассмотрим пример XAML-документа в Silverlight. При создании нового приложения Silverlight в Visual Studio, создается страница:

<navigation:Page x:Class="SilverlightApplication1.Page1" 
     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"
     xmlns:navigation="clr-namespace:System.Windows.Controls;
                       assembly=System.Windows.Controls.Navigation"
     d:DesignWidth="640" 
     d:DesignHeight="480"
     Title="Page1 Page">
  <Grid x:Name="LayoutRoot">
  </Grid>
</navigation:Page>

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

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

<navigation:Page x:Class="SilverlightApplication1.Page1" 
    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"
    xmlns:navigation="clr-namespace:System.Windows.Controls;
                      assembly=System.Windows.Controls.Navigation"
    d:DesignWidth="640" d:DesignHeight="480"
    Title="Page1 Page">
  <Grid x:Name="LayoutRoot">
    <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>
  </Grid>
</navigation:Page>

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

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

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

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

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

  • RotateTransform Поворачивает объект на заданный угол
  • ScaleTransform Используется для изменения масштаба объекта
  • SkewTransform Наклоняет объект в заданном направлении на заданный угол
  • TranslateTransform Перемещает объект в направлении, соответственно заданному вектору
  • MatrixTransform Используется для создания математического преобразования, которое может сочетать все вышеперечисленное

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

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

  • DoubleAnimation Обеспечивает возможность анимации числовых свойств, например таких, которые используются для определения положения
  • ColorAnimation Обеспечивает возможность анимации цветовых свойств, таких как заливки
  • PointAnimation Обеспечивает возможность анимации точек, определенных в двухмерном пространстве

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

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

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

  • Expression Web. Этот инструмент для Веб-разработки обеспечивает возможность использовать HTML, DHTML, CSS и другие стандартные Веб-технологии для проектирования, построения и управления Веб-приложениями.
  • Expression Encoder. Это приложение разработано для обеспечения возможности управления кодированием мультимедиа ресурсов. Также может использоваться для комплектации мультимедиа Silverlight-медиаплеером в виде соответствующего кода.
  • Expression Design. Это инструмент графического дизайна, который можно использовать для создания иллюстраций, графических элементов и ресурсов для пользовательских интерфейсов Веб- и настольных приложений.
  • Expression Blend. Этот инструмент обеспечивает возможность визуально создавать пользовательский интерфейс на базе XAML для настольных приложений на WPF или Веб-приложений на Silverlight.
  • DeepZoom Composer. Этот инструмент обеспечивает возможность создавать проекты DeepZoom и экспортировать их в существующие приложения.

Microsoft Expression Studio дополняет традиционные средства разработки, такие как Visual Studio, для создания приложений Silverlight. Visual Studio непосредственно работает с языком разметки XAML (но не визуально, а в текстовом режиме) и с кодом приложения code-behind на языке, например, C#.NET. Именно возможность использовать код .NET делает приложения Silverlight мощным инструментом создания сайтов, различного назначения от развлекательных до корпоративных.

Лекция 1: 123 || Лекция 2 >
Атанас Маринов
Атанас Маринов
Болгария
Pavel Pelevin
Pavel Pelevin
Украина, Одесса