元ネタは 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 の内容を紹介してみました
実際のムービーにはより詳細に説明されていますので、ぜひご覧頂ければと思います
0 件のコメント:
コメントを投稿