目次> 第3章 サンプルアプリケーション構築>3.1 画面作成時のポイント
3.1 画面作成時のポイント
概要
本節では、Client Frameworkを用いてチュートリアルで利用するサンプルアプリケーションの画面を構築する方法を学習する。
画面を構築する際には、拡張フォーム(FormBase)を継承した業務画面を実装し、画面項目とデータセットのバインドを行う。画面項目にバインドされるデータセットのことを、画面データセットと呼ぶ。なお、本チュートリアルでは最初から画面が用意されているので、画面を作成する必要はない。
画面作成のイメージ
拡張フォーム(FormBase)を継承した業務画面を作成する際のクラス構成イメージを以下に示す。
図3.1-1 業務画面と拡張フォームの関係
- フレームワーク提供拡張フォーム(FormBase)
- Client Frameworkが提供するエラー処理機能、画面遷移機能のインターフェイスを実装したフォーム。
- 業務固有の画面
- 業務固有の画面やイベント処理を実装する。
画面項目とデータセットのバインドのイメージ
図3.1-2 画面項目とデータセットのバインド
- 画面項目の情報を格納するデータセットを画面データセットと呼ぶ。
- 画面の各項目とデータセットをバインドしておくと、テキストボックスなどに値を入力した際に、データセットへ値が自動的に反映される。
- Client Frameworkを用いた開発では、入力データをフォームおよび画面項目から分離するためのデータセットを画面ごとに用意する設計を推奨している。各業務処理では、その画面データセットを介して処理を行うことを想定する。
作業手順
作業内容(詳細)
1. 業務画面作成
業務開発者は拡張フォーム(FormBase)を継承し、業務固有の画面を作成する。 本チュートリアルでは、TutorialClientプロジェクト内に業務画面はすでに用意してあるので、ここでは各業務画面が拡張フォーム(FormBase)を継承していることを確認する。
LogonForm.cs
/// </summary> /// ログオン認証を行う画面です。 /// </summary> /// <remarks> /// ログオン認証処理を行います。 /// </remarks> public partial class LogonForm : FormBase { /// <summary> /// <see cref="LogonForm"/>クラスの新しいインスタンスを初期化します。 /// </summary> /// <remarks> /// デフォルトコンストラクタです。 /// </remarks> public LogonForm() { InitializeComponent(); }
2. 画面データセット作成
画面データセットの新規作成
画面データセット(ViewData/LogonFormDs.xsd)を新規作成する。TutorialClientプロジェクトのViewDataフォルダを右クリックし、[追加]→[新しい項目]を選択する。新しい項目の追加ダイアログが表示される。
図3.1-4 新しい項目の追加
データセットを選択してファイル名を「LogonFormDs.xsd」とし、追加ボタンを押下する。
図3.1-5 データセットの追加
TutorialClientプロジェクトのViewDataフォルダに、「LogonFormDs.xsd」が作成されることを確認する。
図3.1-6 画面データセットの新規作成完了イメージ
3 画面データセットのプロパティ設定
データセットのNamespaceプロパティを設定する。画面データセットをDataSetエディタで開き、プロパティウィンドウでNamespaceを"http://com.example.dotnet/LogonFormDs.xsd"と設定する。
表3.1-1 画面データセットの名前空間
Namespace | http://com.example.dotnet/LogonFormDs.xsd |
図3.1-7 Namespaceプロパティの設定
画面データセットのテーブルおよびカラムの作成
画面データセットのテーブルおよびカラムを作成する。作成項目を下記に示す。
表3.1-2 画面データセットのテーブル、カラム、データ型の一覧
DataTable名 | Column(列)名 | DataType(型) |
LogonTable | ||
Id | System.String | |
Pass | System.String |
DataTableを作成する。DataSetエディタ上を右クリックし、DataTableを追加する。
図3.1-8 DataTableの作成
DataTable名を変更する。DataTableを選択し、プロパティからDataTable名をLogonTableに変更する。
図3.1-9 DataTable名の変更
Column(列)を追加する。LogonTableを右クリックし、列を追加する。
図3.1-10 Column(列)の追加
画面データセットの新規作成した列のプロパティの列名(Name)にId、型(DataType)にSystem.Stringと設定する。
図3.1-11 列名(Name)と型(DataType)の設定
同様に、表 を参照して全ての列を追加し、プロパティを設定する。
全てのDataTableと列の作成が終わったら、一度保存してビルドする。すると作成したデータセットがツールボックスに表示され、コンポーネントとして利用できるようになる。
図3.1-12 画面データセットの作成完了イメージ
図3.1-13 データセットがコンポーネントに追加されている例
3. 画面項目と画面データセットのバインド
前項で作成した画面データセットを、表3.1-5を参考にログオン画面の各画面項目とバインドする。
表3.1-3 画面項目と画面データセットの対応一覧
画面項目名 | コントロール種別 | DataTable名 | Column(列)名 |
LogonTable | |||
ユーザID | テキストボックス | Id | |
パスワード | テキストボックス | Pass |
ログオン画面のコントロールと画面データセットのバインド
- 画面データセットを画面に追加する。
デザイナで、コンポーネント「LogonFormDs」を、画面「LogonForm」へ追加して、名前をlogonFormDsに変更する。
※ 画面が持つインスタンスとして、LogonFormDsを利用できるようになる。
図3.1-14 画面データセットの追加
- ユーザIDのテキストボックスを画面データセットとバインドする。
ログオン画面デザイナで、ユーザIDのテキストボックスを選択する。テキストボックスのプロパティDataBindingsの「Text」の右にある下向きの矢印を選択し、「LogonForm一覧インスタンス → LogonFormDs → LogonTable → Id」を選択する。これで画面データセットのLogonTableのIdとテキストボックスのTextプロパティがバインドされる。
図3.1-15 Textプロパティのバインド
- 同様に、パスワードのテキストボックスと画面データセットのLogonTableのPassをバインドする。
4.画面データセットの初期化
業務画面に画面データセットを追加することで、画面の生成時に空のデータセットが作られる。
初期状態では画面データセットの中身は空で各テーブルの行(Row)が存在しないため、画面項目の値が変更されてもデータセットのデータを更新することができない。
そこで、業務画面を生成したときに実行されるLoadイベントに、画面データセットの初期化を行うイベントハンドラを登録する。
画面データセットの初期化をしない場合
図3.1-16 画面データセットの初期化なし
画面データセットの初期化をした場合
図3.1-17 画面データセットの初期化あり
画面データセットの初期化方法
画面データセットを初期化するため、画面クラスのLoadイベントに、画面データセットの行を追加するプログラムを実装する。
LogonForm.cs
/// <summary> /// フォームロード時に実行されるイベントハンドラです。 /// </summary> /// <remarks> /// <para>画面データセットを初期化します。</para> /// </remarks> /// <param name="sender">イベントのソース。</param> /// <param name="e">イベントデータを格納している<see cref="EventArgs"/>。</param> private void LogonForm_Load(object sender, EventArgs e) { logonFormDs.LogonTable.AddLogonTableRow( logonFormDs.LogonTable.NewLogonTableRow()); }
動作確認
- 動作確認用のイベントハンドラを作成する。
ログオンボタン押下イベントで、画面データセット内のデータをメッセージボックスで表示する処理を実装する。
LogonForm.cs
/// <summary> /// ログオンボタン押下時に実行されるイベントハンドラです。 /// </summary> /// <remarks>ログオン認証処理を実行します。</remarks> /// <param name="sender">イベントのソース。</param> /// <param name="e">イベントデータを格納している<see cref="EventArgs"/>。</param> private void logonButton_Click(object sender, EventArgs e) { string message = string.Empty; message += logonFormDs.LogonTable.IdColumn.Caption + " : " + logonFormDs.LogonTable[0].Id + Environment.NewLine; message += logonFormDs.LogonTable.PassColumn.Caption + " : " +logonFormDs.LogonTable[0].Pass + Environment.NewLine; MessageBox.Show(message); }
- クライアントアプリケーションを実行する(デバッグ⇒デバッグなしで開始)。
図3.1-18 アプリケーション起動画面
- ユーザIDに"tera"、パスワードに"soluna"を入力後、ログオンボタンを押下し、入力値した値がメッセージボックスに表示されるこを確認する。
図3.1-19 動作確認イメージ