
- •18. Практическое занятие: Применение элементов ria в Интернет-магазине
- •18.1. Описание Deep Zoom
- •18.2. Работа с Deep Zoom Composer
- •18.2.1. Меню
- •18.2.2. Внутренние ссылки
- •18.2.3. Тэги
- •18.2.4. Различные способы экспорта из Deep Zoom
- •18.3. Подключение Deep Zoom на страницу через Expression Web
- •18.4. Интеграция интернет-магазина с Silverlight-приложением
- •18.4.1. Разработка пользовательского компонента на основе MultiScaleImage
- •18.4.2. Работа с изображениями
- •18.4.3. Отображение
- •18.4.4. Установка приложения Silverlight на страницу
- •18.5. Способы подключения видео
- •18.5.1. Использование Windows Media Player
- •18.5.2. Использование Silverlight-плеера
- •18.5.3. Разработка Silverlight-плеера с динамическим контентом
- •18.6. Ключевые термины
- •18.7. Краткие итоги
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=149156&v=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-приложений.
Примечание: при компиляции проектов, файл SilverlightDeepZoom.xap будет автоматически помещен в папку ClientBin. Однако может потребоваться перенести вручную в эту папку файлы Deep Zoom, иначе приложение не будет работать. В отличие от всего сайта, для которого каталог, в котором располагается сайт, является корневым, для Silverlight-приложения корневой является директория ClientBin и все необходимые для работы ресурсы должны располагаться в этой директории (рис. 18.13).
Рис. 18.13. Структура директории ClientBin
Теперь, если открыть страницу ProductBrowser2 нашего Интернет-магазина (необходимо также доработать мастер страниц, чтобы ввести новый пункт меню), то запустится полноценное Silverlight-приложение, как на рис. 18.14 и рис. 18.15.
Рис. 18.14. Приложение SilverlightDeepZoom в действии
Рис. 18.15. Приложение SilverlightDeepZoom в действии
Теперь, когда мы научились разрабатывать интерактивные приложения для браузеров, рассмотрим еще одну задачу, которую приходится решать достаточно часто – добавление видеоплеера на страницу.
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.16. Проигрывание видео-файла на главной странице сайта при помощи Windows Media Player