NetBeans Wicket サポート

新年1回目のポストです(1月最終日ですが…)

元ネタは Geertjan のWicket に関するデモ(NetBeans.tvはコチラ)です

以下は、"Java Web および EE" サポート、 GlassFish アプリケーションサーバー、または Tomcat サーブレットコンテナがインストール、設定されていることが前提になっています
(今回は GlassFish V3 を使用しています)
まずは、 Wicket プラグインのインストールを行います
プラグインウィンドウのリストより "Wicket Support" と "Wicket File Template" が対象となります


インストール、 NetBeans の再起動後、プロジェクトの作成を行います
プロジェクト作成ウィンドウにて、"Java Web > Web Application" を選択します


プロジェクトの場所とプロジェクト名は適当な値を入力します
(例では "WicketSampleApp" としています)


次はサーバー等の設定では、お使いの環境に合わせ、適時変更してください
(例ではデフォルトのままとしています)


最後にフレームワークの選択します


リストより "Wicket" を選択します
Wicket に関する各設定項目は必要に応じて入力してください
(今回はデフォルトのままにしています)

すべての設定を終えると、プロジェクトが生成されます
生成後、プロジェクトを選択し、実行してみます


実行すると、 GlassFish の起動とデプロイが行われ、ブラウザにサンプル画面が表示されます


次は単純に文字列を表示してみます
"Source Package" 内から "HomePage.html" を開きます


ファイルへ以下のように追記します

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
  <head>
    <title></title>
    <link wicket:id='stylesheet'/>
  </head>
  <body>
    <span wicket:id='mainNavigation'/>
    <!-- 追加分 -->
    <span wicket:id="message1" >ダミー用メッセージ(実行時置換されます)</span>
    <!-- 追加分 -->
  </body>
</html>

入力後、 "wicket:id" の値 "message1" を ⌘ + クリックすると、対応する "HomePage.java" が開きます
コンストラクタに"add(new Label("message1", "Hello World!"));"を追記します

public class HomePage extends BasePage {

    public HomePage() {
        // message1 に表示する文字列を追加
        add(new Label("message1", "Hello World!"));
    }
}

保存後、 NetBeans 6.5 の新機能により自動デプロイされるので完了したら、プラウザをリロードします
(自動デプロイを Off に設定している場合はメニューよりデプロイを行ってください)
以下のように、設定した "Hello World." が表示されます


最後に Ajax を利用した、入力補完機能を実装してみます
先ほどの "HomePage.java" に "AutoCompleteTextField" 型のプロパティ "field" を追加し、 "getChoices()" メソッドを以下のように実装します

    final AutoCompleteTextField field = new AutoCompleteTextField("countries", new Model("")) {
        @Override
        protected Iterator getChoices(String input) {
            if(Strings.isEmpty(input)) {
                return Collections.EMPTY_LIST.iterator();
            }

            List choices = new ArrayList(10);
            Locale[] locales = Locale.getAvailableLocales();

            for(Locale locale : locales) {
                String country = locale.getDisplayCountry(Locale.US);

                if(country.toUpperCase().startsWith(input.toUpperCase())) {
                    choices.add(country);

                    if(choices.size() == 10) {
                        break;
                    }
                }
            }

            return choices.iterator();
        }
    };

追加した "field" をコンストラクタに追加します

    public HomePage() {
        add(new Label("message1", "Hello World!"));
        add(field);
    }

全体としては以下のようになります

public class HomePage extends BasePage {

    public HomePage() {
        add(new Label("message1", "Hello World!"));
        add(field);
    }

    final AutoCompleteTextField field = new AutoCompleteTextField("countries", new Model("")) {
        @Override
        protected Iterator getChoices(String input) {
            if(Strings.isEmpty(input)) {
                return Collections.EMPTY_LIST.iterator();
            }

            List choices = new ArrayList(10);
            Locale[] locales = Locale.getAvailableLocales();

            for(Locale locale : locales) {
                String country = locale.getDisplayCountry(Locale.US);

                if(country.toUpperCase().startsWith(input.toUpperCase())) {
                    choices.add(country);

                    if(choices.size() == 10) {
                        break;
                    }
                }
            }

            return choices.iterator();
        }
    };
}

最後に "HomePage.html" へ以下のようにテキストフィールドの追記を行います

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
  <head>
    <title></title>
    <link wicket:id='stylesheet'/>
  </head>
  <body>
    <span wicket:id='mainNavigation'/>
    <span wicket:id="message1" >ダミー用メッセージ(実行時置換されます)</span>
    <p/>
    <!-- 追加分 -->
    <input type="text" wicket:id="countries" size="50" />
    <!-- 追加分 -->
  </body>
</html>

デプロイが完了したら、ブラウザを再度リロードします
新たにテキストフィールドが追加されて表示されますので、そこへ"u"と入力してみてください
以下のように入力値の候補が表示されるはずです


以上、簡単ですが、 NetBeans TV の内容を紹介してみました
実際のムービーにはより詳細に説明されていますので、ぜひご覧頂ければと思います