ダッシュボードアプリケーションを作ってみよう!
ここでは、実際に簡単なダッシュボードアプリケーションを作ってみましょう。使用するのは、ASP.NETとNetAdvantage for ASP.NETです。
NetAdvantageはコンポーネント製品としては珍しく、BI機能を含んでおり、BIにおける画面作成にとても便利なコンポーネントが揃っています。ダッシュボードアプリケーションのようなBIやERP、BPMなどのパッケージにおけるUIは通常、パッケージ製品と一つになっていることが多いですが、そういったUIは柔軟性も操作性も低いケースが多く、それぞれの開発案件に応じてカスタマイズが必要になることも少なくありません。NetAdvantageでは、専門であるUIのフル機能と、高い親和性のあるSQL ServerのBI機能を備えているほか、カスタマイズの言語に.NETを採用しているパッケージ製品Dynamics CRMとも相互利用を行うことができ、ユーザーエクスペリエンスを高めることにとても優れた製品となっています。
前置きが長くなってしまいましたが、それでは実際に作ってみましょう。使用する環境はVisual Studio 2005ですが、Visual Studio 2002/2003でも同様の手順ですので、適宜文言を置き換えて読み進めてください。
- Visual Studio 2005を起動し、新しいプロジェクトの作成で[ASP.NET Web アプリケーション]を作成(プロジェクト名は任意で結構です)。
- [ツールボックス]の[NetAdvantage 7.1 Web]から、「UltraWebGrid」「UltraChart」「UltraGauge」を図3のように配置(ここではコントロールの整理のためにテーブルを使用しています)。
- 左上: UltraWebGrid1
- 左下: UltraWebGrid2
- 右上: UltraGauge1(ここでは、放射型ゲージ「GlacierRadialWithRange」を使用)
- 右下: UltraChart1(ここでは、立体積層型縦棒グラフを使用)
- 各コントロールにNorthWindテーブルへ接続するデータソース(SqlDataSource)を定義(ゲージコントロールはBeta版でバインドする設定がないので、後述するイベントで直接バインドします)。
- 左上: SqlDataSource1(SELECTステートメント:
SELECT * FROM [Customers]
) - 左下: SqlDataSource2(SELECTステートメント:
SELECT * FROM [Orders] WHERE ([CustomerID] = @CustomerID)
) - 右上: SqlDataSource3(SELECTステートメント:
SELECT [Subtotal] FROM [Order Subtotals] WHERE ([OrderID] = @OrderID)
) - 右下: SqlDataSource4(SELECTステートメント:
SELECT * FROM [Order Details] WHERE ([OrderID] = @OrderID)
) - UltraWebGrid1コントロールに行を選択されたときに発生するイベント「SelectedRowsChange」を以下のよう定義し、選択された顧客の注文データが左下のグリッドデータに表示されるように設定(あらかじめ、UltraWebGrid1コントロールの「行セレクタ」を表示しておく必要があります)。
- 同様に、UltraWebGrid2コントロールに行を選択されたときに発生するイベント「SelectedRowsChange」を以下のよう定義し、選択された注文データの詳細が右のゲージやチャートに表示されるように設定(あらかじめ、UltraWebGrid2コントロールの「行セレクタ”を表示しておく必要があります)。
- この状態では、AJAX処理が含まれていないため、AJAX処理を行わせるコントロール「WebAsyncRegreshPanel(WARP)」(ASP.NET AJAXのUpdatePanelの拡張版)をそれぞれに配置し、各コントロールをパネル上に配置。(図4)
- 左上: WebAsyncRefreshPanel1
- 左下: WebAsyncRefreshPanel2
- 右上: WebAsyncRefreshPanel3
- 右下: WebAsyncRefreshPanel4
- WARPの非同期通信をそれぞれのイベント発生とリンクさせるために、
LinkedRefreshControlID
プロパティを次のように設定。 - WebAsyncRefreshPanel1: 設定なし
- WebAsyncRefreshPanel2: WebAsyncRefreshPanel1
- WebAsyncRefreshPanel3: WebAsyncRefreshPanel2
- WebAsyncRefreshPanel3: WebAsyncRefreshPanel2
protected void UltraWebGrid1_SelectedRowsChange(object sender, Infragistics.WebUI.UltraWebGrid.SelectedRowsEventArgs e) { // UltraWebGrid2のデータソースへ条件を設定 this.SqlDataSource2.SelectParameters[0].DefaultValue = e.SelectedRows[0].Cells.FromKey("CustomerID").Value.ToString(); }
protected void UltraWebGrid2_SelectedRowsChange(object sender, Infragistics.WebUI.UltraWebGrid.SelectedRowsEventArgs e) { // UltraChart1のデータソースへ条件を設定 this.SqlDataSource4.SelectParameters[0].DefaultValue = e.SelectedRows[0].Cells.FromKey("OrderID").Value.ToString(); // UltraGauge1のデータソースへ条件を設定 this.SqlDataSource3.SelectParameters[0].DefaultValue = e.SelectedRows[0].Cells.FromKey("OrderID").Value.ToString(); // UltraGauge1のデータバインド処理実行 DataView dv = this.SqlDataSource3.Select( DataSourceSelectArguments.Empty) as DataView; if (dv != null) { ((Infragistics.UltraGauge.Resources.RadialGaugeNeedle) ((Infragistics.UltraGauge.Resources.RadialGauge) this.UltraGauge1.Gauges[0]).Scales[0].Markers[0]).Value = dv.Table.Rows[0][0]; } }
これで準備完了です。[F5]を押して実行してみてください。
複数のデータソースやAJAXを使ったダッシュボードアプリケーションが簡単に完成したことが分かると思います。文章では少しややこしく見えたかもしれませんが、実際に書いたコードはたったの6行です(ゲージコントロールは次のバージョンでは正式版となり、バインド設定が含まれるので、実質3行になります)。
なお、NetAdvantageはもっと多くのコントロールが含まれているスイート製品で、ここではそのうちの一部しか紹介してませんが、使い方やプロパティの名前はPresentation Layer Framework(PLF)と呼ばれるベースフレームワークの下で統一されています。
まとめ
本稿では現在から未来にかけてのビジネスデマンドを中心に3つの視点からデマンドを考えていき、それらをすべて解決するための製品として「NetAdvantage」を紹介しました。私が考えるデマンド以外にも個々の案件にはユーザーごとに違うデマンドがあると思います。それらに対して柔軟に対応するためには、また乱立する競合他社との競争に勝つためにはNetAdvantageのような完成されたコンポーネントスイート製品が必要不可欠となってくるでしょう。
もし、NetAdvantageに興味を持っていただいた場合は、インフラジスティックス・ジャパン社のWebサイトに詳しい説明が載っていますので、ぜひご覧ください。これからのビジネスに柔軟に対応していただきたいと心より願っています。