Geekly Articles each Day

実際のプロジェクトでPivotViewer for Silverlightを使用する方法（パートII）

この投稿は、 リアルプロジェクトでSilverlight for PivotViewerを使用する方法の記事の終わりです。

このアプリケーションには、データのテストコレクション（プロトタイプ）を表示できるページが既にあります。 次のステップに進み......

ステップ4、Deep Zoom形式のデータと画像を使用したソフトウェアxmlの形成


xmlのデータを使用して.cxmlファイルを作成し、要素の画像をDeep Zoom形式に変換する必要があります。 原則として、xmlは標準の.NETクラスを使用して簡単に作成でき、Deep Zoomを使用するには、ライブラリDeep ZoomTools.dll（ Deep Zoom Composerの一部）を使用します。 しかし、さらに便利な方法があります-Pauthorです。 このプロジェクトには、コードから呼び出すことができる.dllとコマンドラインユーティリティの両方が含まれており、Pivo​​tのコレクションを作成したり、これらのコレクション間の変換を他の形式（CSV、Excel、生画像付きCXML、 DeepZoom画像を含むCXML）およびその逆。

Pauthorは、Pivo​​tCollection、Pivo​​tFacetCategory、Pivo​​tItemなどの高レベルオブジェクトを使用してコレクションを作成できるという点で便利です。Pauthorの使用例は、hubrotopで提供されます。Habrahabrサンプルを使用して10分でサイトコンテンツPivotViewerを作成します 。

ビューアーの使いやすさを大幅に改善できる便利なポイントが1つあります。 何が正確に描かれているのか（どのモデルの商品、ホテル、人物）を理解するために、ユーザーがすべての写真を連続して突くように強制したくありませんか？ これらの名前を写真に直接入れておくといいでしょう。 しかし、通常、私たちは商品や署名のない何かの画像を持っています。 そのため、Deep Zoomコレクションを作成するとき、Pauthorでは、どの画像が形成されるかに基づいて、htmlテンプレートを指定できます。 純粋なhtmlに加えて、これらのテンプレートでプレースホルダーを使用できます。プレースホルダーは、オブジェクトの説明の対応する特性に置き換えられます。 簡単なテンプレートの例を次に示します。
< html >
< head >
< style >
body {
margin: 0px;
}
img {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
}
p {
font-size: 100px;
color: white;
background: grey;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
filter: alpha(opacity=50);
padding: 20px;
}
</ style >
</ head >
< body >
< img src ="{image}" />
< p > {name} </ p >
</ body >
</ html >

* This source code was highlighted with Source Code Highlighter .

Pauthorのあるフォルダーには、他にもいくつかの例があります。 そして、これはあなたが結婚式の場所を選択することを可能にするサイトから取られた、起こりうることの例です：



そのため、一見、すべてが整然としています。必要なデータを使用してプログラムでコレクションを作成できます。残りはPivot Viewerが行います。 ただし、利便性を高めるために、いくつかの詳細を追加しても問題ありません。 だから...

ステップ5、オプションですが、小さくて便利な要素のファイルディッピング:)


ユーザーが画像の1つを選択すると、その詳細な説明がプロパティビューアー（ビューアーの右側）に表示されます。 説明のタイトルはリンクとして強調表示されていますが、このリンクをクリックすると、ビューアーの裁量で完全に表示されます。

同様に、ユーザーはオブジェクトをダブルクリックすると、デフォルトのアクションが発生することに慣れています。 ビューアは、説明の見出しをクリックするのと同じ方法で、画像のダブルクリックを処理します-イベントを生成し、決定を任せます。

それらを処理するには、Silverlightプロジェクトの.xamlページに数行のコードを追加します。

<pivot:PivotViewer
x:Name= "MainPivotViewer"
LinkClicked= "OnPivotViewerLinkClicked"
ItemDoubleClicked= "OnPivotViewerItemDoubleClicked"
/>

/// <summary>
/// Handle links clicked in the metadata pane.
/// </summary>
private void OnPivotViewerLinkClicked(Object sender, LinkEventArgs args)
{
OpenLink(args.Link.ToString());
}

/// <summary>
/// Handle double-clicks on collection items
/// </summary>
private void OnPivotViewerItemDoubleClicked(Object sender, ItemEventArgs args)
{
String linkUriString = MainPivotViewer.GetItem(args.ItemId).Href;
if (! String .IsNullOrWhiteSpace(linkUriString))
{
MainPivotViewer.CurrentItemId = args.ItemId;
OpenLink(linkUriString);
}
else
{
// Error: No Associated Web Page: the item that was double-clicked has no value for the 'Href' field
}
}

* This source code was highlighted with Source Code Highlighter .

この場合、OpenLinkヘルパーメソッドを呼び出します。このメソッドは、オブジェクトの説明を含むページを別のブラウザーウィンドウで開きます。 URLをナビゲートする代わりに、選択したオブジェクトをカートに追加したり、オブジェクトの他のコレクションを開いたりすることができます。 説明のサイズを大きくしないために、ここではOpenLinkコードは提供しません。 それを見ることができ、Pivo​​tのフォルダーからサンプルのイベント処理コードの残りをコピーできます（私の場合は「C：\ Program Files（x86）\ Microsoft SDKs \ Silverlight \ v4.0 \ PivotViewer \ Jun10 \ Source」 ）

この例では、別の便利な機能について説明します。 ピボットビューアーを使用すると、各画像にいくつかのカスタムアクションを追加できます。 アクションは、選択したオブジェクトに対して実行できるアクションです。 アクションごとに、アイコン、名前、およびコールバックメソッドを指定する必要があります。 次に、画像にカーソルを合わせると、Pivo​​tは使用可能なアクションのリストを表示します。 Pivotの例では、バスケットから製品を追加または削除するためにアクションが使用されています。



そしてもう1つの便利な瞬間です。 大量のデータを閲覧するとき、すべてのスペースが大切です。 ただし、多くのサイトではレイアウトが固定されており、画面の一部しか占有していません（本番環境で頻繁に遭遇するオプションは、1024px幅の解像度をナビゲートすることです）。 Silverlightアプリケーションには、フルスクリーンモードに切り替える便利な機能があります。これは、IsFullScreenプロパティの値を変更するだけで十分です。

必要なのは、何らかの方法でボタンをPivot Viewerに接続して、モードを変更することです。次に例を示します。

< Grid x:Name ="LayoutRoot" Background ="White" >
< pivot:PivotViewer
x:Name ="MainPivotViewer"
LinkClicked ="OnPivotViewerLinkClicked"
ItemDoubleClicked ="OnPivotViewerItemDoubleClicked"
/>
< Image
x:Name ="btFullScreen"
Width ="32" Height ="32" MinWidth ="32" MaxWidth ="32" MinHeight ="32" MaxHeight ="32"
Margin ="0,0,12,12"
HorizontalAlignment ="Right" VerticalAlignment ="Bottom"
Source ="{ }"
/>
</ Grid >

* This source code was highlighted with Source Code Highlighter .

ハンドラーを追加します：

private static readonly BitmapImage imageOff = new BitmapImage({ });
private static readonly BitmapImage imageOn = new BitmapImage({ });

btFullScreen.MouseLeftButtonDown +=
delegate (Object s, MouseButtonEventArgs args)
{
if (Application.Current.Host.Content.IsFullScreen)
{
Application.Current.Host.Content.IsFullScreen = false ;
btFullScreen.Source = imageOn;
}
else
{
Application.Current.Host.Content.IsFullScreen = true ;
btFullScreen.Source = imageOff;
}
};

* This source code was highlighted with Source Code Highlighter .

わかりやすくするため、モードに応じて麻の絵を変更します。 私の場合、次のようになります。



5つのステップを経て、作業の結果を賞賛することができます。 しかし、この説明は、開発中に発生した問題を解決した経験を共有していなかった場合、通常の「方法」と大差ありません。 私が書いた記事の冒頭で、森の中を少し外れることがあることを覚えていますか？ これは事実であり、障害はピボットコントロールのエラー処理にあります。

私の意見では、非常に安定して動作します。 確かに、2週間の作業の後、「Silverlightプラグインが誤った操作を実行し、それ以上作業することはできません」という悲しいメッセージに2回出くわしましたが、単純なページのリロードですべてが修正されました。 一般に、すべての利点を考慮して、特にこれは最初のバージョンにすぎないため、注意を払うことはできません。

しかし、デバッグに時間を費やしたのはエラーメッセージです。 これについてさらに説明しますが、2つの便利なルールを覚えているでしょう。
  1. Pivotが表示を停止しただけの場合、データが台無しになっている可能性があります。 彼に簡単なテストコレクションをスリップさせてください。 稼いだ？ 次に、ハーフディビジョン方式を使用して、すべてを非難するvalue \属性に領域を狭めるまで、元のデータからxmlの断片を破棄します。

  2. 何らかのエラーメッセージが表示された場合（これは常にそうではありません）-文字どおりに受け取らないでください。 メッセージのテキストがエラーの実際の原因とは関係がない場合があります。

それでは、エラーについて詳しく見ていきましょう。 ちなみに、この記事を読む頃には、何かがすでに修正されている可能性があり、新しいものが追加できることを忘れないでください:)
そして最後に、もう一つのヒント。 ブラウザは、データコレクションを積極的にキャッシュします。 Ctrl + F5は役に立ちません（データ量は数メガバイトになる可能性があるため、実際のアプリケーションでのみこれを喜ぶことができます）。 しかし、XMLを使用して最適なフィルターセットを見つける場合（IEまたはFFブラウザーのツールバーに[履歴をクリア]ボタンを表示する場合）、これにより時間を大幅に節約できます。 しかし、OperaはCtrl + Rのすべてのデータを完全に消去します。

通常、記事の最後に要約する必要があります。 まあ...このアイテムは、マイナーな欠陥によって損なわれるにはあまりにも良いです-それは素晴らしかったです！ 彼が検索を本当に単純化できるかどうかに非常に興味があるので、私たちは私たちのサイトで新しい実装を待っています:)

プログラミングを楽しんでください！

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

More articles:


All Articles