Formデザイン|配置、選択、移動、設定

コンポーネント

配置

フォームデザインでは、コンポーネントバーで選択されたコンポーネントを生成することができます。

Button component

フォームデザインの何もないところでマウスをドラッグすると、Rubber Bandが四角形に表示され、四角形のスタートポインタの位置と最後のポインタの位置及び幅と高さの情報を表示して、生成されるコンポーネントのサイズを調節するとき、ユーザーが予め推測できるようサポートします。

最終的にマウスでドラッグした領域のサイズでコンポーネントが生成されます。もし、マウスをドラッグしない状態でクリックだけすると、Type Definitionに定義されたコンポーネントのデフォルトサイズに生成されます。

アプリ開発時に使用しますが、画面に表示されないコンポーネントを個別に管理することができるInvisible Objects領域が提供されてフォームデザイン作業時に各コンポーネントのプロパティを調整することができます。

Invisible Layout

選択

Form Designでは、修飾キーを利用して様々な方式のコンポーネントSelectionをサポートします。

ショートカットキー

説明

Tab

taborder順序によって、現在選択したコンポーネントの次の順序のコンポーネントを選択します。

Formを選択した状態である場合には、最初のtaborderに指定されたコンポーネントを選択します。

Shift + Tab

taborder順序によって、現在選択したコンポーネントの前の順番のコンポーネントを選択します。

Formを選択した状態である場合には、最後のtaborderで指定されたコンポーネントを選択します。

Ctrl または Shift

該当のキーを押した状態で、マウスクリックで複数の項目を選択することができます。

Esc

現在選択したコンポーネントの上位コンポーネントを選択します。

Ctrl + a

Formを除いたすべての項目を選択します。

Alt

該当のキーを押した状態で、マウスクリックで特定のコンポーネントを選択すると、同じ種類のコンポーネントを全て選択することができます。

taborder順序に、Formは含まれません。コンポーネントを選択した状態で、Tabキーを入力してもFormを選択することができません。

Select Type

[Options > Form Design > General > Select Type] の設定によって、Formデザインでマウスドラッグ時にコンポーネントが選択される方法が変わります。

上位コンポーネントの選択

コンテナコンポーネント内に配置されたコンポーネントは、コンポーネントの選択時に上位コンポーネントが選択できる追加UIを提供します。コンポーネントの選択時にコンポーネント上部領域に[▲]ボタンが表示されます。[▲]ボタンの上にマウスカーソルを重なると、上位コンポーネント領域で青色の枠が表示されます。

[▲]ボタンのクリック時に上位コンポーネントを選択した状態に切り替わります。コンテナコンポーネントの中でDiv、PopupDiv、Viewコンポーネントの場合、コンポーネントの移動やコンテキストメニューの実行のためのUIを提供します。


説明

1

コンポーネントのidプロパティ値が表示されます。

該当の領域の上にマウスカーソルを重ねるとコンポーネントが移動できる状態になり、ドラッグ操作により位置を変更することができます。


コンテナコンポーネントの上位に他のコンテナコンポーネントがある場合は[▲]ボタンが表示され、隣に表示されます。

2

コンテキストメニューを実行します。

マウスボタンのクリック時にコンテキストメニューが表示されます。

重なったコンポーネントの選択

コンポーネントのサイズと位置の値が同一である場合は重なって表示されます。Design画面で重なったコンポーネントの上にマウスカーソルを移動すると、隠れて見えないコンポーネントが表示され、クリック操作により選択することができます。

移動

選択したコンポーネントを目的の位置に移動させることができます。

マウス

選択したコンポーネントをドラッグ＆ドロップで移動することができます。キーボードのショートカットキーに応じて、移動時の動作方式が異なります。複数のショートカットキーを一緒に使用することができます。

ショートカットキー

説明

Ctrl

コンポーネントがコピーされて移動します。

Shift

上下左右の一方向にのみ移動することができます。

Alt

Snap機能を無視します。

キーボード

選択したコンポーネントを、キーボードの矢印キーを使って移動することができます。方向キーを入力するたびに、メニューの[Options>Form Design>Grid>Dot grid size]に指定された値だけ移動します。Ctrlキーをショートカットキーとして使用すると、最小単位（1px）だけ移動します。

サイズ

コンポーネントのTrackerのポイントが活性化された状態で一つのPointをマウスでDrag&Dropすると、コンポーネントのサイズを変更することができます。

コンポーネントを1つだけ選択してサイズを変更する場合は、サイズ情報を表示します。この時、表記されるサイズの単位は、ルーラーの表示単位に応じて対応する単位で表示されます。

複数のコンポーネントがMulti Selectされている場合は、同じ比率でコンポーネントのサイズが変更されます。

Change Multi Selection Component Size

Shiftキーを押した状態でマウスでサイズを変更すると、縦横比率が統一されてでサイズが変更されます。

Change Component Size to used Shift Key

Ctrlキーを押した状態でマウスでサイズを変更すると、コンポーネントの中心に上下、左右に同じサイズに変更されます。

Change Component Size to used Ctrl Key

Shift + Ctrlキーを押した状態でマウスでサイズを変更すると、二種類の機能が同時に適用されます。

マウスを使用をせず、Shiftキーを押した状態でキーボードの方向キーを使用してコンポーネントのサイズを変更することができます。この時、方向キーの入力時に変更されるサイズは、メニューの[Options > Form Design > Guide]で指定したDot Grid Size値に応じて処理します。

コピー

選択されたコンポーネントはキーボードの方向キーで移動することができ、変更された座標はプロパティにリアルタイムで適用されます。また、Ctrlキーを押した状態でマウスで移動すると、その場所にコンポーネントがコピーされます。

Copy Component

ロック

Lock Componentsを設定すると、コンポーネントのサイズと位置を変更することができません。Lock Componentsの設定と解除はリボンメニューの[DESIGN - Lock - Lock Components]またはメニューの[Design> Lock Components]を選択するか、フォームデザイン画面でコンテキストメニューを開き、[Lock Components]項目を選択します。

マウスドラッグを除いて、キーボードの矢印キーを使用するか、プロパティウィンドウで Positionを変更した場合には、Lock Components機能が無効です。

Tab Order

生成されたDesignがLaunchされ実行されているとき、<Tab>キーを押してコンポーネントから別のコンポーネントに移動する順序を設定します。

Tab Order(Z-Order) View

現在の画面に設定されたタブの順序を確認する機能です。メニューの[Design > State View > Tab Order]項目を選択すると、トグル形式で、該当機能をオンまたはオフにすることができます。機能が有効な場合、次の図のように、コンポーネントの左上に2つの数字が表示されます。

青い四角の中に表記されたのは、タブの順序を表示します。コンポーネントのtaborderプロパティを変更したり、「Tab Order Editor」機能を使用して順序を変更できます。

緑色の四角形の中に表記されたのは、コンポーネントのZ-Orderを表示します。Z-Orderは、コンポーネントが重なっているときの表示順序を指定します。数字が大きいコンポーネントが最も上に位置し、ユーザに表示されます。

Z-Orderは、Alignツールバーで、「Bring to Front」、「Send to Back」、「Bring Forward」、「Send Backward」の4つの機能を使って変更したり、Sourceタブで配置されたXMLコードの順序を変えて変更することができます。

Tab Order Editorでタブオーダーの変更後にタブ順にZ-Orderを変更したい場合には、メニュー[Design > Arrange to Tab Order]項目を選択します。


Tab Order Editor (View Type)

Design Windowが活性化されているときにCtrl + Tキーを押すか、メニューの[Design > Tab Order Editor(View Type)]項目を選択して機能を実行することができます。

マウスカーソルに表示されているインデックス番号が設定するTab Order番号です。コンポーネントをクリックすると、該当コンポーネントのTab Orderがマウスカーソルのインデックスに反映され、他のコンポーネントのインデックスが自動的に補正されます。

マウスカーソルを特定のコンポーネントの上に置くと、コンポーネントが緑色で強調されて表示され、「Next Taborder」値に該当するコンポーネントは、マウスカーソルが位置していなくてもオレンジ色に強調されて表示されます。また、複数のコンポーネントが重なっている場合には、コンポーネントが広がれた状態に表示されるのでコンポーネントのタブ順序を編集することができます。

Tab Order Editモードでは、コンテキストメニューを以下のようにサポートします。

メニュー

ショートカットキー

説明

Set Next Tab Order


Next Tab Order値を直接指定します。

Tab Order Decrease

PageDown

現在設定されている Tab Order値の間隔を最小限に抑えます。

0を基準に順番に値を変更します。

Next Tab Order Value by 1

Up

Next Tab Order値を1ずつ加えます。

Previous Tab Order Value by 1

Down

Next Tab Order値を1ずつ減らします。

最小値は0です。

Next Tab Order Value by 10

Right

Next Tab Order値を10ずつ加えます。

Previous Tab Order Value by 10

Left

Next Tab Order値を10ずつ減らします。

現在 Next Tab Order値が10以下の場合には、0で指定します。

Tab Order Increase

PageUp

現在設定されているすべてのコンポーネントのTab Order値を10倍に増加します。

Tab Orderが順番に指定されたコンポーネント間に追加するコンポーネントがある場合に使用します。たとえば、Tab Orderが3、4であるコンポーネント間に追加するコンポーネントがある場合、Tab Order値を30, 40に指定し、31から39の間の値でコンポーネントを追加することができます。

End Edit

Enter

変更された内容を保存し、Tab Order Editモードを終了します。

Cancel Edit

Esc

変更された内容を無視して、Tab Order Editモードを終了します。

Tab Order Editor (List Type)

リストの形でコンポーネントの Tab Orderを確認し、変更することができます。複数の項目を選択し、下のボタンを使用して、希望する順序で Tab Orderを変更することができます。

メニューの[Design > Tab Order Editor(List Type)]項目を選択して、タブ順序を編集することができます。

Tab Order外のリストに表示される情報（id、text、tabstop）は、Tab Order Listウィンドウで変更することができません。

プロパティの設定

Form Designで選択されたコンポーネントのプロパティは、Properties Windowに表示され、Properties Windowで値を変更する場合、コンポーネントにすぐ適用されます。

Change Property

borderRadiusのようにプロパティが下位プロパティを持っている場合は、Expandが可能なIconがプロパティの前に表示されます。プロパティは下位プロパティと同期化されており、プロパティを直接、修正したり、下位プロパティを修正すると、もう一方にも自動的に反映されます。

Expand Property

Outlineview

画面上に配置されたコンポーネントの一覧をツリービューで表示します。Viewメニューより Outlineviewを選択し、Form Designモードの場合に動作します。


説明

1

Formオブジェクト内に配置されたコンポーネントの一覧を表示します。

コンポーネントの一覧は以下の基準により順序通りに表示されます。

  • typeプロパティ値が「table」である場合はtablecellareaプロパティ

  • typeプロパティ値が「horizontal」もしくは「vertical」である場合はコンポーネントのlayoutorderプロパティ

  • コンポーネントのZ-order

2

Formの名前（typeプロパティ）

他のレイアウトを選択すると、選択中のレイアウトのtypeプロパティが表示されます。

3

コンポーネントのidを基準として探索します。

Outlineviewペインよりコンポーネントを選択し、以下のような機能を使用することができます。

その他の機能

Paste Special

Paste Specialは、特定のコンポーネントのProperty、Event、Bindなどの情報の中から特定の情報だけをコピーして貼り付ける機能です。メニューの[Edit > Paste Special]を選択して使用することができます。

選択されたOption情報のみ適用された状態でコンポーネントを貼り付けます。[OK]ボタンをクリックする前に「Option Save」項目をチェックした場合には、現在選択されたOption情報が[Option > Form Design > Paste Special]に反映されます。

Hotkey Editor

画面に設定されたコンポーネントのHotkeyプロパティを指定する機能です。メニューの[Design>Hotkey Editor]を選択し、該当機能を使用することができます。既に設定されたHotkeyプロパティ値が表示され、設定された値がない場合は空欄で表示されます。Hotkey値を変更すると、太字で表示され、同じHotkey値が設定された場合、赤で表示されます。

Go to Event Handler

選択したコンポーネントに設定したイベントがある場合には、該当スクリプトコードの位置に移動する機能を提供します。コンポーネントを選択し、コンテキストメニューから[Go to Event Handler]項目を選択して、目的のイベント関数を選択します。

選択したコンポーネントに設定したイベントがない場合には、コンテキストメニューから項目が表示されません。

Copy ID

選択したコンポーネントのIDプロパティ値をクリップボードにコピーします。DivやTabコンポーネントの下に配置されたコンポーネントの場合には、コンポーネントのIDと親IDを含む値をコピーします。メニューの[Edit>Copy ID (Include Parent)]で選択するか、デザイン画面内のコンテキストメニューもしくはプロパティウィンドウの上部コンポーネントのリストを広げた状態で、コンテキストメニューを実行して選択することができます。

上の図のような場合、クリップボードにコピーされた値は、下記の通りです。

Div00.form.Button00

コンポーネントプリセットの登録および使用

コンポーネントプリセットは繰り返して指定するコンポーネントのプロパティ、イベントなどの情報を、別のプリセット形で管理して再利用できるようにサポートする機能です。

プリセットの登録

プリセットは、下記の方法で登録することができます。

1

任意のFormでプリセットに登録するコンポーネントのプロパティを設定します。

Calendarコンポーネントを配置して、下記のようにプロパティを変更します。

width: 200
height: 200
showmonthspin: true
showyearspin: true
type: monthonly
usetrailingday: true
weekformat: S M T W T F S

2

コンポーネントを選択した状態で、マウスの右ボタンをクリックしてコンテキストメニューの[Add Component Preset]を選択します。

「Component Preset」パネルが有効になっている場合には、パネルのツールバーの[Add Preset]を選択しても、該当コンポーネントをプリセットとして追加することができます。

3

「Component Preset」パネルが表示され、デフォルトカテゴリーにプリセットが登録されます。

プリセットの配置

登録されたプリセットは、下記の方法で画面上に配置できます。

1

「Component Preset」パネルにて、配置するプリセットを選択します。

2

Form画面上でカーソルが選択したプリセットのアイコンに変更されたことを確認します。

3

目的の位置をクリックすると、プリセットで登録したコンポーネントが配置されます。

プリセットに指定されたプロパティ値がそのまま適用されたことを確認できます。

プリセット、カテゴリーの管理

名前変更

Component Presetパネルでプリセットまたはカテゴリーを選択してダブルクリックするか、「F2」キーを押すと、編集モードに変更され、名前が変更できます。

削除

Component Presetパネルでプリセットまたはカテゴリーを選択して[Delete]キーを押すか、ツールバーの[delete]を選択すると、該当プリセット、カテゴリーを削除します。

カテゴリーを削除する場合には、カテゴリーのサブのプリセットもすべて削除されます。

順序変更

Component Presetパネルでプリセットまたはカテゴリーを選択した状態で、マウスをドラッグして移動すると、順序変更ができます。

カテゴリーの順序を変更する場合には、カテゴリーのサブのプリセットも含みます。

検索

プリセットが多数である場合はカテゴリとして分類できますが、プリセットの名前をフィルタリングして目的の項目が検索できます。プリセットの名前を指定する際に特定のルールを持っている場合、活用できます。

プリセットの更新

登録されたプリセットは、下記の方法で更新できます。

1

Form画面にプリセットを配置します。

2

配置されたコンポーネントを選択し、必要なプロパティ値を変更します。

3

Formに配置されたコンポーネントを選択した状態で、Component Presetパネルで更新するプリセットを選択します。プリセット名の横に「Update Preset」ボタンのアイコンが表示されます。

4

「Update Preset」ボタンをクリックすると、更新有無を確認した後プリセットを更新します。

コンポーネントプリセットファイルにエクスポート、インポート

カテゴリー、プリセットの設定はファイルの形にエクスポートして、他のプロジェクトや他のユーザーが利用できます。「Component Preset」パネルの上部のツールバーの「Export」ボタンをクリックすると、ファイル（xpreset拡張子）として保存します。

「Import」ボタンをクリックすると、既に保存されたファイルをインポートすることができます。インポート時には、現在使用中である設定が消えて、新しい設定でComponent Presetパネルを表示します。

「Component Preset」パネルのツールバー

Standard Bar

メニュー

機能

1

Add Category

パネルにカテゴリを追加します。

2

Add Preset

コンポーネントを選択した状態で、プリセットとして追加します。

3

delete

カテゴリーまたはプリセットを削除します。

4

Import

設定済のComponent Presetファイルをインポートしたり、xpackageファイルを選択してImport Wizardを実行します。

5

Export

設定したコンポーネントのプリセットをファイルとしてエクスポートします。

6

Options

コンポーネントプリセットファイルの位置を設定します。