Этот пост — окончание статьи Как использовать PivotViewer для Silverlight в реальном проекте.

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

Шаг 4-й, программное формирование xml с данными и изображений в Deep Zoom формате

Нам нужно сформировать .cxml файл с данными в xml и преобразовать изображения элементов в Deep Zoom формат. В принципе, xml легко можно создать при помощи стандартных .NET классов, а для работы с Deep Zoom воспользоваться библиотекой Deep ZoomTools.dll (входит в состав Deep Zoom Composer). Но есть еще более удобный способ — Pauthor. Этот проект включает в себя как .dll, которую можно вызывать из вашего кода, так и утилиты командной строки и позволяет создавать коллекции для Pivot, а так же совершать преобразования между этими коллекциями в другие форматы (CSV, Excel, CXML with raw images, and CXML with DeepZoom images) и обратно.

Pauthor удобен тем, что позволяет формировать коллекцию, используя высокоуровневые объекты, такие как PivotCollection, PivotFacetCategory, PivotItem и пр. Пример использования Pauthor приведен в хабротопике Создаем за 10 минут PivotViewer контента сайта на примере Хабрахабр, так что останавливаться на нем мы не будем.

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

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

К слову сказать, к написанию этого топика меня подтолкнул комментарий к одному из обзоров:

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

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

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

Visual Search provider — это один из трех новых типов расширений в IE 8.0 Он позволит пользователям искать что-нибудь на вашем сайте, не переходя на его страницы. А если вы добавите к провайдеру favicon, ваш бренд (вернее 16-и пиксельный брендик) всегда будет вместе с пользователем. И главное, он позволит разбавить сухой текст результатов поиска симпатичными картинками, вот например так:



А еще, вы можете рассказать о своем провайдере, выложив его в галерею расширений IE 8.0. Или выиграть плазменный телевизор, поучаствовав в конкурсе дополнений к IE 8.0, который проводится в рамках конференции ReMIX09.


Между прочим, сейчас там зарегистрировано всего 3 визуальных провайдера. Так что если у вас есть что искать, а еще лучше — сайт с верной аудиторией, готовой поддержать его в конкурсе — давайте попробуем?

Все что от вас действительно потребуется — это метод, который будет возвращать найденные по запросу данные. Как он будет выглядеть, зависит от ваших любимых технологий и размера сайта. В моем случае (сайт с мини играми, который я написал на .NET) это было простое строковое сравнение в LINQ запросе. Кто-то посерьезнее настроит full text search в MS SQL Server, ну а приверженцы PHP и MySQL наверняка тоже подберут что-нибудь эффективное в своем арсенале.

Если у нас будет такой метод, все остальное — это задача на два помидора¹, которую мы сделаем на раз-два-три. Причем, в отличие от web slices, простой вариант решения будет одновременно и хорошим, без всяких оговорок и нюансов.

Итак, в лучших традициях кулинарных программ, для успешного приготовления провайдера нам понадобится:

Одна из новых возможностей IE 8 — это web slices, фрагменты веб-страниц, которые можно просматривать браузером не открывая всю страницу целиком.

И все бы хорошо, вот только одна неприятная мелочь — в preview окне для web slice нет автоматической прокрутки (scrolling). Если один и тот же html просто открыть в браузере и он там не помещается — полоса прокрутки появится, если в preview окне для web slices — прокрутки нет.

Для некоторых web slices это не играет никакой роли. Например, для лотов с eBuy, которые так любят приводить в пример. Один лот можно комфортно разместить в окошке размером 320 x 240 (размер preview окна по умолчанию). Однако часто web slices представляют собой какие-нибудь списки — последние новости, анонсы, комментарии, да мало ли. Попробуйте открыть страницу valuta.online.ua и добавьте web slice с курсами валют. А теперь откройте его в preview окне. Что, тоже пробуете крутить колесико мышки чтобы просмотреть содержимое, как и я?



В принципе, пользователь может растянуть окно до какого-то предела. Но не факт, что все поместится даже в этом случае да и управлять размерами окна сами вы никак не сможете. А изначально оно открывается размером 320 x 240 и никак не подстраивается под размер отображаемого html.

Конечно, что-то можно сделать и в этом случае. Например, ограничить количество элементов списка (первые 5) и выводить не более 100 символов в каждом элементе. Но тогда web slice может потерять свое главное преимущество и вместо информации, которую можно быстро просмотреть, превращается в обычный баннер типа «Эй, посмотри, что у нас есть! Хочешь посмотреть — заходи на сайт!».

Так что можно попробовать добавить прокрутку самому. Это будет выглядеть примерно так:

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Заголовок web slice</title>
    <style type="text/css">
      html { height: 100% }
      body { padding: 0px; margin: 0px; height: 100% !important; overflow: hidden; }
      #outer { overflow-x: hidden; overflow-y: auto; height: 100% }
      #inner { padding: 10px; }
    </style>
  </head>
  <body>
    <div id="outer">
      <div id="inner">
         <!-- Тут у нас размещен html нашего web slice -->
      </div>
    </div>
  </body>
</html>

В результате мы получим web slice, окруженный 10px отступами от краев preview окна. Если содержимое html не будет помещаться — появиться вертикальная прокрутка. Аттрибуты «overflow-x» и «overflow-y» уникальны для IE, но и сами web slices тоже уникальны для IE, так что проблему это не создаст.

Как будет выглядеть такая прокрутка можно посмотреть на примере online результатов футбольных матчей.



Есть еще один момент, на который нужно обратить внимание. Так как мы должны отдавать специально сформированный html для preview окна, простейший способ создания web slices при помощи 2-3 аттрибутов нас не устроит. Мы будем использовать «alternative display source» — возможность указать url, возвращающий html для preview. Для этого:

Создаем страницу, которая будет формировать нужный нам html. Допустим, это будет /webslices.php (/webslices.aspx — для .NET-чиков и просто /webslices для SEO оптимизаторов :)

Добавляем к коду web slice указатель на этот html:

<div class="hslice" id="slice">
  <span class="entry-title">Заголовок web slice</span>
  <a rel="entry-content" href="/webslice.php" style="display:none;"></a>
</div>

Более длинное описание вы сможете найти в моем посте "Web Slices для IE 8". Ну и конечно никакая статья не заменит документации по Web Slice в MSDN. Удачи вам в разработке!