m-namikiの日記

おもしろき こともなき世を おもしろく

ajaxを使ってみる

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

<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");

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

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

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

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

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