Pull to refresh

Как использовать PivotViewer для Silverlight в реальном проекте (часть I)

Reading time 7 min
Views 845
На Хабре уже несколько раз писали об элементе управления PivotViewer, предназначенном для визуализации и фильтрации больших объемов данных. Я хочу поделиться опытом использования этого крайне интересного элемента в реальном проекте.

Если вы просто хотите узнать, что это такое и может ли это как-то пригодится в хозяйстве — прочтите хороший Обзор элемента PivotViewer для Silverlight от xaoccps, этого описания и примеров будет вполне достаточно. Но если вы подумываете об интеграции PivotViewer в какой-то из ваших проектов — эта история поможет вам сэкономить немного времени.

К слову сказать, к написанию этого топика меня подтолкнул комментарий к одному из обзоров:
Что я не люблю в подобных «how to» ( во всяком случае для WPF и SL, возможно и для других фреймворков ситуация такая же) — то что они похожи на путешествия по нескольким хорошо освещенным асфальтированным дорожкам в глухом лесу. Пока ты не сворачиваешь никуда — все классно, здорово и просто элементарно. Но стоит тебе свернуть хотя бы на шаг — и ты получаешь от дремучего леса по полной.

Скажу сразу, в этом случае с дремучим лесом мы не столкнемся, но поплутать немного придется.

Перед тем как отправиться в путь, пара полуфилософских мыслей об этом элементе (если вас интересует только реализация — смело их пропускайте).

Признаться честно, когда я услышал о Pivot и полез смотреть «крышесносящий» пример с Wiki, первыми мыслями были «круто» и «ну и нафига?». Намного проще набрать в Google «Wiki Silverlight» и получить нужную ссылку в первой строке, чем загружать cxml файл с описанием кучи статей, выбирать в фильтре «Web development software» и 2009 год, и, полюбовавшись на красивую графику, таки получить карточку с желаемой ссылкой (это только первое впечатление, я верю, что есть сценарии, когда такой подход может и будет полезен). Это здорово напомнило мне новую версию сайта одного из кинотеатров, сделанную на модном тогда флеше. Любой клик сопровождался красочной анимацией, взрывами и музыкой, а когда посетителю надоедало рассматривать спецэффекты, он принимался искать незаметную ссылку «старая версия сайта для плохого интернета» :)

Мое отношение к Pivot изменилось, когда я попробовал подобрать комплектовку к новому компьютеру. К слову сказать, последний раз железом я интересовался года три назад, когда выбирал старый компьютер. Так что теперь мне предстоял выбор из сотен вариантов различных компонент с разными технологиями и от разных производителей (собрать его сам я решил именно «для души», чтобы вспомнить студенческие годы, лично подобрать каждую «железку» да и вписаться в бюджет).

Выбор мне здорово облегчили пара сайтов, которые позволяли выбрать нужную категорию товаров, фильтровать ее по разным параметром и быстро сравнивать: «а что из этого есть у GigaByte?», «а может то же, но с вентилятором 140мм?» или «добавится ли к списку что-то хорошее, если я увеличу цену на $20?».

Это действительно было очень удобно, и тут я подумал, что это же и есть реализация PivotViewer. Ведь он предназначен именно для того, чтобы можно было поиграться с разными фильтрами на очень большой (и даже громадной :) массе объектов. У него есть область с фильтрами, область для списка и «property page» с описанием выбранного элемента. Причем всю эту функциональность мы получаем в одном простом (с точки зрения использования) элементе управления, которому просто нужно «скормить» список объектов в xml формате. Причем многочисленные интернет-супермаркеты всяческих товаров — это только один из примеров. Точно так же можно отображать рецепты блюд (фильтруем по ингредиентам, типу блюд, национальной принадлежности кухни, рейтингу, да мало ли), путевки турфирм (страны, курорты, отели, тип питания, стоимость...), объекты недвижимости (расположение, метраж, кол-во комнат, и т.д.). И этот список легко можно продолжить.



Те, кто пробовал подобрать себе путевку «куда-нибудь» или решить, где и за сколько ему стоит снимать квартиру (а вдруг в том районе двушку можно снять всего на $100 дороже?) поймут, насколько удобным может оказаться такой подход. Правда для того, чтобы наше решение не превратилось в «бесполезный сайт со спецэффектами», нам нужно минимум три вещи:
  • Действительно большое количество объектов. Если у вам магазинчик с парой десятков сортов чая, Pivot будет всего-лишь красивой игрушкой. Несколько сотен — уже лучше. Десятки и сотни тысяч? Вот тут он покажет себя во всей красе (если ему хватит ширины вашего канала; а что вы хотели, нет в мире совершенства :)

  • Подробные характеристики для большинства объектов. Если при выборе любого параметра вся наша коллекция будет делиться на группы «отобрано» (10%) и "(no info)" (90%), Pivot опять таки превратиться в красивую игрушку.

  • Изображения ко всем объектам, чем большего разрешения — тем лучше. Вот тут проявляется вся мощь технологии Silverlight Deep Zoom, которая позволяет показывать оч-чень большие и качественные изображения, минимально загружая трафик. К слову сказать, изображения играют очень важную роль при выборе в инете. Если покупатель увидит список, в котором у трети элементов не будет фотографий, он скорее просто проигнорирует их не смотря на привлекательные характеристики. Причем это будет работать, даже если внешний вид вроде бы как и не нужен, например при выборе материнской платы или бумаги для принтера.

Уф, оглядываюсь назад и понимаю, что философствовать можно бесконечно. Пора к делу.

Перед прогулкой по «глухому лесу» давайте проверим наш рюкзак. В нем должны быть:

Мы начнем с прототипа. Любители сначала программировать, а потом думать (это не ирония, иногда лучше «напрограммировать» рабочий прототип, а потом уже думать, как его лучше реализовать на основании полученного опыта; тут главное — не заниматься деталями и не доводить прототип до совершенства, вот это — точно потерянное время) могут смело пропустить этап с прототипом и сразу перейти к программированию.

Чем нам поможет прототип? Во-первых, мы сможем лучше понять, какие параметры нам стоит выносить в фильтр и описание (данные нужно будет формировать программно, так что это избавит нас от переделок). Во-вторых (а скорее, во-первых!) мы сможем показать прототип заказчику, чтобы он проникся этой идеей, дал добро и внес свои жизненно важные указания. Кроме этого, когда вы видите рабочую модель этой игрушки именно с вашими картинками — это заряжает вас дополнительной энергией и придает желание «побыстрее сделать такую прикольную штуку!».

Самый простой способ повозится с прототипом — использовать Pivot Collection Tool for Microsoft Excel. Это плагин для Excel, который позволит быстро набросать пример из нескольких элементов, добавить нужные параметры и сформировать xml с данными и, главное, папку с изображениями, преобразованными в Deep Zoom формат. Как это сделать хорошо описано еще в одном посте с Хабра — Быстрые шаги по отображению данных в PivotViewer и Silverlight.

Программировать мы еще не начинали, а результат посмотреть как-то хочется. Для этого проще всего скачать старшего брата Pivot Viewer — Pivot, который представляет собой desktop WPF версию браузера данных.

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

Будем считать, что у вас уже есть ASP.NET проект, к которому вы хотите добавить Pivot Viewer. Нам предстоит выполнить 5 основных шагов:
  1. Добавить Pivot Viewer к проекту
  2. Локализовать (конечно, если ваш сайт для Рунета)
  3. Настроить IIS
  4. Научиться программно формировать xml с данными и изображения в Deep Zoom формате
  5. Допилить элемент напильником (необязательно, но полезно :)

Итак, шаг 1-й, добавляем Pivot к проекту


  1. Добавляем к вашему solution новый проект типа «Silverlight Application». Он должен найти в solution веб-приложение и предложить «захостить» новый проект именно в нем



  2. Visual Studio создаст в вашем веб-проекте каталог «ClientBin» и разместит там .xap файл — скомпилированный и «зазипованный» Silverlight проект. Если вы захотите поменять имя каталога на что-то более наглядное, не забудьте изменить привязку Silverlight проекта на закладке «Silverlight Applications» в диалоге «Property Pages» веб-проекта.

  3. К вашему проекту должны добавиться две страницы (.aspx и .html) с размещенным на них PivotViewer. По функциональности они идентичны, так что .html вариант мы удаляем, а .aspx используем как основу: выносим скрипты во внешний файл, добавляем окружающий контент и т.д. В настройках тега <object> указываем корректный путь к .xap файлу.

  4. Копируем наш прототип (.cxml файл с данными и каталог с Deep Zoom изображениями) в веб-проект, например к .xap файлу. Загружаем ее в Pivot, используя метод LoadCollection в конструкторе страницы из Silverlight проекта (по умолчанию это MainPage.xaml)
    public MainPage()
    {
      InitializeComponent();
      ...
      MainPivotViewer.LoadCollection(collectionUri, String.Empty);
    }

    * This source code was highlighted with Source Code Highlighter.

    где collectionUri — абсолютный url к .cxml файлу с данными.

Если вдруг что-то будет не так — загляните в пример, который находится в папке с Pivot (у меня это «C:\Program Files (x86)\Microsoft SDKs\Silverlight\v4.0\PivotViewer\Jun10\Source»). Это простой сайт с одной страницей, так что он не содержит почти ничего лишнего. Там есть пара необязательных, но полезных моментов, но об этом — позже.

Шаг 2-й, локализация


Тут все просто. Нам нужно создать в Silverlight проекте файл со строковыми ресурсами и добавить туда нужные строки с предопределенными ID. Полный список всех возможных строк можно посмотреть в свойствах объекта Resources. Значения по умолчанию подскажут вам назначение этой строки. Обратите внимание, большая часть строк используется для формирования описания фильтров типа «с… до ...» или «больше или равно ...». Если не сильно играться с фильтрами, вы можете их не встретить, но это не значит, что они не нужны.

Теперь отдаем нашу версию перевода элементу управления:

public MainPage()
{
  InitializeComponent();
  ...
  System.Windows.Pivot.PivotViewer.SetResourceManager(LocalizationStrings.ResourceManager);
}


* This source code was highlighted with Source Code Highlighter.

Наверное, пришло время показать, как все это выглядит в жизни. Конечно, лучше было бы прикрутить Pivot Viewer к какому-нибудь супермаркету электроники, но… «используй то, что под рукою и не ищи себе другое», помните старый добрый мультик про Филеаса Фога и его путешествие? Так что я разбирался с этим элементом на своей в буквальном смысле любимой игрушке — сайту с казуальными играми. Я еще буду ссылаться на этот пример в дальнейших объяснениях, а мой вариант перевода вы сможете посмотреть на этой странице.

Шаг 3-й, настройка IIS


Самый простой шаг. Все что нам нужно — это научить IIS узнавать новые для него типы расширений. Для IIS 7.0 и выше достаточно добавить в web.config строки:
<configuration>
  <system.webServer>
    <staticContent>
      <mimeMap fileExtension=".cxml" mimeType="text/xml" />
      <mimeMap fileExtension=".dzc" mimeType="text/xml" />
      <mimeMap fileExtension=".dzi" mimeType="text/xml" />
    </staticContent>


* This source code was highlighted with Source Code Highlighter.

В более младших версиях вам придется прописать это вручную, в панели настройки IIS.

Уф, вижу, что текста получается достаточно много и кто-то может не дочитать до самого интересного — полезных моментов и проблем, с которыми вы можете столкнуться. Так что я попробую разбить эту статью на две части, постараюсь выложить вторую уже завтра.

Оставайтесь с нами, окончание следует… :)

Tags:
Hubs:
+11
Comments 3
Comments Comments 3

Articles