表を作る
簡単にいうとテーブルです。JSFのh:dataTableというものを使いますが、これは結局はHTMLのtableタグに変換されます。しかしJSFのタグはテーブルにするデータを直接ページに書き込むことよりも、データベース等からダイナミックに取り出してデータ数も自由自在に表示できることが最大の強みです。
ここではデータベース利用も紹介します。
こんな表にしたい
外車の簡単なカタログを作ってみます。左の列から、写真、ブランド、モデル、カラー、価格、をテーブル表示します。
データベースを使う
NetBeansに組み込まれているJavaDBを使います。サービスウィンドウを開くとそれが見えます。右クリックして[データベースの作成]を実行します。
データベース名とユーザー名など聞かれます。データベース名はcarsとしました。パスワードはあとでコーディングのときに必要になるので忘れないように。
データベースへのコネクションが作られます。右クリックで[接続]を実行します。
接続されるとコネクションを展開することができて、表のところで[表を作成]を実行します。
表、つまりデータベースのテーブル作成に入ります。表の名前とか、必要なカラムを作ります。BRAND、MODEL、COLOR、PRICEの4つを作ります。PRICEだけINTEGERでほかはVARCHARです。
NetBeansのサービスウィンドウにIMPORTCARSという表ができます。そこで右クリックして[コマンドを実行]を実行すると、メイン・ウィンドウにSQL文が実行できる準備が整います。次のようにデータを登録するSQL文を打ち込みます。
SQLの実行ボタンを押すとデータベースにデータが登録されます。エラーが出なければです。エラーが出るのは大体が誤字、脱字です。よく確かめましょう。そのウィンドウでSQLを修正して再度実行すればOKです。SQL文はこんな感じです。
INSERT INTO KAWASAKI.IMPORTCARS (BRAND,MODEL,COLOR,PRICE) VALUES(‘Mercedes’,’C180AVANTGARDE’,’RED’,486);
サービスウィンドウで表IMPORTCARSで右クリックして[データを表示]を実行するとデータが全部表示されます。メインウィンドウでつぎのSQL文実行してもOKです。
SELECT * FROM KAWASAKI.IMPORTCARS;
これでデータができました。
マネージドビーン
このマネージドビーンはデータベースにある全部の車情報carsを返すものです。赤のところがポイントです。
carsはArrayListになっていて長さが可変です。search()メソッドでデータベースから検索してcarsに情報をセットします。あとはcarsを返すだけの機能です。ゲッターやセッターの掲載はだいぶ省いています。
あと紫色の部分を見てください。このクラス内にCarという1台分の車情報を保持するためのクラスを作ります。各プロパティにアクセスするためのゲッターとセッターを用意します。
データベースを使うにはまず青字の部分でデータベースcarsにコネクションを張ります。ここでデータベースを作成したときのユーザー名とパスワードが必要となります。
中心となる検索のためのserch()メソッドですが、まずStatementを取得し、SQL文で全部を検索する命令を用意します。それをstatementに渡して実行させます。結果はResultSetに入ってきますから、そこからBRAND、MODELなど各情報を取り出してArrayListのcarsに追加していくのです。
@Named(value=”carsBean”)
@RequestScoped
public class CarsBean {
ArrayList cars;
Connection connection;
public CarsBean() {
}
public ArrayList getCars() {
cars=new ArrayList();
open(); //DBコネクションのオープン
search(cars);//検索の実行、結果をcarsに取得
close();//DBコネクションのクローズ
return cars;
}
public void setCars(ArrayList cars) {
this.cars = cars;
}
//DBコネクションオープンのプライベートメソッド
private void open(){
try {
Class.forName(“org.apache.derby.jdbc.ClientDriver”);
//コネクション作成
connection=(Connection) DriverManager.getConnection(“jdbc:derby://localhost:1527/cars”,”kawasaki”,”kawasaki”);
}catch(ClassNotFoundException | SQLException e){
FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(“データベースオープンエラーです”));
}
}
//DBコネクションクローズのプライベートメソッド
private void close(){
try{
if(connection!=null) {
connection.close();
}
}catch(Exception e){
FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(“データベースCLOSEエラーです”));
}
}
//データベース検索
private ArrayList search(ArrayList data){
try{
//テーブルから全てのアイテムを取得する
try (Statement statement = (Statement) connection.createStatement()) {
//テーブルから全てのアイテムを取得する
String sql=”SELECT * FROM KAWASAKI.IMPORTCARS”;
try (ResultSet rs = statement.executeQuery(sql)) {
while(rs.next()) {
String brand=rs.getString(“BRAND”);
String model=rs.getString(“MODEL”);
String color=rs.getString(“COLOR”);
int price=rs.getInt(“PRICE”);
//商品名、価格でPcItemオブジェクト作成、dataへ追加
data.add(new Car(brand,model,color,price));
}
}
}
}catch(Exception e){
FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(“データベース検索エラーです”));
}
return data;
}
public class Car{
String brand;
String model;
String color;
int price;
public Car(String brand,String model,String color,int price){
this.brand=brand;
this.model=model;
this.color=color;
this.price=price;
}
public String getBrand() {
return brand;
}
・・・省略
}
}
ちょっと複雑だったでしょうか。
どう表にするか
h:dataTableタグを使います。valueにビーンのcarsを指定します。ここに全車のデータが入ってきます。そこから1台ずつのデータをvarプロパティで指定したcarに取り込み、そのあとでcarの中のbrandとかさまざまなプロパティにアクセスするのです。
テーブルの各列は色分けして表示しました。どれも同じ方法です。f:facet name=”header”は表の先頭行を作るものです。写真を表示しているのはh:graphicImage url=”/images/#{car.model}.jpg”という部分で、car.modelで入手した文字列に.jpgをつけた画像ファイルを表示しているだけです。そのほかブランド名のところでも#{car.brand}で値を取得して表示しています。車の台数はいくつあっても表のサイズは自動的に作られます。なおCSSでテーブルのスタイルを設定しています。
<h:body>
<h2>IMPORT CARS</h2>
<h:dataTable border=”1″ var=”car” value=”#{carsBean.cars}” styleClass=”datatable”>
<h:column>
<f:facet name=”header”>
<h:outputText value=”PHOTO”/>
</f:facet>
<h:graphicImage url=”/images/#{car.model}.jpg”/>
</h:column>
<h:column>
<f:facet name=”header”>
<h:outputText value=”BRAND”/>
</f:facet>
<h:outputText id=”id1″ value=”#{car.brand}”/>
</h:column>
<h:column>
<f:facet name=”header”>
<h:outputText value=”MODEL”/>
</f:facet>
<h:outputText id=”id1″ value=”#{car.model}”/>
</h:column>
<h:column>
<f:facet name=”header”>
<h:outputText value=”COLOR”/>
</f:facet>
<h:outputText id=”id1″ value=”#{car.color}”/>
</h:column>
<h:column>
<f:facet name=”header”>
<h:outputText value=”PRICE”/>
</f:facet>
<h:outputText id=”id3″ value=”#{car.price}”/>
</h:column>
</h:dataTable>
</h:body>
画像の置き場所
画像はJSFページからアクセスしやすいところにフォルダーを作って入れましょう。画像ファイル名はさっき言ったようにMODEL名と一致していることが、このプログラム設計上で必要です。
C180AVANTGARDE.jpg
画像がこの位置にある場合、<h:graphicImage url=”/images/#{car.model}.jpg”/>となります。urlに注意です。
JSF2.2のすべてをまとめたkindle電子書籍 「JavaServer Faces2.2 入門」もぜひご覧ください。パソコン、iPhone、Androidどんな端末用にもamazonが無料のKindle電子書籍リーダーを用意しています。それをつかってKindle本を手軽にお楽しみください。あなたが今お使いの端末用Kidle電子書籍リーダーのご案内
