Javaで軽快に使える「軽量フレームワーク」特集
～サーバーサイドとクライアントサイドのどちらでも対応できるEcho（1）

第23回

入力フィールドとプッシュボタンを使う

　では、Echoによるプログラム作成の基本が分かったところで、もう少し先へ進んでみましょう。今度は入力とイベント処理についてです。Webサイトでは、フォームを使ってサーバーにデータを送信し処理を行いますが、Echoでこうした処理する場合、どのようなプログラムになるのでしょうか。

package jp.codezine;

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.event.ActionEvent;
import nextapp.echo.app.event.ActionListener;

public class HeloApp extends ApplicationInstance {
    private static final long serialVersionUID = 1L;
    Label msg;
    TextField field;

    @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.addActionListener(new ActionListener(){
            private static final long serialVersionUID = 1L;
            
            @Override
            public void actionPerformed(ActionEvent ev) {
                String s = field.getText();
                msg.setText("こんにちは、" + s + "さん！");
            }
        });
        column.add(btn);
        
        return window;
    }
}

図4　入力フィールドに名前を書いて「Click」をクリックするとメッセージが変更される。

　入力フィールドに名前を入力し「Click」をクリックすると、メッセージが表示されます。ごく初歩的な処理ですが、Echoにおける入力とイベント処理について理解するサンプルを考えてください。

　ここでは、入力フィールドに「TextField」、またプッシュボタンに「Button」というコンポーネントを使っています。TextFieldは、HTMLの<input type="text">をレンダリングするものですが、Buttonは<input type="Button">ではありません。実際にやってみると分かることですが、これは<div>タグを使い、スタイルシートでプッシュボタン的な表示を作成したものです。HTMLの<input type="button">は表示が固定されているため、それよりもスタイルシートで独自にボタン定義をしたほうがクールだ、と考えたのでしょう。

　<div>タグを使っているため、Buttonの表示は柔軟に操作できます。ここでは、setBackground/setForegroundで背景とテキストのそれぞれの色を、またsetWidthで横幅を設定しています。