SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

リッチクライアントエキスパート(AD)

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

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

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

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

 ここでは、実際に簡単なダッシュボードアプリケーションを作ってみましょう。使用するのは、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サイトに詳しい説明が載っていますので、ぜひご覧ください。これからのビジネスに柔軟に対応していただきたいと心より願っています。

この記事は参考になりましたか?

  • このエントリーをはてなブックマークに追加
リッチクライアントエキスパート連載記事一覧

もっと読む

この記事の著者

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

アーティサン株式会社 取締役副社長 兼 CRM事業部長(CRMエバンジェリスト)リベルダージ合同会社 社長 兼 最高経営責任者(ドローンインストラクター)SE、アーキテクト、コンサルタント、エバンジェリスト(Microsoft MVP for Dynamics CRM)、マイクロソフトのソリューションスペシャリスト(Dynamics CRM製品担当)を経て、現在はDynamics CRMを専門に扱うデリバリーチームを...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

【AD】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社

この記事は参考になりましたか?

この記事をシェア

  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/2063 2008/08/20 13:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング