データベースのデータを直線ゲージで表示するASP.NET アプリケーションの作成

C1LinearGaugeコントロールとC1GridViewコントロールを使ったアプリケーションの作成

2013/03/25 14:00

ポスト

ダウンロードサンプルコード（C#） (165.2 KB)
ダウンロードサンプルコード（VB） (178.1 KB)

　「ComponentOne Studio for ASP.NET Wijmo 2012J」に含まれるC1LinearGaugeとC1GridViewコントロールを使って、Accessで作成した在庫管理データベースのデータをグリッドに表示し、適正な在庫範囲をゲージで表示するアプリケーションを作成してみます。

ポスト

はじめに

　前回は、C1LinearGaugeコントロールを使い、スライダや数値入力ボックスと連動させて、値をゲージで表示するアプリケーションを作成しました。

　さらにC1LinearGaugeコントロールは、ゲージ内に特定の幅を持ったレンジを表示させることができます。これを使うと、例えば今の値がある範囲の中に入っているのかどうかが一目で分かります。

　そこで今回は、Accessで作成した在庫管理データベースのデータをC1GridViewコントロールで表示し、アプリケーション実行時にグリッドからデータを取り出してゲージの動作範囲と現在値を設定し、さらに適正な在庫範囲を表示するゲージを持ったアプリケーションを作成してみました。

アプリケーション実行時にグリッドで表示したデータを取り出しゲージを設定する

対象読者

　Visual Basic 2010、またはVisual C# 2010を使ってプログラムを作ったことがある人。

必要な環境

　Visual Basic 2010、Visual C# 2010、Visual Studio 2010でプログラムが作れる環境。

　対応ブラウザについては、グレープシティ社Webサイトの「クロスブラウザ対応」ページでご確認ください。

　なお、本プログラムは次の環境で開発・動作確認を行っています。

OS：Windows 7
開発Tool：Visual Studio 2010、.NET Framework 4
ブラウザ：Microsoft Internet Explorer 9

サンプルプログラム実行時の注意事項

[1] Visual StudioでサンプルWebサイトを開く

　Visual Studioをお持ちであれば、ComponentOne Studio for ASP.NET Wijmo 2012Jトライアル版をインストールし、ソースコード圧縮ファイル「DB_Gauge_ASP_vb_src.zip」または「DB_Gauge_ASP_cs_src.zip」を解凍すると作成されるプロジェクトファイルを、Visual Studioで開き実行してください。

[2] Visual Studioを使わずにサンプルWebサイトを開く

　Visual Studioを使わずに、サンプルWebサイトを直接IISなどのWebサーバで開く場合は、ソースコード圧縮ファイル「DB_Gauge_ASP_vb_src.zip」または「DB_Gauge_ASP_cs_src.zip」を解凍して作成されるプロジェクトファイルを、フォルダ構成を変えずにWebサーバにインストール・登録してください。

　以下は、Microsoft IISサーバにインストールする場合の手順です。

プロジェクトファイルのフォルダを、そのままWebサーバーへ配置します（例：「\Inetpub\wwwroot」直下へ配置）。
サーバーに配置したアプリケーションフォルダに対して、「アプリケーションへの変換」を実行します。
「アプリケーションの追加」ダイアログで、「アプリケーションプール」を「Classic .NET AppPool」に設定します。
クライアントのWebブラウザで、Default.aspxファイルを開きます（例：「http://localhost/mysplit_vb/Default.aspx」）。

注意事項

　Windows Vistaで製品のサンプルをコンパイルしようとするとエラーが発生する場合があります。これは、Windows VistaのUAC（ユーザーアカウント制御）により、製品サンプルがインストールされているフォルダに書き込みができないため、コンパイル時にエラーが発生するという現象です。Visual Studioを管理者権限で実行するか、サンプルプロジェクト一式をアクセス権のあるフォルダに移動してからコンパイルを行うようにしてください。また、Webブラウザでaspxファイルを実行する際にIISサーバでエラーになる場合は、Web.configファイルに以下の1行を追加してください。

<identity impersonate="false" />

コンポーネントのインストール

　本サンプルアプリケーションでは、「LinearGauge for ASP.NET Wijmo」「GridView for ASP.NET Wijmo」の2つのコントロールを使用します。

　これらのコントロールを使用するには、Visual Studio、Visual Basic、Visual C#の開発環境にComponentOne Studio for ASP.NET Wijmo 2012Jをインストールする必要があります。

　トライアル版は、「グレープシティのWebページ」からダウンロードできます。

　ダウンロードしたい製品にチェックを付け［申込フォーム］ボタンを押すと、「トライアル版申込フォーム」ページに移動しますので、「個人情報の収集および使用に同意する」にチェックを入れ「同意する」ボタンをクリックします。

　トライアル申込フォームが表示されますので、必要情報を登録すると添付トライアルライセンスキーファイルとダウンロードサイトを記載したE-Mailが送られてきます。ここからダウンロードを行ってください。また、ダウンロードファイルは圧縮ファイルになっていますので、解凍してインストーラを起動します。

　制限事項などの詳細については、インストーラに同梱されているリリースノートを参照ください。

コントロールと参照の追加

　ComponentOne Studio for ASP.NET Wijmo 2012Jをインストールしたら、プロジェクトに2つのコントロールを追加します。

　ツールボックスに専用のタブを作成し、使用するコンポーネントを追加します。

　追加するコンポーネントは、アセンブリ名が「C1.Web.Wijmo.Controls.4」の「C1LinearGauge」「C1GridView」コントロールです。

アセンブリ名が「C1.Web.Wijmo.Controls.4」の「C1LinearGauge」「C1GridView」コントロールを選択する

　これらのコントロールを追加すると、プロジェクトに以下のランタイムライブラリへの参照が追加されます。

ファイル	内容
C1.Web.Wijmo.Controls.4	本体アセンブリ

　また、プロジェクトに以下のランタイムライブラリが追加されます。

ファイル	内容
C1.C1Report.4.dll	本体アセンブリ
C1.Web.Wijmo.Controls.4.dll	本体アセンブリ

　なお、.NET Framework 4が必要です。

C1LinearGaugeコントロールの機能の補足

　C1LinearGaugeコントロールの概要については、前回の記事を参照してください。ここでは、今回使用するGaugelRange要素について説明します。

　GaugelRange要素は、ゲージの目盛内のある範囲を強調表示したい時（ここではこの範囲を便宜上"レンジ"と呼びます）に使用する要素です。

C1LinearGaugeコントロールの各要素

　この要素は、C1LinearGaugeコントロールの「Ranges」プロパティを使用します。デフォルトでは設定されていないので、Rangesプロパティの値欄をクリックすると表示されるコレクションエディタを使用して、GaugelRangeクラスのインスタンスを追加するという形をとります。

GaugelRangeコレクションエディタ

　StartValue・EndValueプロパティは、目盛内のレンジの位置を決定します。StartDistance・EndDistanceプロパティは、レンジの開始・終了の縦方向の位置を決定します。StartWidth・EndWidthプロパティは、縦方向の長さを決定します。

　また、RangeStyleプロパティを使用して、レンジの塗りつぶしなどを設定できます。

　GaugelRange要素はコレクションなので、ゲージ内にレンジをいくつでも設定することができます。

各プロパティの役割

2つのレンジを設定したゲージ

C1GridViewコントロールの概要

　今回、ゲージを表示する元データに、Accessデータベースのデータを使用しています。ただし、C1LinearGaugeコントロールは直接データベースと連結できないため、一度「GridView for ASP.NET Wijmo」のC1GridViewコントロールを用いて、データベースのデータをグリッドに読み込み、ここからデータを取り出してゲージの各要素を設定する方法をとりました。

　C1GridViewコントロールは、Webページに配置したカスタマイズ可能な表に、データソースのデータを表示するコントロールです。

　対話的にデータを選択、編集、削除、ソートまたはグループ化でき、データを複数のページにわたって表示することができます。

　連結できるデータベースも、Access、SQL Server、Oracle、OLEDBなどのADO.NETでサポートできるデータベース、XMLファイルなどで、データベースデータをWebページで表示したい時に威力を発揮するコントロールです。

C1GridViewコントロールの特徴

　C1GridViewコントロールは以下のような特徴を持っています。

Microsoft GridViewとの互換性

　C1GridViewコントロールはMicrosoft社のGridViewコントロールと高い互換性を持ち、簡単に既存のASP.NETアプリケーションをアップグレードできます。

フィルタリング

　レコードの検索やフィルタなどのエンドユーザーによるカスタム操作用に、列ヘッダーの下の組み込みデータエントリ行をサポートしています。ShowFilterオプションを有効にして簡単にフィルタリングを実現できます。

カスタマイズされたグリッド書式

　直感的な書式設定によって、開発者は任意のグリッドを自動的にカスタマイズできます。列の作成、枠／グリッド線の表示、グリッド内の編集、ソートデータのカスタマイズ、その他さまざまな操作を行うことができます。

編集

　グリッド内のデータを編集して、変更内容を保存または解除できます。

行のマージ

　グリッドを構成し、同一の値を含む行をマージするように設定できます。この機能を使うと、グリッドがすっきりと使いやすくなります。

入力コントロールの組み込み

　Input for ASP.NET Wijmoコントロールをグリッドに接続して、データ入力および対話性を強化することができます。マスク、日付、数値、パーセント、通貨の編集などのエディタをグリッドの任意列に簡単に追加できます。

任意のグリッド列にコントロールや画像を埋め込む

　グリッドの列にチェックボックス、リストボックス、ボタン、画像などを組み込んで表示できます。

コードレスにグリッドのカスタマイズ

　列のコレクション、ページング動作を管理し、コードを記述せずにグリッドの設計を編集できます。C1GridViewコントロールの豊かなデザイン時のサポートにより、Webサイトにカスタマイズされたグリッドの機能を容易に追加することができます。

自動的に列と行のサイズを変更

　プロパティを設定することにより、グリッドがスクロールされたときに、列の一番長いテキストに合わせて自動的に列幅と行高を調整します。特定の行列の自動サイズを有効・無効にすることも可能です。

バンド

　階層構造を作成するための、複数列の列ヘッダーを結合できます。例えば、複数の列ヘッダーを別の広い列ヘッダーの下に配置することも可能です。

グループ化および集計

　アプリケーション実行時にグループヘッダーをクリックすることで、グループの拡張や縮小を有効にしてアウトラインモードに設定できます。グループは初期表示の時に拡張するか、縮小するかを指定できます。グリッドは各グルップヘッダー行の隣に拡張や縮小アイコンを表示します。また、グループ化された行はカウント、総計などの集計データを表示できます。

再利用可能なテンプレート

　プロジェクト内・プロジェクト外で同じ外観の複数のグリッドを作成できるように、グリッドテンプレートを保存してロードできます。

テーマ

　スマートタグをクリックするだけで、6種類のプレミアムテーマ（Arctic、Midnight、Aristo、Rocket、Cobalt、およびSterling）のいずれかを選択して外観を変更します。オプションとして、jQuery UIからThemeRollerを使用してカスタマイズしたテーマを作成します。

CSS対応

　Cascading Style Sheet（CSS）を使用してカスタムスキンを定義できます。

プロパティビルダー

　グリッドを編集するために、C1GridViewコントロールには「プロパティビルダー」が用意されています。

　プロパティビルダーを使用すれば、C1GridViewコントロールの外観と動作を簡単にカスタマイズできます。プロパティビルダーにアクセスするには、スマートタグにある［C1GridViewタスク］メニューからプロパティビルダーを選択します。

　プロパティビルダーは、以下の5種類のタブで構成されます。

タブ	説明
全般	データソースを表示します。ここで、ヘッダー、フッター、ソートの各プロパティを設定できます。
列	表示する列のタイプを指定して、それぞれにプロパティを設定できます
ページング	ページングを使用するかどうかを決定できます。また、その表示方法と表示場所もカスタマイズできます。
書式	フォント、色、グリッドの配置、ヘッダー、フッター、ページャ、特定の項目および列を含むすべての内容を設定できます。
グループ化	列のグルーピングのプロパティを設定し、グループヘッダー行とグループフッター行を書式設定し、表示する方法を指定できます。

プロパティビルダー

Webページのデザイン

　では、さっそくアプリケーションを作成していきましょう。作成するアプリケーションは、データグリッドと2つの直線ゲージを持ったWebページです。

　ゲージはあらかじめダミーのデータで作成しておき、アプリケーション実行時にグリッドデータを読み込んでゲージの各設定を行います。

ページのレイアウト

　使用するコントロールは、C1LinearGauge、C1GridView、Labelコントロールの各コントロールです。AccessDataSourceオブジェクトは、C1GridViewコントロールにデータベースデータを連結すると作成されます。

ページレイアウト

データグリッドの作成

　最初にAccessデータベースのデータを表示するグリッドを作成します。

　プロジェクトのApp_Dataフォルダにデータベース「在庫管理.mdb」を格納しておきます。「在庫管理.mdb」はテーブルを1つだけ持つ簡単なデータベースで、「品名」「最大在庫数」「最少在庫数」「現在庫数」の4つのフィールドを持っています。このデータの「最大在庫数」「最少在庫数」でレンジを作成し、「現在庫数」がどの位置にあるのかを表示することで、適正な在庫数なのか、在庫数が少ないのか、在庫過多なのかが一目で分かるようにします。

サンプルのAccessデータベース

　① ツールボックスからC1GridViewコントロールをドラッグ＆ドロップします。スマートタグからタスクトレイを開き、「データソースの選択」メニューで「新しいデータソース」を選びます。

　② 「データソース構成ウィザード」が表示されますので、「Accessデータベース」をクリックします。「データソースにIDを指定します」欄に「AccessDataSource1」と入力されていますので、そのまま「OK」ボタンをクリックします。

「AccessDataSource1」と入力されているので、そのまま「OK」ボタンをクリック

　③ 「参照」ボタンをクリックし、プロジェクトの「App_Data」フォルダに追加した「在庫管理.mdb」を選んで、OKボタンをクリック。「次へ」ボタンをクリックします。

「App_Data」フォルダに追加した「在庫管理.mdb」を選ぶ

　④ 列「ID」以外の4つの列をクリックして選択し、「次へ」ボタンをクリックします。

列「ID」以外の4つの列をクリックして選択

　⑤ 「クエリのテスト」ボタンをクリックします。データベースのテーブルデータがすべて取り出せていることを確認したら、「完了」ボタンをクリックします。

　⑥ ここで一度プロジェクトを実行します。グリッドにデータベースのデータが表示されますが、列幅が広すぎてちょっと見栄えがよくありません。

プロジェクトを実行しグリッドを確認する

　⑦ プロジェクトに戻り、C1GridViewコントロールのスマートタグからメニュー「プロパティビルダー」をクリックします。プロパティビルダーが表示されますので、「列タブ」をクリックし「選択した列」リストから「品名」をクリックします。

　「列のプロパティ」欄に、この列で設定できるプロパティ一覧が表示されますので、「Width」プロパティに「150」と入力します。

「列のプロパティ」欄の「Width」プロパティに「150」と入力

　⑧ 残りの列「最大在庫数」「最少在庫数」「現在庫数」も同様にWidthプロパティを「150」に設定し、OKボタンをクリックしてプロパティビルダーを閉じます。

　⑨ 再びスマートタグのタスクトレイから「テーマ」メニューをクリックし、リストから「cobalt」を選びます。

　⑩ プロパティウィンドウの「Width」プロパティを「600」に設定します。これで、列幅が小さくなったグリッドが出来上がりです。プロジェクトを実行し、仕上がりを確認します。

出来上がったグリッド

ゲージの作成

　グリッドができたら、ゲージを作成します。ゲージの作成方法は前回の記事「データを直線ゲージで表示するASP.NETアプリケーションの作成」を参照してください。

　ここでは、ゲージ内に「最大在庫数」と「最少在庫数」を表示する範囲を設定し、「現在庫数」にポインタを持って来るように設定します。

　① LabelコントロールとC1LinearGaugeコントロールを2つずつ配置します。

　② プロパティウィンドウを利用して、最初のC1LinearGaugeコントロールのデザインを次のように設定します。これで、赤いバーのポインタを持ったゲージが出来上がります。

赤いバーのポインタを持ったゲージが出来上がる

TickMajor
プロパティ			設定値
Factor			9
Visible			True
Offset			-10
Interval			20
Interval	TickStyle	Width	2

TickMinor
プロパティ	設定値
Visible	True
Offset	-12
Interval	4
Factor	6

Pointer
プロパティ		設定値
Length		0.5
Width		8
Offset		0
Shape		Rect
PointStyle
	Width	6
	Fill Color	#FF33CC

Face
プロパティ		設定値
FaceStyle	Fill Color	#99FFCC

　③ プロパティウィンドウの「Ranges」プロパティの値欄をクリックし、GaugelRangeコレクションエディタを表示します。

　「追加」ボタンをクリックしてレンジを追加し、次のプロパティを設定します。これで、目盛20から80までの間に青いグラデーションのレンジが設定されます。ただし、これはあくまでも仮の設定で、アプリケーション実行時はグリッドのデータで目盛やレンジを再設定します。

目盛20から80までの間に青いグラデーションのレンジが設定される

プロパティ			設定値
EndDistance			0.85
EndValue			80
EndWidth			0.5
StartDistance			0.85
StartValue			20
StartWidth			0.5
Width			0.5
RangeStyle	Fill	ColorBegin	#0066FF
		ColorEnd	#66FFFF
		LinearGradientAngle	90
		Type	LinearGradient

　④ 続いて2つ目のゲージも次のプロパティを設定します。これで、水色の背景を持った黄色いポインタのゲージが出来上がります。

水色の背景を持った黄色いポインタのゲージが出来上がる

C1LinearGauge
プロパティ	設定値
Height	100px

TickMajor
プロパティ		設定値
Foctor		8
Visible		True
Offset		-9
Interval		10
TickStyle	Fill Color	#6600FF

TickMinor
プロパティ	設定値
Visible	True
Offset	-10
Interval	2
Factor	7

Pointer
プロパティ		設定値
Length		0.5
Width		8
Offuset		0
Pointer Style	Fill Color	#99FF66

Face
プロパティ		設定値
FaceStyle	Fill Color	#66FFFF

　⑤ コントロールのゲージにもレンジを設定します。ただし、レンジは2つ設定します。

　プロパティウィンドウの「Ranges」プロパティの値欄をクリックし、GaugelRangeコレクションエディタを表示します。「追加」ボタンを2回クリックして、2つのGaugelRangeオブジェクトを追加します。

　それぞれのレンジは、次のプロパティを設定します。これで、10から20と、60から100までの2つのレンジが設定されます。

10から20と60から100までの2つのレンジが設定される

最初のレンジ
プロパティ				設定値
EndDistance				0.85
EndValue				20
EndWidth				0.5
StartDistance				0.85
StartValue				10
StartWidth				10
Width				0.1
	RangeStyle	Fill	ColorBegin	#CC99FF
			ColorEnd	#9933FF
			LinearGrandientAngle	90
			Type	LinearGrandient

2番目のレンジ
プロパティ			設定値
EndDistance			0.85
EndValue			100
EndWidth			0.5
StartDistance			0.85
StartValue			60
StartWidth			0.5
Widh			0.1
RangeStyle	Fill	ColorBegin	#CC99FF
		ColorEnd	#9933FF
		LinearGrandientAngle	90
		Type	LinearGrandient

　⑥ これでゲージが出来上がりました。あとは、コードからグリッドのデータを使用して、再度ゲージを設定しなおします。

グリッドデータでゲージを設定しなおす処理

　ページのLoadイベントハンドラで、グリッドからデータを取り出してゲージを設定しなおします。

　まず、列「品名」の値を取り出してLabelコントロールに設定します。そして、「最大在庫数」「最少在庫数」の値を使ってレンジを設定しなおし、「現在庫数」の値でポインタを動かします。

　グリッドのデータを取り出すには、Rowsプロパティで行番号を指定し、Cellsプロパティで列番号を指定します。列番号は先頭列が「0」で、行番号も先頭行が「0」になります。データはテキストになっていますので、数値に変換し、C1LinearGaugeコントロールの各プロパティに設定します。

　GaugelRange要素にアクセスするには、Rangesプロパティで各GaugelRange要素を指定し、それぞれのプロパティに値を設定します。

Visual Basic

Public Class _Default
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        '最初のゲージの設定
        Label1.Text = C1GridView1.Rows(0).Cells(0).Text

        C1LinearGauge1.Ranges(0).StartValue = Convert.ToInt16(C1GridView1.Rows(0).Cells(2).Text)
        C1LinearGauge1.Ranges(0).EndValue = Convert.ToInt16(C1GridView1.Rows(0).Cells(1).Text)
        C1LinearGauge1.Value = Convert.ToInt16(C1GridView1.Rows(0).Cells(3).Text)

        '2番目のゲージの設定
        Label2.Text = C1GridView1.Rows(1).Cells(0).Text

        C1LinearGauge2.Ranges(0).StartValue = 0
        C1LinearGauge2.Ranges(0).EndValue = Convert.ToInt16(C1GridView1.Rows(1).Cells(2).Text)

        C1LinearGauge2.Ranges(1).StartValue = Convert.ToInt16(C1GridView1.Rows(1).Cells(1).Text)
        C1LinearGauge2.Ranges(1).EndValue = 100
        C1LinearGauge2.Value = Convert.ToInt16(C1GridView1.Rows(1).Cells(3).Text)
    End Sub
End Class

namespace DB_Gauge_ASP_cs
{
    public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            //最初のゲージの設定
            Label1.Text = C1GridView1.Rows[0].Cells[0].Text;

            C1LinearGauge1.Ranges[0].StartValue = Convert.ToInt16(C1GridView1.Rows[0].Cells[2].Text);
            C1LinearGauge1.Ranges[0].EndValue = Convert.ToInt16(C1GridView1.Rows[0].Cells[1].Text);
            C1LinearGauge1.Value = Convert.ToInt16(C1GridView1.Rows[0].Cells[3].Text);

            //2番目のゲージの設定
            Label2.Text = C1GridView1.Rows[1].Cells[0].Text;

            C1LinearGauge2.Ranges[0].StartValue = 0;
            C1LinearGauge2.Ranges[0].EndValue = Convert.ToInt16(C1GridView1.Rows[1].Cells[2].Text);

            C1LinearGauge2.Ranges[1].StartValue = Convert.ToInt16(C1GridView1.Rows[1].Cells[1].Text);
            C1LinearGauge2.Ranges[1].EndValue = 100;
            C1LinearGauge2.Value = Convert.ToInt16(C1GridView1.Rows[1].Cells[3].Text);
        }
    }
}

　これで、グリッドデータに基づくゲージが作成できます。最初のゲージは、現在庫数が適正な在庫範囲より多いことが、2番目のゲージは少ないことが分かります。

完成したゲージ