PEXA Clientについて

チュートリアル

定義パターン

定義ファイル

リファレンス

目次

  1. はじめに
  2. Editパターンのサンプル画面イメージ
  3. Editパターンから呼ばれるサービスのタイプ
  4. EditのContent定義サンプル
  5. EditのContent定義解説
  6. Area定義サンプル
  7. Area定義解説


はじめに

このドキュメントは、定義パターン"Edit"の内容について解説する物です。

Editパターンは、情報システムに登録するデータを入力する画面に現れる定義パターンです。
画面が取り扱う対象のデータモデルに対応する"edit"のContent定義が一つ含まれます。

"edit"のContent定義には、主に以下のような内容が記述されます。

  • Content(edit)の基本的なitem定義
    • 編集対象のデータモデル
    • データモデルに設定する画面入力項目
    • その他サービスに渡すパラメータ
  • Content(edit)の基本的なaction定義
    • 画面が取り扱うデータモデルの初期化(新規作成、複写作成、一覧からの引き継ぎ)
    • データモデルの編集サービスの呼び出し
    • データモデルのコミットサービスの呼び出し
    • データモデルの編集キャンセル(ロールバック)実行
以下で、画面イメージ及び定義ファイルのサンプルを元に内容を解説していきます。


Editパターンのサンプル画面イメージ

Editパターンをとる画面のサンプルとなる画面イメージです。



このように、Editパターンの画面はシステムに投入する情報の入力部分と入力を確定するボタンが配置されるのが基本形となります。 これをPEXAクライアントフレームワークではステレオタイプ"edit"のContentとして表現します。

画面上では、入力部分と保存ボタンが離れて配置されていますが、コンポーネントの配置(デザイン)はContentとは切り離されているので、 このように自由に配置できます。

また、この画面では入力部の他に情報の表示部が画面上部にあります。
このような部分はPEXAクライアントフレームワークではステレオタイプ"status","info"等のContentとして表現します。
この"status"のContentは"edit"のContentと同じデータを参照してはいますが、機能的な連携はありません。
このように"status","info"のContentは他のContentと並列に並んで同じ画面上に現れるケースが多くあります。
情報表示系のContentについては、別パターンとしてこちらで解説します。


Editパターンから呼ばれるサービスのタイプ

Editパターンはデータモデルの編集を行うパターンですが、クライアントフレームワークにはデータモデルを直接編集する機能は無いので、 サービスと組み合わせて画面としての機能を実現させることになります。

このパターンのContentから呼び出されるサービスは、基本的に以下のような物となります。

サービスタイプ 実行環境 実行内容
データモデルを用意する Client 空のデータモデルをメモリ上で新規生成する
データモデルを複写する Client 既存のデータモデルの内容をコピーしたデータモデルをメモリ上で新規生成する
入力値チェックを行う Client 画面から入力されたパラメータの値をチェックする
データモデルを編集する Client 画面から入力されたパラメータをメモリ上でデータモデルに設定する
データモデルを保存する Server 編集されたデータモデルを保存(DBへのコミット)する。
また、コミット時に付随するその他の処理をビジネスプロセスとして同一トランザクション内で実行する。


EditのContent定義サンプル

<?xml version="1.0" encoding="Windows-31J"?>
<!--
 - Copyright
 -->
<!DOCTYPE client-content SYSTEM "../doctype/client-content.dtd">
<!--==============================================================
 == Current-Module:
 == Release-Date:
 == Release-Version:
 == First-Created-On:
 == First-Created-By:
 == Copy-Right-Owner:
 ==============================================================-->
<client-content>
<!--==============================================================
==  コンテントの属性値の宣言
===============================================================-->
    <identity id="CC_ACPY_311_01_Edit"
              name="仮払申請書を編集する"
              stereotype="edit"/>
<!--==============================================================
==  コンテントの詳細説明
===============================================================-->
    <description>
        仮払い申請書のデータモデルを編集するEditコンテントです。
    </description>
<!--==============================================================
==  リンクするSVOステートメントの宣言
===============================================================-->
    <reference-list>
        <statement ref="ACPY_311" process="仮払申請書を入力する"/>
    </reference-list>
<!--==============================================================
==  コンテントで参照する項目の宣言
===============================================================-->
    <item-list>
        <!--======================================================
        == データモデル
        =======================================================-->
        <item id="選択申請書" access="hidden" type="model">
            <description>一覧画面で選択中の申請書(=仮払申請書)</description>
        </item>
        <item id="仮払申請書" access="hidden" type="model">
            <description>仮払申請書のデータモデル</description>
        </item>
        <item id="申請書情報" access="hidden" type="model">
            <description>申請書情報を表示するContentへ渡すデータモデル(=仮払申請書)</description>
        </item>
        <item id="ログイン利用者情報" access="hidden" type="model" scope="global">
            <description>ログイン時に取得したログイン情報</description>
        </item>
        <!--======================================================
        == 画面上の入出力項目
        =======================================================-->
        <item id="仮払希望日" access="inout" type="value">
            <load from="observable:仮払申請書/仮払希望日"/>
            <load from="calendar:TODAY"/>
            <description>仮払申請書中の仮払希望日</description>
        </item>
        <item id="仮払精算予定日" access="inout" type="value">
            <load from="observable:仮払申請書/仮払精算予定日"/>
            <load from="calendar:TODAY"/>
            <description>仮払申請書中の仮払精算予定日</description>
        </item>
        <item id="仮払申請額" access="inout" type="value">
            <load from="observable:仮払申請書/仮払申請額"/>
            <description>仮払申請書中の仮払希望日</description>
        </item>
        <item id="仮払目的" access="inout" type="value">
            <load from="observable:仮払申請書/仮払目的"/>
            <description>仮払申請書中の仮払目的</description>
        </item>
    </item-list>
<!--==============================================================
==  コンテントアクション
===============================================================-->
    <action-list>
        <!--======================================================
        == 新規生成で画面を起動した場合の初期化アクション
        =======================================================-->
        <action id="新規作成">
            <doService service="仮払申請書新規作成">
                <outputServiceSession>
                    <outputValue item="仮払申請書"/>
                </outputServiceSession>
            </doService>
            <set item="申請書情報" value="item:仮払申請書"/>
        </action>
        <!--======================================================
        == 複写生成で画面を起動した場合の初期化アクション
        =======================================================-->
        <action id="複写作成">
            <doService service="仮払申請書複写作成">
                <inputServiceSession>
                    <inputValue item="選択申請書"/>
                </inputServiceSession>
                <outputServiceSession>
                    <outputValue item="仮払申請書"/>
                </outputServiceSession>
            </doService>
            <set item="申請書情報" value="item:仮払申請書"/>
        </action>
        <!--======================================================
        == 修正、参照で画面を起動した場合の初期化アクション
        =======================================================-->
        <action id="引継">
            <set item="仮払申請書" value="item:選択申請書"/>
            <set item="申請書情報" value="item:選択申請書"/>
            <setSavePoint item="仮払申請書"/>
        </action>
        <!--======================================================
        == 画面の入力項目を仮払申請書に設定するアクション
        =======================================================-->
        <action id="編集">
            <doService service="仮払申請書の入力値をチェックする">
                <inputServiceSession>
                    <inputValue item="仮払希望日"/>
                    <inputValue item="仮払精算予定日"/>
                    <inputValue item="仮払申請額"/>
                    <inputValue item="仮払目的"/>
                </inputServiceSession>
            </doService>
            <doService service="仮払申請書編集">
                <inputServiceSession>
                    <inputValue item="仮払希望日"/>
                    <inputValue item="仮払精算予定日"/>
                    <inputValue item="仮払申請額"/>
                    <inputValue item="仮払目的"/>
                    <inputValue item="仮払申請書"/>
                </inputServiceSession>
                <outputServiceSession>
                    <outputValue item="仮払申請書"/>
                </outputServiceSession>
            </doService>
        </action>
        <!--==========================================================
        == 画面上で行われた編集をロールバックするアクション
        ===========================================================-->
        <action id="編集キャンセル">
            <undo item="仮払申請書"/>
        </action>
        <!--======================================================
        == 画面上で保存を行った場合のアクション
        =======================================================-->
        <action id="保存">
            <doService service="仮払申請書保存">
                <inputServiceSession>
                    <inputValue item="仮払申請書"/>
                    <inputValue item="ログイン利用者情報"/>
                </inputServiceSession>
                <outputServiceSession>
                </outputServiceSession>
            </doService>
        </action>
        <!--======================================================
        == 画面上で印刷を行った場合のアクション
        =======================================================-->
        <action id="印刷">
            <doService service="仮払申請書印刷">
                <inputServiceSession>
                    <inputValue item="仮払申請書"/>
                    <inputValue item="ログイン利用者情報"/>
                </inputServiceSession>
                <outputServiceSession>
                </outputServiceSession>
            </doService>
        </action>
    </action-list>
<!--==============================================================
==  コンテントの遷移先リスト
==  (この情報はコンテントカタログ間の関連定義であり、実行時には参照されません)
===============================================================-->
    <transition-list>
    </transition-list>
<!--==============================================================
==  ファイル編集情報
===============================================================-->
    <status>
        <author></author>
        <datetime></datetime>
        <version></version>
    </status>
</client-content>


EditのContent定義解説

EditのContentは、基本的に以下のような機能を持ちます。

  • 画面が取り扱うデータモデルの初期化(新規作成、複写作成、一覧からの引継)を行う
  • 編集サービスに渡すパラメータを画面から受け取り、保持する
  • データモデルの編集サービスを呼び出す
  • データモデルの確定(コミット)サービスを呼び出す
上記を実現するための記述内容をitem及びactionの定義内容としてそれぞれ解説します。

item定義

ステレオタイプ"edit"のContentで定義されるitemには、主に以下のような項目があります。

  • 遷移元の一覧画面のContentから引き継いだ、選択中のデータモデル
  • 編集対象のデータモデル
  • 画面で入力する、データモデルに対する設定項目


サンプルのContent定義では、データモデルとしては 一覧画面での選択モデルを引き継ぐ"選択申請書", 編集対象のデータモデルである"仮払申請書"、 各サービスに渡すログインユーザ情報の"ログイン利用者情報"が定義されています。

また、それに加えて"申請書情報"という項目がモデルとして定義されています。
これは同じ画面に表示される"status"のContentに引き渡すデータモデルです。

<!--======================================================
== データモデル
=======================================================-->
<item id="選択申請書" access="hidden" type="model">
    <description>一覧画面で選択中の申請書(=仮払申請書)</description>
</item>
<item id="仮払申請書" access="hidden" type="model">
    <description>仮払申請書のデータモデル</description>
</item>
<item id="申請書情報" access="hidden" type="model">
    <description>申請書情報を表示するContentへ渡すデータモデル(=仮払申請書)</description>
</item>
<item id="ログイン利用者情報" access="hidden" type="model" scope="global">
    <description>ログイン時に取得したログイン情報</description>
</item>


画面で入力する設定項目は、画面上に入力フィールドが用意されている分だけそのまま項目が定義されています。

<!--======================================================
== 画面上の入出力項目
=======================================================-->
<item id="仮払希望日" access="inout" type="value">
    <load from="observable:仮払申請書/仮払希望日"/>
    <load from="calendar:TODAY"/>
    <description>仮払申請書中の仮払希望日</description>
</item>
<item id="仮払精算予定日" access="inout" type="value">
    <load from="observable:仮払申請書/仮払精算予定日"/>
    <load from="calendar:TODAY"/>
    <description>仮払申請書中の仮払精算予定日</description>
</item>
<item id="仮払申請額" access="inout" type="value">
    <load from="observable:仮払申請書/仮払申請額"/>
    <description>仮払申請書中の仮払希望日</description>
</item>
<item id="仮払目的" access="inout" type="value">
    <load from="observable:仮払申請書/仮払目的"/>
    <description>仮払申請書中の仮払目的</description>
</item>


action定義

ステレオタイプ"edit"のContentで定義されるactionには、主に以下のものがあります。

  • 画面が取り扱うデータモデルの初期化(新規作成、複写作成、一覧からの引き継ぎ)を行うaction
  • データモデルの編集サービスを呼び出すaction
  • データモデルの確定(コミット)サービスを呼び出すaction


サンプルのContente定義では、上記で挙げたactionに加えてデータモデルの複写作成や印刷を行うサービスを定義してあります。


"新規作成"actionは、Areaの起動時に実行される初期化commandから呼び出されます。
command内で、Pageのcontextが"新規作成"の場合に呼ばれるように定義されています。
データモデルの新規作成サービスを呼び出し、空のデータモデルを取得して"仮払申請書"に格納しています。
また、同じ画面内に存在する"status"のContentに渡す"申請書情報"にも同じデータモデルを格納しています。

<!--======================================================
== 新規生成で画面を起動した場合の初期化アクション
=======================================================-->
<action id="新規作成">
    <doService service="仮払申請書新規作成">
        <outputServiceSession>
            <outputValue item="仮払申請書"/>
        </outputServiceSession>
    </doService>
    <set item="申請書情報" value="item:仮払申請書"/>
</action>


"複写作成"actionは、Areaの起動時に実行される初期化commandから呼び出されます。
command内で、Pageのcontextが"複写作成"の場合に呼ばれるように定義されています。
一覧画面から引き継いだ"選択申請書"をパラメータとしてデータモデルの複写作成サービスを呼び出し、 新しいデータモデルを取得して"仮払申請書"に格納しています。
また、同じ画面内に存在する"status"のContentに渡す"申請書情報"にも同じデータモデルを格納しています。

<!--======================================================
== 複写生成で画面を起動した場合の初期化アクション
=======================================================-->
<action id="複写作成">
    <doService service="仮払申請書複写作成">
        <inputServiceSession>
            <inputValue item="選択申請書"/>
        </inputServiceSession>
        <outputServiceSession>
            <outputValue item="仮払申請書"/>
        </outputServiceSession>
    </doService>
    <set item="申請書情報" value="item:仮払申請書"/>
</action>


"引継"actionは、Areaの起動時に実行される初期化commandから呼び出されます。
command内で、Pageのcontextが"修正""参照"の場合に呼ばれるように定義されています。
一覧画面から引き継いだ"選択申請書""仮払申請書"にそのまま格納しています。
また、同じ画面内に存在する"status"のContentに渡す"申請書情報"にも同じデータモデルを格納しています。
また、setSavePoint命令を使用して、編集対象のデータモデルに対してロールバックの準備を行っています。
ここでセーブポイントを設定しておくことで、保存しないで画面を閉じる場合などの編集をキャンセルしたい場合に対応できるようになります。

<!--======================================================
== 修正、参照で画面を起動した場合の初期化アクション
=======================================================-->
<action id="引継">
    <set item="仮払申請書" value="item:選択申請書"/>
    <set item="申請書情報" value="item:選択申請書"/>
    <setSavePoint item="仮払申請書"/>
</action>


"編集"actionは、画面上で保存ボタンが押されたときに呼び出されます。
画面上の各入力フィールドに入力された項目をパラメータとして、まず入力値チェックを行うサービスを呼び出しています。 このサービスで何らかのチェックに引っかかった場合は、サービスから例外がthrowされてメッセージダイアログが表示され、処理はその時点で中断されます。

もしチェックに何も引っかからなかった場合は続けてデータモデルの編集サービスを呼び出しています。 パラメータとして、データモデルである"仮払申請書"と画面からの入力値を渡しています。 これにより、データモデルに対して各項目が設定されます。そしてサービスから返される編集済みのデータモデルを"仮払申請書"に設定しています。

<!--======================================================
== 画面の入力項目を仮払申請書に設定するアクション
=======================================================-->
<action id="編集">
    <doService service="仮払申請書の入力値をチェックする">
        <inputServiceSession>
            <inputValue item="仮払希望日"/>
            <inputValue item="仮払精算予定日"/>
            <inputValue item="仮払申請額"/>
            <inputValue item="仮払目的"/>
        </inputServiceSession>
    </doService>
    <doService service="仮払申請書編集">
        <inputServiceSession>
            <inputValue item="仮払希望日"/>
            <inputValue item="仮払精算予定日"/>
            <inputValue item="仮払申請額"/>
            <inputValue item="仮払目的"/>
            <inputValue item="仮払申請書"/>
        </inputServiceSession>
        <outputServiceSession>
            <outputValue item="仮払申請書"/>
        </outputServiceSession>
    </doService>
</action>


"編集キャンセル"actionは、画面上で保存を行わないまま画面を閉じるような場合に呼び出されます。
undo命令を使用することで、あらかじめsetSavePointを行っておけばその時点まで データモデルに対して行われた編集をロールバックすることが出来ます。

<!--==========================================================
== 画面上で行われた編集をロールバックする
===========================================================-->
<action id="編集キャンセル">
    <undo item="仮払申請書"/>
</action>


"保存"actionは、画面上で保存ボタンが押されたときに、編集actionの直後に呼び出されます。
"編集"actionにより編集済みのデータモデルをパラメータとして、データモデルの保存サービスを呼び出しています。
これにより、サービスが必要な処理を行った後データモデルの確定(コミット)をおこないます。

<!--======================================================
== 画面上で保存を行った場合のアクション
=======================================================-->
<action id="保存">
    <doService service="仮払申請書保存">
        <inputServiceSession>
            <inputValue item="仮払申請書"/>
            <inputValue item="ログイン利用者情報"/>
        </inputServiceSession>
        <outputServiceSession>
        </outputServiceSession>
    </doService>
</action>


最後に、"印刷"actionが定義されています。
これは、データモデルをパラメータとして印刷サービスの呼び出しを行っています。

<!--======================================================
== 画面上で印刷を行った場合のアクション
=======================================================-->
<action id="印刷">
    <doService service="仮払申請書印刷">
        <inputServiceSession>
            <inputValue item="仮払申請書"/>
            <inputValue item="ログイン利用者情報"/>
        </inputServiceSession>
        <outputServiceSession>
        </outputServiceSession>
    </doService>
</action>



Area定義サンプル
<?xml version="1.0" encoding="Windows-31J"?>
<!--
 - Copyright
 -->
<!DOCTYPE client-area SYSTEM "../doctype/client-area.dtd">
<!--==============================================================
 == Current-Module:   $HeadURL$
 == Release-Date:     $Date:: 2008-08-29 22:48:31 #$
 == Release-Version:  $Revision: 2282 $
 == First-Created-On: 2005/10/03
 == First-Created-By:
 == Copy-Right-Owner:
 ==============================================================-->
<client-area>
    <!-- エリア属性値 -->
    <identity id="CA_WKFL_003_01"
              name="仮払申請書"/>
    <!-- 詳細説明 -->
    <description>
        SVOステートメント:ACPY_311,ACPY_314,ACPY_315,ACPY_317,ACPY_319
        仮払申請書の新規作成、参照、修正、再作成を行います。
    </description>
<!--==============================================================
  ==  参照するコンテンツの宣言
  ==============================================================-->
    <reference-list>
        <area ref="CA_COMM_001_01_ApplicantInfoInput"/>
        <content ref="CC_ACPY_311_01_Edit"/>
    </reference-list>
<!--==============================================================
  ==  表示レイアウト情報
  ==============================================================-->
    <layout ref="PanelLayout">
        <gui implement="imeg.client.view.rich.area.wkfl.WKFL_003_ReimbursementPaymentApplicationEditPanel"/>
        <area-mapping>
            <area location="SUB_PANEL[申請情報共有パネル]" ref="CA_COMM_001_01_ApplicantInfoInput"/>
        </area-mapping>
    </layout>
<!--==============================================================
  ==  コンポーネントマッピング
  ==============================================================-->
    <component-mapping>
        <!--====================================================
        == 画面上部のタイトル、ボタン
        =====================================================-->
        <Label id="タイトルラベル" text="page:name"/>
        <Button id="複写ボタン" text="複写" onClick="COMMAND[複写]"
                visible="filter:[page:context = 修正 or page:context = 参照]"/>
        <Button id="保存ボタン" text="保存" onClick="COMMAND[保存]"
                visible="filter:[page:context != 参照]"/>
        <Button id="申請ボタン" text="申請" onClick="COMMAND[申請]"/>
        <Button id="印刷ボタン" text="印刷" onClick="COMMAND[印刷]"
                visible="filter:[page:context = 修正 or page:context = 参照]"/>
        <Button id="閉じるボタン" onClick="終了"/>
        <!--====================================================
        == 仮払申請書 Edit
        =====================================================-->
        <TextField id="仮払希望日テキストフィールド"
                      text="content:CC_ACPY_311_01_Edit/仮払希望日"
                      enabled="filter:[page:context != 参照]"/>
        <TextField id="仮払清算予定日テキストフィールド "
                      text="content:CC_ACPY_311_01_Edit/仮払精算予定日"
                      enabled="filter:[page:context != 参照]/>
        <TextField id="仮払申請額テキストフィールド"
                      text="content:CC_ACPY_311_01_Edit/仮払申請額"
                      enabled="filter:[page:context != 参照]/>
        <TextField id="仮払目的テキストフィールド "
                      text="content:CC_ACPY_311_01_Edit/仮払目的"
                      enabled="filter:[page:context != 参照]/>
    </component-mapping>
<!--==============================================================
  ==  コマンド定義
  ==============================================================-->
    <command-list>
        <!--========================================================
        == 初期化時の実行コマンド
        =========================================================-->
        <command id="INIT">
            <switch condition="page:context">
                <case value="新規作成">
                    <doAction content="CC_ACPY_311_01_Edit" action="新規作成"/>
                </case>
                <case value="複写作成">
                    <doAction content="CC_ACPY_311_01_Edit" action="複写作成"/>
                </case>
                <case value="修正">
                    <doAction content="CC_ACPY_311_01_Edit" action="引継"/>
                </case>
                <case value="参照">
                    <doAction content="CC_ACPY_311_01_Edit" action="引継"/>
                </case>
            </switch>
        </command>
        <!--========================================================
        == 保存の実行コマンド
        =========================================================-->
        <command id="保存">
           <showConfirmDialog message="申請書を保存します。よろしいですか?">
               <ok>
                   <doAction content="CC_ACPY_311_01_Edit" action="編集"/>
                   <doAction content="CC_ACPY_311_01_Edit" action="保存"/>
                   <closeContext />
               </ok>
               <cancel>
                    <!-- キャンセル選択時は何もしない -->
               </cancel>
            </showConfirmDialog>
        </command>
        <!--========================================================
        == 印刷の実行コマンド
        =========================================================-->
        <command id="印刷">
           <showConfirmDialog message="申請書を印刷します。よろしいですか?">
               <ok>
                   <doAction content="CC_ACPY_311_01_Edit" action="印刷"/>
                   <closeContext />
               </ok>
               <cancel>
                    <!-- キャンセル選択時は何もしない -->
               </cancel>
            </showConfirmDialog>
        </command>
        <!--========================================================
        == 申請の実行コマンド
        =========================================================-->
        <command id="申請">
            <doTransition transit="申請先指定画面をポップアップ"/>
        </command>
        <!--========================================================
        == 複写の実行コマンド
        =========================================================-->
        <command id="複写">
            <doTransition transit="仮払申請(複写作成)をポップアップ"/>
        </command>
        <!--======================================================
        == 終了コマンド
        == 処理内容 : 参照モード以外の場合は終了確認を行ってから画面を閉じる
        =======================================================-->
        <command id="CLOSE">
            <!-- 参照画面の場合素直に閉じる -->
            <switch condition="page:context">
                <case value="参照">
                    <doAction action="編集キャンセル" content="CC_ACPY_311_01_Edit"/>
                    <closeContext/>
                </case>
                <default>
                    <showConfirmDialog message="message:CM_COMM_Info/編集画面終了">
                        <ok>
                            <doAction action="編集キャンセル" content="CC_ACPY_311_01_Edit"/>
                            <closeContext/>
                        </ok>
                        <cancel>
                            <!-- キャンセルの場合は何もしない -->
                        </cancel>
                    </showConfirmDialog>
                </default>
            </switch>
        </command>
  </command-list>
<!--==============================================================
  ==  ファイル編集情報
  ==============================================================-->
    <status>
        <author></author>
        <datetime></datetime>
        <version></version>
    </status>
</client-area>


Area定義解説

Editパターンの画面のArea定義では、editのContentで定義したデータモデルへの設定項目となる各itemと入力フィールドとなる各コンポーネントとのマッピングや、 初期化系action、ボタン押下時のaction呼び出しをcommandに記述する必要があります。
特に初期化系のactionについては、Page定義に設定されている画面の実行コンテキストを判別して呼び分けている点に注意してください。

component-mapping定義

サンプルのArea定義では、各コンポーネントとContentは以下のようにマッピングされています。

  • Edit Content : 各TextFieldおよび保存ボタン、印刷ボタン
各Buttonについては、visible属性の記述に注意してください。 filter参照を使用して、 各ボタンが表示されるかどうかの条件を指定しています。この例では、画面の実行コンテキストを条件として判定しています。
<!--====================================================
== 画面上部のタイトル、ボタン
=====================================================-->
<Label id="タイトルラベル" text="page:name"/>
<Button id="複写ボタン" text="複写" onClick="COMMAND[複写]"
        visible="filter:[page:context = 修正 or page:context = 参照]"/>
<Button id="保存ボタン" text="保存" onClick="COMMAND[保存]"
        visible="filter:[page:context != 参照]"/>
<Button id="申請ボタン" text="申請" onClick="COMMAND[申請]"/>
<Button id="印刷ボタン" text="印刷" onClick="COMMAND[印刷]"
        visible="filter:[page:context = 修正 or page:context = 参照]"/>
<Button id="閉じるボタン" onClick="終了"/>
各TextFieldは、Contentの各itemとそのままマッピングされています。
また、enabled属性を使用して、参照モードの場合は入力できないように制限を入れているところに注目してください。
なお、この画面では入力項目が少ないのと処理状態を持っていないのでenabled属性を使用していますが、 複雑な処理状態を持つEdit + EditList + Editのようなパターンにおいては、状態遷移表(statechartセクション)およびavailable属性を使用することを推奨します。
詳細はEdit + EditList + Editパターンの解説を参照してください。
<!--====================================================
== 仮払申請書 Edit
=====================================================-->
<TextField id="仮払希望日テキストフィールド"
              text="content:CC_ACPY_311_01_Edit/仮払希望日"
              enabled="filter:[page:context != 参照]"/>
<TextField id="仮払清算予定日テキストフィールド "
              text="content:CC_ACPY_311_01_Edit/仮払精算予定日"
              enabled="filter:[page:context != 参照]/>
<TextField id="仮払申請額テキストフィールド"
              text="content:CC_ACPY_311_01_Edit/仮払申請額"
              enabled="filter:[page:context != 参照]/>
<TextField id="仮払目的テキストフィールド "
              text="content:CC_ACPY_311_01_Edit/仮払目的"
              enabled="filter:[page:context != 参照]/>


command定義

Editパターンの画面では、基本的に以下の場合の処理をcommandで定義します。

  • 画面の実行コンテキストに応じた初期化処理
  • 実行ボタンが押された際の処理


サンプルのArea定義では、"INIT"commandが定義されています。
このIDを持つcommandは、画面起動時に自動的に実行されるので、このcommandでeditのContentに定義したデータモデルの初期化を行うactionを呼び出しています。
switch命令を使用して、処理を分岐させていることに注意してください。 判定条件はcondition属性で指定されているpage参照で取得した実行コンテキスト名になっています。 これは、Page定義ファイルのidentityタグのcontext属性値にリンクします。

<!--========================================================
== 初期化時の実行コマンド
=========================================================-->
<command id="INIT">
    <switch condition="page:context">
        <case value="新規作成">
            <doAction content="CC_ACPY_311_01_Edit" action="新規作成"/>
        </case>
        <case value="複写作成">
            <doAction content="CC_ACPY_311_01_Edit" action="複写作成"/>
        </case>
        <case value="修正">
            <doAction content="CC_ACPY_311_01_Edit" action="引継"/>
        </case>
        <case value="参照">
            <doAction content="CC_ACPY_311_01_Edit" action="引継"/>
        </case>
    </switch>
</command>


"保存"commandでは、editのContentで定義した"編集","保存"actionを呼び出しています。
これらを続けて呼び出すことにより、データモデルの編集と確定を続けて行うことが出来ます。

<!--========================================================
== 保存の実行コマンド
=========================================================-->
<command id="保存">
   <showConfirmDialog message="申請書を保存します。よろしいですか?">
       <ok>
           <doAction content="CC_ACPY_311_01_Edit" action="編集"/>
           <doAction content="CC_ACPY_311_01_Edit" action="保存"/>
           <closeContext />
       </ok>
       <cancel>
            <!-- キャンセル選択時は何もしない -->
       </cancel>
    </showConfirmDialog>
</command>


"印刷"commandでは、確認ダイアログを表示した後、editのContentで定義した"印刷"actionを呼び出しています。

<!--========================================================
== 印刷の実行コマンド
=========================================================-->
<command id="印刷">
   <showConfirmDialog message="申請書を印刷します。よろしいですか?">
       <ok>
           <doAction content="CC_ACPY_311_01_Edit" action="印刷"/>
           <closeContext />
       </ok>
       <cancel>
            <!-- キャンセル選択時は何もしない -->
       </cancel>
    </showConfirmDialog>
</command>

"申請","複写"commandでは、それぞれの遷移先への画面遷移を実行しています。

<!--========================================================
== 申請の実行コマンド
=========================================================-->
<command id="申請">
    <doTransition transit="申請先指定画面をポップアップ"/>
</command>
<!--========================================================
== 複写の実行コマンド
=========================================================-->
<command id="複写">
    <doTransition transit="仮払申請(複写作成)をポップアップ"/>
</command>


"CLOSE"commandでは、画面上で閉じるボタンを押下した際の処理を行います。
この場合、参照モード以外の場合は確認ダイアログを表示した上で、編集のキャンセルを行うContentアクションを呼び出してから画面を終了しています。
また、画面を閉じる際はEdit Contentで用意した編集キャンセルアクションを呼び出して、データモデルに対してメモリ上で行った編集内容をキャンセルしています。 これにより、画面が起動した直後の状態までデータモデルの内容がロールバックされます。

<!--======================================================
== 終了コマンド
== 処理内容 : 参照モード以外の場合は終了確認を行ってから画面を閉じる
=======================================================-->
<command id="CLOSE">
    <!-- 参照画面の場合素直に閉じる -->
    <switch condition="page:context">
        <case value="参照">
            <doAction action="編集キャンセル" content="CC_ACPY_311_01_Edit"/>
            <closeContext/>
        </case>
        <default>
            <showConfirmDialog message="message:CM_COMM_Info/編集画面終了">
                <ok>
                    <doAction action="編集キャンセル" content="CC_ACPY_311_01_Edit"/>
                    <closeContext/>
                </ok>
                <cancel>
                    <!-- キャンセルの場合は何もしない -->
                </cancel>
            </showConfirmDialog>
        </default>
    </switch>
</command>



更新情報

  • 最終更新者 : $Author: morishita $
  • 最終更新日時 : $Date:: 2008-08-29 22:48:31 #$
  • バージョン : $Revision: 2282 $



Copyright © 2006, Atrris Corporation