目次 > 第3章 サンプルアプリケーション構築 > 3.1 画面遷移
3.1 画面遷移
1 概要
本節では、Server Frameworkが提供する画面遷移機能を用いて、画面間の遷移を行う方法を説明する。
画面遷移機能を用いることで、画面遷移設定ファイルで遷移先URLを一元管理することが可能となることに加え、再ビルドを行わずに画面遷移設定ファイルを修正して遷移先URLを変更することも可能となる。詳細は、機能説明書『FA-01 画面遷移機能』を参照のこと。
1.1 動作イメージ
図1.1-1 動作イメージ
- 対象画面
- ログオン画面(LogonForm.aspx)
- メニュー画面(MenuForm.aspx)
- 処理概要
- (クライアント)ログオン画面でログオンボタンを押下し、ユーザ名とパスワードをサーバへ送信する。
- (サーバ)ユーザ名とパスワードを用いて認証を行う。
- (サーバ)正常に認証が行われた場合は、TERASOLUNAの画面遷移機能を用いて、メニュー画面への遷移処理を行う。
- (クライアント)メニュー画面を表示する。
2 作業手順
- 作成イメージ
2.1 画面の作成
2.1.1 ログオン画面の作成
Formフォルダ内にLogonForm.aspxという名前でWebフォームを作成する。
画面を作成したら、デザイナ表示に切り替えて下図のとおりコントロールを配置し、プロパティを設定する
図2.1.1-1 ログオン画面にコントロールを配置
表2.1.1-1 配置したコントロールのプロパティ設定
番号 | コントロール | IDプロパティ | Textプロパティ | Visibleプロパティ | ForeColorプロパティ |
① | テキストボックス | TextBoxUserId | |||
② | テキストボックス | TextBoxPassword | |||
③ | ボタン | ButtonLogon | ログオン | ||
④ | ラベル | LabelLogonError | ユーザIDまたはパスワードが間違っています。 | false | Red |
2.1.2 メニュー画面の作成
Formフォルダ内に、MenuForm.aspxという名前でWebコンテンツフォームを作成する。
図2.1.2-1 MenuForm.aspxの作成
マスタページとして、Tutorial.Masterを設定する。
図2.1.2-2 マスターページの設定
画面を作成したら、下図のとおりコントロールを配置し、プロパティを設定する
図2.1.2-3 メニュー画面にコントロールを配置
表2.1.2-1 配置したコントロールのプロパティ設定
番号 | コントロール | IDプロパティ | Textプロパティ |
① | ボタン | ButtonCalc | 計算画面 |
② | ボタン | ButtonItemSelect | 商品選択画面 |
③ | ボタン | ButtonException | 例外をスローする |
2.2 画面遷移設定ファイルの設定
画面遷移設定ファイル(Config\PageConfiguration.config)にログオン画面とメニュー画面の定義を追加する。
ログオン画面の画面ID(page属性)には"LogonForm"を、path属性には"/Form/LogonForm.aspx"を定義する。
<!-- ログオン画面 --> <page name="LogonForm" path="/Form/LogonForm.aspx" />
メニュー画面の画面ID(page属性)には"MenuForm"を、path属性には"/Form/MenuForm.aspx"を定義する。
<!-- メニュー画面 --> <page name="MenuForm" path="/Form/MenuForm.aspx" />
設定完了後の画面遷移設定ファイルを以下に記す。
PageConfiguration.config
<?xml version="1.0" encoding="utf-8" ?> <!-- ページ設定ファイルの設定 --> <pageConfiguration xmlns="http://www.terasoluna.jp/schema/PageSchema.xsd"> <!-- 計算画面 --> <page name="CalcForm" path="/Form/CalcForm.aspx" /> <!-- 商品選択画面 --> <page name="SelectItemForm" path="/Form/SelectItemForm.aspx" /> <!-- 商品確認画面 --> <page name="ConfirmItemForm" path="/Form/ConfirmItemForm.aspx" /> <!-- 商品確定画面 --> <page name="CompleteItemForm" path="/Form/CompleteItemForm.aspx" /> <!-- ログオン画面 --> <page name="LogonForm" path="/Form/LogonForm.aspx" /> <!-- メニュー画面 --> <page name="MenuForm" path="/Form/MenuForm.aspx" /> </pageConfiguration>
2.3 ログオン画面のイベントの実装
2.3.1 クリックイベントの追加
「ログオン」ボタンのクリックイベントを追加する。
図2.3.1-1 「ログオンボタン」のクリックイベントの追加
2.3.2 クリックイベントの実装
クリックイベントに簡単な認証および画面遷移ロジックを実装する。
画面で入力されたユーザIDが"tera"かつパスワードが"soluna"の場合、認証に成功したとみなし画面遷移を行う。
画面遷移には、Server Frameworkが提供するWebUtilsクラスを用いる。
LogonForm.aspx.cs
/// <summary> /// ログオン処理を行う。 /// </summary> /// <param name="sender">イベントのソース。</param> /// <param name="e">イベントデータを格納している<see cref="EventArgs"/>。</param> protected void ButtonLogon_Click(object sender, EventArgs e) { // ユーザIDが"tera"、パスワードが"soluna"の場合、 // ログオン成功とみなしメニュー画面への遷移を行う。 if ("tera".Equals(TextBoxUserId.Text) && "soluna".Equals(TextBoxPassword.Text)) { WebUtils.Transit("MenuForm"); } else { // ログオンに失敗した場合、エラーメッセージを表示する LabelLogonError.Visible = true; } }
stringクラスのEqualsメソッドを用いてユーザIDが"tera"かつパスワード"soluna"であるかどうかの認証を行う。
認証に成功した場合、WebUtilsクラスのTransitメソッドを実行して画面遷移を行う。Transitメソッドの引数には、2 画面遷移設定ファイルの設定で設定したメニュー画面の画面ID"MenuForm"を設定する。
認証に失敗した場合は、エラーメッセージのラベルのVisibleプロパティにtrueを設定する。
3 動作確認
- サーバアプリケーションを起動する(TutorialServerWebプロジェクトの発行)。
- ブラウザのアドレス欄のURLに「http://localhost/tutorialServerWeb/Form/LogonForm.aspx」を入力し、移動ボタンをクリックし、正常にログオン画面が表示されることを確認する。
- ログオン画面でユーザID "tera"、パスワード "soluna" と入力し、ログオンボタンを押下する。
- メニュー画面に遷移したことを確認する。
図3-1 ログオン画面⇒メニュー画面