panel（パネル）は、ウインドウまたはコンテナの各種オブジェクトに配置して利用できます。
パネル内には、まとめたいラジオボタンやチェックボックスを追加します。
ひとつのパネルに追加されたラジオボタンは、ひとつのグループになるので、複数のラジオボタンのグループを作りたいときはパネルを使ってグループ化します。
また、パネルを使ってコントロールをグループ化しておくと、位置の移動をする際にも、各コントロールを個別に動かさなくていいので、スクリプトを書く際の効率も良くなります。
種類
panelコンテナ
クラス名：Panel
機能
他のコントロールを配置することのできるコンテナ。
Panelの表示・非表示を切り替えると、その子も同様に表示・非表示が切り替わる。
構文
ウインドウwにパネルを追加する。
w.add ("panel"[, bounds, text, {creation_properties}]);- bounds
- panelの位置とサイズ。
幅0とすると、垂直線を表示する。高さ0とすると、水平線を表示する。 - text
- オプション。パネルの境界線に表示されるテキスト。
- creation_properties
- オプション。 設定できる内容は以下。
- name
- panelの一意の名前
- borderStyle
- パネル周囲の境界線の外観。
black, etched（デフォルト）, gray, raised, sunkenのいずれかをテキストで指定する。 - su1PanelCoordinates
- Photoshopのみ対応。trueのとき、ウインドウの子パネルの位置を自動調整する。デフォルトはfalse。
サンプルコードと実行結果
ダイアログに”タイトル”というテキスト付きのパネルを作成する。
// ダイアログ作成
var objDlg = new Window ("dialog", "パネル", [0,0,300,150]);
// パネルを追加
var objPnl01 = objDlg.add("panel", [20,30,150,100], "タイトル");
// ダイアログを画面センターに表示
objDlg.center();
objDlg.show();
コメント
リプちん様
業務でスクリプトを作成する際に、いつも参考にさせていただいています。
質問なのですが、パネルにedittext（テキストボックス）を設置したダイアログを
タブキーでフォーカス移動すると、パネルまで選択状態があるような動作になります。
これは仕様なのでしょうか。なんらかの回避策はございますでしょうか。
初歩的な質問だと思いますが、よろしくお願いいたします。
Chiricoさま
コメントありがとうございます。
私も以前、この現象の解消を試みたことがありますがうまくできなかった記憶があります。
そもそも、panelにはactiveプロパティがありません。
他のコントロールにも、タブ移動する順番設定のプロパティや、タブ移動するかどうかのon/off切り替えプロパティがないのですよね…
vbaのフォームのキメ細かさと比較しても、ずいぶんとざっくりとした仕様です。
回避策を考えてみました。
イベントリスナーのfocusや、あるいはactivateイベントなら捉えることはできるので、もしかしたらその辺りを工夫するとうまく行くかもしれません。
下のソースは、「【ExtendScript】GUI : panel（パネル）の使い方」（https://dtpscriptin.com/gui-panel/）のサンプルコードのオブジェクトを使って、イベント部分のみのコードを書いてみました。
どちらかがうまく実装できると良いのですが…
●イベントリスナーでfocusを捉える
objPnl01.addEventListener(“focus”, function() {
alert (“1 onActivate”);
objrdbtn_ap.active = true;
}, false);
objPnl02.addEventListener(“focus”, function() {
alert (“2 onActivate”);
objrdbtn_in.active = true;
}, false);
●Activateのイベントを捉える
objPnl01.onActivate = function() {
alert (“1 onActivate”);
objrdbtn_ap.active = true;
}
objPnl02.onActivate = function() {
alert (“2 onActivate”);
objrdbtn_in.active = true;
}
でも、もしかしたらChiricoさんのおっしゃるように、何かきわめて初歩的な盲点があるのかな〜などと思ったりもしています…
お力になれずごめんなさい(＞人＜;)
リプちん様
返信ありがとうございます。
この現象は、私の環境だけでなく、一般的に発生するものなんですね。
パネルを使用したスクリプトは社内のみで運用しているものなので、最悪解決できなくても問題はありません。
とは言うものの、使っていて少々気になったので質問いたしました。
ご丁寧なアドバイスをいただきましたので、参考して色々と試してみます。
リプちん様
その後自分なりに試した結果、希望どおりの移動になりました。
サンプルコードのラジオボタンをテキストボックスに変更してテストしてみました。
（変数名などはそのままですが、ご容赦ください）
Activateイベントではなく、Deactivateイベントを利用しました。
下側のテキストボックス（objrdbtn_rp、objrdbtn_ph）から移動したときに、
次のパネルの上側のテキストボックスにフォーカスするようにしました。
// ダイアログ作成
var objDlg = new Window (“dialog”, “パネルを表示する”, [0,0,400,200]);
// パネルを追加（画面左がわ）
var objPnl01 = objDlg.add(“panel”, [20,30,150,150], “人物”);
var objrdbtn_ap = objPnl01.add(“edittext”, [10,30,100,50], “アプりん”);
var objrdbtn_rp = objPnl01.add(“edittext”, [10,60,100,80], “リプちん”);
// パネルを追加（画面右がわ）
var objPnl02 = objDlg.add(“panel”, [180,30,300,150], “アプリケーション”);
var objrdbtn_in = objPnl02.add(“edittext”, [10,30,100,50], “InDesign”);
var objrdbtn_ph = objPnl02.add(“edittext”, [10,60,100,80], “Photoshop”);
objrdbtn_ap.active = true;
//パネル間をタブキーで移動した場合の処理
objrdbtn_rp.onDeactivate = function() {
objrdbtn_in.active = true;
}
objrdbtn_ph.onDeactivate = function() {
objrdbtn_ap.active = true;
}
// ダイアログを画面センターに表示
objDlg.center();
objDlg.show();
ただし問題が有り、フォーカスを移動した際にテキストボックスの文字が全選択状態になりません。
業務では打ち替えることが多いため、できれば全選択になる方が良いです。
InDesignのMenuActionオブジェクト呼び出しを試しましたが、パネル表示中は動作しないようです。
何らかの対策はご存知でしょうか。
【検証環境】
MacOS 10.14.6
InDesign 15.1.4（2020）
確かに全選択になりませんね。
ですが、別アプリやファインダーに一旦フォーカスを移してInDesignに戻ってくると全選択状態になっています。
なので、jsxできちんと状態を制御できるのか疑問に感じます。
フォーカスが戻ったときには全選択状態になることを利用するなら、例えばBridgeなどに一旦フォーカスを移してInDesignに戻る、というのも方法としてはあるかもしれません。
が、パネルの中にテキストボックスを作るのではなく、パネルはパネルとして作り、テキストボックスはgroupとしてまとめるという方法ではどうでしょうか。
リプちん様
検証ありがとうございます。
その後、いろいろ試してみたのですが、フォーカス問題がうまく扱えません。
サンプルスクリプトの「AlignToPage.jsx」や「CropMarks.jsx」を参考にして、書き換えました。
この書式はなんという名称なのかわかりませんが、一応希望通りに動きました。
ダイアログの位置や細かい寸法指定はできませんが、とりあえず機能重視で進めることにしました。
一応、書き換えたダイアログ周りを記載しておきます。
var objText = []; //入力値
var myDialog = app.dialogs.add({name:”パネルを表示する”});
with(myDialog){
with(dialogColumns.add()){
with(borderPanels.add()){
staticTexts.add({staticLabel:”人物 “});
with(dialogColumns.add()){
objText[0] = textEditboxes.add({editContents:”アプりん”, minWidth:100});
objText[1] = textEditboxes.add({editContents:”リプちん”, minWidth:100});
}
}
}
with(dialogColumns.add()){
with(borderPanels.add()){
staticTexts.add({staticLabel:”アプリケーション”});
with(dialogColumns.add()){
objText[2] = textEditboxes.add({editContents:”InDesign”, minWidth:100});
objText[3] = textEditboxes.add({editContents:”Photoshop”, minWidth:100});
}
}
}
}
var returnType = myDialog.show();
Chiricoさま
返信ありがとうございます。
InDesignのダイアログオブジェクトですね！
ダイアログオブジェクトでは、中に作るオブジェクトの基本的な位置は任意に指定できない代わりに、いつも決まった形式で作ることができる、という大きな利点があります。
withを使うとコードが冗長的にならずに良いですね。
おつかれさまでした。
ありがとうございました。