目次> 第3章 サンプルアプリケーション構築> 3.2 画面遷移処理
3.2 画面遷移処理
概要
本節では、Client Frameworkが提供する画面遷移機能および拡張フォーム機能を用いて、画面遷移を行う方法について学習する。
画面遷移機能および拡張フォーム機能を用いることで、複雑なコーディングを行うことなく画面間の遷移およびデータの受け渡しが可能となることに加え、画面遷移を外部ファイルで変更することも可能となる。詳細は、機能説明書『FA-01 画面遷移機能』、『FA-04 拡張フォーム機能』を参照のこと。
3.2.1 画面遷移
動作イメージ
図3.2-1 動作イメージ
- 対象画面
- ログオン画面(LogonForm.cs)
- メニュー画面(MenuForm.cs)
- 処理概要
- ログオン画面でユーザIDとパスワードを入力し、ログオンボタンを押下する。
- ログオン画面を非表示にして、メニュー画面を表示する。
作業手順
1. メニュー画面の確認
サンプルアプリケーションでは、TutorialClientBlankであらかじめ用意されたメニュー画面(MenuForm.cs)を利用する。メニュー画面がデザイナで表示されることを確認する。
図3.2-2 メニュー画面
2. 画面遷移設定ファイルの設定
遷移先画面を識別するためのIDと画面クラスのアセンブリ修飾名を画面遷移設定ファイル(ViewConfiguration.config)へ定義する。メニュー画面の画面遷移IDは、「menuForm」とする。画面遷移設定ファイルへ設定する値の詳細については、機能説明書「FA-01 画面遷移機能」を参照のこと。
ViewConfiguration.config
<!-- メニュー画面 --> <view id="menuForm" type="TutorialClient.MenuForm, TutorialClient"/> <!-- 計算画面 --> <view id="calcForm" type="TutorialClient.CalcForm, TutorialClient"/> <!-- ファイルアップロード画面 --> <view id="fileUploadForm" type="TutorialClient.FileUploadForm, TutorialClient"/> <!-- ファイルダウンロード画面 --> <view id="fileDownloadForm" type="TutorialClient.FileDownloadForm, TutorialClient"/>
3. FormForwarderコンポーネントの追加と設定
3.1 ログオン画面へFormForwarderコンポーネントの追加
ログオン画面(LogonForm.cs)で、ツールボックスからFormForwarderコンポーネントを追加する。
図3.2-3 FormForwarderコンポーネント
3.2 FormForwarderコンポーネントの設定
FormForwarderコンポーネントのプロパティ設定を行う。
表 3.2-1FormForwarderコンポーネントのプロパティ設定
プロパティ名 設定値 備考 Name logonFormForwarder デザイナで表示される名前を変更する。「formForwarder1」から「logonFormForwarder」に名前を変更する。 ForwardHost LogonForm 画面遷移を実行する元の画面を設定する。ログオン画面が遷移元なので「LogonForm」を設定する。 Modality Modeless 画面の表示方法を設定する。メニュー画面はモードレスで表示するので「Modeless」を設定する。 ViewId menuForm 遷移先画面のIDを設定する。2. 画面遷移設定ファイルの設定で定義したID「menuForm」を設定する。
4. 画面遷移処理の実装
ログオン画面(LogonForm.cs)のログオンボタンのイベントハンドラに、3. FormForwarderコンポーネントの追加と設定で追加したFormForwarderコンポーネントを用いて画面遷移を行うロジックを実装する。また、メニュー画面遷移後に、ログオン画面を非表示状態にする実装も行う。
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) { logonFormForwarder.Execute(); this.Visible = false; }
5. 遷移元画面(ログオン画面)の終了処理の実装
遷移元画面(ログオン画面)のlogonFormForwarderのFormClosedイベントハンドラに、自身の画面をクローズするロジックを実装する。
図3.2-4 FormClosedイベントの登録
LogonForm.cs
/// <summary> /// メニュー画面のクローズ時に呼ばれるイベントハンドラです。 /// </summary> /// <param name="sender">イベントのソース。</param> /// <param name="e">イベントデータを格納している<see cref="ForwardableFormCloseEventArgs"/>。</param> /// <remarks>メニュー画面を閉じるとログオン画面も同時に閉じる処理。</remarks> private void logonFormForwarder_FormClosed(object sender, ForwardableFormCloseEventArgs e) { this.Close(); }
動作確認
- ログオン画面の「ログオン」ボタンを押下すると、メニュー画面が表示されることを確認する。
図3.2-5 ログオン画面⇒メニュー画面
3.2.2 画面間のデータの受渡し
動作イメージ
図3.2-6 画面間のデータの受渡しイメージ
- 対象画面
- ログオン画面(LogonForm.cs)
- メニュー画面(MenuForm.cs)
- 処理概要
- ログオン画面でユーザIDとパスワードを入力し、ログオンボタンを押下する。
- ログオン画面を非表示にして、メニュー画面に遷移し、画面右上部にログオン画面から受け渡されたユーザIDを表示する。
作業手順
1. 遷移元画面から受け渡すデータの設定
画面遷移機能でのデータの受渡しは、IForwardableインターフェイスのItemsプロパティを利用して行われる。画面遷移時に遷移元画面のItemsプロパティから、遷移先画面のItemsプロパティへ値がコピーされる。まずは、遷移元画面のItemsに受け渡すデータの設定を行う。
表3.2-2 Itemsプロパティに設定するキーと値
キー | 値 |
UserId | ユーザID |
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) { Items["UserId"] = userIdTextBox.Text; logonFormForwarder.Execute(); this.Visible = false; }
2. 遷移先画面で受け渡されたデータの取得
遷移先画面のItemsから受け渡たされたデータの取得を行う。
表3.2-3 Itemsプロパティに設定されているキーと値
キー | 値 |
UserId | ユーザID |
MenuForm.cs
/// <summary> /// フォームロード時に実行されるイベントハンドラです。 /// </summary> /// <remarks> /// <para>画面データセットを初期化します。</para> /// </remarks> /// <param name="sender">イベントのソース。</param> /// <param name="e">イベントデータを格納している<see cref="EventArgs"/>。</param> private void MenuForm_Load(object sender, EventArgs e) { string userId = Items["UserId"].ToString(); userIdLabel.Text = string.Format( Properties.Resources.MENU_MESSAGE, userId); }
動作確認
- ログオン画面でユーザIDとパスワードを入力し、「ログオン」ボタンを押下する
- メニュー画面が表示され、画面右上部に「ようこそteraさん」と表示されることを確認する。
図3.2-7 動作確認の例