コントロールを使ったフォーム処理


では、もう一歩進んで、「フォームを使った処理」をやってみましょう。Clickでは、フォームはClickの「コントロール」として用意されています。ページクラス側で、コントロールのインスタンスを作成して組み込むことで、自動的にテンプレート側にフォームを出力させることができます。

まずは、helo.htmを修正しましょう。といっても、ごく簡単な処理だけです。<p>タグの下に、以下の一文を追記するだけです。

$form1

この$form1は、ページクラス側で組み込んだフォームが保管されている変数です。ページクラスで、formという名前でフォームのコントロールを用意しておき、それをここで書き出しているわけです。

では、ページクラスを修正しましょう。今回は、少々メソッドが増えてきますので間違えないようにしましょう。

package jp.tuyano;

import net.sf.click.control.*;

public class Helo extends net.sf.click.Page {
  private Form form1;
  private TextField field1;
  private Submit submit1;
  private String msg = "";
  
  public Helo(){
    this.addModel("title", "Click Sample");
    this.msg = "何か書いて!";
    form1 = new Form("form1");
    field1 = new TextField("field1","入力:");
    submit1 = new Submit("submit1","送信",this,"sendNow");
    form1.add(field1);
    form1.add(submit1);
    this.addControl(form1);
  }
  
  public boolean sendNow(){
    this.msg = "あなたは、" + field1.getValue() + "と書きました。";
    return true;
  }
  
  @Override
  public void onRender() {
    this.addModel("msg", this.msg);
    super.onRender();
  }

}

これで完成です。ここではコンストラクタの他に、sendNow、onRenderというメソッドが用意されています。sendNowは、フォームを送信したときに実行される処理を記述します。またonRenderは、テンプレートのレンダリングを行う際に実行される処理を記述するものです。

コンストラクタを見てみましょう。ここでは、Form、TextField、Submitといったインスタンスが作成されていますね。これらが、HTMLの<form>、<input type="text">、<input type="submit">タグを生成するためのコントロールクラスです。これらのクラスのインスタンスを作成し、addで必要なコントロールをフォームに組み込み、完成したフォームをaddControlでページクラスに組み込むことで、それがテンプレート側で利用できるようになります。

ここでは、new Form("form1");というように、form1という名前でフォームを作成していますね? このため、これをaddControlすると、テンプレート側では$form1という指定で出力されるようになります。またnew Submitしているところでは、第3引数にthis、第4引数に"sendNow"が指定されていますね。これにより、このSubmitで送信が実行されると、thisのsendNowが呼び出されるようになる、というわけです。

また、メッセージをaddModelで組み込む処理は、onRenderで行っています。これは、普通にアクセスした場合と、Submitで送信された場合で表示するメッセージが異なるため、レンダリングする際に値を設定するようにしているのですね。

基本的な流れれがわかったら、実際にサーバーで公開し、ページにアクセスをしてみましょう。フィールドからテキストを送信すると、メッセージが変わるのがわかるでしょう。

フォームを送信すると、表示されるメッセージが変わる。


――以上、ごくざっとですが、Clickを使ったWebページの作成について説明しました。最近は、高機能だが巨大な重量級フレームワークよりも、必要な機能だけをコンパクトにまとめた、フットワークの軽い「軽量フレームワーク」に注目が集まりつつあります。より短期間に習得でき、すぐに役に立つ、そうしたフレームワークです。Clickは、こうした軽量フレームワークの注目株といえるでしょう。興味をもたれたら、ぜひ本格的に使い込んでみてください。

※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。