目次＞ 第3章 サンプルアプリケーション構築＞3.1 画面作成

# 3.1 画面作成

## 1 概要

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

### 1.1 画面作成のイメージ

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

図1.1-1 業務画面と拡張フォームの関係

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

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

図1.2-1 画面項目とデータセットのバインド

- 画面項目の情報を格納するデータセットを画面データセットと呼ぶ。
- 画面の各項目とデータセットをバインドしておくと、テキストボックスなどに値を入力した際に、データセットへ値が自動的に反映される。
- Client Frameworkを用いた開発では、入力データをフォームおよび画面項目から分離するためのデータセットを画面ごとに用意する設計を推奨している。各業務処理では、その画面データセットを介して処理を行うことを想定する。

## 2 作業手順

- 作業手順
  1. 業務画面作成
  2. 画面データセット作成
  3. 画面項目と画面データセットのバインド
  4. 画面データセットの初期化

## 3 作業内容（詳細）

### 3.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();
        }

### 3.2 画面データセット作成

#### 3.2.1 画面データセットの新規作成

画面データセット(ViewData/LogonFormDs.xsd)を新規作成する。TutorialClientプロジェクトのViewDataフォルダを右クリックし、[追加]→[新しい項目]を選択する。新しい項目の追加ダイアログが表示される。

図3.2.1-1 新しい項目の追加

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

図3.2.1-2 データセットの追加

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

図3.2.1-3 画面データセットの新規作成完了イメージ

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

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

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

Namespace | http://com.example.dotnet/LogonFormDs.xsd

図3.2.2-1 Namespaceプロパティの設定

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

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

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

DataTable名 | Column(列)名 | DataType(型)
LogonTable |  |
| Id | System.String
| Pass | System.String

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

図3.3-1 DataTableの作成

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

図3.3-2 DataTable名の変更

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

図3.3-3 Column(列)の追加

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

図3.3-4 列名(Name)と型(DataType)の設定

同様に、表3.3-1を参照して全ての列を追加し、プロパティを設定する。

全てのDataTableと列の作成が終わったら、一度保存してビルドする。すると作成したデータセットがツールボックスに表示され、コンポーネントとして利用できるようになる。

図3.3-5 画面データセットの作成完了イメージ

画面フォームのデザイナが開かれている状態で、データセットがコンポーネントに追加されていることを確認する。

図3.3-6 データセットがコンポーネントに追加されている例

※ツールボックスに、図3.3-6のようにTERASOLUNAタグなどを表示させる手順については、第4章 Appendixの「4.4 ツールボックスでTERASOLUNAタグを追加する方法」を参照。

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

前項で作成した画面データセットを、表3.4-1を参考にログオン画面の各画面項目とバインドする。

表3.4-1 画面項目と画面データセットの対応一覧

画面項目名 | コントロール種別 | DataTable名 | Column(列)名
|  | LogonTable |
ユーザID | テキストボックス |  | Id
パスワード | テキストボックス |  | Pass

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

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

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

図3.4.1-1 画面データセットの追加

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

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

図3.4.1-2 Textプロパティのバインド

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

### 3.5 画面データセットの初期化

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

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

図3.5-1 画面データセットの初期化なし

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

図3.5-2 画面データセットの初期化あり

#### 3.5.1 画面データセットの初期化方法

画面データセットを初期化するため、画面クラスの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());
    }

## 4 動作確認

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

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

図4-1 アプリケーション起動画面

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

図4-2 動作確認イメージ

次節：3.2 画面遷移処理