Woodstockコンポーネントが非常に使いにくいNetBeansのVisual Web JSFですが、標準のJSFのコンポーネントもついてきてるので、そっちを使った場合の画面の作り方を書いてみようと思う。
Woodstockのコンポーネントを使った例とかは、恐らく本家のほうにいっぱい？あると思うので。
因みに、使用しているNetBeansのバージョンは6.5のRC2です。
Windows Vista Business SP1の上では順調に動いてる。あんまり使ってないけど、普通に立ち上げて軽く使う分には問題なさそうな感じです。
プロジェクト作成
StdVWJEduという名前でWebアプリケーションを新規作成する。
- アプリケーションサーバはGlassFish v2
- 使用するフレームワークはVisual Web JSF
使用するDBは、sampleデータベースにする。テーブルはCustomerテーブルを使おうと思う。
エンティティの作成
JPAのエンティティを作成する。
- ソースパッケージにentitiesパッケージを作成する
- 次にデータベースからのエンティティークラスを作成
- データソースをjdbc/sampleにしてCUSTOMER表を選択した状態にして次へ
- 持続性ユニットが無いといわれるのでボタンを押して作成する
- ダイアログが出るが、そのまま完了。
- 完了をするとクラスが作成される。
これでエンティティクラスの作成は完了。次は、画面の見た目を作っていこうと思う。
画面の作成
Page1.jspを作りこんで行く。
といっても、とりあえず画面にデータ表を貼り付けるだけ。
Javaのほうに移動してListDataModel型のdataModelという名前のプロパティを作成する。
ついでに、DBアクセスするときに使うEntityManagerのフィールドも作成しておく。
// DBアクセスに使うエンティティマネージャ
@PersistenceContext
private EntityManager em;
// 表に表示するためのデータの入れ物
private ListDataModel dataModel;
public ListDataModel getDataModel() {
return dataModel;
}
public void setDataModel(ListDataModel dataModel) {
this.dataModel = dataModel;
}
そうして、prerenderメソッドに下記の処理を追加する。
@Override
public void prerender() {
if (dataModel == null) {
// dataModelが存在しない場合はDBからデータを取得する
List<Customer> customers = em.createQuery("select c from Customer c order by c.customerId").getResultList();
dataModel = new ListDataModel(customers);
}
}
このままだと、管理ビーンはRequestスコープなので毎回dataModelはnullに初期化されてしまう。なので、毎回DBにアクセスするはめになる。
ケースバイケースだけど、今回は毎回DBに行くよりも前回のデータをSessonに保持するようにした。
使用するのはinitメソッドとdestroyメソッド。initにSessionからのデータの取得。destroyにSessionへのデータの格納処理を書く。
@Override
public void init() {
// 自動生成されるコードは省略
// TODO - add your own initialization code here
dataModel = (ListDataModel) getSessionMap().get("Page1.dataModel");
}
@Override
public void destroy() {
getSessionMap().put("Page1.dataModel", dataModel);
}これで、データが保持されるようになった。最後にdataModelと画面に置いたデータ表を関連付ける。
データ表の右クリックメニューで「表レイアウト」を選択する。
出てくる画面で、先ほど作成したdataProviderプロパティを指定する。
カラムを３つ追加する。
各カラムに対して以下の設定を行う。
column1
| 設定項目名 |
値 |
| ヘッダーテキスト |
ID |
| フッターテキスト |
（未入力状態） |
| コンポーネントの種類 |
出力テキスト |
| 値 |
#{currentRow.customerId} |
column2の場合は、値の部分が#{currentRow.name}、ヘッダーテキストがNameに変わるだけのはず。column3は値を#{currentRow.zip}に、ヘッダーテキストをZipに設定する。
この時点で実行すると、データが表示される簡単な画面が出来上がっている。
これで一覧表示が出来た。見た目とかには拘らないし、たくさんデータがあるときの処理なども考慮してないけど。
次は、IDの列をアンカーにして、そこをクリックすると更新用の画面に移動させて更新をするようにしたいと思う。
今日は、眠いのでここまで。