ajaxを使ってみる

java Wicket

今回やりたいことは、セレクトボックスが三つ並んでいて、一番目のセレクトボックスを選択するとそれに紐付く二番目がリストに設定されて有効になる、という感じ。
三番目に対しても同様。
まずは画面。単純にセレクトボックスを並べただけ。

<html>
<head>
<title>種目選択</title>
</head>
<body>
<h1>種目選択</h1>
<div wicket:id="feedback">Error message area.</div>
<form method="POST" wicket:id="appForm">
  <select wicket:id="sectionOne"></select><br/>
  <select wicket:id="sectionTwo"></select><br/>
  <select wicket:id="sectionThree"></select>
</form>
</body>
</html>

次にPageクラス。

public class SelectPage extends WebPage {
    public InfoEditSelectPage() {
        super();
        createInfoEditSelectPage();
    }

    @SuppressWarnings("serial")
    public void createInfoEditSelectPage() {
        final KindService service = new KindService();
        add(new FeedbackPanel("feedback"));
        final Form appForm = new Form("appForm");
        add(appForm);

        ChoiceRenderer choiceRenderer = new ChoiceRenderer("kindName", "kindCode");

        // 分類１の設定
        final DropDownChoice sectionOne = new DropDownChoice("sectionOne", new Model(), service.findListSectionOne(), choiceRenderer);
        appForm.add(sectionOne);

        // 分類２の設定
        final DropDownChoice sectionTwo = new DropDownChoice("sectionTwo", new Model(), Collections.EMPTY_LIST, choiceRenderer);
        sectionTwo.setOutputMarkupId(true);
        sectionTwo.setEnabled(false);
        appForm.add(sectionTwo);

        // 分類３の設定
        final DropDownChoice sectionThree = new DropDownChoice("sectionThree", new Model(), Collections.EMPTY_LIST, choiceRenderer);
        sectionThree.setOutputMarkupId(true);
        sectionThree.setEnabled(false);
        appForm.add(sectionThree);
 
        // 分類１選択時に分類２を更新する
        sectionOne.add(new AjaxFormComponentUpdatingBehavior("onchange") {
                @Override
                protected void onUpdate(AjaxRequestTarget target) {
                    sectionTwo.setChoices(service.findListSectionTwo(sectionOne.getInput()));
                    sectionTwo.setEnabled(true);
                    target.addComponent(sectionTwo);
                }
        });

        // 分類２選択時に分類３を更新する
        sectionTwo.add(new AjaxFormComponentUpdatingBehavior("onchange") {
                @Override
                protected void onUpdate(AjaxRequestTarget target) {
                    sectionThree.setChoices(service.findListSectionThree());
                    sectionThree.setEnabled(true);
                    target.addComponent(sectionThree);
                }
        });
    }
}

たったこれだけの記述でやりたいことが出来てしまった。Wicket恐るべし。もっと色々なことが分かればだいぶ楽に出来そうだ。またModelがどういう役割なのかよく分かってないので次はそれを確かめてみようかな。