nexacro platformでは、フォームや各のコンポーネントの位置をleft、top、right、bottom、width、heightのプロパティ値を指定して指定することができます。各プロパティの値は、ピクセル単位(px)またはパーセント(％)のいずれかを選択して使用できています。nexacro studioでは、ポジション·エディター、ルーラー、DotGrid(レイアウトの配置のために画面の背景に表示されるポイント)、ガイドラインなど、レイアウトの配置をサポートする機能を提供します。

座標系説明

nexacro platformで使用する座標系は、下の図のようにleft、right、width、top、bottom、heightのプロパティ値のうち4つのプロパティ値を選択して使用できます。

<Button id="Button00" text="Button00" width="120" height="50" left="20" top="20"/>

<Button id="Button00" text="Button00" left="20" top="20" right="260" bottom="230"/>

<Button id="Button00" text="Button00" right="260" bottom="230" width="120" height="50"/>

コンポーネントの Position設定

コンポーネントの位置を設定するときは、left、right、width、top、bottom、heightのプロパティ値のうちに4つの値を選択して使用します。フォームは、位置設定なく、width、heightの2つのプロパティ値のみ設定します。

プロパティ･ウィンドウで、Position関連のプロパティの単位であるピクセル(px)とパーセント(％)を簡単に変更することができます。プロパティ単位が変更されると、そのプロパティ値が自動的に変更されます。

スクリプトで位置を指定するときは、以下のようにsetterメソッドを使用します。単位を指定することができ、指定された単位が存在しない場合、ピクセル単位値として処理されます。

this.Button.set_left(10);
this.Button.set_left("10px");
this.Button.set_left("30%");

フォームデザイン

Tracker

マウスでコンポーネントを選択したとき、コンポーネントの固定された辺によってトラッカーが赤い色で表示されます。トラッカーを見れば、該当コンポーネントのプロパティ値がどのように指定されているかを知ることができます。

Ruler / Dot Grid

Positionは、パーセント入力をサポートするため、Form Design上で簡単に確認することができるようにパーセント単位で情報を表示する機能が追加されました。

ルーラのポップアップメニューで、Show Pixel Ruler / Show Percent Rulerを選択した場合、該当単位でルーラと Dot Gridの表示方法が変更されます。

Component Resize Info

コンポーネントを1つだけ選択してサイズを変更するときは、サイズ情報を表示します。このとき表記されるサイズ単位は、ルーラーの表示単位によって、該当する単位で表示します。

もし、ルーラ単位がパーセントで表示中ならば Resize Infoもパーセント単位で表示されます。

Position Editor

ユーザーが簡単にPosition情報を設定できるように、別のエディタを提供しています。ポジションエディタはコンポーネントを選択したときに表示されるミニツールバーで実行できます。

ポジションエディタで修正された値は、該当コンポーネントのleft、top、right、bottom、width、heightプロパティ値に反映されます。

Position関連注意事項

レイアウトマネージャ機能を使って追加のレイアウトを使用する場合は、left、top、right、bottomプロパティだけで座標値を指定すると、追加されたレイアウトのサイズによってコンポーネントが表示されない場合も発生します。

たとえば、以下のようにleft、top、right、bottomプロパティを指定してボタンコンポーネントの位置を指定すると、Defaultレイアウトでは、正常にコンポーネントが表示されます。

ただし、追加レイアウトでは、right、bottomプロパティに指定された値がフォームのサイズを超えるため、正常にボタンが表示されません。コンポーネントのleft、topの位置が固定された状態で、フォームよりも大きいrigth、bottomプロパティ値が適用されるため、画面から消えたように表示されます。