このページの本文へ

BridgeのGUIをJavaScriptで操ろう! (3/4)

2010年03月05日 14時00分更新

文●古籏一浩

  • この記事をはてなブックマークに追加
本文印刷

テキストフィールドの表示とイベント処理

 ボタンの表示ができたら、続いてドットの数を入力するテキストフィールドを追加します。その前に、ダイアログ上に簡単な説明のテキスト(固定文字)を表示し、テキストフィールドに何を入力したらよいか分かるようにしましょう。固定文字はadd()の第1引数に"statictext"を、第2引数と第3引数に表示位置と表示内容(テキスト)を指定して追加します。

 テキストフィールドは、add()の第1引数に"edittext"を指定します。第2引数はこれまでと同様に表示位置を、第3引数はテキストフィールドにデフォルトで表示しておく文字を入れます。

 サンプル03は固定文字とテキストフィールドを追加したダイアログウィンドウです。

ダイアログウィンドウ上に編集可能なテキストフィールドが表示されます

ダイアログウィンドウ上に編集可能なテキストフィールドが表示されます


●サンプル03


#target "Bridge"
var dlg = new Window("dialog", "ランダムピクセル描画フィルタ設定ダイアログ", [100, 100, 400, 300]);
dlg.btn = dlg.add("button", [20, 160, 280, 180], "実行"); // (20, 160)-(280, 180)にボタンを表示
dlg.stext = dlg.add("statictext", [20, 30, 280, 50], "■ランダムピクセル描画");
dlg.stext = dlg.add("statictext", [20, 70, 280, 90], "ランダムに表示する点の数:");
dlg.etext = dlg.add("edittext", [20, 100, 280, 120], "100");
dlg.show();


 次に、ボタンがクリックされたらテキストフィールドの内容を読み出す処理を作ります。ボタンはクリックイベントを受け付けており、イベントが発生するとonClickに指定された関数(イベントハンドラ)が呼び出されます。テキストフィールドに入力された値はtextプロパティに格納されています。

 ボタンがクリックされるとテキストフィールドの内容を読み出し、アラートダイアログに表示するスクリプトがサンプル04です。

ボタンをクリックすると編集可能なテキストフィールドに入力された内容がアラートダイアログに表示されます

ボタンをクリックすると編集可能なテキストフィールドに入力された内容がアラートダイアログに表示されます


●サンプル04


#target "Bridge"
var dlg = new Window("dialog", "ランダムピクセル描画フィルタ設定ダイアログ", [100, 100, 400, 300]);
dlg.btn = dlg.add("button", [20, 160, 280, 180], "実行"); // (20, 160)-(280, 180)にボタンを表示
dlg.add("statictext", [20, 30, 280, 50], "■ランダムピクセル描画");
dlg.add("statictext", [20, 70, 280, 90], "ランダムに表示する点の数:");
dlg.edttext = dlg.add("edittext", [20, 100, 280, 120], "100");
dlg.btn.onClick = function(){
alert(dlg.edttext.text);
}
dlg.show();


この連載の記事

一覧へ

この記事の編集者は以下の記事をオススメしています