Infragistics XamDataGrid を使用してJSON のダイナミックグリッドを作成

こんにちは！リードエンジニアの杉本です。

Infragistics WPF UI コントロールを使用すると、デスクトップおよびタッチデバイス用の、最新のMicrosoft Office に着想を得たアプリを構築できます。CData ADO.NET Provider for JSON と組み合わせると、ライブのJSON にアクセスして動的なグリッド、グラフその他のビジュアライゼーションを構築できます。この記事では、Infragistics XamDataGrid コントロールを使用してVisual Studio でダイナミックグリッドを作成する方法について説明します。

続行するには、Infragistics WPF UI コンポーネントをインストールしてください。こちらから無償トライアルをダウンロードできます。：https://www.infragistics.com/products/wpf

WPF プロジェクトを作成する

VisualStudio を開き、新しいWPF プロジェクトを作成します。

SQL クエリをCData ADO.NET Provider に渡すためのTextBox と、クエリを実行するためのButton を追加します。

以下は、この時点でのXAML です。

XamDataGrid の追加と構築

初期コントロールを追加した後、アプリにXamDataGrid を追加します。コンポーネントがVisual Studio に表示されます。

コンポーネントをデザイナーで配置して、TextBox とButton の下に配置し、アプリの境界に接するようにします。

XamDataGrid を配置したら、XAML を編集してXamDataGrid のDataSource 属性を「{Binding}」に設定し、FieldSettings のAllowRecordFiltering とAllowSummaries を「true」に設定します。次に、Button コンポーネントのClick イベントハンドラーとして空のメソッドを追加します。以下は、この時点でのXAML です。

JSON に接続してクエリする

ダイナミックDataGrid を使用してWPG App を構築するための最後のステップとして、リアルタイムJSON データに接続し、クエリを実行します。まず、CData ADO.NET Provider への参照をプロジェクトに追加します。（通常、C:\Program Files\CData\CData ADO.NET Provider for JSON\lib にあります。）

次に、プロバイダーを標準のData ライブラリとともに名前空間に追加します。

using System.Data.CData.JSON;
using System.Data;

最後に、JSON に接続するコードを追加し、TextBox からのテキストを使用してClick イベントハンドラーにクエリします。

データソースへの認証については、ヘルプドキュメントの「はじめに」を参照してください。CData 製品は、JSON API を双方向データベーステーブルとして、JSON ファイルを読み取り専用ビュー（ローカル ファイル、一般的なクラウドサービスに保存されているファイル、FTP サーバー）としてモデル化します。HTTP Basic、Digest、NTLM、OAuth、FTP などの主要な認証スキームがサポートされています。詳細はヘルプドキュメントの「はじめに」を参照してください。

URI を設定して認証値を入力したら、DataModel を設定してデータ表現とデータ構造をより厳密に一致させます。

DataModel プロパティは、データをどのようにテーブルに表現するかを制御するプロパティで、次の基本設定を切り替えます。

• Document（デフォルト）：JSON データのトップレベルのドキュメントビューをモデル化します。CData 製品 は、ネストされたオブジェクト配列を集約されたJSON オブジェクトとして返します。
• FlattenedDocuments：ネストされた配列オブジェクトと親オブジェクトを、単一テーブルに暗黙的に結合します。
• Relational：階層データから個々の関連テーブルを返します。テーブルには、親ドキュメントにリンクする主キーと外部キーが含まれています。

リレーショナル表現の設定についての詳細は、ヘルプドキュメントの「JSON データのモデリング」を参照してください。また、以下の例で使用されているサンプルデータも確認できます。データには人や所有する車、それらの車に行われたさまざまなメンテナンスサービスのエントリが含まれています。

Amazon S3 内のJSON への接続

URI をバケット内のJSON ドキュメントに設定します。さらに、次のプロパティを設定して認証します。

• AWSAccessKey：AWS アクセスキー（username）に設定。
• AWSSecretKey：AWS シークレットキーに設定。

Box 内のJSON への接続

URI をJSON ファイルへのパスに設定します。Box へ認証するには、OAuth 認証標準を使います。 認証方法については、Box への接続 を参照してください。

Dropbox 内のJSON への接続

URI をJSON ファイルへのパスに設定します。Dropbox へ認証するには、OAuth 認証標準を使います。 認証方法については、Dropbox への接続 を参照してください。ユーザーアカウントまたはサービスアカウントで認証できます。ユーザーアカウントフローでは、以下の接続文字列で示すように、ユーザー資格情報の接続プロパティを設定する必要はありません。 URI=dropbox://folder1/file.json; InitiateOAuth=GETANDREFRESH; OAuthClientId=oauthclientid1; OAuthClientSecret=oauthcliensecret1; CallbackUrl=http://localhost:12345;

SharePoint Online SOAP 内のJSON への接続

URI をJSON ファイルを含むドキュメントライブラリに設定します。認証するには、User、Password、およびStorageBaseURL を設定します。

SharePoint Online REST 内のJSON への接続

URI をJSON ファイルを含むドキュメントライブラリに設定します。StorageBaseURL は任意です。指定しない場合、ドライバーはルートドライブで動作します。 認証するには、OAuth 認証標準を使用します。

FTP 内のJSON への接続

URI をJSON ファイルへのパスが付いたサーバーのアドレスに設定します。認証するには、User およびPassword を設定します。

Google Drive 内のJSON への接続

デスクトップアプリケーションからのGoogle への認証には、InitiateOAuth をGETANDREFRESH に設定して、接続してください。詳細はドキュメントの「Google Drive への接続」を参照してください。

private void Button_Click(object sender, RoutedEventArgs e)
{
  //connecting to JSON
  string connString = "URI=C:/people.json;DataModel=Relational;";
  using (var conn = new JSONConnection(connString))
  {
    //using the query from the TextBox
    var dataAdapter = new JSONDataAdapter(textBox.Text, conn);
    var table = new DataTable();
    dataAdapter.Fill(table);
    
    //passing the DataRowCollection to the DataContext
    //  for use in the XamDataGrid
    this.DataContext = table.Rows;
  }
}

アプリケーションを実行する

アプリが構築が完了したら、XamDataGrid にJSON データを表示する準備が整いました。「Execute」をクリックすると、アプリはJSON に接続し、CData ADO.NET Provider を介してSQL クエリを送信します。

リアルタイムJSON データがグリッドに表示されます。

カラム名をヘッダーにドラッグ & ドロップし、データをグループ化します。

グループ化とフィルタを追加すると、もとになるSQL クエリがJSON に直接送信されるため、リアルタイムJSON データをドリルダウンして特定の必要な情報のみを見つけることができます。

無償トライアルと詳細

この時点で、リアルタイムJSON データへのアクセスを持つダイナミックWPF アプリが作成されています。詳細については、CData ADO.NET プロバイダページをご覧ください。30日の無償評価版をダウンロードすれば、Infragistics UI コントロールを使用して構築したアプリでリアルタイムJSON データを今すぐ試すことができます。