Window
ウィンドウです。これがなければ何も始まらない。地球がなければ人間が生きられないように、ウィンドウがなければ全てのUIコントロールたちは生きる場所がない。
作り方(コンストラクター)
ウィンドウは次のようにして作る。4つの引数を取ることが出来る。文字列方式でやるなら2番目の感じで書く。
//引数使う方式(他のパーツで言うところのadd方式)
var w = new Window(type [, title, bounds, {creation_properties}]); //※[ ]内はオプション
//文字列方式
var w = new Window('type{ ~各種プロパティ~ }');
type [String] - ウィンドウの種類
3択。
dialog
一般に「モーダルダイアログ」というもの。ウィンドウを閉じるまでAEなどホストアプリを触ることはできない。AEの環境設定画面みたいな感じ。
palette
ウィンドウを表示したまま、本体アプリも触れる。AEの各パネルのドッキング解除した状態と同じ使い勝手。
window
アプリケーションウィンドウ。デフォルトで最小化ボタンがついてる。paletteのように本体アプリも操作できる。普通使わない。
title [String] - タイトルバーに表示される文字
textプロパティを設定するのと同じこと。
bounds [Array of Number] - 位置・サイズ
長さ4の数値配列。[left,top,right,bottom]の座標。英語アレルギーの人のために日本語にすると[左,上,右,下]の座標。
[0,0,200,200]だとウィンドウの左上に大きさが[200,200]のウィンドウができる。タイトルバーは考慮されないので、[0,0]の位置に表示した時はタイトルバーが隠れて見えない状態になると覚えておく。そうなるとマウスカーソルが届かないので閉じるボタンも押せないし、ドラッグしての移動も出来なくなるので注意。「Alt+F4」で閉じることができるので焦らない。dialogの場合はEscキーでも可。
自動レイアウトを使用するなら、ここは指定してはいけない。引数使う方式なら undefined を入れる。文字列方式ならboundsは記述しない。
boundsプロパティを設定するのと同じこと。
creation_properties[Object] - 作成プロパティ
propertiesプロパティを設定するのと同じこと。
properties自体はいろんなプロパティを格納した単なる入れ物に過ぎない。properties自体に何かを設定するのではなく、その子プロパティに設定していく。ここに属するものは、ウィンドウ作成時に1度だけ設定できる。後で変更ができない。
resizeable [Boolean]
trueで、ユーザーによるウィンドウのリサイズが可能になる。デフォルトはfalse。
borderless [Boolean]
ウィンドウのタイトルバーも含め、ボーダーをなくす。裸一貫、丸裸よ。右クリックメニューみたいなの作りたい時は重宝する。それ以外では使ったことないが、スクリプト起動に時間がかかるときに起動画面作るとかかね?
closeButton [Boolean]
trueで、ウィンドウのタイトルバーに「閉じるボタン」を表示する。デフォルトはtrue。
maximizeButton [Boolean] / minimizeButton [Boolean]
タイトルバーに最大化ボタン/最小化ボタンを表示する。type が dialog か window の時のみ有効。closeButton が false だと表示されないので注意。最小化した時の挙動が dialog と window で少し変わる。window の時は他のアプリケーションのウィンドウと同様、タスクバー内に隠れる一般的な挙動。dialog の時はタイトルバーだけ見えてる状態の最小化(下図参照)。というかそもそも dialog で最小化したいことなんてあるのか?
長々書いたが、個人的にこのプロパティを使うことは殆どない。
independent [Boolean]
「独立」ですね。type が window の時のみ有効。true にすると、独立したウィンドウになる。アプリケーションを閉じても生き続ける、という意味ではない。アプリケーションの裏側に回れるウィンドウかどうかということ。普通、親のアプリケーションを最小化したら子のウィンドウも一緒に最小化されて見えなくなるが、independent が true の時はその場に残る。どんなときに使うのかはわからない。使いたいと思ったことがないから。
こちらも長々書いたが、個人的にこのプロパティを使うことは殆どない。
sulPanelCoordinates [Boolean]
Photoshopだけ。ウィンドウ内のサイズはタイトルバーを含まないけど、PhotoshopCSの時は含んだ大きさを使用していた。なので、CSとCS2以降とで位置のズレが発生する。その調整のため、とのこと。このクラウド時代には、ほとんどの人にとって、もう関係ないさね!
propertiesは第4引数にObjectとして渡したいので、例えばこんな感じで使う。
var w = new Window('dialog' , [100,100,200,200] , "I am window!!" , { resizeable : true , closeButton : false } );
または 文字列方式でプロパティ設定するなら、
var w = new Window('dialog{\
bounds : [100,100,200,200] ,\
text : "I am window!!" ,\
properties : { resizeable : true , closeButton : false }\
});
こちらのパターンなら、他のプロパティもついでに設定できる。例えば追加で orientation を設定するなら、
var w = new Window('dialog{\
orientation : "row",\
bounds : [100,100,200,200] ,\
text : "I am window!!" ,\
properties : { resizeable : true , closeButton : false }\
});
{ }の中なら、プロパティの順番は好きに変えていい。
プロパティ
graphics[object] : [object ScriptUIGraphics]
visible[boolean] : false
bounds[undefined] : undefined
frameBounds[undefined] : undefined
frameLocation[undefined] : undefined
frameSize[undefined] : undefined
location[undefined] : undefined
maximumSize[object] : 4870,1870
minimumSize[object] : 0,0
preferredSize[object] : 50,30
size[undefined] : undefined
windowBounds[object] : 0,0,1434,760
characters[undefined] : undefined
justify[string] : left
text[string] :
active[boolean] : false
shortcutKey[undefined] : undefined
cancelElement[undefined] : undefined
defaultElement[undefined] : undefined
maximized[boolean] : false
minimized[boolean] : false
opacity[number] : 1
alignChildren[string] : center
children[object] :
layout[object] : [object AutoLayoutManager]
margins[object] : 15,15,15,15
orientation[string] : column
spacing[number] : 15
alignment[undefined] : undefined
properties[undefined] : undefined
enabled[boolean] : true
helpTip[string] :
indent[undefined] : undefined
parent[object] : null
textDirection[number] : 0
window[object] : [object Window]
type[string] : dialog
メソッド
add() - UIを追加する
windowOrContainerObj.add (type [, bounds, text, { creation_props } ]);addEventListener() - イベントリスナーを追加する
windowObj.addEventListener (eventName, handler[, capturePhase]);center() - 中心に表示する
windowObj.center ([window])close() - ウィンドウを閉じる
windowObj.close ([result])dispatchEvent() - イベントを強制的に発生させる
windowObj.dispatchEvent (eventObj)このターゲットでイベントの発生をシミュレートします。 スクリプトは、特定のイベントのUIEvent基本クラスを作成し、このメソッドに渡して、イベントのイベント伝播を開始できます。イベントを処理した登録済みリスナーのいずれかがイベントオブジェクトのpreventDefault()メソッドを呼び出した場合はfalseを返し、そうでない場合はtrueを返します。
findElement() - パーツを探す
windowOrContainerObj.findElement (name)hide() - 非表示にする
windowObj.hide()notify() - イベントを強制的に実行する
windowObj.notify([event])
event:オプション。呼び出すウィンドウイベントハンドラの名前。以下のどれか。
onClose onResize onMove onResizing onMoving onShow
指定したユーザーインタラクションイベントをシミュレートして、通知メッセージを送信します。 たとえば、ユーザーが移動するダイアログをシミュレートするには:
myDlg.notify("onMove")
戻り値:undefined
remove() - UIパーツを消す
windowOrContainerObj.remove(index)windowOrContainerObj.remove(text)windowOrContainerObj.remove(child)removeEventListener() - イベントリスナーを削除する
windowObj.removeEventListener (eventName, handler[, capturePhase]);show() - ウィンドウを表示する
windowObj.show()update() - ウィンドウを更新する
windowObj.update()コールバック
onActivate - アクティブになった時
説明
onClose - ウィンドウを閉じる時
説明
onDeactivate - アクティブが失われた時
説明
onDraw - 描画される時
説明
onMove - ウィンドウを移動し終わった時
説明
onMoving - ウィンドウを移動している最中
説明
onResize - ウィンドウサイズを変更し終わった時
説明
onResizing - ウィンドウサイズを変更している最中
説明
onShortcutKey - ショートカットキーが押された時
説明
onShow - ウィンドウを表示する時
説明
NOTE
NOTE 1 : dialogでの最小化
NOTE 2 : コンストラクターの第2引数以降について
先述の通り、ウィンドウの作り方は
new Window (type [, title, bounds, {creation_properties}]);
であるが、第2引数以降は、
第2引数 => textプロパティ
第3引数 => boundsプロパティ
第4引数 => propertiesプロパティ
にそれぞれ代入されるだけなので、
new Window('dialog' , [100,100,200,200] , "I am window!!" , { resizeable : true , closeButton : false } );
と、
new Window('dialog{\
bounds : [100,100,200,200] ,\
text : "I am window!!" ,\
properties : { resizeable : true , closeButton : false }\
});
は等価ということになる。
前者は何番目の引数というのが重要になるが、後者ではプロパティ名と値のセットになっているので、書く順番は問わない。
NOTE : 3 defaultElementとcancelElement
ウィンドウのプロパティに、defaultElement と cancelElementというのがある。ウィンドウタイプが dialog の時のみ動作する機能。
Enter キーを押したら defaultElement がクリックされたことと同義。Esc キーを押したら cancelElement がクリックされたことと同義。
わかりやすく言うと、例えば「コンポ設定」を開いた時や新規コンポ作成のとき、コンポの設定画面が出るが、いちいち下の方にある「OK」ボタン押さない(よね?)。「Enter」キーを押したらウィンドウが閉じるだろう。なんで出来るのかって、それは「OK」ボタンがdefaultElementとして設定されているから。同様に、キャンセルする時「キャンセル」ボタンを押しに行かない(よね?)。Esc キーで閉じる。なんで出来るのかって、それは「キャンセル」ボタンがcancelElementとして設定されているから。
ちゃんと設定しておくとユーザーに優しい設計に出来る。UIにはこういう些細な気配りが必要よね。ユーザーが「出来るだろう」と思うことが出来るようでなくてはならない。
w.defaultElement = "何かしらUIのパーツ"
w.cancelElement = "何かしらUIのパーツ"
のように設定すると、それぞれ設定できる。ただこれ、個人的には上のように直接設定したことは1度もない。実は勝手に設定してくれるから。
ボタンを配置する際、第4引数(creation_properties)の name に "ok" または "cancel" を設定すると、自動的にそれが割り当てられる。nameはパーツのあだ名みたいなもの。ユーザーが自由に決められるが、その中でも "ok" と "cancel" にだけは特別に反応する。nameで見つからなかった時の次の候補として、同様にボタンの textプロパティ(ボタンに表示される文字)が "OK" "cancel" でも反応する。
なので実際は「OK」ボタンを置けば勝手にdefaultElementになってくれる。もしボタンのテキストを「実行」なんかにしたいときは、propertiesの中のnameをokに指定する。
//add方式
add("button", undefined, "OK") //ボタンに表示するテキストがOKなのでこれだけでいい
add("button", undefned, "実行", {name : "ok"}) //text を"OK"以外にするならこうしないとdefaultElementにはならない
//文字列方式
Button{ text : "OK" } //ボタンに表示するテキストがOKなのでこれだけでいい
Button{ text : "実行", properties : {name : "ok"} } //text を"OK"以外にするならこうしないとdefaultElementにはならない
ずっとボタンボタンと書いてきたが、ボタン以外でも設定出来る。でもボタンに設定することが99%だと思うのでボタンて書いておく。
NOTE4 : show()の戻り値
モーダルダイアログ、つまりウィンドウのtypeがdialogのとき、show()の戻り値が発生する。show() でウィンドウを表示すると、そこでコードは停止し、ウィンドウが閉じられると、その続きに進む。例えば、
//戻り値の受け取り方
var result = w.show();
のようにするとshow()の結果を変数resultで受け取って、続きに進むことが出来る。これはなんてことない。普通。ではその戻り値をどのように設定するかが問題になる。
ウィンドウをshow()で表示した後は、UIでごちゃごちゃ何かしらしたあと、必ず閉じるはず。(だってdialogの時の話をしてるから。わからない人は一番上から読み直し。)
特に難しいことはない。w.close()でウィンドウを閉じる時に引数を入れておくと、それがshow()の戻り値になる。
w.close(999);
だと、999が帰ってくる。ヘルプには何でも返せるよ!って書いてるけど、数値しか返せない気がする。数字は数値に変換された。
close()はだいたい、OKボタンなどのonClick内で書く気がするが、もし以下のようにonClickをしていない場合、
var w = new Window('dialog{\
btn1 : Button{text : "OK"}\ //text="OK"なのでdefaultElementになる
btn2 : Button{text : "cancel"}\ //text="cancel"なのでcancelElementになる
}');
alert( w.show() );
試してみればわかるが、指定しない場合は以下のように自動的に決まる。
defaultElementによって閉じられた場合:1
cancelElementまたはXボタンによって閉じられた場合:2