Group Object
グループ。この中に他のパーツを入れることが出来ます。目には見えないですが、これとPanelでWindowを分割していきます。Groupの中にGroupてな感じでも使います。AutoLayoutで思った通りにならない時は、Groupのalignmentの設定をミスってる可能性が高いです（私感）。
作成時のプロパティ
//add方式
w.add("group" [, bounds, {creation_properties}]); //※[ ]内はオプション
//文字列方式
Group{}
bounds [Array of Number]
長さ4の数値配列。[left,top,right,bottom]の座標。英語アレルギーの人のために日本語にすると[左,上,右,下]の座標。
creation_properties [Object]
properties自体はいろんなプロパティを格納した単なる入れ物に過ぎない。properties自体に何かを設定するのではなく、その子プロパティに設定していく。ここに属するものは、ウィンドウ作成時に1度だけ設定できる。後で変更ができない。
name [String]：このパーツに好きな名前をつける。ウィンドウの findElement () や親の children プロパティで name を利用すると、このオブジェクトを取得できる。
NOTE 1 : 見えないからわかりにくい
最初に書いたとおり、慣れるまではGroupに引っ掻き回される運命。例えば子のパーツを alignment 指定して右側に寄せたつもりでも、表示してみると全然なってない！とか。そういうのは大体、親であるGroupのalignmentを指定し忘れてたり間違ってたりする。Panelだと目に見えるので「あ、横に伸びてない！fillし忘れてる」と気づける。Groupは目に見えないので、子のプロパティばかり注意して見てしまう。
ある程度進むまではPanelとして仮配置しておくというのも手。あとでPanelをGroupに書き換える。ただしAutoLayoutの際は1つだけ注意が必要。PanelとGroupではorientationとmarginsの初期値が違うので、明確に指定していないと書き換えた途端に見た目が崩れることになるかもしれない。
別の手は、Groupの背景色を適当な色に設定する。さすれば目に見えるのでわかりやすくなる。ただ、色つけるだけで結構めんどくさい。めんどくさいので関数にして使ってる。
function bgcolor(obj , rgb){
var color = obj.graphics.newBrush (obj.graphics.BrushType.SOLID_COLOR, rgb);
obj.graphics.backgroundColor = (color);
}
obj を this に書き換えて Group のプロトタイプにしてもいいかもね。（プロトタイプ設定すると実行速度遅くなるとかいう記事を何処かで見た気がするけど、試してないからわからん。まぁ大袈裟には変わらないでしょう。）
本当は
Group.graphics.backgroundcolor = [255,255,255]
てなくらいに簡単に書かせて欲しい。ブラシの設定が長すぎ。
NOTE 2 : 使い所
めちゃくちゃ使う。自動レイアウトを使う場合、ウィンドウをコンテナで区切っていく必要があるので、まずそこでめちゃくちゃ使う。
あとはUIコントロールをまとめて無効化したい時。例えば、右図のように一番上のチェックボックスのON/OFFに合わせて、２番目以下のチェックボックスを有効/無効にしたい時。（有効/無効というのはチェックのON/OFFとは別で、そもそもユーザーがクリックできるのかどうかという意味）
例えば以下のコード
var w = new Window('dialog{ alignChildren : "left" , \
cb1 : Checkbox{ text : "これがONのときだけ" , value : true }\
cb2 : Checkbox{ text : "有効な設定1" }\
cb3 : Checkbox{ text : "有効な設定2" }\
cb4 : Checkbox{ text : "有効な設定3" }\
}');
w.cb1.onClick = function(){
w.cb2.enabled = this.value;
w.cb3.enabled = this.value;
w.cb4.enabled = this.value;
}
w.show();
onClick内でチェックボックス1つ1つのenabledを設定している。「まぁこんくらいなら...」て思うな。察せ。これが実用性のない超シンプルなサンプルであるだけで、実際はもっと多い数が必要になるし、バージョンアップでチェックボックスの数が増えたら？onClickの中を追加しないといけない？めんどくさいし、多分忘れてて気づくの遅くなるし、そんなコードは美しくないし、ゴミ。
どうすればいいかと言うと、
var w = new Window('dialog{ alignChildren : "left" , \
cb1 : Checkbox{ text : "これがONのときだけ" , value : true }\
gr : Group{ orientation : "column" , \
cb2 : Checkbox{ text : "有効な設定1" }\
cb3 : Checkbox{ text : "有効な設定2" }\
cb4 : Checkbox{ text : "有効な設定3" }\
}\
}');
w.cb1.onClick = function(){
w.gr.enabled = this.value;
}
w.show();
cb2、cb3、cb4をGroupの子にした。そうすると、onClick内はGroupのenabledをfalseにするだけで、子のチェックボックス全てが無効になる。Groupの子が100個あろうが何が入っていようが、onClickの中は変更する必要はない。
こうやって、パッと見た目では分からないが、グループ化されていることでわかりやすいソースコードにもなる。
余談になるが、もしこういうUIを作るならGroupのindentを設定して、
var w = new Window('dialog{ alignChildren : "left" , \
cb1 : Checkbox{ text : "これがONのときだけ" , value : true }\
gr : Group{ orientation : "column" , indent : 20 , \
cb2 : Checkbox{ text : "有効な設定1" }\
cb3 : Checkbox{ text : "有効な設定2" }\
cb4 : Checkbox{ text : "有効な設定3" }\
}\
}');
w.show();
となってたほうが見やすいとは思う。
