Недавно был выпущен элемент управления PivotViewer, от команды Microsoft LiveLabs. Он является элементом управления Silverlight, который позволяет визуализировать информацию, используя технологию DeepZoom. Если вы до сих пор не видели, как оно работает, советую пройти в отдел изучения PivotViewer
На прошлой неделе я получил письмо, с просьбой показать более простой пример “how to”, используя данный инструмент. В конце концов это элемент управления Silverlight и он требует определенной реализации. И я подумал записать в свои заметки создание простейшей формы данных и отображения, используя PivotViewer. Я говорю “простой”, потому что вы можете получить гораздо сложнее вариант, но я хочу все же просто показать быстрые шаги реализации.
Вначале запомните, что Pivot-коллекции представляют из себя комбинацию изображения и метаданных, которые описывают изображение. Если вы заходили на сайт Hard Rock Memorabilia, то это простой концепт, реализованный ранее на Silverlight.
Шаг 1 – Получите PivotViewer
Я предполагаю, что у вас уже стоит Visual Studio 2010 и Silverlight 4 Tools. Загрузить PivotViewer SDK можно в разделе обучения PivotViewer на сайте Silverlight сообщества. После запуска инсталлятора, установка произведется по адресу %ProgramFiles%\Microsoft SDKs\Silverlight\v4.0\PivotViewer\<RELEASE>. В наличии папка с примерами исходных кодов, вы можете свободно с ними ознакомится, но скорее всего вам не понадобятся собственные действия и другие возможности. Мои шаги ниже – “PivotViewer 101” для получения простых коллекций.
Шаг 2 – Получите инструмент построения Pivot-коллекции
Для того, чтобы воспользоваться элементом управления, у вас должен быть источник данных для Pivot-коллекции. Это определенный формат данных в формате XML, который понимает PivotViewer и полноценный клиент Pivot. Документация по XML-схеме может быть найдена тут — PivotViewer Collection XML Schema. Как видите она очень простая. Вы можете её сделать полностью руками, но зачем, если есть несколько инструментов, которые вам помогут!
Существует 3 способа, чтобы создать источник для коллекции: командная строка, библиотека кода и Excel. Первые два, распространены в случае динамического источника. Это несколько вариантов в виде кода для различных типов источников, добавления метаданных и создания динамических на лету или с помощью JIT коллекций.
Последний же – Excel, является самым простым. Команда LiveLabs создала простое дополнение для создания коллекции данных, используя знакомый интерфейс, не требуя явно копаться в схеме коллекции. Как только вы его установите, у вас появится новая закладка в Excel:
Когда вы нажмете на кнопку New Collection, то получите простую таблицу для начала построения собственного источника данных для коллекции.
Шаг 3 – Начинаем создавать данные для коллекции
Для моего примера, я собираюсь использовать обои от Bing, из последней Windows 7 темы “Bing’s Best”. У меня уже открыт Excel и я нажал на New Collection. Теперь я могу использовать функцию Import Images, чтобы загрузить кучу картинок. Но не буду этого делать. Я буду добавлять картинки выборочно, используя Choose Image.
Далее я хочу разнести все по разным колонкам, чтобы пользователь мог фильтровать по категориям. Я использовал функцию Inset Column, и передавал ей заголовок Category. Данные колонки трансформировались в Facets и согласно диаграмме схемы определения они визуально преобразовываются в элементе управления — фильтры.
Добавляйте данные пока не убедитесь, что таблица отображает все нужное. Я добавил всего одну колонку, но вы можете и больше. Итак я завершил заполнение и теперь выберу Publish для публикации коллекции.
Результатом публикации будет CXML файл и папка с вашими нарезанными для DeepZoom изображениями. Запомните расположения ваших данных.
Шаг 4 – Создание Silverlight-приложения с реализацией PivotViewer
Учитывая, то у вас установлен SDK, запустите новый Silverlight-проект в Visual Studio. После проделайте простые действия:
Добавьте ссылку на Systen.Windows.Pivot, так как в данной библиотеке находится PivotViewer.
В MainPage.xaml добавьте XMLNS-объявления для пространства имен и реализации элемента управления:
<UserControl x:Class="SilverlightApplication164.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"
xmlns:pivot="clr-namespace:System.Windows.Pivot;assembly=System.Windows.Pivot"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400">
<Grid x:Name="LayoutRoot" Background="White">
<pivot:PivotViewer x:Name="MainPivotViewer" />
</Grid>
</UserControl>Это все, что нужно сделать со стороны пользовательского интерфейса.
Следующей задачей, которую я хочу проделать – сделать просмоторщик динамическим. Я хочу, что бы тот же XAP использовал мою коллекцию данных. В моем файле MainPage.xaml.cs, в событии Loaded, я использую API PivotViewer и вызываю функцию LoadCollection():
public MainPage()
{
InitializeComponent();
Loaded += new RoutedEventHandler(MainPage_Loaded);
}
void MainPage_Loaded(object sender, RoutedEventArgs e)
{
string collection = App.Current.Host.InitParams["collection"].ToString();
MainPivotViewer.LoadCollection(collection, string.Empty);
} Вы, наверное, обратили внимание, что я получаю значение из модели Silverligt InitParams. Это позволяет мне динамически отправлять URL коллекции на HTML страницу:
<object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
<param name="source" value="ClientBin/SilverlightApplication164.xap"/>
<param name="onError" value="onSilverlightError" />
<param name="background" value="white" />
<param name="minRuntimeVersion" value="4.0.50424.0" />
<param name="autoUpgrade" value="true" />
<param name="initParams" value="collection=URL_TO_CXML" />
<a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50424.0" rel="nofollow" style="text-decoration: none">
<img src="http://go.microsoft.com/fwlink/?LinkId=161376" __bxsrc="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" border="0" style="border-style: none"/>
</a>
</object>Так что я могу заново использовать XAP в различных местах и только менять значение initParams в теге <object>. Я закончил с XAP и теперь могу размещать его где угодно.
Шаг 5 – Публикуем результат
Последним шагом является публикация. Помните CXML файл и папку с изображениями? Они должны где-то размещаться. А вот два очень важных момента:
- Если CXMK файл и изображения размещены не рядом с XAP файлом, тогда должны быть указаны кросс-доменные политики безопасности (clientaccesspolicy.xml). Иначе ничего работать не будет. PivotViewer делает сетевой запрос и данная политика нужна Silverlight для кросс-доменных ситуаций.
- Возможно, вам придется добавить привязку MIME-типа на своем сервере, для работы CXML файлов. Мне пришлось (на Windows 2003). Я просто добавил привязку MIME-типа для .cxml и задал тип содержимого text/xml, все заработало.
Как только я произвел все нужные действия, я могу приступить к размещению XAP на HTML странице и нацеливанию на работу с моей коллекцией данных. Как пример, полюбуйтесь на результат — Bing’s Best Pivot Collection. Обратите внимание, как отображается колонка Category в виде фильтра слева. Сделал бы больше колонок, увидел бы больше фильтров. Я так же мог добавить больше метаданных и задать параметр HREF, для ссылания на определенные данные.
Вы можете ознакомиться с другими примерами схем на сайте GetPivot:
- http://content.getpivot.com/Collections/dogbreeds/dogbreeds.cxml
- http://content.getpivot.com/Collections/sportsillustrated/sportsillustrated.cxml
- http://content.getpivot.com/Collections/2009nflteams/2009nflteams.cxml
Подытожим
Потратив всего несколько минут на элемент управления, вы получите простейший сценарий отображения данных. Фактически, создание источника данных для коллекции является самым сложным, определить все метаданные и т.п….
Вы можете загрузить мой пример отсюда — PivotViewerSimpleSample.zip
