スクリプトによるGUIの生成 (2/5)

■ダイナミックなイベントの割り当て

単純にコンポーネントを作成し組み込むだけなら、このようにメソッドを呼び出してコンポーネントのオブジェクトを作成し、addするだけです。では、イベント処理をスクリプトで組み込むにはどうすればよいのでしょうか。

例として、TextBoxにテキストを書きこみ、Buttonをクリックしてメッセージを表示するというシンプルな処理を考えてみましょう（フォーム送信するのではなく、GUI ビルダーでのOn Clickを使ってAjaxで処理を実行させるやり方について、です）。

既にGUI ビルダーの記事で説明したように、このような処理には、GUI ビルダーでコンポーネントを配置後、TextBoxにOn Changeを、ButtonにOn Clickをそれぞれバインドしてやる必要がありました。この「イベント用のプロパティに関数をバインドする」という処理のやり方がわかれば、イベント処理の組み込みは行えます。

ただし、そのためには「ハンドラ・オブジェクト」というものを理解しておかないといけません。まずイベント処理の関数をハンドリングするためのオブジェクトを用意し、これをコンポーネントのイベント用プロパティにバインドする、という流れになるのです。

○On Changeイベントのバインド

・ServerChangeHandlerオブジェクトの作成

変数 =《UiInstance》.createServerChangeHandler( 関数名 );

・コンポーネントへの組み込み

《TextBoxなど》.addChangeHandler(《ServerChangeHandler》);

○On Clickイベントのバインド

・ServerClickHandlerオブジェクトの作成

変数 =《UiInstance》.createServerClickHandler( 関数名 );

・コンポーネントへの組み込み

《Buttonなど》.addClickHandler(《ServerClickHandler》);

ハンドラ・オブジェクトは、各イベントごとに専用のものが用意されています。On ChangeならServerChangeHandler、On ClickならServerClickHandlerという具合に、「Server○○Handler」という名前になっています。これらのハンドラ・オブジェクトを生成するメソッドは、UiInstanceに「createServer〇〇Handler」という名前のメソッドとして用意されています。いずれも引数に実行する関数名を記述します。

ハンドラ・オブジェクトを作成したら、それをコンポーネントに組み込みます。これは、「add〇〇Handler」という名前のメソッドとして用意されています。これで指定のイベントで処理を行わせることができるようになります。

下に、簡単なイベント処理の礼をあげておきましょう。これは、サービスでの利用を前提にして記述してあります。指定のアドレスにアクセスすると入力フィールドとボタンのページが現れ、テキストを書いてボタンをクリックするとメッセージが表示されます。

(by. SYODA-Tuyano.)

※リストが表示されない場合

AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。

function doGet(e){
	var app = UiApp.createApplication().setTitle("Sample Page");
	var panel = app.createVerticalPanel();
	app.add(panel);
	var l1 = app.createLabel("This is Sample Page.");
	l1.setStyleAttribute("font-size", "18pt");
	l1.setStyleAttribute("background-color", "#CCCCFF");
	l1.setStyleAttribute("margin", "10px");
	panel.add(l1);
	var l2 = app.createLabel("label1");
	l2.setId("label1");
	l2.setText("簡単なテキスト操作を行います。");
	panel.add(l2);
	var tbox = app.createTextBox();
	tbox.setName("tbox1");
	var changehandler = app.createServerChangeHandler("ontextchange");
	tbox.addChangeHandler(changehandler);
	panel.add(tbox);
	var btn = app.createButton("click");
	var clickhander = app.createServerClickHandler("onbtnclick");
	btn.addClickHandler(clickhander);
	panel.add(btn);
	return app;
}

function ontextchange(e){
	Logger.log(e);
	var str = e.parameter.tbox1;
	UserProperties.setProperty("input_text", str);
}

function onbtnclick(e){
	Logger.log("onbtnclick:: " + e);
	var str = UserProperties.getProperty("input_text");
	var app = UiApp.getActiveApplication();
	var l1 = app.getElementById("label1");
	l1.setText("you typed: " + str);
	return app;
}

<< 前へ　

　次へ >>

記事のリストに戻る

PC Site G+ mail