設計ビューでは、HTMLタグおよび画面部品が実行時と同じイメージで表示されます。表示された部品を、部品単位で、選択、移動、リサイズ、削除を行うことができます。また、パレットビューで選択した部品を設計ビューに配置することができます。
注意
編集中のソースコードにエラーが存在する場合、設計ビューの編集操作ができません。その場合は、ソースビューでソースコードを修正してください。
設計ビューのポップアップメニューのコマンドを以下の表に示します。
コマンド名 | 説明 |
|---|---|
更新 | 設計ビューの表示を最新の状態に更新します。 |
切り取り | 選択した部品を切り取ってクリップボードに保存します。 |
コピー | 選択した部品をコピーしてクリップボードに保存します。 |
貼り付け | クリップボードの内容を貼り付けます。 |
削除 | 選択した部品を削除します。 |
整列 | 部品の位置を揃えます。 |
モデルバインディング定義 | このコマンドは使用できません。 |
イベント処理定義 | このコマンドは使用できません。 |
機能付加部品バインディング定義 | このコマンドは使用できません。 |
ソースビュー編集中の自動反映 | ソースビュー編集中に設計ビューに自動反映するか、反映しないかを設定します。 |
プロパティ | プロパティビューを表示します。 |
参考
表示/編集禁止状態の設計ビュー
ソースビュー編集中に設計ビューに自動反映しない設定の場合、ソースビューが編集されると、ソースコードと設計ビューの同期がとれなくなります。この時点で、設計ビューはグレー画面になり、表示および編集できない状態(表示/編集禁止状態)になります。
表示/編集禁止状態の設計ビューは、以下のタイミングで表示/編集禁止状態が解除され、最新の状態に更新されます。
設計ビューにフォーカスが当たった場合
[編集]メニューの[更新]、またはツールバーの
(Ajaxページエディタを更新)をクリックした場合
ツールバーの
(ソースビュー編集中に設計ビューを自動反映)をクリックして自動反映する状態に変更した場合
なお、設計ビューが表示/編集禁止状態でも、[Preview]タブに切り替えた場合は、最新状態の画面が表示されます。
設計ビューでは、以下の2つの操作を行うことができます。
部品に対する共通の操作
部品固有の操作(コンテナ部品の編集操作およびカレンダ部品の編集操作)
部品に対する共通の操作
部品共通の操作について説明します。
配置
設計ビューの部品を配置するには、以下の方法があります。
パレットビューから設計ビュー領域内の任意の位置へ配置
以下に、部品を配置する手順を示します。
パレットビューから部品を選択します。
設計ビュー上で配置場所をマウスカーソルでポイントしてクリックします。
配置場所が決定するまでは、部品枠が表示されるので、部品の大きさを確認することができます。
パレットビューから設計ビューにUI部品が配置されると、部品ID(rcf:id属性)が自動的に付加されます。
なお、パレットビューからの部品の選択を解除するには、ESCキーを押します。
パレットビューの詳細は、“8.2.4 パレットビュー”を参照してください。
なお、部品をコンテナ部品内に配置する場合は、“コンテナ部品の編集操作”を参照してください。
選択
設計ビューの部品を選択するには、以下の方法があります。
設計ビューの部品の選択可能領域上でクリック
アウトラインビューで部品をクリック
ソースビューで部品のタグ上にキャレットを置く
移動
設計ビューの部品を移動するには、以下の方法があります。
部品を選択し、マウスによるドラッグ
部品を選択し、キーボード(カーソルキー)の押下
切り取り
設計ビューで選択状態の部品をクリップボードにコピーし、削除するには、以下の方法があります。
部品を選択し、ポップアップメニューから[切り取り]を選択
部品を選択し、キーボードでCtrl + Xを押下
コピー
設計ビューで選択状態の部品をクリップボードにコピーするには、以下の方法があります。
部品を選択し、ポップアップメニューから[コピー]を選択
部品を選択し、キーボードでCtrl + Cを押下
貼り付け
クリップボードにコピーされた部品を設計ビューに貼り付けるには、以下の方法があります。
設計ビューのポップアップメニューから[貼り付け]を選択
キーボードでCtrl + Vを押下
部品は、切り取りまたはコピーした部品の右下に貼り付けられます。
rcf:idが設定されている部品を貼り付けた場合、rcf:idに新しい値が設定されます。
削除
設計ビューから部品を削除するには、以下の方法があります。
選択部品のポップアップメニューから[削除]を選択
部品を選択し、キーボードでDeleteキーを押下
なお、子要素を持つ部品が選択された場合は、子要素も含めて削除されます。
リサイズ
設計ビューの部品をリサイズするには、以下の方法があります。
リサイズ用マークのドラッグによるリサイズ
部品を選択すると、矩形域の四隅と辺にリサイズ用のマークが表示されます。このマークをドラッグすることによって、部品をリサイズします。
コンテナ部品をリサイズした場合は、コンテナ部品の子要素の位置は、コンテナ部品の左上座標からの相対位置がリサイズ前後で変わりません。リサイズした結果、部品がコンテナ部品領域に含まれた場合は、その部品は子要素にはなりません。
元に戻す
設計ビューでの直前の操作を元に戻すには、以下の方法があります。
[編集]メニューから[元に戻す]を選択
キーボードでCtrl + Zを押下
なお、元に戻せる操作は、配置、移動、切り取り、貼り付け、削除、リサイズ、整列です。
やり直し
設計ビューで元に戻した操作をやり直すには、以下の方法があります。
[編集]メニューから[やり直し]を選択
キーボードでCtrl + Yを押下
整列
設計ビューで複数の部品を整列させるには、以下の方法があります。
2つ以上の部品を選択し、ポップアップメニューから[整列]の整列方法を選択
整列方法には、以下の種類があります。
左揃え
左右中央揃え
右揃え
上揃え
上下中央揃え
下揃え
コンテナ部品の編集操作
設計ビューで操作できる部品を子要素に持つ部品をコンテナ部品と呼びます。コンテナ部品には、以下のものがあります。
画面部品のコンテナ部品(FragmentContainerを除く)
HTML formタグ
ここでは、コンテナ部品固有の操作について説明します。
コンテナ部品の移動
コンテナ部品の移動では、コンテナ部品上の部品(子ノード)も含めて移動します。
コンテナ部品内への部品配置・移動
コンテナ部品内に部品を追加するには、コンテナ部品の領域内に子要素として追加したい部品を配置、移動します。
コンテナ部品の詳細は、“Systemwalker Runbook Automation リファレンスガイド”の“コンテナ部品”を参照してください。
カレンダ部品の編集操作
PopupCalendarはCalendarButtonと対で使用する部品です。CalendarButtonを配置すると、自動的にPopupCalendarも配置されます。
