Panel Editorの編集操作

<< Click to Display Table of Contents >>

マニュアル > 画面作成ガイド > Panel Editorの基本操作 >

Panel Editorの編集操作

フォームの編集機能

Panel Editorには、オブジェクトを編集するための多くの機能が用意されています。編集機能はPanel Editorの「編集」メニューから選択することもできますが、オブジェクトを右クリックすることで表示されるメニューからも選択することができます。

 

fap_editor_0046

メニューは「順序」「配置/整列」などのいくつかのグループに分かれており、メニューから目的の機能を選択することにより、オブジェクトの表示階層の変更や(最前面、最背面など)、コピー、切り取り、ペースト、位置合わせなどの編集操作を行うことができます。

 

 

用意されている編集機能は以下のとおりです。

 

グループ

機能名

機能の内容

編集

元に戻す (Ctrl+Z)

編集した内容を一つ前の状態に戻します(Undo)。

 


やり直す (Ctrl+Y)

Undoで戻した編集内容を一つ再実行します(Redo)。

 


コピー (Ctrl+C)

選択したオブジェクトをコピーします。

 


貼り付け (Ctrl+V)

選択したオブジェクトを貼り付けます。

 


切り取り (Ctrl+X)

選択したオブジェクトを切り取ります。

 


すべて選択 (Ctrl+A)

フォーム上の全てのコントロールを一括で選択状態にします。

 


全てのブレークポイントを削除する

スクリプトエディタで設定された全てのブレークポイントを削除します。

 


イメージを再読み込みする

イメージファイルを再読み込みし、画像の表示を再描画します。

 


グリッドを表示する

グリッドを表示します。

 


ガイドを表示する

ガイドを表示します。

 


コントロールの移動をロックする

コントロールの移動をロックします。コントロールを選択した際に、間違って移動してしまう事を防ぐことが可能です。

 


ミニプロパティボックスを表示する

ミニプロパティボックスの表示を有効にします。

 

順序

最前面に移動

コントロールを最前面に移動します。

 


最背面に移動

コントロールを最背面に移動します。

 


前面に移動

コントロールを前面に移動します。

 


背面に移動

コントロールを背面に移動します。

 

配置 / 整列

左揃え

選択した複数のコントロールを左位置で揃えます。

 


左右中央揃え

選択した複数のコントロールを左右中央位置で揃えます。

 


右揃え

選択した複数のコントロールを右位置で揃えます。

 


上揃え

選択した複数のコントロールを上位置で揃えます。

 


上下中央揃え

選択した複数のコントロールを上下中央位置で揃えます。

 


下揃え

選択した複数のコントロールを下位置で揃えます。

 


左右に整列

選択した複数のコントロールを水平方向で間隔を揃えます。

 


上下に整列

選択した複数のコントロールを垂直方向で間隔を揃えます。

 

サイズ揃え

幅を揃える

選択した複数のコントロールの幅を揃えます。

 


高さを揃える

選択した複数のコントロールの高さを揃えます。

 


高さと幅を揃える

選択した複数のコントロールの高さと幅を揃えます。

 

回転 / 反転

左90度回転

コントロールを左に90度回転します。

 


右90度回転

コントロールを右に90度回転します。

 


左右反転

コントロールを左右反転させる

 


上下反転

コントロールを上下反転させる

 

ビジュアルテーマへ変更する

全てのプロパティ

選択されたコントロールの全てのプロパティについて、ビジュアルテーマとして定義されたデフォルト値と異なる値が設定されているものをビジュアルテーマの書式に変換します。


Colorプロパティ

選択されたコントロールのプロパティのうち、FillColorやBorderColorなどのColorに関するプロパティのみを対象として、ビジュアルテーマとして定義されたデフォルト値と異なる値が設定されているものをビジュアルテーマの書式に変換します。


BorderStyleプロパティ

選択されたコントロールのプロパティのうち、BorderStyleに関するプロパティのみを対象として、ビジュアルテーマとして定義されたデフォルト値と異なる値が設定されているものをビジュアルテーマの書式に変換します。

ビジュアルテーマを固定値にする

全てのプロパティ

選択されたコントロールの全てのプロパティについて、ビジュアルテーマの書式で定義されたプロパティ値を固定値として置き換えます。例えば@TextColorとして定義されていた色書式は、先頭が#000000などのRGB書式の固定値に置き換えられます。


Colorプロパティ

選択されたコントロールのプロパティのうち、Colorに関するプロパティのみを対象として、ビジュアルテーマの書式で定義されたプロパティ値を固定値として置き換えます。


BorderStyleプロパティ

選択されたコントロールのプロパティのうち、BorderStyleに関するプロパティのみを対象として、ビジュアルテーマの書式で定義されたプロパティ値を固定値として置き換えます。

回転の中心位置

コントロールの中心に戻す

コントロールの回転の中心位置を、コントロールの中心に戻します。

ロック

コントロールをロックする

コントロールをロックします。ロックしたコントロールはマウスで移動できなくなります。例えば背景イメージなどをロックして、誤って動かなさないようにすることができます。

 


ロックを解除する

ロックしたコントロールを解除します。

 

グループ化

グループ化

複数のコントロールをグループ化します。

 


グループ化解除

グループ化を解除します。

 

 

 

ツールバーアイコン

Panel Editorの上部には、よく使う機能に簡単にアクセスするための各種アイコンが配置されています。

 

fap_editor_0131

 

 

fap_editor_0121

新規クライアントを作成します。

 

fap_editor_0122

プロジェクトファイル、またはクライアント設定ファイルを開きます。

 

fap_editor_0123

ファイルの保存を行います。

 

fap_editor_0124

切り取り操作を行います。

 

fap_editor_0125

コピー操作を行います。

fap_editor_0126

貼り付け操作を行います。

 

fap_editor_0127

Undo操作を行います。

 

fap_editor_0128

Redo操作を行います。

 

fap_editor_0129

マウスで範囲選択した範囲での拡大表示を行います。

 

fap_editor_0130

拡大/縮小を解除し、実際のサイズでの表示を行います。

fap_editor_0132

フォーム表示エリアにあわせて画面を拡大/縮小します。

fap_editor_0133

グリッドを表示します。詳細は「グリッドについて」を参照してください。

 

fap_editor_0134

ガイドを表示します。詳細は「ガイドについて」を参照してください。

fap_editor_0178

コントロールの移動をロックします。コントロールを選択した際に、間違って移動してしまう事を防ぐことが可能です。

fap_editor_0135

ミニプロパティボックスの表示/非表示の切り替えおよび、ミニプロパティボックスの設定を行います。

詳細は「ミニプロパティボックス」を参照してください。

fap_editor_0136

ヘルプ(リファレンスマニュアル)を開きます。

 

fap_editor_0137

Panel Browserを起動します。現在開かれているクライアント設定ファイルでランタイム実行します。

 

fap_editor_0138

Panel Serverを起動します。

現在選択中のプロジェクトに登録されているサーバ設定ファイルを開きます。または、PSFilePathルートプロパティに設定されているサーバ設定ファイルを開きます。それらのいずれにも該当しない場合、ブランクの状態でPanel Serverが起動されます。

尚、既にPanel Serverが起動されている場合は、当該Panel Serverを前面に表示します。

fap_editor_0139

エクスプローラーを開きます。ワークスペースビューで現在選択されているアイテム(クライアント設定ファイルまたはサーバ設定ファイル)が格納されているフォルダを表示します。

fap_editor_0140

クライアントのセットアップを呼び出します。セットアップに関する詳細は「運用ガイド」を参照してください。

fap_editor_0044

現在選択中のコントロールのTextプロパティ、TextFontプロパティを直接編集することができます。

 

 

 

hint

Panel Editorでフォームを表示した状態で、Ctrlを押しながらマウスホイールを操作すると、表示の拡大/縮小を行うことができます。

 

 

グリッドについて

初期状態でフォームを開くと、フォーム上には小さなドットが均等間隔で表示されています。そして、フォーム上でコントロールを配置する際には、あたかも部品がこのドットに吸い付くような感覚で、ドット単位の大きさにしかコントロールを配置できません。このドットのことを「グリッド」と呼びます。

 

(グリッドが表示されたフォーム)

fap_editor_0047

 

 

グリッド機能はコントロールを均等に表示したい場合などに有効ですが、グラフィック画面などで細かな絵を描きたい時は邪魔になることもあります。そのような場合はグリッドを非表示にすることで、ピクセル単位の細かな作画が行えるようになります。

 

グリッドの表示/非表示はPanel Editorの上部にある以下のアイコンから切り替えることができます。

 

fap_editor_0045

 

又は、メニューから「編集」「グリッドを表示する」を選択することによっても同様に切り替えることができます。

 

fap_editor_0048

 

尚、グリッドの表示幅と高さについては、GridHeightルートプロパティ、GridWidthルートプロパティから自由に変更することができます。詳細は「ルートプロパティ」を参照してください。

 

 

ガイドについて

Panel Editorにはガイド機能が用意されています。ガイド機能を有効にすると、フォーム上に既に配置されているオブジェクトの位置合わせを容易に行う事ができるようになります。ガイド機能を用いると、マウスのドラッグにより移動させている途中のオブジェクトの座標位置に対して、他のオブジェクトの上、下、中央、左、右の各位置と同じ位置になるときにガイド線が表示され、あたかもガイドに吸い付くようにオブジェクトを配置することができます。

 

(ガイド線が表示された状態)

fap_editor_0049

 

ガイドの表示/非表示はPanel Editorの上部にある以下のアイコンから切り替えることができます。

 

fap_editor_0050

 

又は、メニューから「編集」「ガイドを表示する」を選択することによっても同様に切り替えることができます。

 

fap_editor_0103

 

 

 

複数オブジェクトの同時選択

オブジェクトは複数同時に選択することができます。複数のオブジェクトを同時に選択するには、マウスで範囲指定するようにドラッグします。

 

fap_editor_0051

全てのオブジェクトを囲むように、マウスの左ボタンを押しながら左上から右下に範囲指定するようにドラッグします。

 

 

fap_editor_0052

3つのオブジェクトが同時選択されました。

 

尚、Ctrlキーを押しながら対象のオブジェクトを一つずつクリックすることによっても、複数オブジェクトの同時選択を行うことができます。

 

 

fap_editor_0174

尚、マウスの左ボタンによる範囲選択では、オブジェクトの一部でも選択範囲に含まれていると選択対象となります。

 

左記の例では、右側の四角形は一部しか選択範囲に含まれていません。

 

fap_editor_0052

左ボタンによる範囲選択では、選択範囲にかかる3つのオブジェクト全てが同時選択されました。

 

 

 

fap_editor_0174

マウスの右ボタンを押しながら範囲選択を行うと、オブジェクトの全体が選択範囲に含まれているものだけを選択対象とすることができます

 

左記の例では、右側の四角形は全体が選択範囲に含まれていません。

 

fap_editor_0175

右ボタンによる範囲選択では、選択範囲に完全に含まれた2つのオブジェクトのみが同時選択されました。

 

 

 

 

同時選択の追加/解除

オブジェクトの同時選択では、他のオブジェクトの同時選択への追加や、同時選択されているオブジェクトの解除がおこなえます。

 

fap_editor_0175

左記は2つのオブジェクトが選択されている状態です。この状態で、さらに他のオブジェクトを追加選択したい場合は、Ctrlキーを押しながら対象のオブジェクトをマウスでクリックします。

 

ここでは例として、Ctrlキーを押しながら右側の四角形をクリックします。

 

 

fap_editor_0052

クリックしたオブジェクトが同時選択に追加されました。

 

尚、複数選択されているオブジェクトから任意のオブジェクトを選択解除したい場合には、Ctrlキーを押しながら解除したいオブジェクトをクリックします。

 

 

 

複数のオブジェクトのプロパティを一括で変更する

複数のオブジェクトが選択された状態で、プロパティページでプロパティを変更すると、選択されているすべてのオブジェクトに設定を反映することができます。

 

複数オブジェクトを選択後、FillColorに白色を指定

すべてのコントロールが白色になる

fap_editor_0054

fap_editor_0055

 

 

基準コントロール

以下は、現在3つのコントロールオブジェクトが選択された状態です。オブジェクトが複数選択されると、選択されていることを示す4つの四角いマークが各オブジェクトに表示されます。その中で、必ず1つだけ、青色のマークになっているものがあり、そのコントロールのことを“基準コントロール”といいます。例えばこの状態で、配置/整列から「上揃え」を実行した場合、各オブジェクトのTopは基準コントロールの上位置に合わせて揃えられます。

 

中央の円が基準コントロール

「上揃え」を実行すると、以下のようになる

fap_editor_0056

fap_editor_0057

 

尚、複数同時選択した状態で基準コントロールを変更したい場合には、以下の手順で行います。

 

1.基準コントロールにしたいオブジェクトを、同時選択から一旦解除する(Ctrlを押しながらマウスクリックする)。

 

2.解除したオブジェクトを、再び同時選択に追加する(同上)。

 

この操作により、最後に選択したオブジェクトが自動的に基準コントロールになります。

 

 

オブジェクトのグループ化

複数のオブジェクトをグループ化することができます。

 

fap_editor_0058

複数のオブジェクトが選択された状態で右クリックメニューを表示し、「グループ化」を選択します。

 

 

fap_editor_0059

オブジェクトがグループ化されました。グループ化後は複数のオブジェクトを1つの部品として扱うことができます。

 

 

グループ化を行うと、「グループコントロール」と呼ばれるオブジェクトが生成され、グループの構成要素はグループコントロールの子オブジェクトとなります。又、グループ化は階層構造とすることもできます。すでにグループ化されたグループコントロールや他のコントロールを、さらにグループ化して束ねることができます。

 

 

hint

共通プロパティのカスタムプロパティを設定することで、グループの子オブジェクトの各プロパティを束ねた独自のプロパティを自由に追加することができます。例えばそれぞれの子オブジェクトの各FillCoolorプロパティをグループオブジェクトで「_FillColor」というプロパティとして統括し、_FillColorに対して変更を加えるだけで一括で各子オブジェクトの塗りの色を変更することなどが可能となります。この機能の利用は、独自のグラフィック部品を作成する場面において非常に強力です。

 

グループ化に関する詳細についてはコントロールリファレンスの「グループコントロール」の記述を参照して下さい。また、カスタムプロパティについては、「共通プロパティ(カスタムプロパティ)」の記述を参照して下さい。

 

 

 

グループオブジェクトの編集

グループ化したオブジェクトは、1つのオブジェクトのように編集することができます。例えば、グループオブジェクトのサイズを編集すると、グループを構成する個々のオブジェクトもサイズが変更されます。

 

fap_editor_0060

グループオブジェクトを選択した状態です(これはポンプを表現したシンボルです)。

ここでは例として、オブジェクトの縦サイズを縮めてみます。

 

fap_editor_0061

編集操作によって全てのオブジェクトの形が変わりました。

 

 

また、グループ化したオブジェクトは、グループを解除することなく個々のオブジェクトの編集を行うこともできます。個々のオブジェクトを編集状態にするには、Ctrlキーを押しながらグループオブジェクトをダブルクリックします。

 

fap_editor_0062

ダブルクリックによって、グループオブジェクトの外側が網掛けになりました。この状態がグループの編集可能な状態です。

 

fap_editor_0063

四角形オブジェクトを選択して、縦幅を縮めてみます。

グループの編集状態を解除するには、網掛けになっている画面上の任意の場所でダブルクリックします。

 

fap_editor_0064

ポンプの構成要素のうち、上側の四角形だけ形が変わりました。

 

尚、グループ化を解除するには、編集メニューから「グループ解除」を選択します。

 

fap_editor_0060

右クリックでメニューを表示し、「グループ解除」を選択します。

 

fap_editor_0065

グループが解除されました。

 

 

hint

グループ化は、入れ子構造にすることもできます。入れ子とは、グループ化された複数の部品を、さらに束ねてグループ化することです。入れ子のグループであっても、Ctrlキーを押しながらさらにダブルクリックすることで、編集対象のグループ要素を掘り下げていくことができます。これにより、グループ化を解除することなく個々の構成要素を編集できます。

 

attention

グループオブジェクトに対する設定内容は、グループ化を解除すると全て消去されます。グループオブジェクトに対して記述されたスクリプトや、カスタムプロパティの設定などもすべて消えてしまうため、注意してください。尚、もしも誤ってグループを解除してしまった場合には、編集メニューの「元に戻す」によって戻すことができます。

 

 

オブジェクトの連続コピー

Panel Editorで貼り付け操作を繰り返して実行する際に、オブジェクトの位置を均等に貼り付けることができます。

 

fap_editor_0066

まず、コピー元のオブジェクトを選択してコピーし、1つ貼り付けます。

 

fap_editor_0067

ここで、新たに貼り付けられたオブジェクトを選択し、均等に貼り付けを行いたい位置に移動します。

 

fap_editor_0068

貼り付け操作を繰り返して実行します。すると、オブジェクトが均等間隔で貼り付けられていきます。

 

 

複数のPanel Editorを使ったコピー&ペースト

Panel Editorは同時に複数起動することが可能であり、異なるPanel Editor間で自由にコピー&ペーストすることができます。つまり、作成したフォームやオブジェクトなどを自由にコピーすることができます。

 

この機能は、例えばこれから開発しようとしている監視設備と類似した過去の成果物から使えそうな部品を取り込みたい場面や、ある程度規模の大きなシステムを複数人のチームで同時に開発する場合などに、複数の設定ファイルを最終成果物としてマージする際などで重宝します。

 

Panel Editor間でのコピー&ペーストは、以下の手順で行います。

 

1.Panel Editorを起動し、コピー元となる設定ファイルを開きます。

 

2.Panel Editorをもう一つ起動し、コピー先となる設定ファイルを開きます。

 

3.コピー元のPanel Editor側で、コピーしたいオブジェクトを選択し、コピー操作を行います。

 

4.コピー先のPanel Editor側で、張り付けたい対象に対して貼り付け操作を行います。

 

 

hint

Panel Editor間でのコピー&ペーストは、フォームのコピーや、複数フォームが格納されたフォルダをまるごとコピーすることもできます。

 

 

フォームのスナップショット

Panel Editorで作成したフォームは、イメージファイル(bmp/jpg)として保存することができます。この操作は、Panel Editorのファイルメニューから行います。

 

■フォームを画像ファイルに保存する

 

フォームを画像ファイルに保存するには、ファイルの「スクリーンショット」メニューから保存したい画像ファイルのフォーマットを選択します。

 

画像フォーマットを選択すると以下のダイアログが表示されるので、保存したいフォーム、ファイル名等の設定を行い、OKボタンをクリックします。

 

fap_editor_0069

対象: 保存対象のフォームを指定します。

 

     全て・・・全てのフォームを対象とする

     選択中のフォルダ ・・・選択中のフォルダのみを対象とする

     選択中のフォーム ・・・選択中のフォームのみを対象とする

     ページ指定 ・・・対象フォームをページ単位で範囲指定する

 

ファイル名称 : ファイル名のルールを以下から選択します。

 

 1) Page Number 2)Form Name 3)Folder Name + Form Name

 

ファイル名称ヘッダ : ファイル名に接頭辞をつけることができます。

 

保存先フォルダ : 画像ファイルの保存先フォルダを選択します。