これは8つのチュートリアルのパート3で、簡単なDiggクライアントアプリケーションをSilverlight2のベータ1リリースを使用して構築する方法をご紹介します。このチュートリアルは、順番にご覧頂きながら、Silverlightのプログラム概念のコアな部分をいくらかご説明させていただくことを目的としています。
ネットワークを使用してDiggの記事を取得
Silverlight 2 にはビルドインのネットワークAPIがあり、SilverlightがリモートREST, SOAP/WS*, RSS, JSON, XML HTTP servicesを呼び出せるようになっています。Silverlight 2にはビルドインのソケットAPI(System.Net.Sockets)も含まれており、SilverlightクライアントがHTTPプロトコルでない(チャットサーバなどに理想的)ものとも交信することができます。
クロスドメインネットワークアクセス
Silverlight 2 アプリケーションは、常にネットワークで呼び出しした時”オリジナル”サーバへコールバックします。(つまりアプリケーションがダウンロードできる同じドメイン上のURLを呼び出すことができます。)Silverlight 2アプリケーションは、リモートのWebサーバにクライアントでそれらのクロスドメインをコールできることが示してあるXMLのポリシーファイルが置かれている場合、オプションでクロスドメインネットワークをコールすることができます(つまり、アプリケーションがダウンロードされるところとは別のドメイン上のURLを呼び出すことができます。)。
Silverlight 2 はXMLポリシーファイル形式を定義し、それによりサーバ管理者は厳密にクライアントがどのアクセスを持つことができるかについて管理することができます。Silverlight 2 はデフォルトのFlashクロスドメインポリシーファイル形式も守っています。つまり、既にFlashクライアントに対してクロスドメインアクセスが可能なWeb上の
全ての既存のリモートREST, SOAP/WS*, RSS, JSON, XML エンドポイントでも呼び出すためにSilverlight 2を使用できます。
Digg.com にはHTTPで公開する非常にかっこいいDigg APIが揃っています。彼らのサーバにはFlashクロスドメインポリシーファイルがあるため、直接Silverlight Diggクライアントアプリケーションから呼び出すことができます。(また彼らのAPIに達するのにこちら側のWebサーバを通じてトンネルバックする必要がありません。)
Digg.com トピックフィードAPI
エンドユーザには、検索トピック(例えば、”プログラミング”)に入力して、"検索"ボタンをクリックすると、それにマッチした最新記事をDigg.comから取りだすためにこのアプリケーションを使ってもらいたいと思っています。
:
これを行うためには、Digg.com 一覧記事 REST API フィード API を使用することができます。これはトピックの引数をURLに取り(例えば、 GET /stories/topic/programming)、トピックにマッチしたDiggの記事をXMLで返信します。ここをクリックするとこのXMLの例を確認することができます。
非同期にDigg RESTフィードを呼び出すためにSystem.Net.WebClientを使用
上記でSearchButtonがクリックされた時、"Click"イベントを処理し、WaterMarkTextBox コントロールから検索するトピックの文字列を取得し、Diggへのネットワークの呼び出しを初期化してそのトピックに対するXMLの一覧を取り出します。
Silverlight には System.Net 名前空間(これは通常の.NET Frameworkにもあります。)にWebClient ヘルパークラスがあります。このクラスを使用して非同期にURLからコンテンツをダウンロードすることができます。Diggの記事を非同期にダウンロードする利点はリモートサーバ上で待っている間にUIがブロックしたり無反応にならなくなります。(これにより非常に流動的なユーザ体験にすることができます。)
WebClientクラスで非同期ダウンロードを行えるようにするには、"DownloadStringCompleted" イベントハンドラメソッドを登録すると、それがリクエストされたコンテンツが一度ダウンロードされると呼び出され、WebClient.DownloadStringAsync(url) ヘルパーメソッドをそのダウンロードを初期化するために呼び出します。
:
上記のコードだとユーザが欲しいトピックに関するDiggの記事が含まれたXMLデータ文字列を非同期に取得することができます。
LINQ to XMLを使用してXML のDigg記事をStoryクラスにパース
Diggの記事データのXMLスニペットを取得できるようになったので、次は"DiggStory"オブジェクトへパース、変換して、それを操作してコントロールとデータバインドできるようにします。
まず"DiggStory"クラスを定義して、そのプロパティをDiggからのXMLコンテンツへマッピングします。 (これを行うのに、新しい C# の"自動プロパティ" 機能を利用します。):
その後LINQ (Silverlight 2にビルドインされています。)と LINQ to XML (Silverlightアプリケーションに含むことができる特別ライブラリです。)を使用することで、Diggから戻ってきたXMLドキュメントを簡単にパースおよびフィルタリングし、それを以下のコードを使用して一連の"DiggStory"オブジェクトに翻訳します。
:
この時点で作業するためのXMLから強く型付けされたDiggStoryオブジェクトが持てるようになったことを上記でご確認ください。
DataGrid コントロールでDigg 記事を表示
この新しい Silverlight DataGridコントロールを使用してアプリケーションでDiggの記事を表示します。これを行うには、Silverlightデータコントロールアセンブリを参照し、ページ上の前回の"Todo"文字をDataGridコントロール宣言で置き換えます。
:
DataGridは明示的に列定義の構成と型の表示(最大コントロールに対して)ができるようにします。
代替え的に"AutoGenerateColumns"プロパティをTrueに設定し、DataGridがそのデータソース上でリフレクションを使うことで、オブジェクトのスキーマに基づいたデフォルト列を作成するようにします。
その後コードビハインドクラスを更新し、検索ボタンがクリックされた時にDiggから戻ってきた一連の記事と、DataGridの"ItemSource" プロパティをプログラムでバインドします。
:
Silverlightアプリケーションを起動して検索すると、Diggから引き出されたライブなトピック記事データの一覧が確認できます。:
SilverlightのDataGridはクライアント側のグリッドコントロールにある全ての標準機能をサポートしています:2方向のインプレイスエディタ、選択、スクロール、列のサイズ変更など。また自動配置レイアウトもサポートしているので、動的にコンテンツコンテナ内で拡大・縮小ができます。DataGridはリッチなテンプレートモデルもあるので、列のデータの表示および編集の両方をカスタマイズすることができます。今後DataGridの使用方法についてももっと投稿しようと思っています。
次の手順
Digg.comからDigg記事データを取得し、アプリケーション内でその記事データを表示できるようになりました。
次は、Page.xamlタグにもどって、現在そこで使用しているインラインのスタイル宣言を削除します。
これは次のチュートリアルで行いましょう。: 上手くルックアンドフィールをカプセル化するためにスタイル要素を使用