Применение элементов RIA в Интернет-магазине

18.4.2. Работа с изображениями

Прежде всего, опишем вспомогательный класс CollectionImage, который будет хранить данные о каждом изображении, используемом в коллаже. Для того чтобы связать объекты этого класса с изображениями, которые будут использоваться в MultiScaleImage, сделаем в классе CollectionImage ссылку MultiScaleSubImage Image, которая будет указывать на соответствующий элемент в коллекции изображений ZoomImage.SubImages. Также в свойствах будет храниться положение изображение, его ширина и высота, порядковый номер и тег.

public class CollectionImage
    {
        public MultiScaleSubImage Image { get; set; }
        public Point Location { get; set; }
        public double Width { get; set; }
        public double Height { get; set; }
        public int ZOrder { get; set; }
        public string Tag { get; set; }
    }

Теперь добавим в класс страницы MainPage в файле MainPage.xaml.cs список CollectionImage, в котором будем хранить все данные об используемых изображениях.

ObservableCollection<CollectionImage> _images = new ObservableCollection<CollectionImage>();

При запуске приложения необходимо заполнить коллекцию _images. Это можно сделать, создав обработчик события ImageOpenSucceeded объекта ZoomImage. Когда это событие срабатывает, коллекция ZoomImage.SubImages уже заполнена, однако объекты типа MultiScaleSubImage не хранят данных, конторе были указаны в поле Tag в Deep Zoom Composer. Для того чтобы их загрузить необходимо прочитать сгенерированный файл Metadata.xml. Так как приложение запускается в браузере на клиенте, а файл хранится на сервере, то мы воспользуемся классом WebClient, метод DownloadStringAsync которого позволяет скачивать файлы с сервера. Когда файл скачен, срабатывает событие DownloadStringCompleted. Определив обработчик этого события, мы сможем разобрать скаченный файл. Так как это XML-файл, то имеет смысл воспользоваться классом XDocument чтобы его разобрать.

private void ZoomImage_ImageOpenSucceeded(object sender, RoutedEventArgs e)
{
  duringOpen = true;
  WebClient wc = new WebClient();
  wc.DownloadStringCompleted += new DownloadStringCompletedEventHandler(wc_DownloadStringCompleted);
  wc.DownloadStringAsync(new Uri("Metadata.xml", UriKind.Relative));      
}

private void wc_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e)
{
  if (e.Cancelled == false  e.Error == null)
  {
    string s = e.Result;
    XDocument doc = XDocument.Parse(s);
    var images = from a in doc.Element("Metadata").Descendants("Image")
                 select a;

    foreach (XElement image in images)
    {
      CollectionImage ci =
          new CollectionImage
            {
                Height = Convert.ToDouble(image.Element("Height").Value),
                Width = Convert.ToDouble(image.Element("Width").Value),
                ZOrder = Convert.ToInt32(image.Element("ZOrder").Value) – 1,
                Tag = (string) image.Element("Tag").Value,
                Location = new Point {X = Convert.ToDouble( image.Element("x").Value), 
                                      Y = Convert.ToDouble( image.Element("y").Value)}
            }
          ;
      ci.Image = ZoomImage.SubImages[ci.ZOrder];
      _images.Add(ci);
    }
  }
}

Стоит обратить внимание, что значение ZOrder изображений в файле Metadata.xml начинается с 1, в то время, как индекс коллекции ZoomImage.SubImages начинается с 0. Поэтому значение свойства ZOrder объектов CollectionImage будет на 1 меньше, чем то, что указано в файле.

18.4.3. Отображение

Если сейчас запустить разработанное приложение в тестовой странице, то оно отобразит набор изображений, но работать с ними не получится. Для того чтобы придать приложению интерактивность, определим код обработчиков нажатия на кнопки "Домой", "Приблизить" и "Удалить", обработчиков вращения колесика мышки, а также нажатия левой кнопки мыши и движения курса мыши по приложению.

Полный код этих обработчиков можно посмотреть в приведенном примере, здесь рассмотрим только обработчики нажатия мышью на кнопки "Домой" и "Приблизить".

private void Home_Click(object sender, MouseButtonEventArgs e)
{
    InformationPanel.Visibility = Visibility.Collapsed;
    ProductImage.Visibility = Visibility.Collapsed;
    ZoomImage.ViewportOrigin = new Point(0, 0);
    ZoomImage.ViewportWidth = 1;
    zoom = 1;
}
private void ZoomIn_Click(object sender, MouseButtonEventArgs e)
{
    double newzoom = zoom/1.3;
    if (newzoom < minzoom)
    {
        newzoom = minzoom;
    }
    Point logicalPoint = ZoomImage.ElementToLogicalPoint(new Point(ActualWidth/2, ActualHeight/2));
    ZoomImage.ZoomAboutLogicalPoint(zoom/newzoom, logicalPoint.X, logicalPoint.Y);
    zoom = newzoom;
    var i = GetIntersectImage();
    if (i > 0)
    {
        InformationPanel.Visibility = System.Windows.Visibility.Visible;
        ProductImage.Visibility = System.Windows.Visibility.Visible;
    }
    else
    {
        InformationPanel.Visibility = System.Windows.Visibility.Collapsed;
        ProductImage.Visibility = System.Windows.Visibility.Collapsed;
    }
}

В обработчике Home_Click мы скрываем панель и изображение ProductImage, после чего строкой ZoomImage.ViewportOrigin = new Point(0, 0) устанавливаем верхний левый угол приложения в начальную точку (в случае использования одной картинки – это также ее левый верхний угол), а строкой ZoomImage.ViewportWidth = 1 устанавливаем текущий масштаб так, чтобы отобразилась целиком вся композиция изображений.

В обработчике ZoomIn_Click определяется новый масштаб. Далее, при помощи метода ElementToLogicalPoint определяются логические координаты центра приложения, после чего вызывается метод ZoomAboutLogicalPoint, который выполняет изменение масштаба изображения относительно указанной точки. В нашем случае масштаб будет уменьшен в 1.3 раза относительно центра.

Далее вызывается метод GetIntersectImage, который определяет, занимает ли какое-либо изображение все видимое пространство приложения, и если такое изображение найдено, то возвращает его порядковый номер и присваивает ProductImage ссылку на файл, имя которого берется из CollectionImage.Tag, то есть из тэга самого изображения. Если подходящее изображение найдено, необходимо сделать видимыми информационную панель с элементом ProductImage.

Ниже приведен код метода GetIntersectImage:

private int GetIntersectImage()
{
  for (int i = 0; i < ZoomImage.SubImages.Count; i++)
  {
    MultiScaleSubImage subImage = ZoomImage.SubImages[i];
    double scaleBy = 1/subImage.ViewportWidth;
    Rect rect = new Rect(-subImage.ViewportOrigin.X*scaleBy,
                         -subImage.ViewportOrigin.Y*scaleBy,
                         1*scaleBy,
                         (1/subImage.AspectRatio)*scaleBy);
    Point p1 = ZoomImage.ViewportOrigin;
    Point p2 = ZoomImage.ElementToLogicalPoint(new Point(ZoomImage.ActualWidth, 0.0));
    Point p3 = ZoomImage.ElementToLogicalPoint(new Point(0.0, ZoomImage.ActualHeight));
    Point p4 = ZoomImage.ElementToLogicalPoint(new Point(ZoomImage.ActualWidth, ZoomImage.ActualHeight));
    if (rect.Contains(p1)  rect.Contains(p2)  rect.Contains(p3)  rect.Contains(p4))
    {
      BitmapImage bmi = new BitmapImage
          (new Uri( "../ProductImages/" +_images[i].Tag+ ".png", UriKind.Relative)) 
      {CreateOptions = BitmapCreateOptions.None};
      ProductImage.Source = bmi;
      return i;
    }
  }
  return -1;
}

Этот метод в цикле пробегает по всем изображениям из ZoomImage.SubImages и определяет логические координаты вершин, представляя изображение в виде объекта класса Rect. Затем определяются логические координаты вершин приложения, и если все вершины лежат внутри прямоугольника, представляющего изображение, то метод возвращает его номер.

18.4.4. Установка приложения Silverlight на страницу

Теперь, когда Silverlight -приложение разработано, необходимо добавит его в ASP-сайт. Для этого создадим страницу ProductBrowser2 и добавим на нее следующий код:

<asp:Content ID="Content2" ContentPlaceHolderID="column_l_placeholder" Runat="Server">
  <div id="silverlightControlHost">
  <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" style="width: 640px; height: 480px;">
    <param name="source" value="../ClientBin/SilverlightDeepZoom.xap"/>
    <param name="onError" value="onSilverlightError" />
    <param name="background" value="white" />
    <param name="minRuntimeVersion" value="3.0.40818.0" />
    <param name="autoUpgrade" value="true" />
    <a href="http://go.microsoft.com/fwlink/?LinkID=149156v=3.0.40818.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>
</asp:Content>

Как и раньше, для того, чтобы установить Silverlight на страницу используется тег object. Описание всего кода, кроме параметра source, который указывает на файл ../ClientBin/SilverlightDeepZoom.xap, является стандартным для всех Silverlight -приложений.

Теперь, если открыть страницу ProductBrowser2 нашего Интернет-магазина (необходимо также доработать мастер страниц, чтобы ввести новый пункт меню), то запустится полноценное Silverlight -приложение, как на рис. 18.14 и рис. 18.15.

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

18.5. Способы подключения видео

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

18.5.1. Использование Windows Media Player

Самый простой способ отобразить видеоплеер на странице – воспользоваться Windows Media Player. Для этого на главную страницу достаточно добавить следующий код:

<object type="video/x-ms-wmv" width="200" height="200">
	<param name="filename" value ="1.wmv" />
</object>

При этом файл " 1.wmv " должен находиться в корне сайта. Если теперь открыть главную страницу, то на ней сразу же начнется проигрывание видео (рис. 18.16).

18.5.2. Использование Silverlight-плеера

Альтернативный вариант заключается в использовании Silverlight -плеера.

Проще всего добавить этот плеер через Expression Studio. Для этого необходимо из окна ToolBox перетащить на страницу элемент Silverlight Video. В появившемся диалоговом окне необходимо указать видео-файл, который надо отобразить, после чего откроется еще одно диалоговое окно, изображенное на рис. 18.17. Оно позволяет перекодировать видео в нужную кодировку, указать шаблон плеера, а также указать ряд параметров (например, нужно ли начинать проигрывать видео сразу после открытия страницы, включать ли по умолчанию звук и другие).

После того, как разработчик укажет все необходимые данные и нажмет кнопку Encode, Expression Web перекодирует видео и добавит файл в проект, а также создаст Silverlight -приложение, поместив его по умолчанию в директорию silverlightvideos рядом с видео-файлом, и вставит на страницу следующий код:

<div id="silverlightvideocontainer">
   <object data="data:application/x-silverlight-2" type="application/x-silverlight-2" width="640" height="352">
      <param name="source" value="silverlightvideos/BlackGlassTemplate.xap"/>
      <param name="background" value="white" />
      <param name="minRuntimeVersion" value="3.0.40624.0" />
      <param name="autoUpgrade" value="true" />
      <param name="enableHtmlAccess" value="true" />
      <param name="enableGPUAcceleration" value="true" />
      <param name="initparams" value='playerSettings = 
         <Playlist>
            <AutoLoad>false</AutoLoad>
              <AutoPlay>false</AutoPlay>
              <DisplayTimeCode>false</DisplayTimeCode>
              <EnableCachedComposition>true</EnableCachedComposition>
              <EnableCaptions>true</EnableCaptions>
              <EnableOffline>true</EnableOffline>
              <EnablePopOut>true</EnablePopOut>
              <StartMuted>false</StartMuted>
              <StretchMode>None</StretchMode>
              <Items>
                 <PlaylistItem>
                    <AudioCodec>WmaProfessional</AudioCodec>
                    <Description></Description>
                    <FileSize>158516095</FileSize>
                    <FrameRate>23.9759856527702</FrameRate>
                    <Height>352</Height>
                    <IsAdaptiveStreaming>false</IsAdaptiveStreaming>
                    <MediaSource>silverlightvideos/2.wmv</MediaSource>
                    <ThumbSource></ThumbSource>
                    <Title></Title>
                    <VideoCodec>VC1</VideoCodec>
                    <Width>640</Width>
                 </PlaylistItem>
              </Items>
           </Playlist>'/>
      <a href="http://go2.microsoft.com/fwlink/?LinkID=124807" 
         style="text-decoration: none;">
         <img src="http://go2.microsoft.com/fwlink/?LinkId=108181" 
	     alt="Get Microsoft Silverlight" style="border-style: none;"/>
      </a>
   </object>
   <iframe id="_sl_historyFrame" style='visibility:hidden;height:0;width:0;border:0px;'>
   </iframe>
</div>

В результате на главную страницу будет добавлено Silverlight -приложение, позволяющее проигрывать видео (рис. 18.18).

Такой способ позволяет нам отображать заранее заданное видео и имеет следующие преимущества перед обычным плеером:

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

18.5.3. Разработка Silverlight-плеера с динамическим контентом

Добавим в наше решение новый Silverlight проект SilverlightPleer и реализуем класс MainPage следующим образом:

<UserControl x:Class="SilverlightPleer.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" 
    Width="300" Height="200"
    mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
  <Grid x:Name="LayoutRoot" Margin="0,0,0,84">
  	<Grid.RowDefinitions>
  		<RowDefinition Height="0.715*"/>
  		<RowDefinition Height="0.285*"/>
  	</Grid.RowDefinitions>
        <MediaElement x:Name="myMedia" Source="2.wmv" Width="300" 
               Margin="-2,0,2,-49" d:LayoutOverrides="VerticalAlignment" 
               Grid.RowSpan="2" AutoPlay="False"/>
        <Button Width="94" Height="30" Content="Проиграть" Click="Button_Click"  
               Margin="-1,0,0,-83" VerticalAlignment="Bottom" 
               d:LayoutOverrides="VerticalAlignment, Height" RenderTransformOrigin="0.613,1.067" 
               Grid.Row="1" HorizontalAlignment="Left"/>
        <Button Width="92" Height="30" Content="Остановить" Click="Button_Click_1"  
               HorizontalAlignment="Right" Margin="0,0,0,-83" VerticalAlignment="Bottom" 
               RenderTransformOrigin="0.613,1.067" Grid.Row="1" 
               d:LayoutOverrides="VerticalAlignment, Height"/>
        <Button Height="30" Content="Пауза" Click="Button_Click_2" 
               Margin="105,0,103,-82" VerticalAlignment="Bottom" 
               RenderTransformOrigin="0.613,1.067" Grid.Row="1" 
               d:LayoutOverrides="VerticalAlignment, Height"/>
    </Grid>
</UserControl>

Не будем подробно останавливаться на приведенном коде, отметим только, что на этой странице используется три кнопки и объект MediaElement, который предоставляет интерфейс для отображения различных видео-файлов. Видео-файл указывается в атрибуте Source и должен находиться в директории ClientBin.

Теперь необходимо реализовать логику плеера. Для этого в методе MainPage_Loaded зарегистрируем приложение на странице, чтобы позднее получить доступ к нему через JavaScript, реализуем метод changeMediaSource, который пометим атрибутом [ScriptableMember], что позволит вызывать этот метод из JavaScript. В реализации этого метода остановим проигрывание видео и изменим видео-файл на " 3.wmv " (на самом деле необходимо хранить имя видео-файла для продуктов в БД). Также реализуем обработчики нажатия на кнопки "Проиграть", "Остановить" и "Пауза".

void MainPage_Loaded(object sender, RoutedEventArgs e)
{
    HtmlPage.RegisterScriptableObject("basic", this);
}

private void Button_Click(object sender, RoutedEventArgs e)
{
    changeMediaSource();
}

[ScriptableMember]
public void changeMediaSource()
{
    myMedia.Stop();
    myMedia.Source = new Uri("3.wmv", UriKind.Relative);
    myMedia.Play();
    isStoped = false;
}

private void Button_Click_1(object sender, RoutedEventArgs e)
{
    myMedia.Stop();
    isStoped = true;
}

private void Button_Click_2(object sender, RoutedEventArgs e)
{
    if (!isStoped)
    {
        myMedia.Pause();
        isStoped = true;
    }
    else
    {
        myMedia.Play();
        isStoped = false;
    }
}

Теперь все готово к тому, чтобы разместить плеер на ASP-компоненте ProductControl. Для этого добавим следующий код:

<div id="silverlightControlHost" style='height:300px; width=200px;'>
   <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" 
           width="100%" height="100%" id="silverlightControl">
      <param name="source" value="../ClientBin/SilverlightPleer.xap"/>
      <param name="onError" value="onSilverlightError" />
      <param name="background" value="white" />
      <param name="minRuntimeVersion" value="3.0.40818.0" />
      <param name="autoUpgrade" value="true" />
      <a href="http://go.microsoft.com/fwlink/?LinkID=149156v=3.0.40818.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>

<asp:Button ID="ButtonPlayJavaScript" runat="server" 
             Text="Изменить видео" OnClientClick="changeMedia();" />
    
<script language="javascript" type="text/javascript">
  function changeMedia() {
    var svlObject = document.getElementById("silverlightControl");
    svlObject.Content.basic.changeMediaSource();
  }
</script>

Как уже отмечалось, содержимое div 'а стандартно для всех Silverlight -приложений. Помимо этого, добавляется новая Javascript-функция, которая также позволяет менять источник видео.

На рис. 18.19 отображается результирующая карточка продукта со встроенным Silverlight -приложением.

18.6. Ключевые термины

Deep Zoom, Deep Zoom Composer, Microsoft Expression Web, Silverlight, Microsoft Visual Studio, Windows Media Player.

18.7. Краткие итоги

Данное практическое занятие рассматривает следующие темы: