|
PEXA Clientについて
チュートリアル
定義パターン
定義ファイル
リファレンス
|
|
はじめに
|
このドキュメントは、PEXAクライアントフレームワークで使用するPageLayout定義ファイルについて解説するものです。
PageLayout定義ファイルは、Pageに対して適用されるページレイアウトの「仕様」を定義するメタ情報ファイルです。
この定義ファイルには、PageLayoutの実装クラス名、レイアウトが持つlocationについての情報が含まれます。
PageLayout定義ファイルの内部は、いくつかのセクションに分かれています。
以下でPageLayout定義ファイルの内容の概説およびそれぞれのセクションの詳細を解説していきます。
なお、文中にでてくる
Page定義についてはこちらを参照して下さい。
|
|
|
PageLayout定義の内容
|
PageLayout定義に含まれる情報には、主に以下の物があります。
|
レイアウトのデザイン情報
|
複雑なページのレイアウトをを必要とする場合に、あらかじめここでレイアウトをデザインしておくことができます。
ページ内のレイアウトを構成する方法としては、以下のような方法があります。
-
汎用のPageLayoutとAreaLayoutを積みかねて構成する場合
標準で用意されるBorderPageLayoutおよび、汎用の各AreaLayoutを積み上げることで、ある程度自由にレイアウトを構成できます。
ただしこの場合、レイアウトをネストさせていくと(タブ化したり分割領域をしようするなど)その分だけArea定義を用意する必要があるので、煩雑になります。
基本的にこの手段をとるのはちょっとしたポップアップ画面を構成するような、わざわざレイアウトを設計する必要が無い場合です。
-
専用のPageLayoutをデザインしてAreaを配置する場合
複雑な形に構成されるようなポータル系画面の場合、汎用のレイアウトを使用すると中間のエリアを多数作成する必要があります。
このような場合は、あらかじめPageLayout定義にてレイアウトデザインをしておくことで、中間エリアを作成することなく直接locationを指定してエリアを配置できます。
locationに対して業務的な意味を持たせた論理的な名称を与えたいような場合(LogView、SearchView, SummaryViewなど)もここでレイアウトをデザインすることになります。
ただし、タブを使用する場合のみ、必ず中間エリアを配置する必要があります。
これは、タブに配置されたエリアに対しての画面遷移制御を行う場合に中間エリアが必要となるためです。
詳細はlayout-designセクションを参照してください。
|
|
|
|
|
identityセクション
|
記述例 :
<!--==============================================================
== 識別情報
===============================================================-->
<identity id="BorderLayout"
name="ボーダーレイアウトによるページレイアウト"
implement="pexa.client.std.view.swing.layout.BorderPageLayout"/>
説明 :
identityセクションは、PageLayoutの識別情報を記述するセクションです。
レイアウトの識別名、名称、実装クラス名を指定します。
属性値 :
identityタグの属性値は以下の通り。
|
属性値名
|
説明
|
形式
|
必須／非必須
|
参照記法可／不可
|
|
id
|
システム内でユニークになるPageLayoutの識別ID
|
文字列
|
必須
|
不可
|
|
name
|
PageLayoutの詳細名称
|
文字列
|
必須
|
不可
|
|
implement
|
PageLayoutの実装クラス名
|
文字列
|
必須
|
不可
|
|
|
|
descriptionセクション
|
記述例 :
<description>
java.awt.BorderLayoutをベースにエリアの配置を行うページレイアウトです。
</description>
説明 :
descriptionセクションは、PageLayoutの詳細説明を記述するセクションです。
フリーフォーマットで文章で記入してください。
|
|
|
location-listセクション
|
記述例 :
<!--==============================================================
== ロケーションメタ情報
==============================================================-->
<location-list>
<location name="NORTH" context="combine" required="false">
<operation add="disable" remove="enable" change="enable"/>
</location>
<location name="SOUTH" context="combine" required="false">
<operation add="disable" remove="enable" change="enable"/>
</location>
<location name="EAST" context="combine" required="false">
<operation add="disable" remove="enable" change="enable"/>
</location>
<location name="WEST" context="combine" required="false">
<operation add="disable" remove="enable" change="enable"/>
</location>
<location name="CENTER" context="combine" required="false">
<operation add="disable" remove="enable" change="enable"/>
</location>
</location-list>
説明 :
PageLayoutがエリアを配置する「位置」についての情報を定義するセクションです。
location-listの子タグとしてlocationタグを複数個記述できます。
ここで宣言されたlocationが、そのPageLayoutを使用した際にエリアを配置できる位置であるということになります。
セクション内の子要素 :
location-listの子要素として、以下があります。
|
locationタグ
|
PageLayoutがサブ要素を配置できる「位置」を表すタグです。
locationタグの属性値は以下の通り。
|
属性値名
|
説明
|
形式
|
必須／非必須
|
参照記法可／不可
|
|
name
|
locationを表す名称を指定します。
PageLayout内でユニークになる必要があります。
ここで宣言したlocation名を、Page定義のlayoutセクションで指定することになります。
|
文字列
|
必須
|
不可
|
|
context
|
このlocationに配置されたエリアの実行コンテキストを、ページと同一(combine)にするか独立(separate)させるかの指定です。
このパラメータはページ内に配置されたエリアが参照するContent項目の共有スコープに影響を与えます。
|
combine,
separate
|
必須
|
不可
|
|
required
|
このlocationへのエリア配置の必須指定です。
trueの場合にこのlocationに対してエリアの配置がなければ実行時にエラーとなります。
|
true,
false
|
必須
|
不可
|
locationのオプション設定となるタグとして、以下の物があります。
operationタグ
記述例 : エリア追加は不可、エリア削除とエリア切替が可能。
<location name="CENTER" context="combine" required="false">
<operation add="disable" remove="enable" change="enable"/>
</location>
エリアに対する画面遷移制御に関する設定情報です。
エリアに対して実行できる画面遷移は
- エリア追加：locationに対してエリアを追加配置する
- エリア削除：locationに配置されているエリアを消去する
- エリア切替：locationに配置されているエリアを別のエリアに置き換える
の３種類があり、location毎にそれぞれをPageLayoutがサポートするかどうかの指定をここで行います。
以下の属性値があります。
|
属性値名
|
説明
|
形式
|
必須／非必須
|
参照記法可／不可
|
|
add
|
エリア追加が行えるかの指定です。
基本的にこれが出来るのはタブを使用したエリアレイアウトの場合のみです。
|
true,
false
|
必須
|
不可
|
|
remove
|
エリア削除が行えるかの指定です。
この操作はほとんどの場合において行うことができます。
|
true,
false
|
必須
|
不可
|
|
change
|
エリア切替が行えるかの指定です。
基本的にタブを使用したエリアレイアウトでは行えません。
|
true,
false
|
必須
|
不可
|
|
|
|
|
|
layout-designセクション
|
記述例 :
<!--==============================================================
== レイアウトデザイン
==============================================================-->
<layout-design>
<!--===============
== ベースパネル
================-->
<Panel>
<!--=====================
== ベースパネルの上部
======================-->
<NORTH>
<LayoutLocation ref="InfoView"/>
</NORTH>
<!--=====================
== ベースパネルの中央部
======================-->
<CENTER>
<SplitPane>
<!--=====================
== 分割領域の上部
======================-->
<TOP>
<SplitPane>
<!--=====================
== 分割領域の左
======================-->
<LEFT>
<SplitPane>
<!--=====================
== 分割領域の上(カルテ一覧)
======================-->
<TOP>
<LayoutLocation ref="SOAPView"/>
</TOP>
<!--=====================
== 分割領域の下(グラフ)
======================-->
<BOTTOM>
<LayoutLocation ref="GraphView"/>
</BOTTOM>
</SplitPane>
</LEFT>
<!--=======================
== 分割領域の右(詳細表示)
========================-->
<RIGHT>
<LayoutLocation ref="KarteSummaryView"/>
</RIGHT>
</SplitPane>
</TOP>
<!--=====================
== 分割領域の下部(ログ)
======================-->
<BOTTOM>
<LayoutLocation ref="LogView"/>
</BOTTOM>
</SplitPane>
</CENTER>
<!--=====================
== ベースパネルの下部
======================-->
<SOUTH>
<LayoutLocation ref="Footer"/>
</SOUTH>
</Panel>
</layout-design>
説明 :
レイアウトの"デザイン"を定義するセクションです。
ウィンドウ内をどのように分割してどこにAreaを配置できるようにするかを定義します。
ページレイアウトのデザインは、PanelとSplitPaneを組み合わせて行います。
Panelは東西南北と中央、SplitPaneは上下もしくは左右にレイアウトを分割できるので、それぞれを自由にネストさせてページ内を区切ります。
ページ内の区切り方が決まったら、エリアを配置できる場所をLayoutLocationというタグで宣言します。
LocationLayoutが配置された位置が、location-listセクションで宣言された各locationの実際の配置場所と言うことになります。
注意 :
なお、ここで指定できるレイアウト部品はPanelおよびSplitPaneのみです。
もしタブを使って複数個のAreaを一つのlocation内に重ねて配置する必要がある場合は、
中間Areaを作成してそのエリアレイアウトにタブエリアを指定して、Areaをネストさせる形で配置して下さい。
デザインサンプル :
レイアウトデザインの例については、リファレンスに画面イメージ付きで記載されているので、そちらを参照して下さい。
以下で、それぞれのタグについて解説します。
|
Panel
|
レイアウト部品のPanelを表すタグです。
内部にサブ要素を配置できるベースパネルとして機能します。
Panel内に配置された要素は固定的に配置されることになります。
もしユーザー操作によって各要素のサイズを自由に変えられるようにしたいのであればSplitPaneを使用して下さい。
配置場所は東西南北および中央の５つになります。
それぞれの場所にサブ要素としてPanelおよびSplitPaneをネストさせて配置させることもできますし、LayoutLocationタグを配置してlocation位置を宣言することも出来ます。
以下のタグでサブ要素の配置場所を表します。
|
配置場所のタグ
|
説明
|
|
NORTH
|
パネルの北を表す配置場所です。
|
|
CENTER
|
パネルの中央部を表す配置場所です。
|
|
SOUTH
|
パネルの南を表す配置場所です。
|
|
EAST
|
パネルの東を表す配置場所です。
|
|
WEST
|
パネルの西を表す配置場所です。
|
|
|
|
SplitPane
|
レイアウト部品のSplitPaneを表すタグです。
内部を縦方向もしくは横方向に２分割してサブ要素を配置することが出来ます。
このタグを使用して分割した領域は、ユーザーが分割線をマウスでドラッグアンドドロップすることによって任意のサイズに変更することが出来る部分になります。
配置場所は上下もしくは左右のどちらかです。混在させることは出来ません。
それぞれの場所にサブ要素としてPanelおよびSplitPaneをネストさせて配置させることもできますし、LayoutLocationタグを配置してlocation位置を宣言することも出来ます。
SplitPaneタグは以下の属性値を持ちます。
|
属性値名
|
説明
|
形式
|
必須／非必須
|
参照記法可／不可
|
|
dividerSize
|
分割線の太さを数値で指定します。デフォルトは4です。
|
数値
|
非必須
|
不可
|
|
oneTouchExpandable
|
分割線にワンクリックで展開/収納を行うボタンをつけるかを指定します。
省略時は"false"として扱われます。
|
true,
false
|
非必須
|
不可
|
|
resizeWeight
|
ウィンドウサイズ変更時の余白をどこに与えるのかの比率設定です。
- TOP(LEFT)側のサイズを固定したまま、BOTTOM(RIGHT)側に余白を割り当てるなら"0.0"と指定して下さい。
- BOTTOM(RIGHT)側のサイズを固定したまま、TOP(LEFT)側に余白を割り当てるなら"1.0"と指定して下さい。
- 双方に均等に余白を割り振るなら"0.5"と指定して下さい。
省略時は"0.5"として扱われます。
|
数値
|
非必須
|
不可
|
以下のタグでサブ要素の配置場所を表します。
|
配置場所のタグ
|
説明
|
|
TOP
|
分割領域の上側を表す配置場所です。BOTTOMと一緒に指定します。
|
|
BOTTOM
|
分割領域の下側を表す配置場所です。TOPと一緒に指定します。
|
|
LEFT
|
分割領域の左側を表す配置場所です。RIGHTと一緒に指定します。
|
|
RIGHT
|
分割領域の上側を表す配置場所です。LEFTと一緒に指定します。
|
|
|
|
LayoutLocation
|
Areaを配置できる場所を表すタグです。
location-listセクションで宣言されたlocationはこのタグによって必ずページ内の配置場所を定義する必要があります。
LayoutLocationタグは以下の属性値を持ちます。
|
属性値名
|
説明
|
形式
|
必須／非必須
|
参照記法可／不可
|
|
ref
|
このタグの配置場所に割り当てるlocation名を指定します。
|
文字列
|
必須
|
不可
|
|
|
|
|
|
statusセクション
|
記述例 :
<status>
<author>$Author: morishita $</author>
<datetime>$Date:: 2010-03-17 11:56:56 #$</datetime>
<version>$Revision: 4882 $</version>
</status>
説明 :
PageLayout定義ファイルの編集情報を記述するセクションです。
バージョン管理システムの置換キーワードなどと連携して使用してください。
セクション内の子要素 :
以下の子要素があります。
|
|
|
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/03/05
== First-Created-By:
== Copy-Right-Owner:
==============================================================-->
<client-pagelayout>
<!--==============================================================
== 識別情報
===============================================================-->
<identity id="BorderLayout"
name="ボーダーレイアウトによるページレイアウト"
implement="pexa.client.std.view.swing.layout.BorderPageLayout"/>
<!--==============================================================
== 詳細説明
===============================================================-->
<description>
ボーダーレイアウトによって構成されるページ用のレイアウト定義情報です
</description>
<!--==============================================================
== ロケーションメタ情報
==============================================================-->
<location-list>
<location name="NORTH" context="combine" required="false">
<operation add="disable" remove="enable" change="enable"/>
</location>
<location name="SOUTH" context="combine" required="false">
<operation add="disable" remove="enable" change="enable"/>
</location>
<location name="EAST" context="combine" required="false">
<operation add="disable" remove="enable" change="enable"/>
</location>
<location name="WEST" context="combine" required="false">
<operation add="disable" remove="enable" change="enable"/>
</location>
<location name="CENTER" context="combine" required="false">
<operation add="disable" remove="enable" change="enable"/>
</location>
</location-list>
<!--==============================================================
== レイアウトデザイン
==============================================================-->
<layout-design>
<!--===============
== ベースパネル
================-->
<Panel>
<!--=============
== パネル上部
==============-->
<NORTH>
<LayoutLocation ref="NORTH"/>
</NORTH>
<!--=============
== パネル中央部
==============-->
<CENTER>
<LayoutLocation ref="CENTER"/>
</CENTER>
<!--=============
== パネル下部
==============-->
<SOUTH>
<LayoutLocation ref="SOUTH"/>
</SOUTH>
<!--=============
== パネル右部
==============-->
<EAST>
<LayoutLocation ref="EAST"/>
</EAST>
<!--=============
== パネル左部
==============-->
<WEST>
<LayoutLocation ref="WEST"/>
</WEST>
</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 $
|
|
|
