The PEXA Client - Page Layout

PEXA Clientについて

チュートリアル

定義パターン

定義ファイル

リファレンス

はじめに

BorderLayout

レイアウトデザイン例

ポップアップ画面

ログイン画面

患者一覧ポータル画面

作業ポータル画面

患者詳細画面

はじめに

このドキュメントは、PEXAクライアントフレームワークで使用できる標準のページレイアウトについて解説するものです。
ページレイアウトは、Page定義ファイルのlayoutセクションで指定するもので、Page内のArea配置デザインを表します。

JavaのBorderLayoutに該当する配置を行えるPageLayout定義ファイルがあらかじめ標準で用意されているので、単純なポップアップ画面のPageではそれを使用して下さい。

ポータル画面的なAreaをいくつも組み合わせた複雑なPageを構成したい場合は、PageLayout定義を新規作成してXMLファイル内でデザインを設計することを推奨します。

そうしておけば、Areaの配置場所に論理的な名称を割り当てることが出来るので、後でArea配置デザインの変更を行いたい場合でもPage定義側には変更を加えずにレイアウトのみ変更することが可能になります。 PageLayoutのデザインは、PageLayout定義のlayout-designセクションで記述します。

以下で、標準で用意されるレイアウトについて解説していきます。
また、レイアウトのデザイン例を画面イメージと一緒に挙げておきます。

BorderLayout

定義例 :
<layout ref="BorderLayout">
    <gui width="800" height="500"/>
    <area-mapping>
        <area name="NORTH" ref="CA_XXXX_001"/>
        <area name="SOUTH" ref="CA_XXXX_002"/>
        <area name="EAST" ref="CA_XXXX_003"/>
        <area name="WEST" ref="CA_XXXX_004"/>
        <area name="CENTER" ref="CA_XXXX_005"/>
    </area-mapping>
</layout>
JavaのBorderLayoutを利用するページレイアウトです。
画面の東西南北および中央に対してAreaを配置することができる汎用的なレイアウトとして使用できます。
以下の領域に対してAreaを配置することが出来ます。

NORTH : 画面の上部領域です。

SOUTH : 画面の下部領域です。

EAST : 画面の左側領域です。

WEST : 画面の右側領域です。

CENTER : 画面の中央領域です。

全ての領域が省略可能です。

レイアウトデザイン例

ここでは、実際のプロジェクトで使用されたいくつかのページレイアウト定義を画面イメージと共に掲載しておきます。
新たにPageLayout定義を作成する場合に参考にして下さい。

ポップアップ画面
ログイン画面
患者一覧ポータル画面
作業ポータル画面
患者詳細画面

例：ポップアップ画面

画面イメージ：

解説 :
３つのlocationを持つ単純なポップアップ画面用のページレイアウトです。
Panelをベースに上、中央、下にAreaを配置できるようになっています。

PageLayout定義：

<?xml version="1.0" encoding="Windows-31j"?>
<!--
 - Copyright
 -->
<!DOCTYPE client-pagelayout SYSTEM "../../doctype/client-pagelayout.dtd">
<!--==============================================================
 == Current-Module:   $HeadURL$
 == Release-Date:     $Date:: 2010-03-17 11:56:56 #$
 == Release-Version:  $Revision: 4882 $
 == First-Created-On: 2007/02/10
 == First-Created-By:
 == Copy-Right-Owner:
 ==============================================================-->
<client-pagelayout>
<!--==============================================================
==  識別情報
===============================================================-->
    <identity id="ポップアップ画面"
              name="ポップアップ画面用ページレイアウト"
              implement="pexa.client.std.view.swing.layout.FreeDesignPageLayout"/>
<!--==============================================================
==  詳細説明
===============================================================-->
    <description>
        ポップアップ画面用のページレイアウトについてのメタ情報です。
    </description>
<!--==============================================================
==  ロケーションメタ情報
==============================================================-->
    <location-list>
        <location name="ヘッダー領域" context="combine" required="false">
            <operation add="disable" remove="enable" change="enable"/>
        </location>
        <location name="詳細領域" context="combine" required="true">
            <operation add="disable" remove="enable" change="enable"/>
        </location>
        <location name="フッター領域" context="combine" required="false">
            <operation add="disable" remove="enable" change="enable"/>
        </location>
    </location-list>
<!--==============================================================
==  レイアウトデザイン
==============================================================-->
    <layout-design>
        <!--===============
        ==  ベースパネル
        ================-->
        <Panel>
            <!--=====================
            ==  ベースパネルの上部
            ======================-->
            <NORTH>
                <LayoutLocation ref="ヘッダー領域"/>
            </NORTH>
            <!--=====================
            ==  ベースパネルの中央部
            ======================-->
            <CENTER>
                <LayoutLocation ref="詳細領域"/>
            </CENTER>
            <!--=====================
            ==  ベースパネルの下部
            ======================-->
            <SOUTH>
                <LayoutLocation ref="フッター領域"/>
            </SOUTH>
        </Panel>
    </layout-design>
<!--==============================================================
==  ファイル編集情報
==============================================================-->
    <status>
        <author>$Author: morishita $</author>
        <datetime>$Date:: 2010-03-17 11:56:56 #$</datetime>
        <version>$Revision: 4882 $</version>
    </status>
</client-pagelayout>

例：ログイン画面

画面イメージ：

解説 :
ポップアップ画面と実質的には同じページレイアウトです。
このプロジェクトでは画面構成のタイプ毎にページレイアウトを用意していたので別になっています。
Panelをベースに上、中央、下にAreaを配置できるようになっています。

PageLayout定義：

<?xml version="1.0" encoding="Windows-31j"?>
<!--
 - Copyright
 -->
<!DOCTYPE client-pagelayout SYSTEM "../../doctype/client-pagelayout.dtd">
<!--==============================================================
 == Current-Module:   $HeadURL$
 == Release-Date:     $Date:: 2010-03-17 11:56:56 #$
 == Release-Version:  $Revision: 4882 $
 == First-Created-On: 2007/02/10
 == First-Created-By:
 == Copy-Right-Owner:
 ==============================================================-->
<client-pagelayout>
<!--==============================================================
==  識別情報
===============================================================-->
    <identity id="ログイン画面"
              name="ログイン画面用ページレイアウト"
              implement="pexa.client.std.view.swing.layout.FreeDesignPageLayout"/>
<!--==============================================================
==  詳細説明
===============================================================-->
    <description>
        ログイン画面用のページレイアウトについてのメタ情報です。
    </description>
<!--==============================================================
==  ロケーションメタ情報
==============================================================-->
    <location-list>
        <location name="ヘッダー領域" context="combine" required="false">
            <operation add="disable" remove="disable" change="disable"/>
        </location>
        <location name="ログイン領域" context="combine" required="true">
            <operation add="disable" remove="disable" change="disable"/>
        </location>
        <location name="フッター領域" context="combine" required="false">
            <operation add="disable" remove="disable" change="disable"/>
        </location>
    </location-list>
<!--==============================================================
==  レイアウトデザイン
==============================================================-->
    <layout-design>
        <!--===============
        ==  ベースパネル
        ================-->
        <Panel>
            <!--=====================
            ==  ベースパネルの上部
            ======================-->
            <NORTH>
                <LayoutLocation ref="ヘッダー領域"/>
            </NORTH>
            <!--=====================
            ==  ベースパネルの中央部
            ======================-->
            <CENTER>
                <LayoutLocation ref="ログイン領域"/>
            </CENTER>
            <!--=====================
            ==  ベースパネルの下部
            ======================-->
            <SOUTH>
                <LayoutLocation ref="フッター領域"/>
            </SOUTH>
        </Panel>
    </layout-design>
<!--==============================================================
==  ファイル編集情報
==============================================================-->
    <status>
        <author>$Author: morishita $</author>
        <datetime>$Date:: 2010-03-17 11:56:56 #$</datetime>
        <version>$Revision: 4882 $</version>
    </status>
</client-pagelayout>

例：患者一覧ポータル画面

画面イメージ：

解説 :
少し複雑なレイアウトの例です。
SplitPaneで左右に分かれており、さらに左側の内部にSplitPaneを二重に置いて縦に３分割しています。
なお、ここではタブが使用されていますが、PageLayout上では直接タブは使用できません。タブを使用する場合は中間のAreaを作成して、そこのAreaLayoutにタブエリアを選択して下さい。

PageLayout定義：

<?xml version="1.0" encoding="Windows-31j"?>
<!--
 - Copyright
 -->
<!DOCTYPE client-pagelayout SYSTEM "../../doctype/client-pagelayout.dtd">
<!--==============================================================
 == Current-Module:   $HeadURL$
 == Release-Date:     $Date:: 2010-03-17 11:56:56 #$
 == Release-Version:  $Revision: 4882 $
 == First-Created-On: 2007/02/10
 == First-Created-By:
 == Copy-Right-Owner:
 ==============================================================-->
<client-pagelayout>
<!--==============================================================
==  識別情報
===============================================================-->
    <identity id="一覧ポータル画面"
              name="一覧ポータル画面用ページレイアウト"
              implement="pexa.client.std.view.swing.layout.FreeDesignPageLayout"/>
<!--==============================================================
==  詳細説明
===============================================================-->
    <description>
        検索ポータル画面用のページレイアウトについてのメタ情報です。
    </description>
<!--==============================================================
==  ロケーションメタ情報
==============================================================-->
    <location-list>
        <location name="InfoView" context="combine" required="false">
            <operation add="disable" remove="enable" change="enable"/>
        </location>
        <location name="EventView" context="combine" required="false">
            <operation add="disable" remove="enable" change="enable"/>
        </location>
        <location name="EventSummaryView" context="separate" required="false">
            <operation add="disable" remove="enable" change="enable"/>
        </location>
        <location name="EventConfirmView" context="separate" required="false">
            <operation add="disable" remove="enable" change="enable"/>
        </location>
        <location name="SearchView" context="combine" required="false">
            <operation add="disable" remove="enable" change="enable"/>
        </location>
        <location name="Footer" context="combine" required="false">
            <operation add="disable" remove="enable" change="enable"/>
        </location>
    </location-list>
<!--==============================================================
==  レイアウトデザイン
==============================================================-->
    <layout-design>
        <!--===============
        ==  ベースパネル
        ================-->
        <Panel>
            <!--=====================
            ==  ベースパネルの上部
            ======================-->
            <NORTH>
                <LayoutLocation ref="InfoView"/>
            </NORTH>
            <!--=====================
            ==  ベースパネルの中央部
            ======================-->
            <CENTER>
                <SplitPane resizeWeight="0.0">
                    <!--=====================
                    == 分割領域の左側(Event系)
                    ======================-->
                    <LEFT>
                        <SplitPane resizeWeight="0.0">
                            <!--=====================
                            == 分割領域の上側
                            ======================-->
                            <TOP>
                                <LayoutLocation ref="EventView"/>
                            </TOP>
                            <!--=====================
                            == 分割領域の下側
                            ======================-->
                            <BOTTOM>
                                <SplitPane dividerSize="2">
                                    <!--=====================
                                    == 分割領域の上側
                                    ======================-->
                                    <TOP>
                                        <LayoutLocation ref="EventSummaryView"/>
                                    </TOP>
                                    <!--=====================
                                    == 分割領域の下側
                                    ======================-->
                                    <BOTTOM>
                                        <LayoutLocation ref="EventConfirmView"/>
                                    </BOTTOM>
                                </SplitPane>
                            </BOTTOM>
                        </SplitPane>
                    </LEFT>
                    <!--=====================
                    == 分割領域の右側(検索系)
                    ======================-->
                    <RIGHT>
                        <LayoutLocation ref="SearchView"/>
                    </RIGHT>
                </SplitPane>
            </CENTER>
            <!--=====================
            ==  ベースパネルの下部
            ======================-->
            <SOUTH>
                <LayoutLocation ref="Footer"/>
            </SOUTH>
        </Panel>
    </layout-design>
<!--==============================================================
==  ファイル編集情報
==============================================================-->
    <status>
        <author>$Author: morishita $</author>
        <datetime>$Date:: 2010-03-17 11:56:56 #$</datetime>
        <version>$Revision: 4882 $</version>
    </status>
</client-pagelayout>

例：作業ポータル画面

画面イメージ：

解説 :
今までで一番複雑なレイアウトの例です。
左側は患者一覧ポータル画面と似ていますが、右側が５分割されています。

WorkSummaryViewが上下分割されていますが、これはタブの内部でさらに上下分割しているので、こういう場合は中間エリアを重ねてタブエリアの下にさらに分割エリアを重ねることになります。

PageLayout定義：

<?xml version="1.0" encoding="Windows-31j"?>
<!--
 - Copyright
 -->
<!DOCTYPE client-pagelayout SYSTEM "../../doctype/client-pagelayout.dtd">
<!--==============================================================
 == Current-Module:   $HeadURL$
 == Release-Date:     $Date:: 2010-03-17 11:56:56 #$
 == Release-Version:  $Revision: 4882 $
 == First-Created-On: 2007/02/10
 == First-Created-By:
 == Copy-Right-Owner:
 ==============================================================-->
<client-pagelayout>
<!--==============================================================
==  識別情報
===============================================================-->
    <identity id="作業ポータル画面"
              name="作業ポータル画面用ページレイアウト"
              implement="pexa.client.std.view.swing.layout.FreeDesignPageLayout"/>
<!--==============================================================
==  詳細説明
===============================================================-->
    <description>
        作業ポータル画面用のページレイアウトについてのメタ情報です。
    </description>
<!--==============================================================
==  ロケーションメタ情報
==============================================================-->
    <location-list>
        <location name="InfoView" context="combine" required="false">
            <operation add="disable" remove="disable" change="disable"/>
        </location>
        <location name="EventView" context="combine" required="false">
            <operation add="disable" remove="enable" change="enable"/>
        </location>
        <location name="EventSummaryView" context="separate" required="false">
            <operation add="disable" remove="enable" change="enable"/>
        </location>
        <location name="EventConfirmView" context="separate" required="false">
            <operation add="disable" remove="enable" change="enable"/>
        </location>
        <location name="TaskView" context="combine" required="false">
            <operation add="disable" remove="enable" change="enable"/>
        </location>
        <location name="CheckPointView" context="combine" required="false">
            <operation add="disable" remove="disable" change="disable"/>
        </location>
        <location name="MethodView" context="combine" required="false">
            <operation add="disable" remove="enable" change="enable"/>
        </location>
        <location name="WorkSummaryView" context="combine" required="false">
            <operation add="disable" remove="enable" change="enable"/>
        </location>
        <location name="LogView" context="combine" required="false">
            <operation add="disable" remove="disable" change="disable"/>
        </location>
        <location name="Footer" context="combine" required="false">
            <operation add="disable" remove="disable" change="disable"/>
        </location>
    </location-list>
<!--==============================================================
==  レイアウトデザイン
==============================================================-->
    <layout-design>
        <!--===============
        ==  ベースパネル
        ================-->
        <Panel>
            <!--=====================
            ==  ベースパネルの上部
            ======================-->
            <NORTH>
                <LayoutLocation ref="InfoView"/>
            </NORTH>
            <!--=====================
            ==  ベースパネルの中央部
            ======================-->
            <CENTER>
                <SplitPane resizeWeight="0.0">
                    <!--=====================
                    == 分割領域の左側(Event系)
                    ======================-->
                    <LEFT>
                        <SplitPane resizeWeight="0.0">
                            <!--=====================
                            == 分割領域の上側
                            ======================-->
                            <TOP>
                                <LayoutLocation ref="EventView"/>
                            </TOP>
                            <!--=====================
                            == 分割領域の下側
                            ======================-->
                            <BOTTOM>
                                <SplitPane dividerSize="2">
                                    <!--=====================
                                    == 分割領域の上側
                                    ======================-->
                                    <TOP>
                                        <LayoutLocation ref="EventSummaryView"/>
                                    </TOP>
                                    <!--=====================
                                    == 分割領域の下側
                                    ======================-->
                                    <BOTTOM>
                                        <LayoutLocation ref="EventConfirmView"/>
                                    </BOTTOM>
                                </SplitPane>
                            </BOTTOM>
                        </SplitPane>
                    </LEFT>
                    <!--=====================
                    == 分割領域の右側(パス系)
                    ======================-->
                    <RIGHT>
                        <SplitPane resizeWeight="0.0">
                            <!--=====================
                            == 分割領域の上
                            ======================-->
                            <TOP>
                                <SplitPane>
                                    <!--=====================
                                    == 分割領域の左
                                    ======================-->
                                    <LEFT>
                                        <SplitPane>
                                            <!--=====================
                                            == 分割領域の上(タスク)
                                            ======================-->
                                            <TOP>
                                                <LayoutLocation ref="TaskView"/>
                                            </TOP>
                                            <!--=====================
                                            == 分割領域の下
                                            ======================-->
                                            <BOTTOM>
                                                <SplitPane>
                                                    <!--=====================
                                                    == 分割領域の上(チェックポイント)
                                                    ======================-->
                                                    <TOP>
                                                        <LayoutLocation ref="CheckPointView"/>
                                                    </TOP>
                                                    <!--=====================
                                                    == 分割領域の下(EGオーダー)
                                                    ======================-->
                                                    <BOTTOM>
                                                        <LayoutLocation ref="MethodView"/>
                                                    </BOTTOM>
                                                </SplitPane>
                                            </BOTTOM>
                                        </SplitPane>
                                    </LEFT>
                                    <!--=====================
                                    == 分割領域の右(詳細情報)
                                    ======================-->
                                    <RIGHT>
                                        <LayoutLocation ref="WorkSummaryView"/>
                                    </RIGHT>
                                </SplitPane>
                            </TOP>
                            <!--=====================
                            == 分割領域の下(ログ)
                            ======================-->
                            <BOTTOM>
                                <LayoutLocation ref="LogView"/>
                            </BOTTOM>
                        </SplitPane>
                    </RIGHT>
                </SplitPane>
            </CENTER>
            <!--=====================
            ==  ベースパネルの下部
            ======================-->
            <SOUTH>
                <LayoutLocation ref="Footer"/>
            </SOUTH>
        </Panel>
    </layout-design>
<!--==============================================================
==  ファイル編集情報
==============================================================-->
    <status>
        <author>$Author: morishita $</author>
        <datetime>$Date:: 2010-03-17 11:56:56 #$</datetime>
        <version>$Revision: 4882 $</version>
    </status>
</client-pagelayout>

例：患者詳細画面

画面イメージ：

解説 :
分割領域を使用しないで構成した例です。内部をユーザによるサイズ調整しないのであればこのようにもできます。
タブの部分はやはり中間Areaを挟んでタブエリアを使用しています。
中央部にPanelをネストさせて、さらに上下に分割することで４つのlocationを配置しています。

PageLayout定義：

<?xml version="1.0" encoding="Windows-31j"?>
<!--
 - Copyright
 -->
<!DOCTYPE client-pagelayout SYSTEM "../../doctype/client-pagelayout.dtd">
<!--==============================================================
 == Current-Module:   $HeadURL$
 == Release-Date:     $Date:: 2010-03-17 11:56:56 #$
 == Release-Version:  $Revision: 4882 $
 == First-Created-On: 2007/02/19
 == First-Created-By:
 == Copy-Right-Owner:
 ==============================================================-->
<client-pagelayout>
<!--==============================================================
==  識別情報
===============================================================-->
    <identity id="患者詳細画面"
              name="患者詳細画面用ページレイアウト"
              implement="pexa.client.std.view.swing.layout.FreeDesignPageLayout"/>
<!--==============================================================
==  詳細説明
===============================================================-->
    <description>
        患者詳細画面用のページレイアウトについてのメタ情報です。
    </description>
<!--==============================================================
==  ロケーションメタ情報
==============================================================-->
    <location-list>
        <location name="InfoView" context="combine" required="false">
            <operation add="disable" remove="enable" change="enable"/>
        </location>
        <location name="PatientInfoView" context="combine" required="false">
            <operation add="disable" remove="enable" change="enable"/>
        </location>
        <location name="PatientDetailView" context="combine" required="false">
            <operation add="disable" remove="enable" change="enable"/>
        </location>
        <location name="Footer" context="combine" required="false">
            <operation add="disable" remove="enable" change="enable"/>
        </location>
    </location-list>
<!--==============================================================
==  レイアウトデザイン
==============================================================-->
    <layout-design>
        <!--===============
        ==  ベースパネル
        ================-->
        <Panel>
            <!--=====================
            ==  ベースパネルの上部
            ======================-->
            <NORTH>
                <LayoutLocation ref="InfoView"/>
            </NORTH>
            <!--=====================
            ==  ベースパネルの中央部
            ======================-->
            <CENTER>
                <Panel>
                    <!--=====================
                    ==  パネル上部
                    ======================-->
                    <NORTH>
                        <LayoutLocation ref="PatientInfoView"/>
                    </NORTH>
                    <!--=====================
                    ==  パネル中央部
                    ======================-->
                    <CENTER>
                        <LayoutLocation ref="PatientDetailView"/>
                    </CENTER>
                </Panel>
            </CENTER>
            <!--=====================
            ==  ベースパネルの下部
            ======================-->
            <SOUTH>
                <LayoutLocation ref="Footer"/>
            </SOUTH>
        </Panel>
    </layout-design>
<!--==============================================================
==  ファイル編集情報
==============================================================-->
    <status>
        <author>$Author: morishita $</author>
        <datetime>$Date:: 2010-03-17 11:56:56 #$</datetime>
        <version>$Revision: 4882 $</version>
    </status>
</client-pagelayout>

更新情報

最終更新者 : $Author: morishita $

最終更新日時 : $Date:: 2010-03-17 11:56:56 #$

バージョン : $Revision: 4882 $