UIの追加方法 その1
add()を使って1つずつパーツを追加していくやり方。
add()を使って1つずつパーツを追加していくやり方。
パーツを追加するにはaddメソッド使う。addメソッドはコンテナ(ウィンドウとパネルとグループ)で使える。新しく出来たパーツはそのコンテナの子になる。
ドロップダウンリストとリストボックスにも add() があるが、これはリストアイテムを追加するためなので、また違う。
どのコントロールを追加するにも、以下の形式が基本形になる。返り値は、追加した新しいパーツのオブジェクト。失敗した時はnull。
コンテナオブジェクト.add(type [, bounds, text, {creation_properties}]); //※[]の中はオプション
type [String]
追加するコントロールの種類。
bounds [Array of Number]
新しいコントロール(またはコンテナ)のバウンズ[左、上、右、下]の座標。その親(コンテナ)のローカル座標になるので、親の左上部分が[0,0]になるので注意。追加されるコントロールのboundsプロパティを設定するのと同義。
text [String]
ボタンに表示される文字とか、表示したいテキストを入れる。追加されるコントロールのtextプロパティを設定するのと同義。
creation_properties [Object]
作成時に設定出来るプロパティがいくつかあるが、それらを1つのオブジェクトとしてまとめて、ここに与える。その中身は、追加するコントロールの種類によってまちまち。これはpropertiesプロパティを設定するのと同義。
上で示した、addの引数に何を入れるのか、具体的に見てみる。「キーワード」はaddのtypeで使う。「クラス名」は、文字列方式でUIを追加する時に使用する。
Description内の説明は、Javascript Tools Guideから引用させていただきました。
キーワード/クラス名
説明(JavaScript Tools Guideより)
group
Group
Description
他のコントロールを格納するコンテナ。コンテナには、子を制御する追加のプロパティがあります。「コンテナのプロパティ」を参照してください。
グループを非表示にすると、そのすべての子が非表示になります。 可視化すると、個別に非表示になっていない子が可視化されます。
ウィンドウwに追加するには:
w.add ("group" [, bounds, {creation_properties}]);
bounds:オプション。 要素の位置とサイズ。
creation_properties:オプション。 次のプロパティのいずれかを含むオブジェクト:
name:コントロールの一意の名前。
panel
Panel
Description
フレームを備えた、他のコントロールを格納するためのコンテナ。
コンテナには、子を制御する追加のプロパティがあります。「コンテナのプロパティ」を参照してください。パネルを非表示にすると、そのすべての子が非表示になります。可視化すると、個別に非表示になっていない子が可視化されます。
ウィンドウwに追加するには:
w.add ("panel" [, bounds, text, {creation_properties}]);
bounds:オプション。要素の位置とサイズ。幅が0のパネルは、垂直線として表示されます。高さが0のパネルは、水平線として表示されます。
text:オプション。パネルの境界に表示されるテキスト。
creation_properties:オプション。次のプロパティを含むオブジェクト:
name:コントロールの一意の名前。
borderStyle:パネルの周囲に描画される境界線の外観を指定する文字列。"black"(黒)、"etched"(エッチング)、"gray"(グレー)、"raised"(盛り上がり)、 "sunken"(窪み) のいずれか。デフォルトは "etched"(エッチング)です。
su1PanelCoordinates:trueの場合、このパネルはPhotoshop CSとの互換性のためにその子の位置を自動的に調整します。デフォルトはfalseです。つまり、親ウィンドウで自動調整が有効になっていても、パネルは子の位置を調整しません。
tabbedpanel
TabbedPanel
Description
タブのコンテナ。Panel要素とは異なり、直接の子としてTab要素のみを含めることができます。コンテナには、子を制御する追加のプロパティがあります。「コンテナのプロパティ」を参照してください。パネルを非表示にすると、そのすべての子が非表示になります。可視化すると、個別に非表示になっていない子が可視化されます。
選択されたタブは、親(TabbedPanel)のselectionプロパティの値です。タブは必ずどれか1つが選択状態にあります。いずれかを選択すると、他の選択が解除されます。ユーザーが別のタブを選択するか、プロパティを設定するスクリプトによってselectionプロパティの値が変更されると、tabbedpanelはonChange通知を受け取ります。
ウィンドウwに追加するには:
w.add ("tabbedpanel" [, bounds, text, {creation_properties}]);
bounds:オプション。要素の位置とサイズ。これにより、タブの子のサイズと位置が決まります。
text:無視されます。
creation_properties:オプション。次のプロパティを含むオブジェクト:
name:コントロールの一意の名前。
tab
Tab
Description
他のタイプのコントロールを含むことが出来るコンテナ。 Panelとは異なり、TabbedPanelの直接の子である必要があります。タイトルは選択タブに表示され、スクリプトで定義可能な境界線はありません。 現在アクティブなタブは、親のselectionプロパティの値です。
コンテナには、子を制御する追加のプロパティがあります。「コンテナのプロパティ」を参照してください。パネルを非表示にすると、そのすべての子が非表示になります。 可視化すると、個別に非表示になっていない子が可視化されます。
ウィンドウwのタブ付きパネルtにタブを追加するには:
w.t.add ("tab" [, bounds, text, {creation_properties}]);
bounds:使用されません。未定義のまま渡します。 サイズと位置は親によって決定されます。
text:オプション。 タブに表示されるテキスト。
creation_properties:オプション。 次のプロパティを含むオブジェクト:
name:コントロールの一意の名前。
キーワード/クラス名
説明(JavaScript Tools Guideより)
button
Button
Description
マウスに反応するテキストを含むプッシュボタン。コントロールがクリックされた場合、またはnotify()メソッドが呼び出された場合にonClickコールバックを呼び出します。
ウィンドウ w に追加するには:
w.add ("button" [, bounds, text, creation_properties}]);
bounds:オプション。コントロールの位置とサイズ。
text:オプション。コントロールに表示されるテキスト。
creation_properties:オプション。 次のプロパティのいずれかを含むオブジェクト:
name:コントロールの一意の名前。 モーダルダイアログの場合、「ok」「cancel」は特別な意味を持ちます。「ok」にすると、このボタンがdefaultElementに、「cancel」にするとcancelElementになります。
iconbutton
IconButton
Description
アイコンを含むマウスセンシティブなプッシュボタン。コントロールがクリックされた場合、またはnotify()メソッドが呼び出された場合に、onClickコールバックを呼び出します。
ウィンドウwに追加するには:
w.add ("iconbutton" [, bounds, icon, {creation_properties}]);
bounds:オプション。コントロールの位置とサイズ。
icon:オプション。ボタンコントロールに表示されるアイコンまたはアイコンファミリの名前付きリソース、または画像ファイルのパス名またはファイルオブジェクト。画像はPNG形式である必要があります。
creation_properties:オプション。次のプロパティを含むオブジェクト:
name:コントロールの一意の名前。
style:視覚スタイルの文字列。次のいずれかです。
button:浮き上がった外観または3D外観の境界線が表示されます。
toolbutton:ツールバーに含めるのに適したフラットな外観を持っています
toggle:ボタンスタイルの表示で、値がtrueの場合、最初にクリックされたときにボタンが押された状態になり、もう一度クリックすると押されていない状態に切り替わります。トグル状態はvalueプロパティに反映されます。
statictext
StaticText
Description
ユーザーが変更できないテキストフィールド。
ウィンドウwに追加するには:
w.add ("statictext" [, bounds, text, {creation_properties}]);
bounds:オプション。コントロールの位置とサイズ。
text:オプション。コントロールに表示されるテキスト。
creation_properties:オプション。次のプロパティのいずれかを含むオブジェクト:
name:コントロールの一意の名前。
multiline:false(デフォルト)の場合、コントロールは1行のテキストを表示します。 trueの場合、コントロールは複数の行を表示します。この場合、テキストはコントロールの幅内で折り返されます。
scrolling:false(デフォルト)の場合、表示されるテキストはスクロールできません。 trueの場合、表示されるテキストはスクロールバーを使用して垂直にスクロールできます。この場合は、multilineがtrueであることを意味します。
truncate:middleまたはendで、テキストがstatictextの範囲に収まらない時、テキストから文字を削除して省略記号(...)に置き換える位置を指定できます。noneで、テキストが収まらない場合、文字は末尾から省略記号なしで削除されます。
edittext
EditText
Description
ユーザーが変更できる編集可能なテキストフィールド。テキストが変更され、ユーザーがEnterキーを押すか、コントロールがフォーカスを失った場合、またはnotify()メソッドが呼び出された場合にonChangeコールバックを呼び出します。テキストに変更が加えられたときには、onChangingコールバックを呼び出します。textselectionプロパティには、現在選択されているテキストが含まれます。
ウィンドウwに追加するには:
w.add ("edittext" [, bounds, text, {creation_properties}]);
bounds:オプション。コントロールの位置とサイズ。
text:オプション。コントロールに表示されるテキスト。
creation_properties:オプション。次のプロパティのいずれかを含むオブジェクト:
name:コントロールの一意の名前。
readonly:false(デフォルト)の場合、コントロールはテキスト入力を受け入れます。trueの場合、コントロールは入力を受け入れず、textプロパティのコンテンツのみを表示します。
noecho:false(デフォルト)の場合、コントロールは入力テキストを表示します。 trueの場合、コントロールは入力テキストを表示しません(パスワード入力フィールドに使用)。
enterKeySignalsOnChange:false(デフォルト)の場合、編集可能なテキストが変更され、コントロールがキーボードフォーカスを失うと(つまり、ユーザーが別のコントロールにタブ移動する、コントロールの外側をクリックする、またはEnterキーを押す)、コントロールはonChangeイベントを通知します。 trueの場合、編集可能なテキストが変更され、ユーザーがEnterキーを押したときにのみ、コントロールがonChangeイベントを通知します。キーボードフォーカスに対する他の変更は、イベントを通知しません。
borderless:trueの場合、コントロールは境界線なしで描画されます。デフォルトはfalseです。
multiline:false(デフォルト)の場合、コントロールは1行のテキストを受け入れます。trueの場合、コントロールは複数行を受け入れます。この場合、テキストはコントロールの幅内で折り返されます。
scrollable:(multilineが有効な場合のみ)true(デフォルト)の場合、テキストフィールドには垂直スクロールバーが現れ、テキストが表示領域に収まらない場合に有効になります。falseの場合、垂直スクロールバーは表示されません。この場合、矢印キーでテキストを上下にスクロールできます。
checkbox
Checkbox
Description
値がtrueの場合はチェックマークが付き、値がfalseの場合は空のボックスを表示するデュアルステートコントロール。 コントロールがクリックされた場合、またはnotify()メソッドが呼び出された場合に、onClickコールバックを呼び出します。
ウィンドウ w に追加するには:
w.add ("checkbox" [, bounds, text, {creation_properties}]);
bounds:オプション。 コントロールの位置とサイズ。
text:オプション。 コントロールに表示されるテキスト。
creation_properties:オプション。 次のプロパティのいずれかを含むオブジェクト:
name:コントロールの一意の名前。
radiobutton
RadioButton
Description
他のラジオボタンとグループ化されたデュアル状態コントロールで、そのうち1つのみが選択可能です。値がtrueの場合は選択された状態を示し、値がfalseの場合は空を示します。コントロールがクリックされた場合、またはnotify()メソッドが呼び出された場合に、onClickコールバックを呼び出します。
グループ内のすべてのラジオボタンは、間に他のコントロールを作成せずに連続で作成する必要があります。グループ内で一度に設定できるラジオボタンは1つだけです。別のラジオボタンを設定すると、元のラジオボタンの設定が解除されます。
ウィンドウwに追加するには:
w.add ("radiobutton" [, bounds, text, {creation_properties}]);
bounds:オプション。 コントロールの位置とサイズ。
text:オプション。 コントロールに表示されるテキスト。
creation_properties:オプション。 次のプロパティを含むオブジェクト:
name:コントロールの一意の名前。
dropdownlist
DropDownList
Description
0個以上のアイテムを含むドロップダウンリスト。 アイテムの選択がスクリプトまたはユーザーによって変更された場合、またはオブジェクトのnotify()メソッドが呼び出された場合、onChangeコールバックを呼び出します。
ウィンドウwに追加するには:
w.add ("dropdownlist", bounds [, items,{creation_properties}]);
bounds:コントロールの位置とサイズ。
items:オプション。この引数またはcreation_properties引数を指定してください。両方ではありません。各リスト項目のテキストの文字列の配列。 ListItemオブジェクトは、アイテムごとに作成されます。テキスト文字列「-」を持つアイテムは、セパレーターアイテムを作成します。
creation_properties:オプション。 両方ではなく、この引数またはitems引数を指定します。この形式は、リソース文字列を使用して定義された要素に最も役立ちます。 次のプロパティのいずれかを含むオブジェクト:
name:コントロールの一意の名前。
items:各リストアイテムのテキストの文字列の配列。 ListItemオブジェクトは、アイテムごとに作成されます。 テキスト文字列「-」を持つアイテムは、セパレーターアイテムを作成します。
listbox
ListBox
Description
0個以上のアイテムを含むリストボックス。アイテムの選択がスクリプトまたはユーザーによって変更された場合、またはオブジェクトのnotify()メソッドが呼び出された場合にonChangeコールバックを呼び出します。アイテムをダブルクリックすると、そのアイテムが選択され、onDoubleClickコールバックが呼び出されます。
ウィンドウwに追加するには:
w.add ("listbox", bounds [, items, {creation_properties}]);
bounds:オプション。コントロールの位置とサイズ。
items:オプション。各リスト項目のテキストの文字列の配列。ListItemオブジェクトは、アイテムごとに作成されます。この引数、またはcreation_propertiesのitemsプロパティを指定します。両方ではありません。
creation_properties:オプション。次のプロパティのいずれかを含むオブジェクト:
name:コントロールの一意の名前。
multiselect:false(デフォルト)の場合、選択できるアイテムは1つだけです。 trueの場合、複数のアイテムを選択できます。
items:各リストアイテムのテキストの文字列の配列。 ListItemオブジェクトは、アイテムごとに作成されます。テキスト文字列「-」を持つアイテムは、セパレーターアイテムを作成します。このプロパティまたはitems引数を指定します。両方ではありません。この形式は、リソース仕様を使用して定義された要素に最も役立ちます。
numberOfColumns:アイテムを表示する列の数。デフォルトは1です。複数の列がある場合、各ListItemオブジェクトは選択可能な単一の行を表します。そのテキストと画像の値は最初の列のラベルを提供し、subitemsプロパティは追加の列のラベルを指定します。
showHeaders:列タイトルを表示するにはTrue。
columnWidths:各列の推奨幅のピクセル数の配列。
columnTitles:各列のタイトルに対応する文字列の配列。showHeadersがtrueの場合に表示されます。
treeview
TreeView
Description
アイテムに子アイテムを含めることができる階層リスト。ツリーの任意のレベルのアイテムを個別に選択できます。アイテムの選択がスクリプトまたはユーザーによって変更された場合、またはオブジェクトのnotify()メソッドが呼び出された場合、onChangeコールバックを呼び出します。
ウィンドウwに追加するには:
w.add ("treeview" [, bounds, items, {creation_properties}])
bounds:オプション。コントロールの位置とサイズ。
items:オプション。最上位リストアイテムそれぞれのテキストの文字列の配列。ListItemオブジェクトは、アイテムごとに作成されます。nodeタイプのアイテムには、子アイテムを含めることができます。この引数、またはcreation_propertiesのitemsプロパティを指定します。両方ではありません。
creation_properties:オプション。次のプロパティのいずれかを含むオブジェクト:
name:コントロールの一意の名前。
items:各最上位リストアイテムそれぞれのテキストの文字列の配列。 ListItemオブジェクトは、アイテムごとに作成されます。タイプノードを持つアイテムには、子アイテムを含めることができます。両方ではなく、このプロパティまたはitems引数を指定します。この形式は、リソース仕様を使用して定義された要素に最も役立ちます。
item
Array of ListItem
Description
リストボックスまたはドロップダウンリストの選択項目。親のリストオブジェクトの作成時にitemsが指定されたとき、またはその後リストコントロールのadd()メソッドを使用して作成されます。
ドロップダウンリスト内のアイテムは、セパレータータイプにすることができます。この場合、アイテムは選択できず、水平線として表示されます。
itemオブジェクトには、他のコントロールにはない以下のプロパティがあります。
checked
expanded
image
index
selected
progressbar
Progressbar
Description
操作の進行状況を示す水平の長方形。プログレスバーは水平方向のみです。valueプロパティには、進行状況インジケーターの現在の位置が含まれます。デフォルトは0です。minvalueプロパティがありますが、常に0です。別の値に設定しようとしても、黙って無視されます。
ウィンドウwに追加するには:
w.add ("progressbar" [, bounds, value, minvalue,maxvalue, creation_properties}]);
bounds:オプション。 コントロールの位置とサイズ。
value:オプション。 進行状況インジケータの初期位置。デフォルトは0です。
minvalue:オプション。 valueプロパティに設定できる最小値。 デフォルトは0です。maxvalueとともに、スクロール範囲を定義します。
maxvalue:オプション。 valueプロパティに設定できる最大値。 デフォルトは100です。minvalueとともに、スクロール範囲を定義します。
creation_properties:オプション。 次のプロパティを含むオブジェクト:
name:コントロールの一意の名前。
slider
Slider
Description
移動可能な位置インジケータ付きのスライダー。水平方向のみです。インジケーターの位置が変更された後、またはそのnotify()メソッドが呼び出された場合にonChangeコールバックを呼び出します。ユーザーがインジケーターを移動している間、onChangingコールバックを繰り返し呼び出します。
valueプロパティには、minvalueとmaxvalueの範囲内のインジケーターの現在の位置が含まれます。
ウィンドウwに追加するには:
w.add ("slider" [, bounds, value, minvalue, maxvalue, {creation_properties}]);
bounds:オプション。コントロールの位置とサイズ。
value:オプション。インジケーターの初期位置。デフォルトは0です。
minvalue:オプション。 valueプロパティに設定できる最小値。デフォルトは0です。maxvalueとともに、範囲を定義します。
maxvalue:オプション。 valueプロパティに設定できる最大値。デフォルトは100です。minvalueとともに、範囲を定義します
creation_properties:オプション。次のプロパティを含むオブジェクト:
name:コントロールの一意の名前。
scrollbar
Scrollbar
Description
ドラッグ可能なスクロールインジケーターとそのインジケーターを移動するためのステッパーボタンを備えたスクロールバー。作成時に幅が高さよりも大きい場合は水平方向、高さが幅よりも大きい場合は垂直方向になります。
インジケーターの位置が変更された後、またはnotify()メソッドが呼び出された場合に、onChangeコールバックを呼び出します。ユーザーがインジケーターを移動している間、onChangingコールバックを繰り返し呼び出します。
▶valueプロパティには、minvalueとmaxvalueの範囲内で、スクロール領域内のスクロールバーのインジケーターの現在の位置が含まれます。
▶stepdeltaプロパティは、上矢印または下矢印のスクロール単位を決定します。デフォルトは1です。
▶jumpdeltaプロパティは、ジャンプのスクロール単位を決定します(インジケーターまたは矢印の外側でバーがクリックされた場合)。デフォルトは、minvalueとmaxvalueの間の範囲の20%です。
ウィンドウwに追加するには:
w.add ("scrollbar" [, bounds, value, minvalue, maxvalue, {creation_properties}]);
bounds:オプション。コントロールの位置とサイズ。
value:オプション。スクロールインジケーターの初期位置。デフォルトは0です。
minvalue:オプション。valueプロパティに設定できる最小値。デフォルトは0です。maxvalueとともに、スクロール範囲を定義します。
maxvalue:オプション。 valueプロパティに設定できる最大値。デフォルトは100です。minvalueとともに、スクロール範囲を定義します。
creation_properties:オプション。次のプロパティを含むオブジェクト:
name:コントロールの一意の名前。
image
Image
Description
アイコンまたは画像を表示します。
ウィンドウwに追加するには:
w.add ("image" [, bounds, icon, {creation_properties}]);
bounds:オプション。 コントロールの位置とサイズ。
icon:オプション。 画像コントロールに表示されるアイコンまたはアイコンファミリの名前付きリソース、または画像ファイルのパス名またはファイルオブジェクト。 画像はPNG形式である必要があります。
creation_properties:オプション。 次のプロパティを含むオブジェクト:
name:コントロールの一意の名前。
flashplayer
FlashPlayer
Description
SWFファイルに保存されているFlashムービーをロードおよび再生できるFlash Playerを含むコントロール。
ScriptUI FlashPlayerは、Adobeアプリケーション内でFlashアプリケーションを実行します。Flashアプリケーションは、Adobeアプリケーションが実行するExtendScriptバージョンのJavaScriptとは異なるJavaScriptの実装であるActionScriptを実行します。
このタイプのコントロールオブジェクトには、SWFファイルのロード、ムービーの再生の制御、ActionScript環境との通信を可能にする関数が含まれています。「FlashPlayerコントロール機能」を参照してください。
ウィンドウwに追加するには:
w.add ("flashplayer" [, bounds, movieToLoad, {creation_properties}]);
bounds:オプション。 コントロールの位置とサイズ。
movieToLoad:オプション。 プレーヤーにロードするSWFファイルのパスまたはURL文字列またはFileオブジェクト。
creation_properties:オプション。 次のプロパティのいずれかを含むオブジェクト:
name:コントロールの一意の名前。