目次第3章 サンプルアプリケーション構築>3.1 画面作成時のポイント

3.1 画面作成時のポイント

概要

本節では、Client Frameworkを用いてチュートリアルで利用するサンプルアプリケーションの画面を構築する方法を学習する。
画面を構築する際には、拡張フォーム(FormBase)を継承した業務画面を実装し、画面項目とデータセットのバインドを行う。画面項目にバインドされるデータセットのことを、画面データセットと呼ぶ。なお、本チュートリアルでは最初から画面が用意されているので、画面を作成する必要はない。

画面作成のイメージ

拡張フォーム(FormBase)を継承した業務画面を作成する際のクラス構成イメージを以下に示す。

画面作成時のポイント図1
図3.1-1 業務画面と拡張フォームの関係

  • フレームワーク提供拡張フォーム(FormBase)
    • Client Frameworkが提供するエラー処理機能、画面遷移機能のインターフェイスを実装したフォーム。
  • 業務固有の画面
    • 業務固有の画面やイベント処理を実装する。

画面項目とデータセットのバインドのイメージ

画面作成時のポイント図2
図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フォルダを右クリックし、[追加]→[新しい項目]を選択する。新しい項目の追加ダイアログが表示される。

画面作成時のポイント図4
図3.1-4 新しい項目の追加

データセットを選択してファイル名を「LogonFormDs.xsd」とし、追加ボタンを押下する。

画面作成時のポイント図5
図3.1-5 データセットの追加

TutorialClientプロジェクトのViewDataフォルダに、「LogonFormDs.xsd」が作成されることを確認する。

画面作成時のポイント図3
図3.1-6 画面データセットの新規作成完了イメージ

3 画面データセットのプロパティ設定

データセットのNamespaceプロパティを設定する。画面データセットをDataSetエディタで開き、プロパティウィンドウでNamespaceを"http://com.example.dotnet/LogonFormDs.xsd"と設定する。

表3.1-1 画面データセットの名前空間

Namespacehttp://com.example.dotnet/LogonFormDs.xsd

画面作成時のポイント図6
図3.1-7 Namespaceプロパティの設定

画面データセットのテーブルおよびカラムの作成

画面データセットのテーブルおよびカラムを作成する。作成項目を下記に示す。

表3.1-2 画面データセットのテーブル、カラム、データ型の一覧

DataTable名Column(列)名DataType(型)
LogonTable
IdSystem.String
PassSystem.String

DataTableを作成する。DataSetエディタ上を右クリックし、DataTableを追加する。

画面作成時のポイント図7
図3.1-8 DataTableの作成

DataTable名を変更する。DataTableを選択し、プロパティからDataTable名をLogonTableに変更する。

画面作成時のポイント図8
図3.1-9 DataTable名の変更

Column(列)を追加する。LogonTableを右クリックし、列を追加する。

画面作成時のポイント図9
図3.1-10 Column(列)の追加

画面データセットの新規作成した列のプロパティの列名(Name)にId、型(DataType)にSystem.Stringと設定する。

画面作成時のポイント図10
図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

ログオン画面のコントロールと画面データセットのバインド

  1. 画面データセットを画面に追加する。

デザイナで、コンポーネント「LogonFormDs」を、画面「LogonForm」へ追加して、名前をlogonFormDsに変更する。
※ 画面が持つインスタンスとして、LogonFormDsを利用できるようになる。


図3.1-14 画面データセットの追加

  1. ユーザIDのテキストボックスを画面データセットとバインドする。

ログオン画面デザイナで、ユーザIDのテキストボックスを選択する。テキストボックスのプロパティDataBindingsの「Text」の右にある下向きの矢印を選択し、「LogonForm一覧インスタンス → LogonFormDs → LogonTable → Id」を選択する。これで画面データセットのLogonTableのIdとテキストボックスのTextプロパティがバインドされる。


図3.1-15 Textプロパティのバインド

  1. 同様に、パスワードのテキストボックスと画面データセットのLogonTableのPassをバインドする。

4.画面データセットの初期化

業務画面に画面データセットを追加することで、画面の生成時に空のデータセットが作られる。
初期状態では画面データセットの中身は空で各テーブルの行(Row)が存在しないため、画面項目の値が変更されてもデータセットのデータを更新することができない。
そこで、業務画面を生成したときに実行されるLoadイベントに、画面データセットの初期化を行うイベントハンドラを登録する。

画面データセットの初期化をしない場合

画面作成時のポイント図14
図3.1-16 画面データセットの初期化なし

画面データセットの初期化をした場合

画面作成時のポイント図15
図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());
} 

動作確認

  1. 動作確認用のイベントハンドラを作成する。

ログオンボタン押下イベントで、画面データセット内のデータをメッセージボックスで表示する処理を実装する。

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);
}

  1. クライアントアプリケーションを実行する(デバッグ⇒デバッグなしで開始)。

ログオン画面
図3.1-18 アプリケーション起動画面

  1. ユーザIDに"tera"、パスワードに"soluna"を入力後、ログオンボタンを押下し、入力値した値がメッセージボックスに表示されるこを確認する。

ログオン画面動作確認イメージ
図3.1-19 動作確認イメージ


次節:3.2 画面遷移処理