ListItem

リストコントロールならどれでもいい。ListControlは何かしらのリストコントロールのオブジェクトとする。

//add方式

ListControl.add(type [, text]); //※[ ]内はオプション。

//文字列方式

ListControl{ porperties:{items:[text, text, ...]} } //こちらの[ ]は配列の意味

type [String]

リストアイテムの種類。"item"、"separator"、"node"から選ぶ。リストコントロールの種類によって選べるものが変わるので注意。

・item

一番使うやつ。全てのリストコントロールで使える。テキストだけでなく画像も表示できるので覚えておく。画像はちっちゃいアイコン表示するのによく使う。

・separator

セパレーター。ドロップダウンリストだけで使える。リスト一覧を表示した時に、水平線の仕切りを入れられる。AfterEffectsやPhotoshopの合成モードの選択する時に、種類ごとに水平線でグループ分けされてるあれ。選択はできないが、アイテムの数としてはカウントされるので注意。

・node

ツリービューだけで使える。こいつの中にさらにListItemを入れられる。フォルダみたいなもん。下の画像見れば一瞬でわかる。

text [String]

表示する文字列。

add方式は1つずつ追加する方式なので、種類と表示テキスト、種類と表示テキスト、...を繰り返していくだけなのでそんなに難しくない。

文字列方式の時、ちょっとややこしい。コントロール作成時についでにアイテムセットしちゃおう！とするとき、

var w = new Window('dialog{\

dl : DropDownList{ properties : { items : ["いろは","にほえ","どちり","ぬるを"] }}\

}');

w.show();

のように配列をそこで作っちゃえば特に問題ない。上記のコードは問題ないはず。

ここで重要なのは、「最終的にこの形に落ち着けばエラーにはならない」ということを覚えておく。

でも大概の場合、すでに配列データとして持っていることが多いのでは？フォルダ検索してファイル名を集めた配列とか、いろいろ。

var arr = ["いろは","にほえ","どちり","ぬるを"];

先にこんな配列を作ってしまっていて、これをリストコントロール作成時に文字列方式でついでにぶち込みたい時。

var arr = ["いろは","にほえ","どちり","ぬるを"];

var w = new Window('dialog{\

dl : DropDownList{ properties : { items : arr } }\

}');

w.show();

これはエラーにはならないが、アイテムがリストに反映されない。意図通りじゃないのだからエラーみたいなもん。

大前提として、new Windowの引数には「dialog{」から始まる1かたまりの文字列を与えなければならない。その文字列の中に変数名をぶち込んでもそりゃあ展開されない。配列の文字列化といえばこれ！

itemsArr.toString()

してみる？

toString() を使用するために一旦、UI文字列を分断、そして再連結しているのも注意。

var arr = ["いろは","にほえ","どちり","ぬるを"];

var w = new Window('dialog{\

dl : DropDownList{ properties : { items : ' + arr.toString() + ' }}\

}');

w.show();

これはエラー。arr.toString()の中身を見てみる。

var arr = ["いろは","にほえ","どちり","ぬるを"];

$.writeln( arr.toString() ); //ESTKのコンソールへ出力

//出力結果：いろは,にほえ,どちり,ぬるを

これってつまり、さっきのを書き直してみると、

var arr = ["いろは","にほえ","どちり","ぬるを"];

var w = new Window('dialog{\

dl : DropDownList{ properties : { items : いろは,にほえ,どちり,ぬるを }}\

}');

w.show();

こんなコードを実行してるってことになる。...最初のと違いますね。じゃあダメですね。何が足りないですか？配列の各要素が "～" で囲われていないのと、全体も [～] で囲われていない。じゃあそうなるように成形すればいい。

やり方はいくらでもあるが、join()でやってみる。joinは文字列を返すので文字列化がその時点で出来てしまう。なのでtoString()はもういらない。

var arr = ["いろは","にほえ","どちり","ぬるを"];

arr = arr.join('","'); //引数内に接続ダブルコーテーション（"）を使いたいので、引数全体はシングルコーテーション（'）で囲ってますよ

$.writeln( arr ); //ESTKのコンソールへ出力

//出力結果：いろは","にほえ","どちり","ぬるを

当然だけれど、要素の境界部分しかなってない。まぁでもあとはこれの頭と尻を修正すればいけるので

var arr = ["いろは","にほえ","どちり","ぬるを"];

var w = new Window('dialog{\

dl : DropDownList{ properties : { items : ' + String('["' + arr.join('","') + '"]') + ' }}\

}');

w.show();

これでいけたはず。でもこれこのままじゃ実用性低いです。配列の要素として、ダブルコーテーション（"）とかカンマ（,）とかが入っていると、それのせいで文字列が分断されたりいろいろ起こってエラーになるから。それらを「\」でエスケープする必要などあり結構面倒。正規表現とか駆使していろいろ頑張って最初の状態に持っていけばとりあえず通るから。ファイト！

別アプローチとしては、toSource()がある。検証のために配列の尻に英数字の要素も足した。

var arr = ["いろは","にほえ","どちり","ぬるを","123","abc"];

$.writeln( arr.toSource() ); //ESTKのコンソールへ出力

//出力結果：["\u3044\u308D\u306F", "\u306B\u307B\u3048", "\u3069\u3061\u308A", "\u306C\u308B\u3092", "123", "abc"]

文字化けした。UTF-16。英数字は...無事みたい。全体見てみると、文字化け部分以外は欲しい状態にぴったりじゃない？ 全体が [ ～ ] で囲われてて、要素毎も "～" で囲われてる。実はこっち直したほうが早かったり。じゃあ最初っからこのやり方言えやってね。テヘペロ。

//置き換え用の関数を定義

function replacer( a ){

return String.fromCharCode (a.replace("\\u","0x"));

}

var arr = ["いろは","にほえ","どちり","ぬるを","123","abc"];

$.writeln( arr.toSource().replace(/\\u[a-z0-9]{4}/ig , replacer) ); //ここで正規表現とさっきの関数を使って文字の置き換え

//出力結果：["いろは", "にほえ", "どちり", "ぬるを", "123", "abc"]

超簡単じゃん！配列の要素にダブルコーテーションとか含まれてても大丈夫！！超簡単ぢゃん！