UI作成 基本の基

ウィンドウの出し方

ウィンドウは次のようにして出す。

var w = new Window('dialog');

w.show();

たった２行。

• 1. new Window() でウィンドウを生成して

  2. show()で表示

核となるのは、たったこれだけ。

あとはこれにいろいろパーツを足して見た目を作ることと、クリックなどのユーザー操作に対応する挙動を加えるだけ。

ウィンドウ作成時の様々なオプションに関してはこちらのページにて。

UIパーツの付け方は2通り

ウィンドウが表示できたら、あとはUIパーツをどんどん追加していくだけ。パーツの種類は「ボタン」「ドロップダウンリスト」「エディットテキスト」......などなど沢山あるが、例えば「ボタン」をつけるには次のようにする。

//add()メソッドを使う方法

var w = new Window('dialog');

w.btn = w.add("button",undefined,"ボタン");

w.show();

のようにして、add( ) メソッドを繰り返してどんどん追加していく。という方法と、

//文字列で与える方法

var w = new Window('dialog{\

btn : Button{ text : "ボタン" }\

}');

w.show();

のように、文字列で与える方法がある。なんと形容すればいいのか分からないが、ADOBEがくれるサンプル等には

resource-specification string = リソースを指定する文字列（...で合ってる？）

とあるので、ここでは『文字列方式』と言うことにする。

つまり、

• • 1. add()方式

    2. 文字列方式

この2つの方法がある。

別に、どっちか1つにしろ、というものではなく、混在してもいい。

個人的には文字列方式で1箇所でまとめて追加するのを基本とし、ボタンなどの挙動によってインタラクティブにパーツを増やしたり消したりする時は、addで書いたほうが楽だなと思った時はaddで行くし、それでも文字列方式のときもある。気分次第。

設定の仕方

先程のコードに「ボタンがクリックされたら『クリックされた！』とアラート表示する」機能を追加してみる。パーツの追加は文字列方式で書いていくが、もちろんadd()方式でも問題ない。

//クリックされたときの挙動を設定する

var w = new Window('dialog{\

btn : Button{ text : "ボタン" }\

}');

w.btn.onClick = function(){

alert("クリックされた！");

}

w.show();

追加したのは太字の部分。onClick というのはボタンに最初から用意されているプロパティ。

この場合「on」は「～の時」という意味なので「onClick」は「クリックした時」という意味。

最初は空っぽだが、これに関数を代入しておくと、クリックした時にその関数が実行されるようになる。今回は関数内で、

alert("クリックされた！");

というコードを書いたのでそれが実行されて、画像のようなウィンドウが出たというわけ。今回は何の意味もない関数だが、ここにコンポ設定を変更したりだの、レイヤーの名前変えたりだの、エフェクト充てたりだの...を何行も書いておくと、「クリックするだけであれこれいろいろしてくれるボタン」が出来上がる。

どんなことに反応できるの？

先程は onClick を使用したが、UIの種類毎にいろいろ用意されている。

onClick/onDoubelClick クリック/ダブルクリックした時

onActivate/onDeactivate アクティブになった時/非アクティブになった時

onChange/onChanging 選択や値が変わった時/変えている時

onMove/onMoving ウィンドウ位置が変わった時/変えている時

onResize/onResizing ウィンドウの大きさを変えた時/変えている時

onShortcutKey ショートカットキーが押された時

onDraw 描画される時

onShow/onClose ウィンドウが表示される時/閉じられる時

onExpand/onCollapse ツリービューが展開された（畳まれた）時

UIの種類毎に使えるものは違うので、これら全てが使えるわけではない。例えばボタンは上記のうち onClick/onActivate/onDeactivate/onDraw/onShortcutKey が使える。

各々、何が使えるのかはESTKのオブジェクトモデルビューアなどで確認すればわかる。