Опубликован: 04.05.2010 | Уровень: для всех | Доступ: платный
Практическая работа 5:

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

< Лекция 13 || Практическая работа 5: 1234 || Лекция 14 >

18.3. Подключение Deep Zoom на страницу через Expression Web

Для того чтобы интегрировать наше приложение в сайт, создадим еще одну страницу на основе мастера страниц master.masterproducts/ProductBrowser.aspx. Проще всего добавить на эту страницу компонент Deep Zoom можно в Microsoft Expression Web. Для этого откроем страницу products/ProductBrowser.aspx в Microsoft Expression Web, во вкладке Toolbox раскроем раздел HTML, а внутри него раскроем подраздел Media (рис. 18.8). Среди представленных элементов будет предлагаться и Deep Zoom. Для того чтобы добавить его, необходимо перетащить иконку элемента на страницу. В открывшемся диалоговом окне необходимо указать путь к файлу dzc_output.xml.

Добавление Deep Zoom на страницу в Microsoft Expression Web

увеличить изображение
Рис. 18.8. Добавление Deep Zoom на страницу в Microsoft Expression Web

В результате на самой странице будет сгенерирован следующий код:

<asp:Content ID="Content2" ContentPlaceHolderID="column_l_placeholder" runat="Server">
    <div id="deepzoomcontainer">
        <object data="data:application/x-silverlight-2," type="application/x-silverlight-2"
            style="width: 640px; height: 480px;">
            <param name="source" value="../deepzooms/dzc_output/deepzoomproject.xap" />
            <param name="onerror" value="onSilverlightError" />
            <param name="background" value="white" />
            <param name="minRuntimeVersion" value="2.0.31005.0" />
            <param name="autoUpgrade" value="true" />
            <param name="initparams" value="zoomIn=5" />
            <a href="http://go.microsoft.com/fwlink/?LinkID=124807" 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="I1" style='visibility: hidden; height: 0; width: 0; border: 0px;' name="I1">
        </iframe>
    </div>
</asp:Content>

При этом в самом проекте будет создан каталог deepzooms, в который будет помещен файл deepzoomproject.xap и скопирована папка GeneratedImages. В файле deepzoomproject.xap находится сгенерированное Silverlight приложение Deep Zoom, которое настроено на работу с данными из папки GeneratedImages. В результате, если запустить интернет-магазин и зайти на страницу products/ProductBrowser.aspx, то можно увидеть работающее приложение в действии (рис. 18.9).

Работающее Deep Zoom приложение, встроенное в интернет-магазин

увеличить изображение
Рис. 18.9. Работающее Deep Zoom приложение, встроенное в интернет-магазин

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

Примечание: для того, чтобы разрабатывать Deep Zoom приложения, необходимо установить следующие компоненты:

18.4. Интеграция интернет-магазина с Silverlight-приложением

Для того чтобы разработать приложение на технологии Silverlight откроем сайт в Microsoft Visual Studio 2008 и добавим в решение еще один проект. В качестве шаблона выберем Silverlight Application в разделе Silverlight как это показано на рис. 18.10.

Добавление в решение нового Silverlight проекта

увеличить изображение
Рис. 18.10. Добавление в решение нового Silverlight проекта

При добавлении появится окно, представленное на рис. 18.11. Оно позволяет указать, где будет "хоститься" новое приложение, будет ли доступна отладка этого приложения и необходимо ли создавать тестовые страницы.

Окно создания нового Silverlight проекта

Рис. 18.11. Окно создания нового Silverlight проекта

Необходимости менять заданные по умолчанию значения у нас нет. Можно отказаться от создания тестовых страниц, чтобы не создавать лишних файлов в сайте AWCDShop, тем более что на них может случайно зайти пользователь.

После создания проекта Silverlight -приложения (в дальнейшем – SilverlightDeepZoom ) в сайт будет добавлен файл Silverlight.js, который содержит служебный код, необходимый для работы Silverlight, а также папка ClientBin, куда будет помещаться откомпилированное Silverlight приложение и все необходимые для его работы ресурсы.

Наша задача заключается в том, чтобы не только воссоздать приложение, аналогичное по функциональности тому, которое создается Expression Web автоматически, но и расширить его функционал, добавив возможность получать информацию о продукте, если он занимает всю видимую область приложения.

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

18.4.1. Разработка пользовательского компонента на основе MultiScaleImage

В созданный проект SilverlightDeepZoom будет автоматически добавлена страница MainPage.xaml. Ее код мы доработаем следующим образом:

<UserControl x:Class="SilverlightDeepZoom.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="640" d:DesignHeight="480">
  <Grid x:Name="LayoutRoot">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="8"/>
            <ColumnDefinition Width="64"/>
            <ColumnDefinition Width="0.639*"/>
            <ColumnDefinition Width="0.361*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="8"/>
            <RowDefinition Height="64"/>
            <RowDefinition Height="64"/>
            <RowDefinition Height="64"/>
            <RowDefinition Height="64"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <MultiScaleImage  x:Name="ZoomImage"  Source="dzc_output.xml"  MouseLeftButtonDown="ZoomImage_MouseLeftButtonDown" 
                         MouseLeftButtonUp="ZoomImage_MouseLeftButtonUp" 
                         MouseMove="ZoomImage_MouseMove" 
                         ImageOpenSucceeded="ZoomImage_ImageOpenSucceeded" 
                         MotionFinished="ZoomImage_MotionFinished"  
                         Grid.Row="0" Grid.RowSpan="6"  Grid.Column="0" 
                         Grid.ColumnSpan="4"/>

        <Image Source="home.png" MouseLeftButtonUp="Home_Click" x:Name='Home' 
             Grid.Row="1" Grid.Column="1" ></Image>
        <Image Source="zoomin.png" MouseLeftButtonUp="ZoomIn_Click" x:Name='ZoomIn' 
             Grid.Row="2" Grid.Column="1" />
        <Image Source="zoomout.png" MouseLeftButtonUp="ZoomOut_Click" x:Name='ZoomOut' 
             Grid.Row="3" Grid.Column="1"/>
        
        <Rectangle x:Name="InformationPanel" Fill="White" Stroke="Black" 
              Grid.Column="3" Grid.RowSpan="6" Opacity="0.8" Visibility="Collapsed"> 
        </Rectangle>
        <Image x:Name="ProductImage" Margin="2,1,1,1" 
              Grid.Row="1" Grid.RowSpan="3" Grid.Column="3"/>  
    </Grid>
</UserControl>

Разберем приведенный выше код. В начале объявляется новый Silverlight компонент, с названием SilverlightDeepZoom.MainPage и установлено шириной в 640 пикселей, а высотой в 480 пикселей. Далее идет определение разметки страницы, состоящей из 4 колонок (2 с фиксированной шириной в 8 и 64 пикселя, а 2 делят оставшееся пространство в отношении примерно 2 к 1) и 6 строк, первые 5 из которых имеют фиксированную высоту. После разметки определяется объект типа MultiScaleImage с именем ZoomImage, который отвечает за отображение Deep Zoom. В атрибутах указан источник ( Source ) данных для отображения, несколько обработчики событий, а также задано, что компонент располагается в левой верхней ячейке и занимает 6 строк и 4 столбца, то есть весь экран. За компонентом MultiScaleImage следует определение 3 изображений с обработчиками нажатия по ним мышкой. При этом, так как они определены после MultiScaleImage, то они будут отображаться поверх него. Далее определена полупрозрачная панель InformationPanel, изначально невидимая и еще одно изображение, которое за счет указанного расположения будет отображаться поверх панели. Так как при этом атрибут Source изображения не указан, то при старте приложения, изображение отображаться не будет.

Примечание: создавать сложный дизайн приложений вручную, набирая XAML-код неудобно. Для этих целей используется продукт Microsoft Expression Blend, который позволяет визуально редактировать WPF и Silverlight интерфейсы. Разработанный компонент в Expression Blend будет выглядеть так, как представлено на рис. 18.12. Подробнее ознакомиться с продуктом Microsoft Expression Blend можно по этой ссылке: http://blogs.msdn.com/expression/.
Отображение страницы SilverlightDeepZoom.MainPage в Microsoft Expression Blend

увеличить изображение
Рис. 18.12. Отображение страницы SilverlightDeepZoom.MainPage в Microsoft Expression Blend

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

< Лекция 13 || Практическая работа 5: 1234 || Лекция 14 >
Зарина Каримова
Зарина Каримова
Казахстан, Алматы, Гимназия им. Ахмета Байтурсынова №139, 2008
Akiyev Begench
Akiyev Begench
Беларусь, Полоцк, полоцкий государственный университет