Geekly Articles each Day

PivotViewerおよびSilverlightでデータを表示するための簡単な手順


Microsoft LiveLabsチームのPivotViewerコントロールが最近リリースされました。 DeepZoomテクノロジーを使用して情報を視覚化できるSilverlightコントロールです。 まだどのように機能するかをまだ見ていない場合は、Pivo​​tViewerの調査部門に行くことをお勧めします

先週、このツールを使用したより簡単な「方法」の例を示すようにという手紙を受け取りました。 結局のところ、Silverlightコントロールであり、特定の実装が必要です。 そして、Pivo​​tViewerを使用して最も単純な形式のデータと表示を作成することをメモに書きたいと思いました。 はるかに複雑なオプションを取得できるため、「シンプル」と言いますが、まだ簡単な実装手順を示したいだけです。

まず、Pivo​​tコレクションは画像と画像を説明するメタデータの組み合わせであることを忘れないでください。 Hard Rock Memorabiliaというサイトにアクセスした場合、これは、Silverlightで以前に実装されたシンプルなコンセプトです。

ステップ1-PivotViewerを入手する


既にVisual Studio 2010とSilverlight 4ツールを持っていると思います。 SilverlightコミュニティサイトのPivotViewerトレーニングセクションから PivotViewer SDKをダウンロードできます。 インストーラーの起動後、％ProgramFiles％\ Microsoft SDKs \ Silverlight \ v4.0 \ PivotViewer \ <RELEASE>でインストールが実行されます。 ソースコードの例が含まれるフォルダがあり、それらに慣れることができますが、ほとんどの場合、独自のアクションやその他の機能は必要ありません。 以下の手順は、単純なコレクションの「PivotViewer 101」です。

ステップ2-ピボットコレクションビルドツールを入手する


コントロールを使用するには、Pivo​​tコレクションのデータソースが必要です。 これは、Pivo​​tViewerと完全なPivotクライアントが理解できる特定のXMLデータ形式です。 XMLスキーマのドキュメントは、 PivotViewer Collection XML Schemaにあります。 ご覧のとおり、非常に簡単です。 あなたは完全に自分の手でそれを行うことができますが、なぜ、あなたを助けるツールがいくつかあるなら！

コレクションのソースを作成するには、コマンドライン、コードライブラリ、Excelの3つの方法があります。 最初の2つは、動的ソースの場合に一般的です。 これらは、さまざまなタイプのソース用のコード形式のいくつかのオプションで、メタデータを追加し、動的なものをオンザフライで作成するか、JITコレクションを使用します。

最後の1つであるExcelは最も簡単です。 LiveLabsチームは、コレクションスキームを明示的に詳しく調べる必要なく、使い慣れたインターフェイスを使用してデータコレクションを作成する簡単なアドオンを作成しました。 インストールすると、Excelに新しいブックマークが追加されます。

Excel PivotViewer collection tool

[ 新しいコレクション ]ボタンをクリックすると、シンプルなテーブルが表示され、コレクション用の独自のデータソースの構築を開始できます。

ステップ3-コレクションのデータ作成を開始する


私の例では、最新のWindows 7テーマ「Bing's Best」のBing壁紙を使用します。 既にExcelを開いているので、[新しいコレクション]をクリックしました。 [ 画像のインポート]機能を使用して、 一連の画像を読み込むことができます。 しかし、私はそれをしません。 [画像の選択]を使用して、画像を選択的に追加します。

次に、ユーザーがカテゴリでフィルターできるように、すべてを異なる列に並べ替えます。 Inset Column関数を使用し、Categoryヘッダーを渡しました。 これらの列はファセットに変換され、定義スキームの図に従って、制御要素（フィルター）で視覚的に変換されます。

Building collection data

テーブルに必要なものがすべて表示されるまで、データを追加します。 列を1つだけ追加しましたが、さらに多くのことができます。 それで、私は記入を終えました、そして今、コレクションを公開するために公開を選択します。

公開の結果は、CXMLファイルと、DeepZoom用に画像がカットされたフォルダーになります。 データの場所を覚えておいてください。

ステップ4-PivotViewer実装を使用したSilverlightアプリケーションの作成


SDKがインストールされている場合、Visual Studioで新しいSilverlightプロジェクトを実行します。 簡単な手順を実行した後：

PivotViewerはこのライブラリにあるため、 Systen.Windows.Pivotへのリンクを追加します。

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イベントで、Pivo​​tViewer APIを使用して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をさまざまな場所で再利用し、<object>タグのinitParams値のみを変更できます。 私は最終的にXAPになり、どこでもホストできるようになりました。

ステップ5-結果を公開する


最後のステップは公開です。 CXMLファイルと画像フォルダーを覚えていますか？ どこかに配置する必要があります。 そして、ここに2つの非常に重要なポイントがあります：


必要なアクションをすべて完了したら、XAPをHTMLページに配置して、データコレクションの操作に集中できます。 例として、結果-Bingのベストピボットコレクションを賞賛してください。 [カテゴリ]列が左側のフィルターとしてどのように表示されるかに注目してください。 より多くの列を作成します。より多くのフィルターを参照してください。 さらにメタデータを追加し、特定のデータを参照するようにHREFパラメーターを設定することもできます。

GetPivot Webサイトでスキームの他の例をよく理解できます。
プロジェクトを使用して、initParamsにURLを入力するだけで、必要なコレクションを変更できます。 LiveSideが何も変更せずに作成したMicrosoft Organization Pivot Collectionも使用できます。MSFTOrganization Pivot in Silverlight 。

まとめると


コントロールにほんの数分を費やした後、簡単なデータ表示スクリプトを取得します。 実際、コレクションのデータソースを作成することは最も難しく、すべてのメタデータを定義するなど...

ここから私の例をダウンロードできます-PivotViewerSimpleSample.zip

Source: https://habr.com/ru/post/J99174/

More articles:


All Articles