PhoneGalaxySなどの現存する様々なメディアは、お互い異なる表現の領域を持っているため、メディアに合わせたデザイン作業、およびソース管理をしなければならない問題があります。このため、One Sourceで、様々な状況に対応するデザインを表現できるようにしてくれるMulti Layout Managerの機能が追加されました。

MLMの構造

UX-Studioで生成された ADL/FDLを XPLATFORMが Deviceに合ったLayoutを選択して出力します。

以下は、使用された用語の説明です。

Default Layout
基本となるLayout。 Layoutの情報を持っておらず、既存のV9.1のフォームと同じ機能
追加 Layout
Default Layoutを除くすべてのLayout
Sub Layout
Div、PopupDiv、TabPageなどのサブコンテンツを持っているコンポーネントのLayout
Target Component
Sub Layout Editorを実行したコンポーネント

プロジェクト生成及び修正

プロジェクト生成

‘I-Phone’, ‘I-Pad’, ‘GalaxyTab’の Layout情報を持つプロジェクトを生成する方法を例として説明します。UX-Studioで、File > New > Project メニューを呼出す場合、以下のようにプロジェクトを生成するウィザードが表示され、各ステップことに情報を入力して生成することができます。

New Project Wizard – ステップ1
生成されるプロジェクトの Frame Templateと生成されるパス及びプロジェクト名を入力するステップです。プロジェクト名は、必ず入力する必要がある必須項目であり、生成されるパスに同じプロジェクト名が存在している場合は、生成することができません。

New Project Wizard – ステップ2
Character Set情報及び TypeDefinition情報などを設定するステップです。

New Project Wizard – ステップ3
プロジェクトで使用するスクリーン情報を入力するステップです。I-Phone, I-Pad, GalaxyTabを開発する目的のため、各項目を入力し、該当スクリーンで使用するテーマを指定します。‘Finish’をクリックして‘I-Phone’,‘I-Pad’,‘GalaxyTab’のスクリーン情報を持つプロジェクトを生成します。

Name : スクリーン名
Theme : スクリーンに使用するテーマ
System Type
- Win32 : 一般的なデスクトップ
- Wince : Window Mobile Phone
- Android : Android Mobile Phone
OS : 該当装備で使用されるオペレーティングシステム
Device : 装備の種類
Description : スクリーンに関する説明 (Descriptionは、機能動作に影響を与えません。)

スクリーン情報の修正

‘New Project Wizard’で入力したスクリーン情報を修正したり、新たなスクリーン情報を入力できるような Editor機能が追加されました。

‘Project Explorer’で、ADL Itemから提供されるポップアップメニューを使用して新たなスクリーン情報を追加したり、ADL Itemのサブ情報に表示される‘ScreenInfo’などを選択して編集することができます。

‘ScreenInfo Editor’は、既存からで提供された‘Widget Editor’,‘Variable Editor’と同じ方式で編集機能を提供します。

Layout Template登録

基本的に提供される Layout Templateを使用することができます。また、頻繁に使用されるLayoutの情報をユーザーがTemplateで登録することができます。

Layout Templateダイアログは基本的にで提供されるTemplateのDevice、Graphic Array Templateと、ユーザーが直接登録して使用するUser Templateの3つのタブで構成されています。

User Template : ユーザーが直接登録して使用する Layout Template List
Device : 現在、使用されている主要なモバイル機器
Graphic Array : 解像度で使用されている Graphic Array

フォーム生成

‘I-Phone’, ‘I-Pad’, ‘GalaxyTab’ の3か所で使用するFDLファイルの作成方法を例として説明します。 File > New > Item > Form メニューを選択する場合、以下のように FDLを生成するウィザードが表示され、各ステップことに情報を入力して生成することができます。

New Form Wizard – ステップ1
生成されるフォームのパスと名を入力するステップです。フォーム名は、必ず入力する必要がある必須項目であり、生成されるパスに同じフォーム名が存在している場合は、生成することができません。

New Form Wizard – ステップ2
生成されるフォームの Inheritanceを指定するステップです。
TypeDefinitionに‘UserForm’が登録されている場合のみ、入力コントロールが活性化されます。

New Form Wizard – ステップ3
生成されるフォームの‘Default’Layout Formのサイズを入力するステップです。初期入力値はオプションで変更することができます。

New Form Wizard – ステップ4
生成されるフォームでデザインする Layout情報を入力するステップです。スクリーンの種類別、横、縦サイズに合わせた Layout情報を設定します。

Templateボタンを押すと、以下の図のような Templateダイアログが表示され、使用する Layout、Layout gourpを選択した後、okボタンを押すと、選択した Layout情報が New Form Wizardに追加されます。

Layout

‘New Form Wizard’で入力した Layouts情報がタブ形態として表示されるようにForm Designの機能が変更されました。

Layout Tab

現在、フォームで使用される Layoutがタブに表示されます。タブの位置はオプションでユーザーが変更できます。

タブを切り替えて、‘New Form Wizard’で入力した Layoutに画面の切り替えが可能であり、Layoutについた修正機能をポップアップメニューに提供します。

Add Layout : ‘Layout Tab’の最後の新たな Layoutを生成するダイアログを表示します。
Copy & Add Layout : 現在選択された Layoutをコピーして‘Layouts’の最終部分に追加します。
Delete Layout : 現在選択された Layoutを‘Layouts’から削除します。
(‘Default’は削除不可)
Layout List : 現在フォームで使用中の Layout情報を修正できるダイアログを表示します。

‘Default’タブではすべての機能が提供されますが、追加された‘Layout’タブでは一部のデザイン機能が制限されます。

デザイン機能	デフォルト	追加 Layout
Component Create, Delete	O	X
Component Copy, Cut, Paste, Paste Special	O	X
TabOrder 変更	O	X
フォームのサイズ修正	O	X
フォームのサイズを Guide Lineに表示	X	O
フォームの Tracker表示	O	X
Div, Tab, Popupなどの下位コンポーネント修正	O	X
Invisibleオブジェクト追加、削除、選択	O	X

Layout 情報修正

現在フォームで使用中の Layoutの情報を修正できる機能がぽっぴアップメニューに追加されました。

Name : Layout名
- Layoutの Nameに大文字小文字を区別せずに"Default"を使用することはできません。
- 同じフォーム内で重複されるLayout Nameを使用することはできません。
Screen : Layoutが使用するスクリーン名
Width : Layoutの広さ
Height : Layoutの高さ

‘Default’タブで、コンポーネントのプロパティ値が変更された場合には、変更された内容を他の Layoutに適用するかを確認するメッセージウィンドウがポップアップされます。

上記の確認メッセージウィンドウは、以下の条件をすべて満たした場合にのみ、ポップアップされます。

番号	条件
1	他の Layoutで変更される属性がソース上に存在する場合
2	‘Layouts Edit’オプション値が‘Ask whenever a property になっている場合

‘Default’タブで修正されて他の Layoutに適用するかを確認するメッセージウィンドウで‘Don’t ask me again’をチェックした状態で‘Yes’や‘No’を選択する場合、‘Layouts Edit’オプション値が変わりながら以降にはメッセージウィンドウがポップアップされません。

ボタン	‘Layouts Edit’オプション
Yes	Change property Default Layout with other layouts
No	Changed property is only Default Layout applied

Propertiesウィンドウ

フォームデザインの情報を Propertiesウィンドウで表示している場合、Layoutタブによって表記方法が変わるようになります。

Default Layoutタブでは、Form Propertiesの中で‘position’情報を修正すると、Multi Layoutを使用する場合に‘height’と‘width’が現在のサイズに合わせて設定されます。 Default Layoutタブで、‘height’と‘width’は hiddenプロパティです。Trakerを使用してサイズを変更する場合‘position’と‘height’と‘width’情報が全部変更されます。
追加された Layoutタブでは、Form Propertiesの中で‘position’情報を修正することができませんが、‘Layout Information’情報である‘height’と‘width’を変更してサイズを変更することができます。Trakerを使用してサイズを辺こする場合、‘position’情報は保存せず‘height’と‘width’情報のみ保存されます。
‘Layout Information’に表示される Propertiesは、‘Layout List Dialog’と同じです。
フォームデザインの‘Default’タブと異なる情報を持っている追加されたLayoutタブでは、プロパティを太い青で表示するようになりました。従って、Propertiesウィンドウで表示する情報は、 Windowで表示する情報は、太さと色に応じて以下のような意味を持つことになります。

文字色	太さ	情報
黒	X	Themeと cssのみ適用されたデフォルト値を持つ場合
黒	O	‘Default’タブで修正してThemeと cssが適用されたデフォルト値を異なる値を持つ場合
青	O	追加された Layoutタブで修正した値が‘Default’タブの情報と異なる値を持つ場合

Form Designの追加された Layoutタブで、プロパティを表示する場合に以下のプロパティは修正できないように disable処理されます。

属性名	説明
id	すべてのコンポーネントの IDは、追加された Layoutタブでは修正することができません。
taborder	すべてのコンポーネントの taborderは、追加された Layoutタブでは修正することができません。
inheritanceid	Form Propertyの中で inheritanceidは修正することができません。
position	Form Propertyの中で positionは修正することができません。

Sub Layout

コンポーネント内部にコンテンツを持っている Div, PopupDiv, TabPageなどもフォームのように Multi Layoutを持つことになり、これを Sub Layout と呼びます。Sub Layoutは、Form Layoutと1:1のマッチングではなく、別のMulti Layoutを構成します。タブの場合は、タブページごとに異なるMulti Layoutを構成することができます。

Sub Layoutを持っているコンポーネントは、自分の Sub Layoutの中で該当コンポーネントのサイズに合わせて最適化された Sub Layoutを自動的に表示します。
Targetコンポーネントのサイズが変更された場合、自動的に Sub Layout Changeが発生し、新たなサイズに合わせて最適化された Sub Layoutを検索します。

Default Layoutでの編集

Sub Layoutを持っているコンポーネントのサブコンテンツは、フォームの Default Layoutでのみ直接編集が可能です。(既存の編集方法と同一)

直接編集される内容は、該当コンポーネントが表示している Sub Layoutに保存されます。

ただし、Defalut Layout以外の追加 Layout (例: 上記の図で iPhoneW Layout)では、コンテンツの直接編集が不可です。従って、サブコンテンツは、選択及び修正ができないし、サブコンテンツの選択時、最上位のコンポーネントが選択されます。追加Layoutで、コンテンツを編集するにはSub Layout Editorを使用して編集する必要があります。

Sub Layoutでの編集

追加 Layoutで、コンテンツを編集するためには、Sub Layout Editorを使用して編集する必要があります。Sub Layoutを持つコンポーネントは、Sub Layout Edit, Set Sub Layout の二つのポップアップメニューを提供します。

Sub Layout Editメニューを選択すると Sub Layoutを編集することができます。
Set Sub Layoutメニューを選択するとコンポーネントのサイズを選択した Sub Layoutのサイズに変換します。Set Sub Layoutメニューは、defrault Sub Layout以外の Sub Layoutが存在する場合のみ表示されます。

Sub Layout Editメニューを選択すると、以下図のような Sub Layout Editorが表示されます。

Link Urlを持っているコンポーネントは、Sub Layout Editorを実行することができません。
Contents Editorと同じようにダブルクリックでも実行することができます。
最初 Sub Layout Editorの実行時、現在の Targetコンポーネントのデフォルトサイズが default Sub Layoutのサイズになります。
該当コンポーネント及び下位コンポーネントを除いた他のコンポーネントは、選択及び編集することができません。
スクロールに包まれて表示されなかったコンポーネントも編集可能です。
該当コンポーネントのサイズに合わせてルーラが提供されます。
Sub Layout Editorも Form Layoutのようにデフォルト以外のLayoutでは、コンポーネントの生成などの一部の機能が制限されます。

Sub Layout Editor専用のポップアップメニューが提供されます。

Sub Layout List : 現在のコンポーネントで使用中の Sub Layout情報を修正することができるダイアログを表示します。
Apply Size & End Edit : 現在 edit中の sub Layoutのサイズに targetコンポーネントを設定し、現在まで Sub Layout Editorで作業した bufferを統合してdesign undo listに追加します。
コンポーネントを選択するとポップアップメニューが若干異なって表示されます。

Sub Layoutのサイズは変更できますが、Targetコンポーネントの Positionは変わりません。

各 Sub Layoutことに Targetコンポーネントのスタイル及び一部のプロパティを設定することができます。
- default Layoutの修正内容は、<Div>などのタグ内に保存されます。
- それ以外の下位 Sub Layoutの修正内容は、該当 <Layout>に保存されます。

その他の Sub Layout Editorの操作関連事項
- 各 Sub Layoutの中にあるサブコンテンツを持つコンポーネントは、 Form Designと同じように default Layoutでのみ編集することができます。
- Sub Layout Editor内で、他の Sub Layout Editorは実行できません。
- Contents Editorは実行できます。
- その他のコンポーネントの操作のような場合、 Form Designと同じように動作します。

Sub Layout Undo
- Sub Layout Editorで、Undoは Form Designとは別に管理されます。
- Sub Layout Eidtorの実行前の Undoは、Sub Layout Editorの中で使用できません。
- Sub Layout Editorの中で蓄積されたUndoは、Editorの終了と同時に消えたり、一度にForm Design Undo Listに追加されます。(Sub Layout Editorの中の編集内容を一つのUndoとして認識)

Step

Stepとは、複数の stepに構成されたページを一つのフォームで開発することができる機能を意味します。

フォームの stepcountプロパティ値を調整すると、以下の図のように stepが表示されます。

番号	説明
1	現在編集中の Stepを表示。現在編集中の Stepは、マウスポインターの位置で判断します。
2	Stepと Stepの間の案内線

番号

説明

現在編集中の Stepを表示。

現在編集中の Stepは、マウスポインターの位置で判断します。

Stepと Stepの間の案内線

複数の stepがあってもフォームの実質的なサイズは変更されません。
実行時には、一つの Stepのみ表示されます。
フォームの背景は、Stepごとに適用されます。

Positionstep Property

コンポーネントに positionstepプロパティが追加されました。Positionstepプロパティは該当コンポーネントの所属 Stepを示します。
コンポーネントの Positionが positionstep + Positionに適用されます。
コンポーネントの Positionは、指定された positionstepを基準に設定されます。

ボタン	positionstep + Position
Button00	positionstep="0" position="absolute 50 100 150 150"
Button01	positionstep ="1" position="absolute 50 100 150 150"
Button03	positionstep ="2" position="absolute 50 100 150 150"
Button03	positionstep ="0" position="absolute 650 100 750 150"

コンポーネントがすべての Step領域を離れると、positionstep0として処理されます
Positionstepが -1の場合には、すべての Stepに表示されます。

-1 positionstepコンポーネントは、すべての Step領域で選択、編集することができます。
-1 positionstepコンポーネントは、現在編集中の Stepではない場合、実際のコンポーネントより若干透明に表示されます。
-1 positionstepコンポーネントは、すべての Stepで該当 Stepで表示されるコンポーネントを選択及び編集することができます。

コンポーネントの移動及び Position変換

コンポーネントの Step間の移動は、プロパティを直接入力するか、デザイン画面で直接移動できます。

プロパティ入力 – 入力値を維持、positionstep及び Positionの再調整なし。(現在のStepから離脱することができる。)
デザイン移動 – デザイン画面で、直接移動された Position情報を現在の Stepに合わせて変換して再適用

(移動前)

(Positionプロパティを直接入力して移動した場合)

(コンポーネントを直接デザイン画面で移動した場合)

InitValue

MLMを適用したアプリケーションが特定の値を持っている状態で起動するべきの場合があります。例えば、各レイアウトごとに異なるデザインプロパティを持つ場合、レイアウトごとに異なるプロパティ値を指定します。

但し、ユーザーが入力したり、変更可能なプロパティは、レイアウトが変わるとしても入力されたり、修正された値が最初に設定した値に変更されてはいけません。このような項目にプロパティ値を直接指定せずにInitValueを宣言すれば、最初のアプリケーションを呼び出すときにのみ、該当値を使用し、レイアウトの変更にかかわらず、修正された値を保持することができます。

UX-StudioプロパティウィンドウにInit Infoという項目が追加されました。必要なときに下の図のようにInitValueを適用することができます。修正された値は、xfdlファイルに<InitValue> タグに追加されます。

InitValueで指定された値は、フォームがロードされる前に適用され、プロパティ値は、フォームがロードされながら適用されます。InitValueとプロパティ値を一緒に指定する場合は、プロパティ値がInitValueを上書きします。
レイアウトによって、InitValueを別々に指定することはできません。
コンポーネントのプロパティ値が、ランダムに変更されていない状態(Default Value)であるときは、レイアウトの変更がプロパティ値に影響を与えません。