Buttonのクリックイベント処理
ここでのポイントは、Buttonをクリックした時の処理の実装法です。これは以下のような形で実装されています。
btn.addActionListener(new ActionListener(){…略…});
Echoのコンポーネントでは、基本的にawt/Swingなどと同様のデリゲート・イベントモデルを採用しています。ボタンをクリックすると、そのコンポーネントにActionEventというイベントが発生します。これを処理するため、用意されている「ActionListener」インスタンスを、addActionListenerで組み込んでやれば、あとはActionListener側で処理を行ってくれます。このあたりはawt/Swingとまったく変わりません。
ここでは、ActionListenerを無名クラスとして定義しています。ActionListenerには「actionPerformed」メソッドがあり、クリック時の処理をこの中に用意しておくことになります。ここで行っているのは、単にTextFieldから「getText」でテキストを取り出し、それをもとに結果表示のテキストを用意して、Labeの「setText」で表示する、というだけのものです。非常に単純ですから改めて説明の必要はないでしょう。
基本的にはawt/Swingと同じようなイベント処理がEchoにも用意されていることが分かったでしょう。それを踏まえて、改めて考えてみましょう。このイベント処理は、一体「どこで」行われているのでしょうか。
実は、サーバーサイドなのです。試しに、Webブラウザから作成したEchoのページにアクセスしてから、サーバーを停止し、ボタンを押してみましょう。画面に「This application has been stopped due to an error.」といったエラーメッセージが表示されます。サーバーが停止しているため、ボタンクリック時の処理が実行されなくなってしまったためです。
Echoでは、コンポーネントを組み込み、イベントリスナーを作成しているだけで、それがクライアント側で実行され、どの部分がサーバー側で動くのか、まったく意識することがありません。これまで取り上げてきたプレゼンテーション層のフレームワークにも言えることですが、こうした「サーバーとクライアントを意識することなく開発が行える」という手法は、最近のこの種のフレームワークではかなり浸透してきているように思えます。
メッセージダイアログを作る
Echoのコンポーネントは、HTMLのコントロールと同じではありません。例えば、先ほどのTextFieldはほぼ同じものでしたが、Buttonはまったく違うものでした。Echoでは、JavaScriptとスタイルシートを使って独自に用意されたコンポーネントがあり、それを利用してGUIを構築することができます。
例として「メッセージダイアログ」を使ってみましょう。JavaScriptなどでは、alert関数を呼び出して画面に簡単なメッセージを表示させることができます。が、alert関数のウインドウはWebブラウザとは別に現れるネイティブなウインドウであり、違和感があります。Webアプリケーション内（つまりはWebブラウザ内）に擬似的にウインドウを表示し操作することができれば、違和感なく構築できます。
Echoには、「WindowPane」というコンテナがあり、これを使ってWebブラウザに表示されているページの中に擬似的にウインドウを表示させることができます。これを利用し、ダイアログを表示させてみることにします。
package jp.codezine;
import nextapp.echo.app.Alignment;
import nextapp.echo.app.ApplicationInstance;
import nextapp.echo.app.Button;
import nextapp.echo.app.Color;
import nextapp.echo.app.Column;
import nextapp.echo.app.ContentPane;
import nextapp.echo.app.Extent;
import nextapp.echo.app.Font;
import nextapp.echo.app.Label;
import nextapp.echo.app.TextField;
import nextapp.echo.app.Window;
import nextapp.echo.app.WindowPane;
import nextapp.echo.app.event.ActionEvent;
import nextapp.echo.app.event.ActionListener;
public class HeloApp extends ApplicationInstance {
private static final long serialVersionUID = 1L;
Label msg;
TextField field;
WindowPane dialog;
Label result;
@Override
public Window init() {
Window window = new Window();
window.setBackground(new Color(200,255,255));
ContentPane pane = new ContentPane();
window.setContent(pane);
Column column = new Column();
column.setBackground(new Color(225,255,255));
pane.add(column);
Label label = new Label("Echoフレームワーク！");
label.setFont(new Font(Font.ARIAL,Font.BOLD,new Extent(18)));
column.add(label);
msg = new Label("これは、Echoを使って作ったWebページです。");
msg.setFont(new Font(Font.ARIAL,Font.PLAIN,new Extent(12)));
column.add(msg);
field = new TextField();
column.add(field);
Button btn = new Button("Click");
btn.setBackground(new Color(0,100,100));
btn.setForeground(Color.WHITE);
btn.setWidth(new Extent(50));
btn.setTextAlignment(Alignment.ALIGN_CENTER);
btn.addActionListener(new ActionListener(){
private static final long serialVersionUID = 1L;
@Override
public void actionPerformed(ActionEvent ev) {
String s = field.getText();
result.setText("こんにちは、" + s + "さん！");
dialog.setVisible(true);
}
});
column.add(btn);
dialog = new WindowPane();
dialog.setTitle("Message");
dialog.setWidth(new Extent(200));
dialog.setHeight(new Extent(100));
dialog.setVisible(false);
dialog.setModal(true);
dialog.setDefaultCloseOperation(WindowPane.HIDE_ON_CLOSE);
ContentPane wpane = new ContentPane();
result = new Label("");
wpane.add(result);
dialog.add(wpane);
pane.add(dialog);
return window;
}
}
実際にWebブラウザからアクセスして動作を確認してみましょう。「Click」ボタンをクリックすると、ウインドウの内部にウインドウが現れます。これはモーダルになっており、ウインドウを閉じるまで入力フィールドにテキストを書いたり「Click」を再度クリックしたりできなくなります。
