何か作ってみる - マイペースなプログラミング日記

特に何か作りたいわけでもないが、いつか何か作りたいものができたときへのいい経験になればと思いWicketを使ってみた。

作ってみたのは、ただ足し算を行うだけのWebアプリケーション。でもWicketでAjax使ってみたかったのでAjaxButtonを使ってみた。パッケージ名はtest.ajax.simpleにして、以下３つのファイルを作成した。

まずはHTML、ファイル名はCalculator.html。単純にフォームの上に足し算に使う２つの数字を入力するテキストフィールドと、計算させるボタンと、足し算の結果を表示するテキストフィールド(ラベルで良かったんだけど、気づいたらテキストフィールドにしていた)のみ

<html>
  <head>
    <title>SimpleAjaxTest</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  </head>
  <body>
      <form wicket:id="calculatorForm">
          <input type="text" size="5" wicket:id="addA" />
          <span>+</span>
          <input type="text" size="5" wicket:id="addB" />
          <input type="Button" value="=" wicket:id="calc" />
          <input type="text" size="5" wicket:id="result" />
      </form>
  </body>
</html>

次にこれに対応するJavaのページ、ファイル名はCalculator.java。calcButtonが押されたときに、resultFieldにfieldAdd_AとfieldAdd_Bに入力された整数を足した結果を表示。ユーザーが整数を入力してくれると信じているので、整数以外を入力するとUnexpected RuntimeExceptionが発生

package test.ajax.simple;

import org.apache.wicket.markup.html.WebPage;
import org.apache.wicket.markup.html.form.Form;
import org.apache.wicket.markup.html.form.TextField;
import org.apache.wicket.model.Model;

import org.apache.wicket.ajax.markup.html.form.AjaxButton;
import org.apache.wicket.ajax.AjaxRequestTarget;

public class Calculator extends WebPage{
    public Calculator(){
        Form form = new Form("calculatorForm");
        
        //+の前にあるテキストフィールド
        final TextField fieldAdd_A = new TextField("addA", new Model("0"));
        //+の後にあるテキストフィールド
        final TextField fieldAdd_B = new TextField("addB", new Model("0"));
        
        //足し算の結果を表示するテキストフィールド
        final TextField resultField = new TextField("result", new Model(){
           public Object getObject(){
               int a = Integer.parseInt((String)fieldAdd_A.getModel().getObject());
               int b = Integer.parseInt((String)fieldAdd_B.getModel().getObject());
               
               return new Integer(a + b);
           }
        });
        
        //Ajaxで動的に更新するには必要な設定
        resultField.setOutputMarkupId(true);
        
        AjaxButton calcButton = new AjaxButton("calc", form){
            @Override
            public void onSubmit(AjaxRequestTarget target, Form form){
                //resultFieldを更新
                target.addComponent(resultField);
            }
        };
        
        form.add(fieldAdd_A);
        form.add(fieldAdd_B);
        form.add(calcButton);
        form.add(resultField);
        
        add(form);
    }
}

後はお決まりのApplicationクラス、ファイル名はCalcApplication.java

package test.ajax.simple;

import org.apache.wicket.protocol.http.WebApplication;

public class CalcApplication extends WebApplication{
    public CalcApplication(){
        
    }
    
    public Class getHomePage(){
        return Calculator.class;
    }
}

ついでにweb.xmlのフィルタマッピング

    <filter>
        <filter-name>Calculator</filter-name>
        <filter-class>org.apache.wicket.protocol.http.WicketFilter</filter-class>
        <init-param>
            <param-name>applicationClassName</param-name>
            <param-value>test.ajax.simple.CalcApplication</param-value>
        </init-param>
        </filter>
    <filter-mapping>
        <filter-name>Calculator</filter-name>
        <url-pattern>/calc/*</url-pattern>
    </filter-mapping>