18. Практическое занятие: Применение элементов ria в Интернет-магазине
Данное практическое занятие освещает вопросы создания графической коллекции на странице Интернет-магазина с применением технологии Silverlight Deep Zoom, а также разработки Silverlight-видеоплеера на Веб-странице
Содержание
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. Краткие итоги
Цель практического занятия: Целью данного занятия является знакомство с технологией Silverlight.
18.1. Описание Deep Zoom
Deep Zoom представляет собой реализацию технологии Seadragon на платформе .NET. Эта технология позволяет пользователям перетаскивать, приближать и удалять большие изображения (или наборы изображений) в высоком разрешении. Она позволяет сократить время, которое необходимо для первоначального отображения изображения за счет скачивания только видимой его части и уменьшения его разрешения, в зависимости от масштаба. В дальнейшем, остальные части изображения будут скачиваться по мере необходимости. Также, при приближении изображения будет скачиваться более качественная версия картинки, и отображаться пользователю (при этом анимация будет создавать эффект размытости изображения, пока скачивается нужная часть).
Подробно об алгоритмах работы Deep Zoom можно почитать здесь: http://msdn.microsoft.com/en-us/library/cc645050%28VS.95%29.aspx
Один из самых известных примеров использования этой технологии – http://memorabilia.hardrock.com/ (рис. 18.1).
Наша задача – создать аналогичное приложение, в котором пользователь сможет просмотреть имеющиеся в Интернет-магазине велосипеды и узнать какую-либо информацию о выбранном товаре. Для того чтобы сделать подобное приложение, нам понадобится бесплатная программа Microsoft Deep Zoom Composer, которую можно скачать по ссылке: http://www.microsoft.com/downloads/details.aspx?FamilyID=457B17B7-52BF-4BDA-87A3-FA8A4673F8BF&displaylang=en
Рис. 18.1. Применение технологии Deep Zoom на сайте Hard Rock
18.2. Работа с Deep Zoom Composer
После запуска программы Deep Zoom Composer откроется диалоговое окно, в котором можно выбрать, что мы хотим сделать: создать новый проект или редактировать существующий. При создании нового проекта появляется окно, в котором необходимо указать название проекта, и место на жестком диске, где он будет храниться. Дальнейшая работа с Deep Zoom Composer состоит из трех этапов. На первом этапе, который называется Import, необходимо добавить в проект все изображения, которые будут использоваться при работе приложения. Для добавления изображений можно воспользоваться кнопкой Add Image в правом верхнем углу (рис. 18.2).
Рис. 18.2. Импорт изображений в Deep Zoom Composer
На втором этапе, необходимо из имеющихся изображений скомпоновать коллаж, при этом картинки можно уменьшать и увеличивать в размерах (сохраняя их разрешение), накладывать друг на друга (рис. 18.3).
Рис. 18.3. Импорт изображений в Deep Zoom Composer
Помимо этого, на данном шаге можно сделать еще ряд действий, а именно: создать встроенное меню, которое позволит перемещаться от одного изображения к другому; установить ссылки между изображениями друг на друга так, чтобы при щелчке мышкой по одному изображению переходить к связанному; устанавливать внешние ссылки; задавать каждому изображение какое-либо строковое значение, которое потом можно будет использовать.