コンポーネントのPosition機能

nexacro platformでは、コンポーネントの位置を表す基本的な座標値を設定する機能のほかに、コンテンツに応じてコンポーネントサイズを自動調整する機能や基準となるコンポーネントとの距離を設定することでコンポーネントの配置を自動調整する機能を提供します。

デフォルトプロパティ

コンポーネントの座標値を設定します。以下の図のようにleft、right、width、top、bottom、height値の中から4つを選択することができます。

プロパティウィンドウからPosition関連のプロパティを設定する際に、設定値の単位をピクセル（px）もしくはパーセント（％）から１つのみ選択することができます。プロパティ値の単位を変更した場合、プロパティ値は単位に応じた値に自動的に変換されます。各プロパティ値は親コンポーネントを基準に設定されますが、PositionBaseを設定した場合には指定したコンポーネントを基準に設定されます。

Form, Mainframe, Childframeはパーセント単位を指定することができません。実際に使用する幅と高さをピクセル単位でのみ指定できます。

Formはleftとrightが常に0であるため、別途設定せずに、 widthとheightの2つのプロパティ値のみを設定します。

Formは親の画面が存在しないため、パーセント単位を使用することができません。

トラッカー

コンポーネントを選択している際に、Positionプロパティの設定値に応じて該当のトラッカー(Tracker)が赤い色（もしくは青い色）で表示されます。

トラッカー適用イメージ

プロパティ値

left, top, width, height

left, top, right, bottom

left, top, width, bottom

left, top, right, height

コンポーネントのpositionstepプロパティ値が「-1」である場合や、複数のコンポーネントを選択していない場合には、コンポーネントの中央にPositionBaseトラッカーが表示されます。

複数のコンポーネントを選択している場合には、最後の選択したコンポーネントのトラッカーのみが塗りつぶしあり四角形の点で表示され、それ以外のコンポーネントは塗りつぶしなし四角形の点で表示されます。複数のコンポーネントを選択している状態で、メニューの[Design]項目でAlign、Space、Size、Position、Arrange項目を選択した場合には、最後に選択したコンポーネントを基準に関連するプロパティ値が変更されます。

min、max、fittocontentsプロパティ

コンポーネントの高さと幅に対して、それぞれの最大値、最小値をminwidth、minheight、maxwidth、maxheightプロパティによって指定することができます。width、heightプロパティ値がmin、max値の範囲外の場合、width、heightプロパティ値は無視され、min、max値の方が適用されます。

また、fittocontentsプロパティを設定することで、コンポーネントのコンテンツ（テキスト、画像など）に合わせてコンポーネントのサイズ（高さ、幅）を自動調整することができます。例えば、imageプロパティ値として指定した画像のサイズに応じて、ImageViewerコンポーネントのサイズを自動的に変更することができます。

プロパティ値の設定が重複する場合、適用される優先度は下記の通りです。

minwidth>minheight>maxwidth>maxheight>fittocontents

例えば、元のサイズが300x300であるImageViewerコンポーネントのimageプロパティ値として400x400サイズの画像ファイルを指定し、maxheightプロパティ値を350に指定している場合、ImageViewerコンポーネントの高さの値は350になります。

minwidth、minheight、maxwidth、maxheight、fittocontentsプロパティは、アプリケーションの実行時に反映されるプロパティです。nexacro studioのデザインモードで、プロパティ値に基づいてコンポーネントのサイズを変更するには、コンポーネントを選択して、メニューの[Design>Fit to Contents]もしくはツールバーやコンテキストメニューから[Fit to Contents]を選択します。

nexacro studioで[Fit to Contents]機能を実行せずに、アプリを実行する場合には、nexacro studioのデザインモードに表示されたコンポーネントのサイズと実行された画面に表示されるコンポーネントのサイズが異なる場合があります。

minwidth、minheight、maxwidth、maxheight、fittocontentsプロパティ値は、Formがロードされた時点もしくは該当プロパティ値を指定するときに適用されます。動的にコンテンツのサイズを変更した場合に自動反映されないため、Form.resetScrollメソッドにより最新状態に更新する必要があります。

PositionBase

コンポーネントを配置する際に、親コンポーネント（Form、Divなど）ではなく、同じ親を持つ他のコンポーネントを基準として位置を指定することができます。

下記の図はPositionBaseを使用してコンポーネントを配置した例です。

1行目に配置されているButton01コンポーネントのleftプロパティ値は「183」です。Button00コンポーネントの幅と間隔も考慮して計算する必要があります。しかし、2行目に配置されているButton01コンポーネントのleftプロパティ値は「Button00:28」のようにBaseとなるコンポーネントとBaseコンポーネントを基準とした間隔のみを指定します。

制約事項

制約事項により、下記のようなコンポーネントはプロパティウィンドウのプルダウンリストに表示されません。

PositionBaseトラッカー

PositionBaseトラッカーは一つのコンポーネントを選択した際にコンポーネント領域の中央に[+]が表示されます。マウスボタンで該当トラッカーを押したまま、Baseコンポーネントとして設定するコンポーネントへドラッグすると、正確な値を指定できるウィンドウが表示されます。

1

コンポーネントを選択し、PositionBaseトラッカーをマウスボタンでクリックします。

2

Baseコンポーネントとして指定するコンポーネントへトラッカーをドラッグします。Baseコンポーネントとして指定できる場合には、対象コンポーネントの背景色が変更されます。

3

Baseコンポーネントと接続する位置のPositionプロパティ値を選択します。ドラッグした方向によって関連プロパティがデフォルトとして表示されます。各プロパティ値の先頭のチェックボックスを選択すると、値を編集することができます。

ドラッグした方向による指定可能なプロパティは下記の通りです。

top, left

top

top, right

left

Component

right

bottom.left

bottom

bottom, right

4

Baseコンポーネントとの接続が完了すると、該当のコンポーネントを選択した際に接続関係を表す線が表示されます。

接続されたBaseコンポーネントを選択したときは点線で接続関係を表示します。

コンポーネントを選択しない場合には、接続関係を表示しません。

接続関係の解除

下記の2つの方法で接続関係を解除することができます。

また、下記のように、他の設定値が変更されたことによって接続関係が解除されることがあります。

接続関係が解除される対象を警告メッセージとして表示し、解除された結果はOutputウィンドウに表示されます。

Position Editor

コンポーネントのPosition設定を行う専用の編集画面です。コンポーネントを選択し、マウスを右クリックすると表示されるミニツールバーより[Position Editor]アイコンを選択するか、メニューの[Design>Position Editor]を選択します。

Position Editorでは、選択したコンポーネントの上位オブジェクトを基準にプロパティ値を変更することができます。

「Use anchor position」オプションを選択した場合には、任意の項目を固定した状態でそれ以外の値を変更することができます。下記の例では、Left、Topプロパティ値が固定された状態になっていて、該当の設定値を削除することはできません。