UI作成 基本の基
ウィンドウを表示しよう！
ウィンドウの出し方
ウィンドウは次のようにして出す。
var w = new Window('dialog');
w.show();
たった２行。
new Window() でウィンドウを生成して
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 = リソースを指定する文字列（...で合ってる？）
とあるので、ここでは『文字列方式』と言うことにする。
つまり、
add()方式
文字列方式
この2つの方法がある。
別に、どっちか1つにしろ、というものではなく、混在してもいい。
個人的には文字列方式で1箇所でまとめて追加するのを基本とし、ボタンなどの挙動によってインタラクティブにパーツを増やしたり消したりする時は、addで書いたほうが楽だなと思った時はaddで行くし、それでも文字列方式のときもある。気分次第。
2通りの違い
どちらでも結果は変わらない。
何が違うかって言うと、add()方式は1つずつの追加しかできないので、パーツの数だけadd()を繰り返していくスタイル。
それに対して、文字列方式はUIを1ヶ所でまとめてぶちこむイメージ。
○add方式
追加したいパーツの数だけadd()を繰り返し使う。
いつでもどこでもどの階層にでも追加できる
add()の引数に無いプロパティはadd()でパーツ追加後に1つずつ設定していく
○文字列方式
階層や追加順、プロパティ名の変更がしやすい
そのパーツのほとんど全てのプロパティを同時に設定できる
最終的にエラーが出ない長い1つの文字列として成立していればいいので、文字列の連結を使うことで、途中に変数を入れるのも可能
長い文字列の中にコメントを書きたい、となれば少し手間
パーツが多い場合、エラー箇所がわかりにくい
個人的には「文字列方式」派。最初は文字列方式を知らなかったのでadd()方式で作っていたが、親子構造がわかりにくくなったり、どこでもadd()できる故にどこで追加してるのかが把握しにくくなったり、カオスだった。
文字列方式にしてからは、UI部分のソースコードが割と見やすくなったと思っている。
自分でちゃんと管理できるならどちらでも問題ない。
エラー箇所がわかりにくい例
文字列方式のめんどくささ。例えば以下のような感じ。長い文字列をスクリプト実行時に解析してパーツが追加されていくが、その際にエラーが起きました！ということは教えてくれるが、文字列の中のここが間違っています、というところの指摘までは流石に無理。
慣れていると、間違っていそうなところは大体予測はつくが、慣れていないとかなりしんどい。
なので、こまめに実行してみて、ここまでは上手くいってる、というのを確認してくべき。一気に打ち込んでからエラー吐かれると探すのもめんどい。
個人的には「,」の付け忘れ、「{」と「}」の数不一致が多いのでそれを探す。
ボタンの挙動を設定しよう！
全て自分で設定する
先程、ボタン付きのウィンドウが表示できた。ただ、このボタンには何も設定していないので、クリックしても何も起きない。
「ボタンをクリックした時、〇〇する」といったような挙動は全て自分で設定しなければならない。ボタンに限らない。「ドロップダウンリストの選択が変わった時」「ウィンドウが閉じられた時」などなど、ユーザーのアクションに反応して何かをさせたいのなら、その「何か」を自分で全て書く必要がある。
例えば「OKボタンを押したら〇〇する」の場合、〇〇の部分はもちろん、〇〇した後「ウィンドウを閉じる」までちゃんと指定する。ウィンドウは勝手には閉じない。閉じてほしくない時もあるし。閉じるべきか閉じないべきか、誰が考えるのですか？あなたです。「全て」あなたが指示を出すのです。
これをやると、普段使っているアプリケーションの挙動がどれだけ計算され尽くしているか実感するはず。同時に、どれだけ自分が意識せずに使えているのかも。ユーザーが「出来るだろう」と思うことが出来るように設定しておかないと使いにくいUIになる。
逆にユーザーが予想外の動きをした時にバグらないようにもしておかないといけない。「バグるから〇〇は、やらないでくださいね」と言っても誰も聞いてくれない。絶対やられる。そういうときにどういう挙動をするのかも設定しておく。見えない部分への気配りが必要。
設定の仕方
先程のコードに「ボタンがクリックされたら『クリックされた！』とアラート表示する」機能を追加してみる。パーツの追加は文字列方式で書いていくが、もちろん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のオブジェクトモデルビューアなどで確認すればわかる。
基本的にはこれだけ
これができれば、あとは繰り返し作業みたいなもの。
好きなパーツを足して、各パーツにいろんな挙動を設定するという繰り返し。
なので、次にするべきことは、「いろんなパーツの使い方や仕様」を覚えること。
別ページで各パーツについて説明しているのでそちらを参考にして使い方を覚えればいい。