PEXA Clientについて

チュートリアル

定義パターン

定義ファイル

リファレンス

目次

  1. はじめに
  2. Edit+EditList+Editパターンのサンプル画面イメージ
  3. Edit + EditList + Editパターンから呼ばれるサービスのタイプ
  4. Edit(Sheet部)のContent定義サンプル
  5. Edit(Sheet部)のContent定義解説
  6. EditList(Meisai部)のContent定義サンプル
  7. EditList(Meisai部)のContent定義解説
  8. Edit(Meisai部)のContent定義サンプル
  9. Edit(Meisai部)のContent定義解説
  10. Area定義サンプル
  11. Area定義解説


はじめに

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

Edit+EditList+Editパターンパターンは、複雑な構造を持つデータモデルを編集する画面に現れる定義パターンです。
PEXAでSheet-Meisai構造と呼んでいる、一つの親データモデル(Sheet)にN個の明細レコード(Meisai)を持つようなデータモデルを編集する画面がこれに相当します。 基本パターンとしては、

  • Sheet部の"edit"Content
  • Meisai部の"editlist"Content
  • Meisai部の"edit"Content
が一つずつ画面に含まれます。

Sheet部の"edit"のContent定義には、主に以下のような内容が記述されます。
  • Content(edit)の基本的なitem定義
    • 編集対象のSheet部データモデル
    • Sheet部データモデルに設定する画面入力項目
    • その他サービスに渡すパラメータ
  • Content(edit)の基本的なaction定義
    • 画面が取り扱うSheet部データモデルの初期化(新規作成、複写作成、遷移元の一覧画面からの引き継ぎ)
    • Sheet部データモデルの編集サービスの呼び出し
    • Sheet部データモデルのコミットサービスの呼び出し
    • Sheet部データモデルの編集キャンセル(ロールバック)実行
Meisai部の"editlist"のContent定義には、主に以下のような内容が記述されます。
  • Content(editlist)の基本的なitem定義
    • Sheet部データモデル
    • 一覧表示する、Meisai部データモデルのリスト
    • 画面上の一覧で現在選択中のMeisai部データモデル
    • その他サービスに渡すパラメータ
  • Content(editlist)の基本的なaction定義
    • 画面上の一覧で選択中のMeisai部データモデルを複写するサービス
    • 画面上の一覧で選択中のMeisai部データモデルを削除するサービス
Meisai部の"edit"のContent定義には、主に以下のような内容が記述されます。
  • Content(edit)の基本的なitem定義
    • Sheet部データモデル
    • 編集対象のMeisai部データモデル
    • Meisai部データモデルに設定する画面入力項目
    • その他サービスに渡すパラメータ
  • Content(edit)の基本的なaction定義
    • 画面が取り扱うMeisai部データモデルの初期化(新規作成、一覧からの引き継ぎ)
    • Meisai部データモデルを編集するサービスの呼び出し
    • Meisai部をSheet部に反映するサービスの呼び出し
以下で、画面イメージ及び定義ファイルのサンプルを元に内容を解説していきます。


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

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



このように、Edit+EditList+Editパターンの画面は、基本形として

  • Sheet部の入力部
  • Meisai一覧と選択レコードに対する操作ボタン
  • Meisai部の入力部と確定ボタン
という3つの要素が組み合わさって一つの画面として構成されています。
これをPEXAクライアントフレームワークではそれぞれ
  • ステレオタイプ"edit"のContent(Sheet部)
  • ステレオタイプ"editlist"のContent(Meisai部一覧)
  • ステレオタイプ"edit"のContent(Meisai部)
として表現します。
画面上の見た目はMeisai部のeditlistとeditが逆転していますが、Contentは画面レイアウトに影響を受けないので、デザインポリシーはこのように自由に決められます。

また、Sheet部のeditのContentはこの画面が取り扱う対象となるSheet部のデータモデルと密接に関連するので、入力部だけでなく画面全体に関わってきます。 もしSheet部には画面上に現れている項目を持っておらず、Sheet部の入力部が画面上にはなかったとしても、対応するeditのContentは必ず存在します。この点に注意してください。

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

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


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

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

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

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


Edit(Sheet部)の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_331_01_Edit"
              name="交通費精算書を編集する"
              stereotype="edit"/>
<!--==============================================================
==  コンテントの詳細説明
===============================================================-->
    <description>
        交通費精算書を編集するEditコンテントです。
    </description>
<!--==============================================================
==  リンクするSVOステートメントの宣言
===============================================================-->
    <reference-list>
        <statement ref="ACPY_331" process="交通費精算書を入力する"/>
        <statement ref="ACPY_332" process="交通費精算書を印刷する"/>
        <statement ref="ACPY_333" process="交通費精算書を申請する"/>
        <statement ref="ACPY_334" process="交通費精算書を参照する"/>
        <statement ref="ACPY_335" process="交通費精算書を修正する"/>
    </reference-list>
<!--==============================================================
==  コンテントで参照する項目の宣言
===============================================================-->
    <item-list>
        <!--======================================================
        == データモデル
        =======================================================-->
        <item id="選択申請書" access="hidden" type="model">
            <description>一覧画面で選択中の申請書(=交通費精算書)</description>
        </item>
        <item id="交通費精算書" access="hidden" type="model">
            <description>交通費精算書のUpdatable</description>
        </item>
        <item id="申請書情報" access="hidden" type="model">
            <description>申請書情報を表示するContentへ渡すデータモデル(=交通費精算書)</description>
        </item>
        <item id="会計部門" access="hidden" type="model">
            <description>会計部門マスタの検索結果データモデル</description>
        </item>
        <item id="ログイン利用者情報" access="hidden" type="model" scope="global">
            <description>ログイン時に取得したユーザー情報</description>
        </item>
        <!--======================================================
        == 画面上の入出力項目
        =======================================================-->
        <item id="費用計上年月" access="inout" type="value">
            <load from="observable:交通費精算書/費用計上年月"/>
            <description>交通費精算書の費用計上年月</description>
        </item>
        <item id="会計部門コード" access="inout" type="value">
            <load from="observable:交通費精算書/会計部門No/会計部門コード"/>
            <trigger action="会計部門検索"/>
            <description>交通費精算書の会計部門コード</description>
        </item>
        <item id="支払額" access="output" type="value">
            <load from="observable:交通費精算書/支払額"/>
            <description>交通費精算書の支払額の合計</description>
        </item>
        <!--======================================================
        == 隠し項目
        =======================================================-->
        <item id="会計部門No" access="hidden" type="value">
            <load from="observable:会計部門/会計部門No"/>
            <load from="observable:交通費精算書/会計部門No"/>
            <description>交通費精算書の会計部門No</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>
        <!--======================================================
        == Sheet部の編集を行うアクション
        =======================================================-->
        <action id="編集">
            <doService service="交通費精算書の入力値チェックを行う">
                <inputServiceSession>
                    <inputValue item="費用計上年月"/>
                    <inputValue item="会計部門No"/>
                </inputServiceSession>
            </doService>
            <doService service="交通費精算書編集">
                <inputServiceSession>
                    <inputValue item="費用計上年月"/>
                    <inputValue item="会計部門No"/>
                    <inputValue item="交通費精算書"/>
                </inputServiceSession>
                <outputServiceSession>
                    <outputValue item="交通費精算書"/>
                </outputServiceSession>
            </doService>
        </action>
        <!--==========================================================
        == 画面上で行われた編集をロールバックするアクション
        ===========================================================-->
        <action id="編集キャンセル">
            <undo item="交通費精算書"/>
        </action>
        <!--======================================================
        == Sheet部の保存(確定、コミット)を行うアクション
        =======================================================-->
        <action id="保存">
            <doService service="交通費精算書保存">
                <inputServiceSession>
                    <inputValue key="ACPY.S_ACPY_001_01.交通費精算書" item="交通費精算書"/>
                    <inputValue item="ログイン利用者情報"/>
                </inputServiceSession>
            </doService>
        </action>
        <!--======================================================
        == 部門コード入力を契機とする会計部門の検索アクション
        =======================================================-->
        <action id="会計部門検索">
            <doService service="会計部門検索">
                <inputServiceSession>
                    <inputValue item="会計部門コード"/>
                </inputServiceSession>
                <outputServiceSession>
                    <outputValue item="会計部門"/>
                </outputServiceSession>
            </doService>
        </action>
    </action-list>
<!--==============================================================
==  コンテントの遷移先リスト
==  (この情報はコンテントカタログ間の関連定義であり、実行時には参照されません)
===============================================================-->
    <transition-list>
    </transition-list>
<!--==============================================================
==  ファイル編集情報
===============================================================-->
    <status>
        <author></author>
        <datetime></datetime>
        <version></version>
    </status>
</client-content>


Edit(Sheet部)のContent定義解説

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

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

item定義

Sheet部に対応する"edit"のContentで定義されるitemには、主に以下のような項目があります。

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


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

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

<!--======================================================
== データモデル
=======================================================-->
<item id="選択申請書" access="hidden" type="model">
    <description>一覧画面で選択中の申請書(=交通費精算書)</description>
</item>
<item id="交通費精算書" access="hidden" type="model">
    <description>交通費精算書のUpdatable</description>
</item>
<item id="申請書情報" access="hidden" type="model">
    <description>申請書情報を表示するContentへ渡すデータモデル(=交通費精算書)</description>
</item>
<item id="会計部門" access="hidden" type="model" scope="local">
    <description>会計部門マスタの検索結果データモデル</description>
</item>
<item id="ログイン利用者情報" access="hidden" type="model" scope="global">
    <description>ログイン時に取得したユーザー情報</description>
</item>


画面で入力する設定項目は、画面上に入力フィールドが用意されている分だけそのまま項目が定義されています。
"会計部門コード"では、triggerタグによって、この値が入力されたことを契機として"会計部門検索"actionを実行するように定義されています。 これは値の入力を契機としてContentのactionを実行したい場合の定義例です。
"支払額"は、画面下部に表示のみ行うフィールドが用意されているので、access="output"の項目として定義しています。

<!--======================================================
== 画面上の入出力項目
=======================================================-->
<item id="費用計上年月" access="inout" type="value">
    <load from="observable:交通費精算書/費用計上年月"/>
    <description>交通費精算書の費用計上年月</description>
</item>
<item id="会計部門コード" access="inout" type="value">
    <load from="observable:交通費精算書/会計部門No/会計部門コード"/>
    <trigger action="会計部門検索"/>
    <description>交通費精算書の会計部門コード</description>
</item>
<item id="支払額" access="output" type="value">
    <load from="observable:交通費精算書/支払額"/>
    <description>交通費精算書の支払額</description>
</item>


最後に、隠し項目として"会計部門No"が定義されています。
これは、画面上で入力された"会計部門コード"を検索条件として検索した"会計部門"データモデルのNoです。
この例では、この項目はSheet部の編集サービスに渡すパラメータとして使用されます。

<!--======================================================
== 隠し項目
=======================================================-->
<item id="会計部門No" access="hidden" type="value">
    <load from="observable:会計部門/会計部門No"/>
    <load from="observable:交通費精算書/会計部門No"/>
    <description>交通費精算書の会計部門No</description>
</item>


action定義

Sheet部に対応する"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は、画面上で保存ボタンが押されたときに呼び出されます。
画面上の各入力フィールドに入力された項目をパラメータとして、入力値チェックのサービスを呼び出しています。 もしこのサービスでなんらかのチェックに引っかかった場合はメッセージダイアログが表示され、その時点で処理が中断されます。

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

<!--======================================================
== Sheet部の編集を行うアクション
=======================================================-->
<action id="編集">
    <doService service="交通費精算書の入力値チェックを行う">
        <inputServiceSession>
            <inputValue item="費用計上年月"/>
            <inputValue item="会計部門No"/>
        </inputServiceSession>
    </doService>
    <doService service="交通費精算書編集">
        <inputServiceSession>
            <inputValue item="費用計上年月"/>
            <inputValue item="会計部門No"/>
            <inputValue item="交通費精算書"/>
        </inputServiceSession>
        <outputServiceSession>
            <outputValue item="交通費精算書"/>
        </outputServiceSession>
    </doService>
</action>


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

<!--==========================================================
== 画面上で行われた編集をロールバックする
===========================================================-->
<action id="編集キャンセル">
    <undo item="交通費精算書"/>
</action>


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

<!--======================================================
== Sheet部の保存(確定、コミット)を行うアクション
=======================================================-->
<action id="保存">
    <doService service="交通費精算書保存">
        <inputServiceSession>
            <inputValue key="ACPY.S_ACPY_001_01.交通費精算書" item="交通費精算書"/>
            <inputValue item="ログイン利用者情報"/>
        </inputServiceSession>
    </doService>
</action>


最後に、"会計部門検索"actionが定義されています。
これは、"会計部門コード"の入力をトリガとして実行されるactionで、会計部門コードを検索条件として会計部門マスタを検索しています。 検索結果は"会計部門"に格納されます。

<!--======================================================
== 部門コード入力を契機とする会計部門の検索アクション
=======================================================-->
<action id="会計部門検索">
    <doService service="会計部門検索">
        <inputServiceSession>
            <inputValue item="会計部門コード"/>
        </inputServiceSession>
        <outputServiceSession>
            <outputValue item="会計部門"/>
        </outputServiceSession>
    </doService>
</action>



EditList(Meisai部)の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_331_02_EditList"
              name="交通費精算書の明細を一覧表示して選択する"
              stereotype="editlist"/>
<!--==============================================================
==  コンテントの詳細説明
===============================================================-->
    <description>
        交通費交通費精算書の明細を一覧表示、選択するEditListコンテントです。
    </description>
<!--==============================================================
==  リンクするSVOステートメントの宣言
===============================================================-->
    <reference-list>
        <statement ref="ACPY_331" process="交通費精算書を入力する"/>
        <statement ref="ACPY_334" process="交通費精算書を参照する"/>
        <statement ref="ACPY_335" process="交通費精算書を修正する"/>
    </reference-list>
<!--==============================================================
==  コンテントで参照する項目の宣言
===============================================================-->
    <item-list>
        <!--======================================================
        == データモデル
        =======================================================-->
        <item id="交通費精算書" access="hidden" type="model">
            <description>交通費精算書のUpdatable</description>
        </item>
        <item id="交通費精算書明細" access="hidden" type="model">
            <description>交通費精算書明細のUpdatable</description>
        </item>
        <item id="交通費精算書明細一覧" access="output" type="models">
            <load from="observable:交通費精算書/交通費精算書明細[RemovedFlag = NOT_REMOVED]"/>
            <description>未申請申請書の検索結果</description>
        </item>
        <item id="選択交通費精算書明細" access="input" type="model">
            <description>EditList上で単一選択された明細部</description>
        </item>
    </item-list>

<!--==============================================================
==  コンテントアクション
===============================================================-->
    <action-list>
        <!--======================================================
        == 交通費精算書の明細を複写
        =======================================================-->
        <action id="複写">
            <doService service="交通費精算書明細複写作成">
                <inputServiceSession>
                    <inputValue item="選択交通費精算書明細" key="複写元交通費精算書明細"/>
                </inputServiceSession>
                <outputServiceSession>
                    <outputValue item="交通費精算書明細" key="複写先交通費精算書明細"/>
                </outputServiceSession>
            </doService>
        </action>
        <!--======================================================
        == 交通費精算書の明細を削除
        =======================================================-->
        <action id="削除">
            <doService service="交通費精算書明細削除">
                <inputServiceSession>
                    <inputValue item="交通費精算書"/>
                    <inputValue item="選択交通費精算書明細"/>
                </inputServiceSession>
                <outputServiceSession>
                    <outputValue item="交通費精算書"/>
                </outputServiceSession>
            </doService>
        </action>
    </action-list>
<!--==============================================================
==  コンテントの遷移先リスト
==  (この情報はコンテントカタログ間の関連定義であり、実行時には参照されません)
===============================================================-->
    <transition-list>
    </transition-list>
<!--==============================================================
==  ファイル編集情報
===============================================================-->
    <status>
        <author></author>
        <datetime></datetime>
        <version></version>
    </status>
</client-content>


EditList(Meisai部)のContent定義解説

Meisai部の一覧表示および選択を行うeditlistのContentは、基本的に以下のような機能を持ちます。

  • editのContentから引き継ぐSheet部データモデルをContent項目として持つ
  • Sheet部データモデルから取得できるMeisai部一覧をContent項目として持つ
  • ユーザ操作によってどのレコードが現在選択されているかを保持する
  • 選択されているレコードの内容をパラメータとしてサービスを呼び出す(Meisai部の削除、複写など)
上記を実現するための記述内容を、item及びactionの定義内容としてそれぞれ解説します。

item定義

Meisai部に対応する"editlist"のContentで定義されるitemには、主に以下のような項目があります。

  • editのContentから引き継いだSheet部データモデル
  • Sheet部データモデルから取得できるMeisai部一覧
  • 画面の一覧上で選択中のMeisai部データモデル

サンプルのContent定義では、 Sheet部データモデルとして"交通費精算書"、 Meisai部のEdit Contentと共有するためのMeisai部データモデルとして"交通費精算書明細"、 Meisai部一覧として"交通費精算書明細一覧"、 画面の一覧上で選択中のMeisai部データモデルとして"選択交通費精算書明細"が定義されています。

<!--======================================================
== データモデル
=======================================================-->
<item id="交通費精算書" access="hidden" type="model">
    <description>交通費精算書のUpdatable</description>
</item>
<item id="交通費精算書明細" access="hidden" type="model">
    <description>交通費精算書明細のUpdatable</description>
</item>
<item id="交通費精算書明細一覧" access="output" type="models">
    <load from="observable:交通費精算書/交通費精算書明細[RemovedFlag = NOT_REMOVED]"/>
    <description>未申請申請書の検索結果</description>
</item>
<item id="選択交通費精算書明細" access="input" type="model">
    <description>EditList上で単一選択された明細部</description>
</item>

このうち、"交通費精算書明細一覧"の記述に注意してください。
loadタグを使用して、明細一覧の取得元を指定しています。Sheet部に含まれる現象型"交通費精算書明細"を指定し、さらに条件を指定しています。 この例では、交通費精算書明細に含まれる"RemovedFalg"という現象型の値がNOT_REMOVEDの物を取得するように指定されています。 これは、明細部の任意のレコードを削除する処理(サービス)で、交通費精算書明細のRemovedFlagがREMOVEDに設定されるためです。 画面の一覧上に表示したいデータはRemovedFlagがNOT_REMOVEDであるものとしたいので、このような指定がされています。


action定義

Sheet部に対応する"editlist"のContentで定義されるactionには、主に以下のものがあります。

  • 画面の一覧上で選択中のMeisai部に対して処理を行うサービスの呼び出し
サンプルのContent定義では、ます画面の一覧上で選択中のMeisaiデータモデル(選択交通費精算書明細)の"複写"を行うactionが定義されています。 選択中のMeisai部データモデルをパラメータとして複写サービスを呼び出して、サービスから返された複写された新しい交通費精算書明細を受け取っています。 ここで受け取った交通費精算書明細は、この後で解説するMeisai部のEdit Contentと共有されるContent項目となります。
<!--======================================================
== 交通費精算書の明細を複写
=======================================================-->
<action id="複写">
    <doService service="交通費精算書明細複写作成">
        <inputServiceSession>
            <inputValue item="選択交通費精算書明細" key="複写元交通費精算書明細"/>
        </inputServiceSession>
        <outputServiceSession>
            <outputValue item="交通費精算書明細" key="複写先交通費精算書明細"/>
        </outputServiceSession>
    </doService>
</action>

また、"削除"を行うactionが定義されています。 選択中のMeisai部データモデル(選択交通費精算書明細)と、Sheet部のデータモデル(交通費精算書)をパラメータとして削除サービスを呼び出しています。 そして、サービスから返されたSheet部のデータモデル(交通費精算書)を受け取っています。

<!--======================================================
== 交通費精算書の明細を削除
=======================================================-->
<action id="削除">
    <doService service="交通費精算書明細削除">
        <inputServiceSession>
            <inputValue item="交通費精算書"/>
            <inputValue item="選択交通費精算書明細"/>
        </inputServiceSession>
        <outputServiceSession>
            <outputValue item="交通費精算書"/>
        </outputServiceSession>
    </doService>
</action>



Edit(Meisai部)の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_331_03_Edit"
              name="交通費精算書の明細を編集する"
              stereotype="edit"/>
<!--==============================================================
==  コンテントの詳細説明
===============================================================-->
    <description>
        交通費精算書の明細を編集するEditコンテントです。
    </description>
<!--==============================================================
==  リンクするSVOステートメントの宣言
===============================================================-->
    <reference-list>
        <statement ref="ACPY_331" process="交通費精算書を入力する"/>
        <statement ref="ACPY_334" process="交通費精算書を参照する"/>
        <statement ref="ACPY_335" process="交通費精算書を修正する"/>
    </reference-list>
<!--==============================================================
==  コンテントで参照する項目の宣言
===============================================================-->
    <item-list>
        <!--======================================================
        == データモデル
        =======================================================-->
        <item id="交通費精算書" access="hidden" type="model">
            <description>交通費精算書のデータモデル</description>
        </item>
        <item id="交通費精算書明細" access="hidden" type="model">
            <description>EditList上で単一選択された明細部</description>
        </item>
        <item id="選択交通費精算書明細" access="input" type="model">
            <description>EditList上で単一選択された明細部</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  id="出発地" access="inout" type="value">
            <load from="observable:交通費精算書明細/出発地"/>
            <description>交通費精算書明細の出発地です</description>
        </item>
        <item  id="到着地" access="inout" type="value">
            <load from="observable:交通費精算書明細/到着地"/>
            <description>交通費精算書明細の到着地です</description>
        </item>
        <item  id="往復種別" access="inout" type="value">
            <load from="observable:交通費精算書明細/往復種別"/>
            <load from="ptype:往復種別/往復"/>
            <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  id="領収書番号" access="inout" type="value">
            <load from="observable:交通費精算書明細/領収書番号"/>
            <description>交通費精算書明細の領収書番号です</description>
        </item>
    </item-list>
<!--==============================================================
==  コンテントアクション
===============================================================-->
    <action-list>
        <!--======================================================
        == 画面上で明細の追加を実行した場合のアクション
        =======================================================-->
        <action id="新規作成">
            <doService service="交通費精算書明細新規作成">
                <inputServiceSession>
                </inputServiceSession>
                <outputServiceSession>
                    <outputValue item="交通費精算書明細"/>
                </outputServiceSession>
            </doService>
        </action>
        <!--======================================================
        == 画面上で一覧から選択した明細の編集を開始した場合のアクション
        =======================================================-->
        <action id="引継">
            <set item="交通費精算書明細" value="item:選択交通費精算書明細"/>
        </action>
        <!--======================================================
        == 画面上で保存を行った場合のアクション
        =======================================================-->
        <action id="編集">
            <doService service="交通費精算書明細の入力値をチェックする">
                <inputServiceSession>
                    <inputValue item="使用日"/>
                    <inputValue item="行き先"/>
                    <inputValue item="乗り物種別"/>
                    <inputValue item="出発地"/>
                    <inputValue item="到着地"/>
                    <inputValue item="往復種別"/>
                    <inputValue item="申請額"/>
                    <inputValue item="備考"/>
                    <inputValue item="領収書番号"/>
                </inputServiceSession>
            </doService>
            <doService service="交通費精算書明細編集">
                <inputServiceSession>
                    <inputValue item="使用日"/>
                    <inputValue item="行き先"/>
                    <inputValue item="乗り物種別"/>
                    <inputValue item="出発地"/>
                    <inputValue item="到着地"/>
                    <inputValue item="往復種別"/>
                    <inputValue item="申請額"/>
                    <inputValue item="備考"/>
                    <inputValue item="領収書番号"/>
                    <inputValue item="交通費精算書"/>
                    <inputValue item="交通費精算書明細"/>
                </inputServiceSession>
                <outputServiceSession>
                    <outputValue item="交通費精算書"/>
                </outputServiceSession>
            </doService>
        </action>
        <!--======================================================
        == 画面上でキャンセルした場合のアクション
        =======================================================-->
        <action id="クリア">
            <removeValues>
                <remove item="使用日"/>
                <remove item="行き先"/>
                <remove item="乗り物種別"/>
                <remove item="出発地"/>
                <remove item="到着地"/>
                <remove item="往復種別"/>
                <remove item="申請額"/>
                <remove item="備考"/>
                <remove item="領収書番号"/>
            </removeValues>
        </action>
    </action-list>
<!--==============================================================
==  コンテントの遷移先リスト
==  (この情報はコンテントカタログ間の関連定義であり、実行時には参照されません)
===============================================================-->
    <transition-list>
    </transition-list>
<!--==============================================================
==  ファイル編集情報
===============================================================-->
    <status>
        <author></author>
        <datetime></datetime>
        <version></version>
    </status>
</client-content>


Edit(Meisai部)のContent定義解説

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

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

item定義

Meisai部に対応する"edit"のContentで定義されるitemには、主に以下のような項目があります。

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


サンプルのContent定義では、データモデルとしては Sheet部データモデルとして"交通費精算書", editlistのContentから引き継いだ、一覧で選択中のMeisai部データモデルとして"選択交通費精算書明細", 編集対象のMeisai部データモデルである"交通費精算書明細"が定義されています。

<!--======================================================
== データモデル
=======================================================-->
<item id="交通費精算書" access="hidden" type="model">
    <description>交通費精算書のデータモデル</description>
</item>
<item id="交通費精算書明細" access="hidden" type="model">
    <description>EditList上で単一選択された明細部</description>
</item>
<item id="選択交通費精算書明細" access="input" type="model">
    <description>EditList上で単一選択された明細部</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  id="出発地" access="inout" type="value">
    <load from="observable:交通費精算書明細/出発地"/>
    <description>交通費精算書明細の出発地です</description>
</item>
<item  id="到着地" access="inout" type="value">
    <load from="observable:交通費精算書明細/到着地"/>
    <description>交通費精算書明細の到着地です</description>
</item>
<item  id="往復種別" access="inout" type="value">
    <load from="observable:交通費精算書明細/往復種別"/>
    <load from="ptype:往復種別/往復"/>
    <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  id="領収書番号" access="inout" type="value">
    <load from="observable:交通費精算書明細/領収書番号"/>
    <description>交通費精算書明細の領収書番号です</description>
</item>


action定義

Meisai部に対応する"edit"のContentで定義されるactionには、主に以下のものがあります。

  • 画面が取り扱うMeisai部データモデルの初期化(新規作成、複写作成、一覧からの引き継ぎ)を行うaction
  • Meisai部データモデルの編集サービスを呼び出すaction
  • Meisai部データモデルに対する設定項目をクリアaction
Meisai部のデータモデルを取り扱う場合、一旦メモリ上で編集処理を行った後にSheet部のデータモデルに対してMeisai部を反映する(追加か置き換え)という処理をサービス側で行います。 この処理はデータベースに対してのコミットは行わないままメモリ上だけで全て処理する必要があるので、このContentではデータモデルの確定を行うサービスは呼び出しません。 Meisai部の確定処理はSheet部の確定処理を行うサービスの中で一緒に行われます。


"新規作成"actionは、画面上の行追加ボタン押下時の実行commandから呼び出されます。
データモデルの新規作成サービスを呼び出し、空のデータモデルを取得して"交通費精算書明細"に格納しています。

<!--======================================================
== 画面上で明細の追加を実行した場合のアクション
=======================================================-->
<action id="新規作成">
    <doService service="交通費精算書明細新規作成">
        <inputServiceSession>
        </inputServiceSession>
        <outputServiceSession>
            <outputValue item="交通費精算書明細"/>
        </outputServiceSession>
    </doService>
</action>


"引継"actionは、画面上の行編集ボタン押下時の実行commandから呼び出されます。
editlistのContentから引き継いだ"選択交通費精算書明細""交通費精算書明細"にそのまま格納しています。

<!--======================================================
== 画面上で一覧から選択した明細の編集を開始した場合のアクション
=======================================================-->
<action id="引継">
    <set item="交通費精算書明細" value="item:選択交通費精算書明細"/>
</action>


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

もし何もチェックに引っかからなかった場合は、続けてデータモデルの編集サービスを呼び出しています。
パラメータとして、画面上の各入力フィールドに入力された項目、Sheet部データモデル、Meisai部データモデルを渡しています。 これにより、Meisai部データモデルに対して各項目が設定された後、Sheet部に対してMeisai部の反映がサービス内で行われます。
サービスからはSheet部のデータモデルが返されるので、それを"交通費精算書"に格納しています。

<!--======================================================
== 画面上で保存を行った場合のアクション
=======================================================-->
<action id="編集">
    <doService service="交通費精算書明細の入力値チェックを行う">
        <inputServiceSession>
            <inputValue item="使用日"/>
            <inputValue item="行き先"/>
            <inputValue item="乗り物種別"/>
            <inputValue item="出発地"/>
            <inputValue item="到着地"/>
            <inputValue item="往復種別"/>
            <inputValue item="申請額"/>
            <inputValue item="備考"/>
            <inputValue item="領収書番号"/>
        </inputServiceSession>
    </doService>
    <doService service="交通費精算書明細編集">
        <inputServiceSession>
            <inputValue item="使用日"/>
            <inputValue item="行き先"/>
            <inputValue item="乗り物種別"/>
            <inputValue item="出発地"/>
            <inputValue item="到着地"/>
            <inputValue item="往復種別"/>
            <inputValue item="申請額"/>
            <inputValue item="備考"/>
            <inputValue item="領収書番号"/>
            <inputValue item="交通費精算書"/>
            <inputValue item="交通費精算書明細"/>
        </inputServiceSession>
        <outputServiceSession>
            <outputValue item="交通費精算書"/>
        </outputServiceSession>
    </doService>
</action>


"クリア"actionは、画面上のキャンセルボタン押下時の実行command等から呼び出されます。
Meisai部の入力を取り消す場合や、選択行を変更した場合などで表示内容を一旦クリアするような場合に呼び出されます。
ここではAction命令のremoveValues命令を使用しています。 この命令を使用すると、removeタグで指定したContent項目をクリアした上で画面更新イベントを1回画面に対して発行します。 removeValuesタグではなくremoveタグを単独で使用すると、removeタグ一つに付き1回、画面に対して更新イベントが発行されるので、 数が多くなるととパフォーマンスに影響します。なるべくremoveValues命令を使用して更新イベントの回数を減らすようにしてください。

<!--======================================================
== 画面上でキャンセルした場合のアクション
=======================================================-->
<action id="クリア">
    <removeValues>
        <remove item="使用日"/>
        <remove item="行き先"/>
        <remove item="乗り物種別"/>
        <remove item="出発地"/>
        <remove item="到着地"/>
        <remove item="往復種別"/>
        <remove item="申請額"/>
        <remove item="備考"/>
        <remove item="領収書番号"/>
    </removeValues>
</action>



Area定義サンプル
<?xml version="1.0" encoding="Windows-31J"?>
<!--
 - Copyright
 -->
<!DOCTYPE client-area SYSTEM "../doctype/client-area.dtd">
<!--==============================================================
 == Current-Module:
 == Release-Date:
 == Release-Version:
 == First-Created-On:
 == First-Created-By:
 == Copy-Right-Owner:
 ==============================================================-->
<client-area>
    <!-- エリア属性値 -->
    <identity id="CA_WKFL_004_01"
              name="交通費申請書"/>

    <!-- 詳細説明 -->
    <description>
        SVOステートメント:ACPY_331,ACPY_334,ACPY_335,ACPY_337,ACPY_339
        交通費申請書の新規作成、参照、修正、再作成を行います。
    </description>

<!--==============================================================
  ==  参照するコンテンツの宣言
  ==============================================================-->
    <reference-list>
        <area ref="CA_COMM_001_01_ApplicantInfoInput"/>
        <content ref="CC_ACPY_331_01_Edit"/>
        <content ref="CC_ACPY_331_02_EditList"/>
        <content ref="CC_ACPY_331_03_Edit"/>
    </reference-list>
<!--==============================================================
  ==  表示レイアウト情報
  ==============================================================-->
    <layout ref="PanelLayout">
        <gui implement="imeg.client.view.rich.area.wkfl.WKFL_004_TravelExpensePaymentEditListPanel"/>
        <area-mapping>
            <area location="SUB_PANEL[申請情報共有パネル]" ref="CA_COMM_001_01_ApplicantInfoInput"/>
        </area-mapping>
   </layout>
<!--==============================================================
  ==  コンポーネントマッピング
  ==============================================================-->
    <component-mapping>
        <!--======================================================
        == 画面上部のタイトル、ボタン
        =======================================================-->
        <Label id="タイトルラベル" text="交通費申請書"/>
        <Button id="保存ボタン" text="保存" onClick="交通費精算書保存"
                 visible="filter:[page:context != 参照]"/>
        <Button id="閉じるボタン" text="閉じる" onClick="終了"/>
        <!--======================================================
        == 交通費精算書 Edit
        =======================================================-->
        <TextField id="計上月テキストフィールド"
                    text="content:CC_ACPY_331_01_Edit/費用計上年月"
                    available="明細行編集状態"/>
        <TextField id="計上部門テキストフィールド"
                    text="content:CC_ACPY_331_01_Edit/会計部門コード"/
                    available="明細行編集状態">
        <Label id="支払額ラベルラベル" text="content:CC_ACPY_331_01_Edit/支払額"/>
        <!--======================================================
        == 交通費精算書明細 Edit
        =======================================================-->
        <TextField id="使用日テキストフィールド"
                    text="content:CC_ACPY_331_03_Edit/使用日"
                    available="明細行編集状態"/>
        <TextField id="行先テキストフィールド"
                    text="content:CC_ACPY_331_03_Edit/行き先"
                    available="明細行編集状態"/>
        <ComboBox id="乗物コンボボックス"
                    selectedItem="content:CC_ACPY_331_03_Edit/乗り物種別"
                    available="明細行編集状態">
            <ComboBoxModel>
                <PhenomenonComboValue items="ptype:乗り物種別/definedValues"/>
            </ComboBoxModel>
        </ComboBox>
        <TextField id="移動時刻発テキストフィールド"
                    text="content:CC_ACPY_331_03_Edit/出発地"
                    available="明細行編集状態"/>
        <TextField id="移動時刻着テキストフィールド"
                    text="content:CC_ACPY_331_03_Edit/到着地"
                    available="明細行編集状態"/>
        <RadioButtonGroup id="往復種別ラジオボタングループ"
                    selectedItem="content:CC_ACPY_331_03_Edit/往復種別"
                    available="明細行編集状態">
            <RadioButton id="往復ラジオボタン" on="ptype:往復種別/往復"/>
            <RadioButton id="片道ラジオボタン" on="ptype:往復種別/片道"/>
        </RadioButtonGroup>
        <TextField id="申請額テキストフィールド"
                    text="content:CC_ACPY_331_03_Edit/申請額"
                    available="明細行編集状態"/>
        <TextField id="領収書Noテキストフィールド"
                    text="content:CC_ACPY_331_03_Edit/領収書番号"
                    available="明細行編集状態"/>
        <TextArea id="備考テキストエリア"
                    text="content:CC_ACPY_331_03_Edit/備考"
                    available="明細行編集状態"/>
        <Button id="OKボタン" text="OK" onClick="明細編集"/>
        <Button id="キャンセルボタン" text="キャンセル" onClick="明細編集キャンセル"/>
        <!--======================================================
        == 交通費精算書明細 EditList
        =======================================================-->
        <Table id="明細テーブル" selectMode="single" onClick="明細行選択" controlSelection="true"
            selectedRow="content:CC_ACPY_331_02_EditList/選択交通費精算書明細">
            <TableModel rows="content:CC_ACPY_331_02_EditList/交通費精算書明細一覧">
                <TableColumn header="使用日" ptype="使用日"/>
                <TableColumn header="行先" ptype="行き先"/>
                <TableColumn header="乗物" ptype="乗り物種別"/>
                <TableColumn header="発" ptype="出発地"/>
                <TableColumn header="着" ptype="到着地"/>
                <TableColumn header="往復/片道" ptype="往復種別"/>
                <TableColumn header="金額" ptype="申請額"/>
                <TableColumn header="領収書No" ptype="領収書番号"/>
                <TableColumn header="備考" ptype="備考"/>
            </TableModel>
        </Table>
        <Button id="行追加ボタン" text="行追加" onClick="行追加"/>
        <Button id="行複写ボタン" text="行複写" onClick="行複写"/>
        <Button id="行編集ボタン" text="行編集" onClick="行編集"/>
        <Button id="行削除ボタン" text="行削除" onClick="行削除"/>
    </component-mapping>
<!--==============================================================
  ==  状態遷移表
  ==============================================================-->
    <statechart>
        <state name="NORMAL">
            <event name="交通費精算書保存" command="保存"/>
            <event name="明細行選択" command="明細行選択"/>
            <event name="行追加" command="行追加"/>
        </state>
        <state name="明細行選択状態">
            <event name="交通費精算書保存" command="保存"/>
            <event name="明細行選択" command="明細行選択"/>
            <event name="行追加" command="行追加"/>
            <event name="行複写" command="行複写"/>
            <event name="行編集" command="行編集"/>
            <event name="行削除" command="行削除"/>
        </state>
        <state name="明細行編集状態">
            <event name="明細行選択" command="明細行選択"/>
            <event name="明細編集" command="明細編集"/>
            <event name="明細編集キャンセル" command="明細編集キャンセル"/>
        </state>
        <state name="編集不可状態">
            <event name="明細行選択" command="明細行選択"/>
        </state>
    </statechart>
<!--==============================================================
  ==  コマンド定義
  ==============================================================-->
    <command-list>
        <!--======================================================
        == 画面起動時の初期化処理コマンド
        =======================================================-->
        <command id="INIT">
            <switch condition="page:context">
                <case value="新規作成">
                    <doAction content="CC_ACPY_331_01_Edit" action="新規作成"/>
                </case>
                <case value="複写作成">
                    <doAction content="CC_ACPY_331_01_Edit" action="複写作成"/>
                    <return nextstate="明細行選択状態">
                </case>
                <case value="修正">
                    <doAction content="CC_ACPY_331_01_Edit" action="引継"/>
                    <return nextstate="明細行選択状態">
                </case>
                <case value="参照">
                    <doAction content="CC_ACPY_331_01_Edit" action="引継"/>
                    <return nextstate="編集不可状態">
                </case>
            </switch>
        </command>
        <!--======================================================
        == 保存ボタン押下時の実行処理コマンド
        =======================================================-->
        <command id="保存">
            <showConfirmDialog message="保存します。よろしいですか?">
                <ok>
                    <doAction content="CC_ACPY_331_01_Edit" action="編集"/>
                    <doAction content="CC_ACPY_331_01_Edit" action="保存"/>
                </ok>
            </showConfirmDialog>
            <closeContext />
        </command>
        <!--======================================================
        == 終了コマンド
        == 処理内容 : 参照モード以外の場合は終了確認を行ってから画面を閉じる
        =======================================================-->
        <command id="CLOSE">
            <!-- 参照画面の場合素直に閉じる -->
            <switch condition="page:context">
                <case value="参照">
                    <closeContext/>
                </case>
                <default>
                    <showConfirmDialog message="message:CM_COMM_Info/編集画面終了">
                        <ok>
                            <doAction action="編集キャンセル" content="CC_ACPY_331_01_Edit"/>
                            <closeContext/>
                        </ok>
                        <cancel>
                            <!-- キャンセルの場合は何もしない -->
                        </cancel>
                    </showConfirmDialog>
                </default>
            </switch>
        </command>
        <!--======================================================
        == 一覧から明細を選択した時の実行処理コマンド
        =======================================================-->
        <command id="明細行選択">
            <doAction content="CC_ACPY_331_03_Edit" action="クリア"/>
            <doAction content="CC_ACPY_331_03_Edit" action="引継"/>
            <return nextstate="明細行選択状態"/>
        </command>
        <!--======================================================
        == 行追加ボタン押下時の実行処理コマンド
        =======================================================-->
        <command id="行追加">
            <doAction content="CC_ACPY_331_03_Edit" action="クリア"/>
            <doAction content="CC_ACPY_331_03_Edit" action="新規作成"/>
            <return nextstate="明細行編集状態"/>
        </command>
        <!--======================================================
        == 行複写ボタン押下時の実行処理コマンド
        =======================================================-->
        <command id="行複写">
            <doAction content="CC_ACPY_331_02_EditList" action="複写"/>
        </command>
        <!--======================================================
        == 行編集ボタン押下時の実行処理コマンド
        =======================================================-->
        <command id="行編集">
            <doAction content="CC_ACPY_331_03_Edit" action="引継"/>
            <return nextstate="明細行編集状態"/>
        </command>
        <!--======================================================
        == 行削除ボタン押下時の実行処理コマンド
        =======================================================-->
        <command id="行削除">
            <doAction content="CC_ACPY_331_02_EditList" action="削除"/>
            <if condition="filter:[content:CC_ACPY_331_02_EditList/交通費精算書明細一覧 is empty]">
                <true>
                    <doAction content="CC_ACPY_331_03_Edit" action="クリア"/>
                </true>
            </if>
       </command>
        <!--======================================================
        == OKボタン押下時の実行処理コマンド
        =======================================================-->
        <command id="明細編集">
            <doAction content="CC_ACPY_331_03_Edit" action="編集"/>
            <return nextstate="明細行選択状態"/>
        </command>
        <!--======================================================
        == キャンセルボタン押下時の実行処理コマンド
        =======================================================-->
        <command id="明細編集キャンセル">
            <showConfirmDialog message="編集内容を破棄します。よろしいですか?">
                <ok>
                    <doAction content="CC_ACPY_331_03_Edit" action="クリア"/>
                    <doAction content="CC_ACPY_331_03_Edit" action="引継"/>
                    <return nextstate="明細行選択状態"/>
                </ok>
            </showConfirmDialog>
        </command>
    </command-list>
<!--==============================================================
  ==  ファイル編集情報
  ==============================================================-->
    <status>
        <author></author>
        <datetime></datetime>
        <version></version>
    </status>
</client-area>


Area定義解説

Edit+EditList+Editパターンの画面のArea定義では、以下のようなマッピング及びcommandの記述が必要となります。

  • Sheet部およびMeisai部のeditのContentで定義した各item(データモデルに対する設定項目)と入力フィールドとなる各コンポーネントとのマッピング
  • 一覧表示を行うTableコンポーネントとeditlistのContentで定義したMeisai部一覧のマッピング
  • 初期化時、ボタン押下時のactionの呼び出しをcommandに記述
  • Meisai入力部や各ボタンを制御するための状態遷移表の記述
  • 状態遷移表と各コンポーネントをavailable属性でマッピング
初期化系のactionについては、Page定義に設定されている画面の実行コンテキストを判別して呼び分けている点に注意してください。

また、最後に挙げた状態遷移表関連にも注意してください。
Meisai部の入力エリアは、ユーザ操作の過程で各コンポーネントの有効/無効を細かく制御する必要があります。
このような、オペレーションの過程における細かい状態制御はstatechartタグを使用して状態遷移表を定義して制御します。
状態遷移表では、Areaが取りうる状態と、それぞれの状態で処理することができるイベントの組み合わせから成ります。 状態は各コンポーネントのavailable属性にマッピングされ、処理できるイベントはcommand定義とマッピングされます。
これにより、各コンポーネントの有効/無効と各commandの実行可/不可が制御されます。

statechart定義

サンプルのArea定義では、状態遷移表で状態が3つ定義されています。
最初の"NORMAL"は、フレームワークで規定されているデフォルトの処理状態で、Areaは初期化処理が行われた後に基本的にこの状態に遷移します。 初期化コマンドで別の遷移先状態を指定すれば、画面起動後の遷移先状態を変えることも出来ます。
2つめの"明細行選択状態"は、Meisai部の一覧でいずれかのレコードを選択している状態を表します。 明細行を選択することで初めて行複写や行編集、行削除などが実行できるようにするためにこの状態が定義されています。
3つめの"明細行編集状態"は、行編集や行追加を行っている状態を表しています。 明細編集かキャンセルを行わない限り他の処理を実行できないようにするためにこの状態が定義されています。
4つめの"編集不可状態"は、編集を全く行うことが出来ない状態を表しています。 参照モードで画面が起動した場合などにこの状態に遷移させて、編集に関するイベントを受け取れないようにしています。

<statechart>
    <state name="NORMAL">
        <event name="交通費精算書保存" command="保存"/>
        <event name="明細行選択" command="明細行選択"/>
        <event name="行追加" command="行追加"/>
    </state>
    <state name="明細行選択状態">
        <event name="交通費精算書保存" command="保存"/>
        <event name="明細行選択" command="明細行選択"/>
        <event name="行追加" command="行追加"/>
        <event name="行複写" command="行複写"/>
        <event name="行編集" command="行編集"/>
        <event name="行削除" command="行削除"/>
    </state>
    <state name="明細行編集状態">
        <event name="明細行選択" command="明細行選択"/>
        <event name="明細編集" command="明細編集"/>
        <event name="明細編集キャンセル" command="明細編集キャンセル"/>
    </state>
    <state name="編集不可状態">
        <event name="明細行選択" command="明細行選択"/>
    </state>
</statechart>
この状態遷移表で定義された各状態と実行可能イベントは、component-mapping定義とcommand定義にリンク付けられます。 それぞれの詳細は下記を参照してください。


component-mapping定義

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

  • Sheet部のEdit Content : Sheet入力部の各TextFieldおよび保存ボタン
  • Meisai部のEditList Content : Tableおよび行複写、行削除ボタン
  • Meisai部のEdit Content : Meisai入力部の各フィールドおよびOKボタン、キャンセルボタン
Sheet部およびMeisai部の各入力フィールドは、editのContentの各itemとそのままマッピングされています。
また、各入力フィールドでは、available属性が指定されています。 これにより、コンポーネントが有効になる状態を指定しています。これは状態遷移表とリンクします。
ここでは、明細行編集状態の場合のみ各フィールドが有効になるように指定されています。
<TextField id="使用日テキストフィールド"
            text="content:CC_ACPY_331_03_Edit/使用日"
            available="明細行編集状態"/>
<TextField id="行先テキストフィールド"
            text="content:CC_ACPY_331_03_Edit/行き先"
            available="明細行編集状態"/>
<ComboBox id="乗物コンボボックス"
            selectedItem="content:CC_ACPY_331_03_Edit/乗り物種別"
            available="明細行編集状態">
    <ComboBoxModel>
        <PhenomenonComboValue items="ptype:乗り物種別/definedValues"/>
    </ComboBoxModel>
</ComboBox>


Tableは、一覧表示内容はeditlistのContentの交通費精算書明細一覧にマッピングされ、選択中のレコードが選択交通費精算書明細にマッピングされています。 テーブル上でレコードが選択されたタイミングで"明細行選択"というイベントが発行されるようにonClick属性で指定されています。

また、このパターンでの特徴的な指定として、controlSelection属性があります。これは、テーブルに表示されている明細の内容の増減に合わせて選択行状態を制御するための指定です。 例えば、行が増えた場合は最終行に選択行が移動したり、行の編集が行われた場合は選択行がそのままとなるような制御が行われます。

<Table id="明細テーブル" selectMode="single" onClick="明細行選択" controlSelection="true"
    selectedRow="content:CC_ACPY_331_02_EditList/選択交通費精算書明細">
    <TableModel rows="content:CC_ACPY_331_02_EditList/交通費精算書明細一覧">
        <TableColumn header="使用日" ptype="使用日"/>
        <TableColumn header="行先" ptype="行き先"/>
        <TableColumn header="乗物" ptype="乗り物種別"/>
        <TableColumn header="発" ptype="出発地"/>
        <TableColumn header="着" ptype="到着地"/>
        <TableColumn header="往復/片道" ptype="往復種別"/>
        <TableColumn header="金額" ptype="申請額"/>
        <TableColumn header="領収書No" ptype="領収書番号"/>
        <TableColumn header="備考" ptype="備考"/>
    </TableModel>
</Table>


各Buttonについては、visible属性とonClick属性の記述に注意してください。
保存ボタンではfilter参照を使用して、 ボタンが表示されるかどうかの条件を指定しています。この例では、画面の実行コンテキストを条件として判定しています。

<Button id="保存ボタン" text="保存" onClick="交通費精算書保存"
         visible="filter:[page:context != 参照]"/>


Meisai入力部の横にある行追加、行複写、行編集、行削除、OK、キャンセルの各ボタンでは、onClick属性で指定した発行イベント名が状態遷移表とリンクしています。 現在の状態で有効なイベントがonClick属性で指定されていればボタンが有効になり、無効なイベント名が指定されていればボタンが無効になります。 このように、イベントを発行するようなコンポーネントについてはavailable属性で有効状態を指定しなくても、状態遷移表とリンクして有効/無効の制御が行われます。

<Button id="OKボタン" text="OK" onClick="明細編集"/>
<Button id="キャンセルボタン" text="キャンセル" onClick="明細編集キャンセル"/>
<Button id="行追加ボタン" text="行追加" onClick="行追加"/>
<Button id="行複写ボタン" text="行複写" onClick="行複写"/>
<Button id="行編集ボタン" text="行編集" onClick="行編集"/>
<Button id="行削除ボタン" text="行削除" onClick="行削除"/>

command定義

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

  • 画面の実行コンテキストに応じた初期化処理
  • Sheet部に関する各実行ボタンが押された際の処理
  • 一覧上でMeisaiが選択された際の処理
  • Meisai部に関する各実行ボタンが押された際の処理


サンプルのArea定義では、"INIT"commandが定義されています。
このIDを持つcommandは、画面起動時に自動的に実行されるので、このcommandでeditのContentに定義したデータモデルの初期化を行うactionを呼び出しています。
switch命令を使用して、処理を分岐させていることに注意してください。 判定条件はcondition属性で指定されているpage参照で取得した実行コンテキスト名になっています。 これは、Page定義ファイルのidentityタグのcontext属性値にリンクします。
複写作成、修正、参照の場合には、それぞれでreturn命令を使用して遷移先状態を変えています。 特に参照モードの場合は編集不可状態に画面遷移させて、入力フィールドおよび各ボタンが無効になるようにしています。

<!--======================================================
== 画面起動時の初期化処理コマンド
=======================================================-->
<command id="INIT">
    <switch condition="page:context">
        <case value="新規作成">
            <doAction content="CC_ACPY_331_01_Edit" action="新規作成"/>
        </case>
        <case value="複写作成">
            <doAction content="CC_ACPY_331_01_Edit" action="複写作成"/>
            <return nextstate="明細行選択状態">
        </case>
        <case value="修正">
            <doAction content="CC_ACPY_331_01_Edit" action="引継"/>
            <return nextstate="明細行選択状態">
        </case>
        <case value="参照">
            <doAction content="CC_ACPY_331_01_Edit" action="引継"/>
            <return nextstate="編集不可状態">
        </case>
    </switch>
</command>


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

<!--======================================================
== 保存ボタン押下時の実行処理コマンド
=======================================================-->
<command id="保存">
    <showConfirmDialog message="保存します。よろしいですか?">
        <ok>
            <doAction content="CC_ACPY_331_01_Edit" action="編集"/>
            <doAction content="CC_ACPY_331_01_Edit" action="保存"/>
        </ok>
    </showConfirmDialog>
    <closeContext />
</command>


"CLOSE"commandでは、画面上で閉じるボタンを押下した際の処理を行います。
参照モード以外の場合は、確認ダイアログを表示して画面を閉じて良いかをユーザーに確認しています。
また、参照モードでもそれ以外でも、編集のキャンセルを行うContentアクションを呼び出してから画面を終了しています。

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


"明細選択"commandでは、Meisai部のeditlistのContentで定義した"クリア"、"引継"actionが呼び出されています。
これにより、画面上のMeisai入力部に表示されていた内容が一旦クリアされた上で、明細の一覧で選択されたレコードの内容がMeisai入力部に表示されます。 また、return命令のnextstate属性で遷移先の状態を"明細行選択状態"を指定しています。 これにより、このcommandの実行終了後にAreaの現状態が"明細行選択状態"に遷移します。

<!--======================================================
== 一覧から明細を選択した時の実行処理コマンド
=======================================================-->
<command id="明細行選択">
    <doAction content="CC_ACPY_331_03_Edit" action="クリア"/>
    <doAction content="CC_ACPY_331_03_Edit" action="引継"/>
    <return nextstate="明細行選択状態"/>
</command>


"行追加"commandでは、Meisai部のeditのContentで定義されている"クリア"、"新規作成"actionを呼び出しています。 これにより、画面上のMeisai入力部が一旦クリアされた上でMeisaiデータモデルが新規作成され、その内容でMeisai入力部が初期表示されます。
また、return命令のnextstate属性で遷移先の状態を"明細行編集状態"を指定しています。 これにより、このcommandの実行終了後にAreaの現状態が"通常状態"もしくは"明細行選択状態"から"明細行編集状態"に遷移します。

<!--======================================================
== 行追加ボタン押下時の実行処理コマンド
=======================================================-->
<command id="行追加">
    <doAction content="CC_ACPY_331_03_Edit" action="クリア"/>
    <doAction content="CC_ACPY_331_03_Edit" action="新規作成"/>
    <return nextstate="明細行編集状態"/>
</command>


"行複写"commandでは、Meisai部のeditlsitのContentで定義されている"複写"actionを呼び出しています。 これにより、画面上の一覧で選択中のMeisai部データモデルが複写作成されて一覧に追加されます。

<!--======================================================
== 行複写ボタン押下時の実行処理コマンド
=======================================================-->
<command id="行複写">
    <doAction content="CC_ACPY_331_02_EditList" action="複写"/>
</command>


"行編集"commandでは、Meisai部のeditのContentで定義されている"引継"actionを呼び出しています。 これにより、画面上の一覧で選択中のMeisai部データモデルがMeisai部のeditのContentに引き継がれ、Meisai入力部にその内容が表示されます。
また、return命令のnextstate属性で遷移先の状態を"明細行編集状態"を指定しています。 これにより、このcommandの実行終了後にAreaの現状態が"明細行選択状態"から"明細行編集状態"に遷移します。

<!--======================================================
== 行編集ボタン押下時の実行処理コマンド
=======================================================-->
<command id="行編集">
    <doAction content="CC_ACPY_331_03_Edit" action="引継"/>
    <return nextstate="明細行編集状態"/>
</command>


"行削除"commandでは、Meisai部のeditlsitのContentで定義されている"削除"actionを呼び出しています。 これにより、画面上の一覧で選択中のMeisai部データモデルの削除処理が呼ばれて、一覧から削除されます。
また、削除処理実行後に交通費精算書明細一覧が0件になっているかチェックし、もし明細が全削除されたならクリアアクションを呼び出しています。 これにより、画面上のMeisai入力部に表示されていた内容を初期化しています。

<!--======================================================
== 行削除ボタン押下時の実行処理コマンド
=======================================================-->
<command id="行削除">
    <doAction content="CC_ACPY_331_02_EditList" action="削除"/>
    <if condition="filter:[content:CC_ACPY_331_02_EditList/交通費精算書明細一覧 is empty]">
        <true>
            <doAction content="CC_ACPY_331_03_Edit" action="クリア"/>
        </true>
    </if>
</command>

"明細編集"commandでは、Meisai部のeditのContentで定義されている"編集"actionを呼び出しています。 これにより、画面上のMeisai入力部に入力された項目等をパラメータにしてMeisai部の編集サービスが呼ばれます。 また、return命令のnextstate属性で遷移先の状態を"明細行選択状態"を指定しています。 これにより、このcommandの実行終了後にAreaの現状態が"明細行編集状態"から"明細行選択状態"に遷移します。

<!--======================================================
== OKボタン押下時の実行処理コマンド
=======================================================-->
<command id="明細編集">
    <doAction content="CC_ACPY_331_03_Edit" action="編集"/>
    <return nextstate="明細行選択状態"/>
</command>

"明細編集キャンセル"commandでは、Meisai部のeditのContentで定義されている"クリア"、"引継"actionを呼び出しています。 これにより、画面上のMeisai入力部で入力された項目を一旦クリアし、一覧上で選択されているMeisai部データモデルの内容で再表示します。 また、return命令のnextstate属性で遷移先の状態を"明細行選択状態"を指定しています。 これにより、このcommandの実行終了後にAreaの現状態が"明細行編集状態"から"明細行選択状態"に遷移します。

<!--======================================================
== キャンセルボタン押下時の実行処理コマンド
=======================================================-->
<command id="明細編集キャンセル">
    <showConfirmDialog message="編集内容を破棄します。よろしいですか?">
        <ok>
            <doAction content="CC_ACPY_331_03_Edit" action="クリア"/>
            <doAction content="CC_ACPY_331_03_Edit" action="引継"/>
            <return nextstate="明細行選択状態"/>
        </ok>
    </showConfirmDialog>
</command>



更新情報

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



Copyright © 2006, Atrris Corporation