MLM (Multi Layout Manager)
nexacroでは、様々なサイズを持つデバイスに対応する画面デザインを1つのソースで開発できるMLM（Multi Layout Manager）機能を提供します。アプリを構成するフォームは、画面サイズに応じて、複数のレイアウトを使用することができ、サブレイアウトを使用すると、内部的なコンポーネントまで詳細に再配置することができます。また、モバイルデバイス上でステップ機能を活用すれば、最適化された画面を構成することができます。
Layout
レイアウトを編集できるコンポーネントは、基本的に「default」という名前のレイアウトを持ちます。Formの作成時にレイアウトを追加することができ、生成した後は、マウス右クリックして表示されるメニューからレイアウトを追加／削除することができます。
「default」レイアウトを削除したり変更することはできません。
プロパティ | 説明 | |
|---|---|---|
1 | Add Layout | レイアウトを追加します。 |
2 | Copy & Add Layout | 選択したレイアウト情報をコピーして、新しいレイアウトを追加します。 |
3 | Delete Layout | 選択したレイアウトを削除します。 |
4 | Rename Layout | 選択したレイアウト名を変更します。 |
5 | View | レイアウト情報を表示します。 （Name、Screen、Size項目を選択） 「default」レイアウトはName項目を非表示に設定してもdefaultという文字列が表示されます。 |
Layoutツールバー
編集する画面のLayoutを基準にレイアウトを選択して編集することができるツールバーを提供します。
ツールバーは、レイアウトの3つの情報を表示しています。
Screenタイプによるレイアウトのアイコン表示
(none, desktop, tablet, phone, desktop + tablet, desktop + phone, tablet + phone, all)
レイアウト名
サイズ(幅 x 高さ)
ツールバーのツールチップでは、ツールバーの情報を含めて追加情報を表示します。
screenid
stepcount
stepindex
description
ツールバーのレイアウトを選択すると、レイアウト編集画面に変更されます。
Div, PopupDiv, Tabpage Layout
Div、PopupDiv、Tabpageコンポーネントは、別途のレイアウトを持たず、Formレイアウトを従います。コンポーネントをダブルクリックするか、マウス右クリックして、メニューの[Edit]項目を選択すると、該当コンポーネントに含まれた画面の配置を変更することができます。
コンポーネントのurlプロパティ値を指定して他のFormをリンクした場合は、接続されたFormを編集できるように開きます。
レイアウトツールチップ
コンポーネントのurlプロパティ値を指定して、他のFormを接続した場合には、nexacro studioデザインモードで関連情報をツールチップ形式で提供します。コンポーネントが重なっている場合には、重なったコンポーネントに関連するすべての情報を提供します。
プロパティ値の色表示
色 | 情報 |
|---|---|
太字 | 「default」レイアウトで編集した値 |
青 | 追加されたレイアウトで編集した値 （該当レイアウトを選択した場合に青色で表示されます。） |
Initialize
指定されたプロパティ値を使用し、以降はユーザーが入力するか、実行中の変更値を使用する必要がある場合があります。そのような項目の値は、Init Infoプロパティで別途管理します。プロパティ値の中で Layout Informationに該当する値を除いた残りの値の中で一部の項目のみを編集することができます。
編集画面では、Init Valueが適用されません。値の適用は、実際の実行によって確認することができます。
Step
Stepとは、複数の画面に分割されたページを一つのフォームで開発することができる機能を意味します。フォームの stepcountプロパティ値を調整すると、以下の図のように Stepが表示されます。
現在編集中のステップの領域を表示します。マウスポインタの位置によって、編集領域が変更されます。
各ステップの領域は青色の点線で区切られて表示されます。
複数のステップを作っても、フォームのサイズは変わりません。実行時には、一つの分割画面のみが表示され、ユーザーの操作によって、ステップを移動することになります。
デザインフォームの画面でコンポーネントを別のStepへ移動すると、positionstep値が変更され、position値が該当Stepに合わせて調整されます。
ただし、直接positionプロパティ値を現在のStep領域外に指定してStep領域を離れる場合には、positionstep値が変更されません。
stepcount
プロパティ | 説明 | |
|---|---|---|
1 | Add Step | Stepを追加します。 stepcountプロパティ値が1増加します。 |
2 | Delete Step | Stepを削除します。 stepcountプロパティ値が1減少します。 |
3 | Add/Delete Step | ボタンのクリックする際にStepを追加・減少します。 入力ウィンドウに直接Step数を指定することができます。 |
Fluid Layout
Form Layout内に配置されるコンポーネントの位置を固定せずに、設定された規則によって自動的に配置されるように設定することができます。動的にコンポーネントを追加する機能を実装したい場合や、画面のサイズによってコンポーネントの配置方式を自動的に変更したい場合に活用できます。
コンポーネントの配置基準の設定
Formオブジェクトもしくはコンテナコンポーネント（Div、Tab、View）でLayoutオブジェクトのtype プロパティにより基本配置基準を設定することができます。
Formオブジェクト
Form WizardでLayout Type選択値を変更してから生成するか、Formの生成後にプロパティリストからtypeプロパティ値を変更します。typeプロパティはLayoutオブジェクトのプロパティで、Layoutごとに異なる値に設定することができます。
コンテナコンポーネント
コンテナコンポーネント内に他のFormファイルを呼び出さずに直接コンポーネントを配置する場合はtype プロパティを設定することができます。
コンポーネントの配置（horizontal、vertical）
この例題では、typeプロパティを「vertical」に設定しているDivコンポーネントを基準に説明します。
コンポーネントを選択してマウスで移動する
配置するコンポーネントを選択してDivコンポーネントの領域にドラッグすると、Design画面に現在選択されたtypeプロパティ情報を表示し、コンポーネントが配置される位置を青色で表示します。
図1
既に配置されているコンポーネントの間に配置することもできます。
配置されたコンポーネントの位置を変更することができます。
コンポーネントをグルーピングして移動する
Layout Order Editorを使用すると、コンポーネントの配置順序だけでなく、コンポーネントのlayoutorderプロパティを設定することができます。
コンポーネントのlayoutorderプロパティは動的にコンポーネントを生成して指定した位置に配置したい場合に使用します。Layout Order Editorでは同じlayoutorderプロパティ値を持つようにコンポーネントを設定してlayoutorderプロパティ値を変更することで、複数のコンポーネントの位置を一括変更することができます。
1
コンテナコンポーネントを選択してコンテキストメニューより[Edit]項目を選択するか、コンテナコンポーネントをダブルクリックすると、編集モードに切り替わります。
2
コンテキストメニューより[Layout Order Editor]を選択します。
3
Layout Order EditorでButtonコンポーネントをマウスで選択してドラッグすると、順序が変更できます。
コンポーネントのlayoutorderプロパティを未設定にした場合は「0」として処理されます。
4
[+]ボタンをクリックし、layoutorder項目を追加して値を「1」に設定します。
5
Buttonコンポーネントをマウスで選択し、追加したlayoutorder(1)の下の位置に移動させます。
layoutorder(1)グループの下にコンポーネントが配置されていることを確認します。
6
layoutorder(0)項目をクリックし、値を「0」から「2」に変更します。
値を変更すると、layoutorder項目と下位コンポーネントの順序が変わります。
コンポーネントの配置（table）
例題として、typeプロパティを「table」に設定しているDivコンポーネントで説明します。
特定のCellの位置にコンポーネントを配置する
typeプロパティを「table」に設定すると、tabletemplateプロパティのデフォルト値（Column1つ、Row1行）が適用された状態で編集画面が表示されます。
説明 | ||
|---|---|---|
1 | Reset Table | 編集画面の左上の「表」アイコンをクリックすると、Column、Rowの個数が変更できるReset Tableウィンドウが表示されます。 |
2 | Column編集 | マウスの右ボタンを栗生すると、Columnを追加、挿入、削除できるコンテキストメニューが表示されます。 Column項目をクリックすると、値が修正できる編集モードに切り替えます。 境界線をマウスでドラッグすることで値を変更することができます。1回の操作で変更される値は、項目の値がpxや%単位の場合は1、*単位の場合は0.5になります。 |
3 | Row編集 | マウスの右ボタンをクリックすると、Rowを追加、挿入、削除できるコンテキストメニューが表示されます。 Row項目をクリックすると、値が修正できる編集モードに切り替えます。 境界線をマウスでドラッグすることで値を変更することができます。1回の操作で変更される値は、項目の値がpxや%単位の場合は1、*単位の場合は0.5になります。 |
Column 3つ、Row 2行でレイアウトの設定した場合の例題です。Divコンポーネントの方にドラッグすると、仮想のTable Cell領域が表示され、任意のCell領域に配置することができます。
[Options > Form Design > Layout > Table Layout]にて「Display table guidelines」項目にチェックを入れると、Table Cell領域を区別する線とtabletemplateareaプロパティ値として指定した値が常に表示されます。
Buttonコンポーネントの配置時に2つ以上のCell領域を跨ぐようにサイズを調整すると、2つ以上のCell 領域が結合しているかのように該当のCell領域全体が1つの領域として扱われ、その領域にコンポーネントを配置することができます。（2つ以上のセルでドラッグ操作により選択する領域が各Cell領域の50%以上である場合にのみ選択状態になります。）
コンポーネントの基本サイズと関係なく、Cell領域が埋まるようにサイズが自動的に調整されます。（width、heightプロパティが「100%」に設定されます。）コンポーネントの配置後にコンポーネントのサイズは変更することができます。
Divのようなコンテナコンポーネントの場合、ダブルクリックすると、編集モードでのみReset Table機能などを利用できる編集画面が表示されます。
編集モードでない場合にもコンポーネントの配置時に参考できるように、マウスカーソルをコンテナコンポーネントに重ねると、ガイドライン情報が表示されます。
Column、Rowの追加、挿入、削除
コンテキストメニューよりColumn、Rowを追加、挿入、削除することができます。
追加
Column、Rowを最後の位置に追加します。
全てのCellにコンポーネントが配置された状態でCell領域でない領域にコンポーネントを追加したい場合は、Rowを追加してコンポーネントを追加するかどうかを尋ねる確認ダイアログが表示されます。Rowを追加しない場合は最後のCellに重なった位置にコンポーネントが追加されます。
挿入
選択中のColumn、Rowの前の位置に新しいColumn、Rowを挿入します。
2つ以上のCell領域を跨いて配置されたコンポーネントの間にColumn、Rowを挿入した場合、挿入されたColumn、Rowを含む形でtablecellareaプロパティ値が変更されます。
削除
選択中のColumn、Rowを削除します。
削除するColumn、Rowにコンポーネントが配置された場合はコンポーネントを削除するかどうかを尋ねる確認ダイアログが表示されます。
コンポーネントを削除しない場合、削除位置によってコンポーネントが重なって配置されたり、有効でないCell領域に配置されることがあります。
最後のColumn、Rowを削除する場合
コンポーネントのtablecellareaプロパティ値が有効でない値になり、テーブル領域の右側あるいは下側に配置されます。
コンポーネントのサイズが%単位の値に設定された場合は参照するCellが見つからずに画面から表示されなくなります。
最後以外のColumn、Rowを削除する場合
削除されたColumn、Rowに配置されていたコンポーネントのtablecellareaプロパティ値は維持され、次のColumn、Rowに配置されたコンポーネントのtablecellareaプロパティ値が1つずつ前の位置の値に変更されます。よって、削除されたColumn、Rowの位置のコンポーネントと次のColumn、Rowの位置のコンポーネントが重なって表示されます。
2つ以上のCell領域に跨いて配置されたコンポーネントを含むColumn、Rowを削除する場合
削除されたColumn、Rowを除き、残りのCell領域に合わせてtablecellareaプロパティ値が変更されます。
同じCellの名前に設定している領域にコンポーネントを配置する
2つ以上のCellに対して同じCellの名前を設定すると、該当のCellの名前に設定されている領域にコンポーネントを配置することができます。同じCellの名前を持つCell領域は連続したCellで構成された四角形である必要があります。
1
プロパティリストよりtabletemplateareaプロパティのボタンをクリックします。
Table Template Areaウィンドウが表示され、簡単な例題が表示されます。設定したColumn、Rowに合わせてtabletemplateareaプロパティを任意の値を設定します。例題に表示された値をコピーして利用することもできます。
tabletemplateareaプロパティ値として"A A B" "A A B"を入力します。
2
Buttonコンポーネントを配置します。
Divコンポーネントの方にドラッグすると、仮想のTable Cell領域が表示され、Cellの名前が表示されます。
3
特定のCell上にマウスポインターが位置した状態でShiftキーを押下すると、同じ名前を持つCellが選択された状態で表示されます。
4
同じ名前を持つCellが選択された状態でマウスボタンをクリックすると、該当の領域にコンポーネントが配置されます。
このように配置されたコンポーネントのtablecellareaプロパティ値はCellの名前に設定されます。上記の例題でtablecellareaプロパティ値は「A」になります。
コンポーネントの配置基準、間隔を設定する
画面上にコンポーネントを配置する場合、必ずしも開始位置から配置するわけではありません。機能ボタンの場合、画面の右側に配置して一定の間隔を空けることにより、利用者がボタンの位置を分かりやすいようにします。
コンポーネントの配置基準
typeプロパティ値が「horizontal」もしくは「vertical」である場合、プロパティ値によって「horizontal」であれば水平軸になり、「vertical」であれば垂直軸がMain Axis（主軸）になります。そして、Main Axisと交差する軸がCross Axis（交差軸）です。「horizontal」であれば垂直軸になり、「vertical」であれば水平軸がCross Axisになります。
flexmainaxisalign、flexcrossaxisalignプロパティを未設定にした場合は下記の通りに「start」に設定されます。
flexmainaxisalign、flexcrossaxisalignプロパティをそれぞれ「end」、「center」に設定すると、コンポーネントの配置位置が変更されます。配置順序は変更されません。
コンポーネント間隔の設定
spacingプロパティを「5px」、horizontalgapプロパティを「5」に設定した場合は下記の通りに表示されます。spacingプロパティはLayoutコンテナとコンポーネントの間隔を設定します。そして、各コンポーネント同士の間隔はhorizontalgapプロパティで設定します。
配置間隔を特定の値に設定せずにflexmainaxisalignプロパティで配置間隔を設定することをできます。
flexmainaxisalign | 配置方式 |
|---|---|
spacebetween | (1) 最初、最後のコンポーネントをMain AxisのStart、Endの位置に配置します。 (2) 残りの余白を、各コンポーネントの間隔として均等に設定します。 |
spacearound | 全体の余白を、全てのコンポーネントの数で割り、開始と終了位置の間隔として設定します。 各コンポーネントの間隔はLayoutコンテナとコンポーネントの間隔の2倍のサイズに処理します。 |
spaceevenly | 全体の余白を、全てのコンポーネントの数+1で割り、各コンポーネントの間隔、Layoutコンテナとコンポーネントの間隔の両方とも設定します。 全ての間隔を均等に処理します。 |
改行処理
コンポーネントのflexshrinkプロパティを未設定にした場合は「1」に設定され、配置されたコンポーネントがLayoutコンテナ領域を超えるとコンポーネントのサイズを再調整することで、Layoutコンテナ領域内に収まるようにします。
しかし、コンポーネントのwidthもしくはheightの値がpx単位で設定していて、且つflexshrinkプロパティを「0」に設定すると、コンポーネントのサイズによってLayoutコンテナ領域を超える場合があります。 実行画面ではスクロールバーが表示されます。
flexwrapプロパティを「wrap」に設定すると、Layoutコンテナ領域を超えるコンポーネントに対して自動改行処理を行い、次の行に配置します。
Table Cellの間隔設定
tabletemplateプロパティの設定時に「px」、「%」、「*」の3つの単位より1つを選択することができます。Table template EditorでCreate TableボタンをクリックしてColumnとRowを設定する場合にはそれぞれの値が「1*」に設定されます。
「*」を単位として使用するColumn、Rowが存在する場合には、残りの余白を分けてサイズとして設定します。例えば、tabletemplateプロパティ値が「1* 1* / 30px 2* 1*」である場合、1つ目のColumn のサイズを「30px」に設定し、それ以外の2つのColumnのサイズは残りの余白の2/3、1/3の値に設定されます。
「*」を単位に使用するColumn、Rowが存在すると、Table Cellの間隔を設定できません。下図はtabletemplateプロパティを「100px 100px / 30px 100px 30px」に設定し、tablecellalignプロパティを「spacebetween spacebetween」に設定した例です。