Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

これからのビジネスにおけるAJAXアプリケーションの形

NetAdvantageで今後のビジネスデマンドを解決する

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2008/01/15 16:40
目次

ダッシュボードアプリケーションを作ってみよう!

 ここでは、実際に簡単なダッシュボードアプリケーションを作ってみましょう。使用するのは、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でも同様の手順ですので、適宜文言を置き換えて読み進めてください。

  1. Visual Studio 2005を起動し、新しいプロジェクトの作成で[ASP.NET Web アプリケーション]を作成(プロジェクト名は任意で結構です)。
  2.  
    図2 [新しいプロジェクト]ダイアログ
    図2 [新しいプロジェクト]ダイアログ
     
  3. [ツールボックス]の[NetAdvantage 7.1 Web]から、「UltraWebGrid」「UltraChart」「UltraGauge」を図3のように配置(ここではコントロールの整理のためにテーブルを使用しています)。
  4.  
    図3 NetAdvantageコントロールの配置
    図3 NetAdvantageコントロールの配置
     
    • 左上: UltraWebGrid1
    • 左下: UltraWebGrid2
    • 右上: UltraGauge1(ここでは、放射型ゲージ「GlacierRadialWithRange」を使用)
    • 右下: UltraChart1(ここでは、立体積層型縦棒グラフを使用)
     
  5. 各コントロールにNorthWindテーブルへ接続するデータソース(SqlDataSource)を定義(ゲージコントロールはBeta版でバインドする設定がないので、後述するイベントで直接バインドします)。
  6.  
    • 左上: 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)
     
  7. UltraWebGrid1コントロールに行を選択されたときに発生するイベント「SelectedRowsChange」を以下のよう定義し、選択された顧客の注文データが左下のグリッドデータに表示されるように設定(あらかじめ、UltraWebGrid1コントロールの「行セレクタ」を表示しておく必要があります)。
  8.  
    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();
    }
    
     
  9. 同様に、UltraWebGrid2コントロールに行を選択されたときに発生するイベント「SelectedRowsChange」を以下のよう定義し、選択された注文データの詳細が右のゲージやチャートに表示されるように設定(あらかじめ、UltraWebGrid2コントロールの「行セレクタ”を表示しておく必要があります)。
  10.  
    データソースのデータバインドの際に
    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];
        }
    }
    
     
  11. この状態では、AJAX処理が含まれていないため、AJAX処理を行わせるコントロール「WebAsyncRegreshPanel(WARP)」(ASP.NET AJAXのUpdatePanelの拡張版)をそれぞれに配置し、各コントロールをパネル上に配置。(図4)
  12.  
    図4 WebAsyncRefreshPanelの配置
    図4 WebAsyncRefreshPanelの配置
     
    • 左上: WebAsyncRefreshPanel1
    • 左下: WebAsyncRefreshPanel2
    • 右上: WebAsyncRefreshPanel3
    • 右下: WebAsyncRefreshPanel4
     
  13. WARPの非同期通信をそれぞれのイベント発生とリンクさせるために、LinkedRefreshControlIDプロパティを次のように設定。
  14.  
    • WebAsyncRefreshPanel1: 設定なし
    • WebAsyncRefreshPanel2: WebAsyncRefreshPanel1
    • WebAsyncRefreshPanel3: WebAsyncRefreshPanel2
    • WebAsyncRefreshPanel3: WebAsyncRefreshPanel2
     

 これで準備完了です。[F5]を押して実行してみてください。

図5 Dashboardサンプルアプリケーション
図5 Dashboardサンプルアプリケーション

 複数のデータソースやAJAXを使ったダッシュボードアプリケーションが簡単に完成したことが分かると思います。文章では少しややこしく見えたかもしれませんが、実際に書いたコードはたったの6行です(ゲージコントロールは次のバージョンでは正式版となり、バインド設定が含まれるので、実質3行になります)。

 なお、NetAdvantageはもっと多くのコントロールが含まれているスイート製品で、ここではそのうちの一部しか紹介してませんが、使い方やプロパティの名前はPresentation Layer Framework(PLF)と呼ばれるベースフレームワークの下で統一されています。

まとめ

 本稿では現在から未来にかけてのビジネスデマンドを中心に3つの視点からデマンドを考えていき、それらをすべて解決するための製品として「NetAdvantage」を紹介しました。私が考えるデマンド以外にも個々の案件にはユーザーごとに違うデマンドがあると思います。それらに対して柔軟に対応するためには、また乱立する競合他社との競争に勝つためにはNetAdvantageのような完成されたコンポーネントスイート製品が必要不可欠となってくるでしょう。

 もし、NetAdvantageに興味を持っていただいた場合は、インフラジスティックス・ジャパン社のWebサイトに詳しい説明が載っていますので、ぜひご覧ください。これからのビジネスに柔軟に対応していただきたいと心より願っています。



  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 松原 晋啓(マツバラ ノブアキ)

    アーティサン株式会社 取締役副社長 兼 CRM事業部長(CRMエバンジェリスト) リベルダージ合同会社 社長 兼 最高経営責任者(ドローンインストラクター) SE、アーキテクト、コンサルタント、エバンジェリスト(Microsoft MVP for Dynamics CRM)、マイクロソフトの...

バックナンバー

連載:リッチクライアントエキスパート
All contents copyright © 2005-2019 Shoeisha Co., Ltd. All rights reserved. ver.1.5