設計ビューでの部品の編集操作には、部品共通の操作と、部品に固有の操作があります。
ここでは、部品共通の以下の操作について説明します。
部品に固有の操作については、部品に応じて、“F.5.4 コンテナ部品の編集操作”、“F.5.5 カレンダ部品の編集操作”、“F.5.6 ツリー部品の編集操作”を参照してください。
注意
設計ビューで編集操作した場合、以下の表示位置およびサイズに関するプロパティの単位が“px”になります。
style属性: top、left、width、height
スタイルプロパティのサイズ: width、height
Window部品のスタイルプロパティ: top、left
配置
設計ビューの部品を配置するには、以下の方法があります。
パレットビューから設計ビュー領域内の任意の位置へ配置
以下に、部品を配置する手順を示します。
パレットビューから部品を選択します。
設計ビュー上で配置場所をマウスカーソルでポイントしてクリックします。
配置場所が決定するまでは、部品枠が表示されるので、部品の大きさを確認することができます。
パレットビューから設計ビューにUI部品が配置されると、部品ID(rcf:id属性)が自動的に付加されます。
なお、パレットビューからの部品の選択を解除するには、ESCキーを押します。
パレットビューの詳細は、“F.7 パレットビュー”を参照してください。
なお、部品をコンテナ部品内に配置する場合は、“F.5.4 コンテナ部品の編集操作”を参照してください。
選択
設計ビューの部品を選択するには、以下の方法があります。
設計ビューの部品の選択可能領域上でクリック
アウトラインビューで部品をクリック
ソースビューで部品のタグ上にキャレットを置く
また、親要素が同じ部品を設計ビューで複数選択できます(Window部品を除きます)。
複数の部品を選択するには、以下の方法があります。
部品上でCtrl + クリック
すでに選択状態になっている部品に加えて、クリックされた部品も選択状態になります。
なお、選択された部品は、選択枠で囲まれます。
移動
設計ビューの部品を移動するには、以下の方法があります。
部品を選択し、マウスによるドラッグ
部品を選択し、キーボード(カーソルキー)の押下
切り取り
設計ビューで選択状態の部品をクリップボードにコピーし、削除するには、以下の方法があります。
部品を選択し、コンテキストメニューから[切り取り]を選択
部品を選択し、キーボードでCtrl + Xを押下
コピー
設計ビューで選択状態の部品をクリップボードにコピーするには、以下の方法があります。
部品を選択し、コンテキストメニューから[コピー]を選択
部品を選択し、キーボードでCtrl + Cを押下
貼り付け
クリップボードにコピーされた部品を設計ビューに貼り付けるには、以下の方法があります。
設計ビューのコンテキストメニューから[貼り付け]を選択
キーボードでCtrl + Vを押下
部品は、切り取りまたはコピーした部品の右下に貼り付けられます。
rcf:idが設定されている部品を貼り付けた場合、rcf:idに新しい値が設定されます。
なお、クリップボードが空の場合は、貼り付けできません。
削除
設計ビューから部品を削除するには、以下の方法があります。
選択部品のコンテキストメニューから[削除]を選択
部品を選択し、キーボードでDeleteキーを押下
なお、複数の部品が選択された場合は、選択状態の部品すべてが削除されます。子要素を持つ部品が選択された場合は、子要素も含めて削除されます。
リサイズ
設計ビューの部品をリサイズするには、以下の方法があります。
リサイズ用マークのドラッグによるリサイズ
部品を選択すると、矩形域の四隅と辺にリサイズ用のマークが表示されます。このマークをドラッグすることによって、部品をリサイズします。
コンテナ部品をリサイズした場合は、コンテナ部品の子要素の位置は、コンテナ部品の左上座標からの相対位置がリサイズ前後で変わりません。リサイズした結果、部品がコンテナ部品領域に含まれた場合は、その部品は子要素にはなりません。
元に戻す
設計ビューでの直前の操作を元に戻すには、以下の方法があります。
[Edit]メニューから[Undo]を選択
キーボードでCtrl + Zを押下
なお、元に戻せる操作は、配置、移動、切り取り、貼り付け、削除、リサイズ、整列です。
複数部品の操作を元に戻した場合、選択状態は元どおりになりません。ソースビューで部品のタグ上にキャレットのある部品が選択状態になります。
やり直し
設計ビューで元に戻した操作をやり直すには、以下の方法があります。
[Edit]メニューから[Redo]を選択
キーボードでCtrl + Yを押下
なお、やり直せる操作は、直前に元に戻した操作だけです。
整列
設計ビューで複数の部品を整列させるには、以下の方法があります。
2つ以上の部品を選択し、コンテキストメニューから[整列]の整列方法を選択
整列方法には、以下の種類があります。
左揃え
左右中央揃え
右揃え
上揃え
上下中央揃え
下揃え
部品の選択可能領域
設計ビューで部品を選択するために、部品の選択可能領域があります。
設計ビューでUI部品が重なって配置された場合、各部品の表示されている部分が選択可能領域になります。選択可能領域をマウスでクリックすると、対象の部品が選択されます。
以下の図に、UI部品が重なって配置された場合の選択可能領域の例を示します。
図F.4 選択可能領域の例
