NetBeansを使用したWicket 1.4で C N のWebアプリケーショ …...C H 19 C O M M U N I T Y...
7
ORACLE.COM/JAVAMAGAZINE /////////////// MAY/JUNE 2012 JAVA TECH 19 COMMUNITY JAVA IN ACTION ABOUT US blog //new to java / 本 チュートリアルでは、NetBeans IDEを使用したApache Wicket 1.4によるシンプルなWebアプリケー ションの構築方法を説明します。Wicket はコンポーネント・ベースのWebアプリ ケーション・フレームワークであり、POJO （Plain Old Java Object）、HTML、 Ajax、Spring、Hibernate、Mavenを使 用してエンタープライズ・レベルのWeb アプリケーションを構築できます。 Wicketをテーマに選んだ理由は、 マークアップとロジックを分離できる点、 および再利用可能なコンポーネントを構 築できる点が非常に優れているためで す。また、WicketをJava EE 6と組み合 わせる方法についても説明します。Java EE 6は現在勢いを増しているだけでな く、学習しやすいという利点があるため 採用しました。さらに、WicketとJava EE 6との緊密な統合を実現するという 理由から、NetBeansを利用します。 本来であれば、Wicketを利用した Webショップ全体の構築方法を説明し たいところですが、紙面が足りません。 Webショップ全体の構築方法については 『Wicket in Action』にまとめられて いるため、こちらをお読みください。本 チュートリアルでは、詳細ページへのリ ンクを含む商品リストの表示方法に的 を絞って説明します。Webアプリケー ションを段階的に構築し、その過程で代替 手段についても取り上げます。 注：本チュートリアルで説明するプロジェ クトのソース・コードとその他の必要な ファイルは、こちらからダウンロードでき ます（14.6MB）。 プロジェクトのセットアップ 本 チ ュ ートリ ア ル の 前 半 は 、J e f f Schwart氏のJava EE 6とWicket に関するブログに基づいています。本 チュートリアルの説明では簡略的すぎる と思われる場合は、Schwartz氏のブロ グで言及されている一連の記事をお読 みください。 必要なソフトウェアとファイルのダウン ロード：このセクションでは、開発環境の セットアップを行います。 1. MySQL、NetBeans、NetBeans 用Wicketプラグインのダウンロード とインストールを実行します。 2. create_script_mysql.sqlを使用し て、基盤となるデータベースを作成し ます。create_script_mysql.sqlス クリプトを実行するためには、コマン ドライン・ツールで次の行を実行しま す。\.Create_script_mysql.sql プロジェクトの作成： このセクションで は、プロジェクトを作成し、デフォルトの Wicketアプリケーションを作成します。 このアプリケーションは、後のセクション で編集します。 1. NetBeans IDEで、「File」メニュー から「New Project 」を選択しま す。 2. 「 C a t e g o r i e s 」パネルで「 Java Web」を選択し、「Projects」パネル で「Web Application」を選択して、 「Next」をクリックします。 3. 「 Project Name 」フィー ルド に DuchessStore と入力し、 「Next」をクリックします。 4. サ ー バ ー として「 GlassFish Server 3 」が選択されているこ と、およびJava EEバージョンとして 「Java EE 6 Web」が選択されて いることを確認し、「Next」をクリック します。 5. 「Frameworks」パネルで、 「Wicket」を選択します（Wicketが フレームワークとして選択できない 場合は、Wicketプラグインが正しく インストールされていません）。 6. 「 Main Package 」に org. duchess.example.wicketと入 力し、「Finish」をクリックします。 NetBeansを使用したWicket 1.4で のWebアプリケーション構築 WicketとJava EE 6を組み合わせ、マークアップをビジネス・ロジックから分離して Webアプリケーションを容易に構築 動画「Set Up Project」で本プロジェ クトの作成手順をご確認ください BIO RÉGINA TEN BRUGGENCATE、 LINDA VAN DER PAL RÉGINA TEN BRUGGENCATE （@REGINATB38） は、オランダのJAVA コンサルティング企 業IPROFS の上級開 発者です。現在は複 数のオープンソース・ プロジェクトを活用す るオランダ鉄道のプ ロジェクトに従事して います。DUCHESS （JDUCHESS.ORG） とWOMEN IN JAVA での活動、そして複数 のJAVAカンファレンス での講演実績により、 JAVA CHAMPIONに 選出されています。 LINDA VAN DER PALはDUCHESSの 設立者です。JAVAコ ミュニティ全般に積極 的に参加しています。ま た、2002年以降は、複 数の企業でJAVA 開発 者として従事してます。
Transcript of NetBeansを使用したWicket 1.4で C N のWebアプリケーショ …...C H 19 C O M M U N I T Y...
ORACLE.COM/JAVAMAGAZINE /////////////// MAY/JUNE 2012
JAVA TECH
19
COMMUNITY
JAVA IN
ACTION
ABOUT US
blog
//new to java /
本チュートリアルでは、NetBeans IDEを使用したApache Wicket
1.4によるシンプルなWebアプリケーションの構築方法を説明します。Wicketはコンポーネント・ベースのWebアプリケーション・フレームワークであり、POJO（Plain Old Java Object）、HTML、Ajax、Spring、Hibernate、Mavenを使用してエンタープライズ・レベルのWebアプリケーションを構築できます。Wicketをテーマに選んだ理由は、
マークアップとロジックを分離できる点、および再利用可能なコンポーネントを構築できる点が非常に優れているためです。また、WicketをJava EE 6と組み合
わせる方法についても説明します。Java EE 6は現在勢いを増しているだけでなく、学習しやすいという利点があるため採用しました。さらに、WicketとJava EE 6との緊密な統合を実現するという理由から、NetBeansを利用します。本来であれば、Wicketを利用した
Webショップ全体の構築方法を説明したいところですが、紙面が足りません。Webショップ全体の構築方法については『Wicket in Action』にまとめられているため、こちらをお読みください。本チュートリアルでは、詳細ページへのリンクを含む商品リストの表示方法に的を絞って説明します。Webアプリケー
ションを段階的に構築し、その過程で代替手段についても取り上げます。注： 本チュートリアルで説明するプロジェクトのソース・コードとその他の必要なファイルは、こちらからダウンロードできます（14.6MB）。
プロジェクトのセットアップ本チュートリアルの前半は、J e f f Schwart氏のJava EE 6とWicketに関するブログに基づいています。本チュートリアルの説明では簡略的すぎると思われる場合は、Schwartz氏のブログで言及されている一連の記事をお読みください。必要なソフトウェアとファイルのダウンロード： このセクションでは、開発環境のセットアップを行います。1. MySQL、NetBeans、NetBeans
用Wicketプラグインのダウンロードとインストールを実行します。
2. create_script_mysql.sqlを使用して、基盤となるデータベースを作成します。create_script_mysql.sqlスクリプトを実行するためには、コマンドライン・ツールで次の行を実行します。\.Create_script_mysql.sql
プロジェクトの作成： このセクションで
は、プロジェクトを作成し、デフォルトのWicketアプリケーションを作成します。このアプリケーションは、後のセクションで編集します。1. NetBeans IDEで、「File」メニュー
から「New Project」を選択します。
2. 「Categor ies」パネルで「Java Web」を選択し、「Projects」パネルで「Web Application」を選択して、「Next」をクリックします。
3. 「Project Name」フィールドにDuchessStoreと入力し、「Next」をクリックします。
4. サーバーとして「G l assF i s h Server 3」が選択されていること、およびJava EEバージョンとして「Java EE 6 Web」が選択されていることを確認し、「Next」をクリックします。
5. 「 F r a m e w o r k s 」パネルで、「Wicket」を選択します（Wicketがフレームワークとして選択できない場合は、Wicketプラグインが正しくインストールされていません）。
6. 「Ma i n P ackage」にo rg .duchess.example.wicketと入力し、「Finish」をクリックします。
NetBeansを使用したWicket 1.4でのWebアプリケーション構築WicketとJava EE 6を組み合わせ、マークアップをビジネス・ロジックから分離して Webアプリケーションを容易に構築
動画「Set Up Project」で本プロジェクトの作成手順をご確認ください
BIO
RÉGINA TEN
BRUGGENCATE、LINDA VAN DER PAL
RÉGINA TEN BRUGGENCATE（@REGINATB38）は、オランダのJAVA コンサルティング企業IPROFS の上級開発者です。現在は複数のオープンソース・プロジェクトを活用するオランダ鉄道のプロジェクトに従事しています。DUCHESS（JDUCHESS.ORG）とWOMEN IN JAVAでの活動、そして複数のJAVAカンファレンスでの講演実績により、JAVA CHAMPIONに選出されています。LINDA VAN DER PALはDUCHESSの設立者です。JAVAコミュニティ全般に積極的に参加しています。また、2002年以降は、複数の企業でJAVA 開発者として従事してます。
ORACLE.COM/JAVAMAGAZINE /////////////// MAY/JUNE 2012
JAVA TECH
20
COMMUNITY
JAVA IN
ACTION
ABOUT US
blog
//new to java / 注： 上記手順の実際の操作を動画「Set Up Project」で確認できます。JavaEE Injectライブラリの追加： WicketにはJava EEサポートが含まれていませんが、Java EEサポート機能を追加するためのライブラリが存在します。このJava EE用のライブラリに関する詳細は、GitHubを参照してください。このライブラリはMavenと組み合わせて動作
するように作成されたものですが、本チュートリアルではMavenを使用しません。そのために必要となるJARファイルをSchwartz氏が特定してくださっています。Schwartz氏にご提供いただいた、これらのJARファイルをまとめたzipファイルが、ダウンロードに含まれています。1. libraries.zipファイルを解凍
し、含まれている3つのJARファイルをプロジェクトにインストールします。詳細は、動画「Add Java EE Inject Library」をご確認ください。
2. この3つのJARファイルを正常に動作させるために、リスト1に示すメソッドをApplication.javaファイルに追加します。
エンティティの作成： このセクションでは、データベースのデータを表すエンティティを作成します。エンティティは、旧バージョンのJava EEではEJBと呼ばれていました。1. NetBeans IDEで、「File」メニューから「New File」を選択します。
2. 「Categories」リストで「Persistence」を選択します。
3. 「File Types」リストで「Entity Classes from Database」を選択し、「Next」をクリックします。
4. 「Data Source」リストで「New Data Source」を選択します。
5. 「JNDI Name」フィールドにduchess_s t o r e と入 力し、「 D a t a b a s e Connection」リストで「New Database
Connection」を選択します。6. 「Driver」リストで「MySQL (Connector/J Driver)」を選択し、「Next」をクリックします。
7. 「Database」フィールドにduchess_storeと入力し、MySQLのインストール時に作成したユーザー名とパスワードを入力して、「Finish」をクリックします。
8. 「Add All」をクリックしてすべての表をエンティティとして追加し、「Next」をクリックします。
9. 「Package」フィールドにorg.duchess.example.entitiesと入力し、「Next」をクリックします。10. 「Collection Type」リストで
「java.util.List」を選択し、「Finish」をクリックします。
注： 上記手順の実際の操作を動画「Create Entities」で確認できます。ヒント： データベース接続を削除する必要が生じた場合、削除の操作をglassfish-resources.
xmlファイル（jdbc-connection-poolおよびjdbc-resourceの削除）と「Services」タブのデータベースの両方で実行する必要があります。それでも接続が削除されない場合は、「Services」タブからサーバーを起動し、「Servers」→「GlassFish Server」→「Resources」→「JDBC」→「JDBC Resources」を確認して、接続の登録を解除します。セッションBeanの作成： このセクションでは、データベースのデータの入出力処理に関するアプリケーションのビジネス・ロジックが含まれるセッションBeanを作成します。1. NetBeans IDEで、「File」メニューから「New File」を選択します。
2. 「Categories」リストで「Persistence」を選択します。
3. 「File Types」リストで「Session Beans
For Entity Classes」を選択し、「Next」をクリックします。
4. 「Add All」をクリックし、「Next」をクリックします。
5. 「Package」フィールドにorg.duchess.example.beansと入力し、「Finish」をクリックします。
注： 上記手順の実際の操作を動画「Create Session Beans」で確認できます。
Wicketを使用した開発の開始以上で、Wicketプロジェクトが実行できる状態になりました。もちろん、このプロジェクトはまだ何も実現していないため、本セクションで変更を加えていきます。はじめに、データベース内の商品のリストを表示するようにアプリケーションを変更します。商品リストの作成： 後で必要となる画像とスタイ
ルシートを、最初に追加します。1. images.zipファイルをwicketディレクトリに
解凍します。正常に解凍できた場合、wicketディレクトリ内にimagesディレクトリが作成されます。
2. stylesheet.cssファイルもwicketディレクトリ内に配置します。次に、コードを編集します。現在のペー
ジの外観を変更するため、BasePageとHeaderPanelを変更し、FooterPanelを削除します。1. org.duchess.example.wicketパッ
ケージ内にあるBasePage.htmlファイルの内容をリスト2のコードに置き換えます。このBasePage.htmlがすべてのHTMLページの基礎となります。
2. org.duchess.example.wicketパッケージ内には、BasePage. javaファイルもあ
全てのリストのテキストをダウンロード
@Overrideprotected void init() { super.init(); addComponentInstantiationListener(new JavaEEComponentInjector(this));}
リスト1 リスト2 リスト3
優れた技術の融合NetBeansにより、Java EE 6とWicketとの緊密な統合が実現します。
ORACLE.COM/JAVAMAGAZINE /////////////// MAY/JUNE 2012
JAVA TECH
21
COMMUNITY
JAVA IN
ACTION
ABOUT US
blog
//new to java / ります。このファイルをリスト3と比較してみます。BasePageからFooterPanelが削除されていることがわかります。また、HeaderPanelに渡すStringが1つ削除されています。BasePage.javaのコードをリスト3の新しいコードに置き換えます。コンパイル・エラーが発生するため、次の2つの手順で修正します。
3. org.duchess.example.wicketパッケージ内にHeaderPanel.htmlファイルがあります。このファイルの内容をリスト4のコードに置き換える必要があります。リスト4では、HeaderPanelにスタイルシートとロゴの画像を追加しています。また、表示されるテキストも変更しています。HeaderPanelは、BasePageを継承するすべてのページの最上部に表示されます。
4. 最後に、HeaderPanel.javaファイルのコードをリスト5のコードに置き換えます。これにより、手順2に起因するコンパイル・エラーが解決されます。いよいよ、本題の作業に移ります。データ
ベースに存在するすべての商品を表示するために、Wicketに用意されている、繰り返し項目のリストを作成できるもっとも単純なコンポーネントのRepeat ingViewを使用します。RepeatingViewコンポーネントは、すべての子要素をデータベースから取得した順に表示します。5. org.duchess.example.wicketパッ
ケージ内に、HomePage.htmlファイルがあります。このファイルは、アプリケーション
の起動時に最初に表示されるページです。このファイルのコードを、リスト6のコードに置き換えます。これにより、ページに表が追加されます。この表には、ヘッダーと単一の行があります。行にはwicket:idがあります。wicket:idは、行をRepeatingViewに関連付けるために使用します。また、行の3つの列には、表示するデータを格納します。
6. org.duchess.example.wicketパッケージ内には、HomePage.javaファイルもあります。このファイルのコードをリスト7のコードに置き換えます。HomePageクラスでは、リスト6で示した行のwicket:idをパラメータとして渡し、RepeatingViewインスタンスを作成しています。作成したRepeatingViewインスタンスをページに追加します。次に、データベースからすべての商品を取得し、ループ処理を実行します。各 項 目 に 対して 、W e b M a r k u p
C o n t a i n e rを作成します。『W i c k e t i n A c t i o n 』で説明されているように、WebMarkupContainerは汎用コンポーネントであり、それ自体はほとんど何も実行しません。ただし、子コンポーネントを含めることができるため、コンポーネントをグループ化するためには便利なツールです。また、1つのコンポーネントに対して多くのマークアップをグループ化する必要がある場合に、中間レイヤーとして使用することもできます。リスト7のループ処理でWebMarkupContainerを使用しない場合、複数の商品をページに追加しようとすると、IDの
nameが重複するため例外が発生します。ここでアプリケーションを実行すると、図1のようなページが表示されます。ページングの追加： データベースにある商品の数が増えて、単一画面に収まらなくなった場合、本ソリューショ
ンの見栄えが悪くなります。この問題を解決するために、ページングを追加します。そのためには、RepeatingViewをPageableListViewに変更します。1. まず、RepeatingViewをListView
に変更します。変更する必要があるのは、HomePage . javaファイルのみです。HTMLファイルに変更はありません。リス
ト8に示すとおり、コードは少しシンプルになります。項目のループ処理はListViewが実行するため、HomePage.javaファイルに記述する必要はありません。また、WebMarkupContainerも不要です。必要な作業は、populateItemメソッドをオーバーライドして実装することのみです。HomePageのコードをリスト8のコードに
全てのリストのテキストをダウンロード
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns:wicket="http://wicket.apache.org"> <head> <link rel="stylesheet" type="text/css" href="style.css"/> </head> <body> <wicket:panel> <wicket:link> <img src="images/duchess.jpg" style="float:left;"/> </wicket:link> <h1> <span wicket:id="headerpanneltext"/> </h1> <hr/> </wicket:panel> </body></html>
リスト4 リスト5 リスト6 リスト7 リスト8
図1
ORACLE.COM/JAVAMAGAZINE /////////////// MAY/JUNE 2012
JAVA TECH
22
COMMUNITY
JAVA IN
ACTION
ABOUT US
blog
//new to java / 置き換えます。次の手順は、ページングの追加です。この
手順も、比較的単純です。ただし、今度はJavaとHTMLの両方を変更する必要があります。HomePage . javaファイルはリスト9に、HomePage.htmlファイルはリスト10に従って変更します。2. リスト9に示すとおり、L i s t V i ewをPageableListViewに変更し、リストに表示する要素数を示すパラメータをコンストラクタに追加することが必要です。また、ページ間のナビゲーションを処理するPagingNavigatorも追加する必要があります。それでは、HomePage.javaファイルのコードをリスト9のコードに置き換えます。
3. リスト10に示すとおり、HTMLファイルの変更部分はごくわずかで、ナビゲーション用のマークアップを追加するだけです。リスト10の強調表示されたコードをHomePage.htmlファイルに追加します。以上により、ページは図2のように表示されます。リストに含まれる商品の数が増えるにつれ
て、商品を表示するために必要なページ数も増えていきますが、PagingNavigatorは拡張性にあまり優れていません。最大でも10ページしか表示できず、残りのページ数を確認することもできません。ページ数が多い場合は別のナビゲータを表示し、また、1ページしかない場合はナビゲータを表示しないようにすることで、機能性が改善します。このような変更を行うためには、商品数に応じて異なるナビゲータを返す
PagerFactoryを作成します。また、独自のナビゲータとそのプロパティを作成する必要もあります。4. まず、新しいナビゲータ・クラスのためのorg.duchess.example.wicket.components.navigatorパッケージを新規に作成します。
5. 最 初 に作 成 する必 要 の あるクラスはPagerFactoryです。PagerFactoryクラスのコードをリスト11に示します。このコードでは複数のコンパイル・エラーが発生しますが、後で修正します。次の手順として、表示されるページが5ページ
を超える場合に使用するページャを作成します。6. HighNumberNavigatorという名前の新しい
Wicket Pageを作成します。7. 新規作成されたHTMLファイルのコードを、リスト12のコードに置き換えます。
8. 新規作成されたJavaファイルのコードを、リスト13のコードに置き換えます。リスト13のコードは、フォーマット上の制約により不完全な状態となっています。適宜インポート部を記述し、可読性を高めるために調整する必要があります。次の手順として、表示されるページが5ページ
以下の場合に使用するページャを作成します。9. LowNumberNavigatorという名前の新
しいWicket Pageを作成します。10. 新規作成されたHTMLファイルのコード
を、リスト14のコードに置き換えます。11. 新規作成されたJavaファイルのコード
を、リスト15のコードに置き換えます。リスト15についても、インポート部を適宜記述する必要があります。この手順により、PagerFactoryのコンパイル・エラーが解決します。 全てのリストのテキストをダウンロード
package org.duchess.example.wicket;
import java.util.List;import javax.ejb.EJB;import org.apache.wicket.markup.html.basic.Label;import org.apache.wicket.markup.html.list.ListItem;import org.apache.wicket.markup.html.list.PageableListView;import org.apache.wicket.markup.html.navigation.paging.PagingNavigator;import org.duchess.example.beans.ProductFacade;import org.duchess.example.entities.Product;
public class HomePage extends BasePage {
@EJB(name = "ProductFacade") private ProductFacade productFacade;
public HomePage() { List<Product> products = productFacade.findAll(); PageableListView<Product> productList = new PageableListView<Product>("productList", products, 5) { @Override protected void populateItem(ListItem<Product> item) { Product product = item.getModelObject(); // name item.add(new Label("name", product.getName())); // description item.add(new Label("description", product.getDescription())); // price item.add(new Label("price", product.getPrice().toString())); } }; add(productList); add(new PagingNavigator("navigator", productList)); }}
リスト9 リスト10 リスト11 リスト12 リスト13
図2
ORACLE.COM/JAVAMAGAZINE /////////////// MAY/JUNE 2012
JAVA TECH
23
COMMUNITY
JAVA IN
ACTION
ABOUT US
blog
//new to java / 12. ペ ージャで使用される
テキストを設定するために、a p p l i c a t i o n .propertiesという名前のプロパティ・ファイルをorg.duchess.example.wicketパッケージに追加する必要があります。application.propertiesファイルの内容を、リスト16の内容に置き換えます。
13. HomePage.javaファイルのコードをリスト17のとおりに編集する必要があります。
14. HomePage.htmlファイルのコードをリスト18のとおりに編集する必要があります。
DataProviderの作成： リストに含まれる商品の数が多くなりすぎた場合、リスト全体を毎回取り扱う方法は負荷が高くなります。PageableListViewを使用する場合でも、ページ上に項目が表示される前にリスト全体がメモリに読み込まれます。
この問題を解決するためには、DataV iewを使用する必要があります。DataV i ewでは、I Da taP rov i de rの実装が、データベースとDataViewの間のインタフェースとして利用されます。DataViewを実装するための最初の手順
は、データ・プロバイダの作成です。1. org.duchess.example.wicket.dataprovidersという名前のパッケージを作成します。
2. 作成したパッケージ内に、IEjbDataProviderという名前のインタフェースを作成します。
3. IEjbDataProviderインタフェースのコードを、リスト19に示すように記述します。
4. 同じ o r g . d u c h e s s .e x a m p l e . w i c k e t .d a t a p r o v i d e r sパ ッ ケ ー ジ 内 にProductDataProviderという名前のクラスを作成します。
5. ProductDataProviderクラスのコードをリスト20に示すように記述します。また、インポート部を適宜記述します。ProductDataProviderを作成した後は、
商品リストを専用のPanel内に配置して、商品リストを完成させます。この方法の利点は、後にリストの再利用や移動が必要になった場
合に、容易に実行できることです。Panelは独自のマークアップを含むWicketコンポーネントです。したがってProductsPanel. javaとProductsPanel.htmlの両方を作成する必要がありますが、この2つのファイルはNetBeansによって自動的に生成されます。1. org.duchess.example.wicket
パッケージを右クリックします。2. 「New」メニューから「Java Package」を選択します。
3. 「Package」フィールドにorg.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" xmlns:wicket="http://wicket.apache.org/"><body><wicket:panel>
<div class="box default"> <div class="pages"> <a wicket:id="first" style="visibility:hidden"></a> <a wicket:id="last" style="visibility:hidden"></a> <a wicket:id="prev" class="back"> <wicket:message key="page.generic.navigator.back"/> </a> <a wicket:id="next" class="forward"> <wicket:message key="page.generic.navigator.forward"/> </a> <span wicket:id="navigation"> <a wicket:id="pageLink" href="#"> <span wicket:id="pageNumber">5</span> </a> </span> </div> </div></wicket:panel></body></html>
リスト14 リスト15 リスト16 リスト17 リスト18 リスト19
全てのリストのテキストをダウンロード動画「Add Java EE Inject Library」でWicketのJavaEE Injectライブラリについてご確認ください
構築が容易Wicket はコンポーネント・ベースのWebアプリケーション・フレームワークであり、エンタープライズ・レベルのWebアプリケーションを容易に構築できます。
ORACLE.COM/JAVAMAGAZINE /////////////// MAY/JUNE 2012
JAVA TECH
24
COMMUNITY
JAVA IN
ACTION
ABOUT US
blog
//new to java / duchess.example.wicket.productと入力し、「Finish」をクリックします。
4. 作成されたorg.duchess.example.wicket.productパッケージを右クリックします。
5. 「New」メニューから「Other」を選択します。6. 「Categories」リストで「Web」を選択します。7. 「File Types」リストで「Wicket Panel」を
選択し、「Next」をクリックします。8. 「 F i l e N a m e 」フィ ー ルド にProductsPanelと入力し、「Finish」をクリックします。
9. ProductsPanel.htmlファイルのコードを、リスト21に示すように記述します。
10. ProductsPanel.javaファイルのコードを、リスト22に示すように記述します。
11. 最後に、作成したPanelをHomePageに追加するため、HomePage.javaファイルをリスト23のように変更し、HomePage.htmlファイルをリスト24のように変更します。
商品の詳細情報を表示するページの作成： 次に、商品の詳細情報を表示するページを作成します。最初にProductDetailPageを作成する必要があります。これは次の手順で行います。1. org.duchess.example.wicket.product
パッケージを右クリックします。2. 「New」メニューから「Other」を選択します。3. 「Categories」リストで「Web」を選択します。
4. 「File Types」リストで「Wicket Page」を選択し、「Next」をクリックします。
5. 「F i l e N ame」フィールドにProductDetailPageと入力し、「Finish」をクリックします。
6. ProductDetailPage.htmlファイルのコードを、リスト25に示すように記述します。コードは可読性を高めるために適宜調整してください。
7. ProductDetailPage.javaファイルのコードを、リスト26に示すように記述します。また、インポート部を適宜記述します。
8. o r g . d u c h e s s . e x am p l e .wicket.productパッケージ内にImagesViewという名前のクラスを作成します。
9. ImagesView.javaファイルのコードを、リスト27に示すように記述します。
10. 次に、ProductsPanelにあるproductListに、各商品に対するリンクを追加します。そのためには、JavaファイルとHTMLファイルの両方を変更します。リスト28にProductsPanel.htmlファイルの内
package org.duchess.example.wicket.dataproviders;
// imports
abstract public class ProductDataProvider implements IEjbDataProvider<Product> {
@Override public Iterator<? extends Product> iterator(int first, int count) { // to make sure we are not going to get a negative number of values // to retrieve, we need to reset the count if (count < first) { count += first; } int[] range = {first, count}; List<Product> products = getFacade().findRange(range); return products.iterator(); }
@Override public IModel<Product> model(final Product object) { final Long id = object.getProductId(); LoadableDetachableModel<Product> ldm = new LoadableDetachableModel<Product>(object) { @Override protected Product load() { return getFacade().find(id); } }; return ldm; }
@Override public int size() { return getFacade().count(); }
@Override public void detach() { }}
リスト20 リスト21 リスト22 リスト23 リスト24
全てのリストのテキストをダウンロード動画「Create Session Beans」でセッションBeanの作成手順をご確認ください
動画「Create Entities」でエンティティの作成手順をご確認ください
ORACLE.COM/JAVAMAGAZINE /////////////// MAY/JUNE 2012
JAVA TECH
25
COMMUNITY
JAVA IN
ACTION
ABOUT US
blog
//new to java / 容を、リスト29にProductsPanel.javaファイルの内容の一部を示します。置き換える必要があるコードは、強調表示された部分のみです。
11. 最後に、images_products.zipをディレクトリorg\duchess\example\wicket\productに解凍し、insert_images.sqlスクリプトを実行して、アプリケーションを完成させます。
まとめ本チュートリアルでは、ユーザー登録、ログオン、ログオフ、ユーザー・プロファイルの表示などの方法は紙面の都合上説明できませんでした。すべてのコードについては、プロジェクトの完成版でご確認ください。Wicketで実現できることや、WicketとNetBeansを使用したWebアプリケーション構築の容易さについて、ある程度示してこれたのではないかと考えています。</article>
LEARN MORE• Apache Wicket
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html><html xmlns:wicket="http://wicket.apache.org"> <head><wicket:head><title>Duchess store</title> <wicket:link><link rel="stylesheet" type="text/css" href="style.css"/></wicket:link></wicket:head></head> <body><wicket:extend> <form method="post" action="#" id="product-form" wicket:id="productForm"> <table> <tr> <td><label wicket:id="page.productId" for="productId"/></td> <td><input wicket:id="productId" type="text" maxlength="10" name="" id="productId" class="text size6"/></td> </tr><tr> <td><label wicket:id="page.name" for="name"/></td> <td><input wicket:id="name" type="text" maxlength="10" name="" id="name" class="text size6"/></td> </tr><tr> <td><label wicket:id="page.description" for="description"/></td> <td><input wicket:id="description" type="text" maxlength="10" name="" id="description" class="text size6"/></td> </tr><tr> <td><label wicket:id="page.price" for="price"/></td> <td><input wicket:id="price" type="text" maxlength="10" name="" id="price" class="text size6"/></td> </tr><tr> <td><label wicket:id="page.supplies" for="supplies"/></td> <td><input wicket:id="supplies" type="text" maxlength="10" name="" id="supplies" class="text size6"/></td> </tr><tr> <td colspan="2"> <table><tr><wicket:container wicket:id="images"> <td><img wicket:id = "image" width="220" height="220"/></td> </wicket:container></tr></table> <div wicket:id="pager" class="box-section"></div> </td> </tr><tr> <td colspane="2"><p class="actions"> <a href="#" class="back" wicket:id="backButton"> <span>Back</span></a></p></td> </tr></table></form></wicket:extend></body></html>
リスト25 リスト26 リスト27 リスト28 リスト29
全てのリストのテキストをダウンロード
GIVE BACK! ADOPT A JSR
Find your JSR here
