JSF2.2入門 第9回データテーブル


kanban9

katatsumuri表を作る

簡単にいうとテーブルです。JSFのh:dataTableというものを使いますが、これは結局はHTMLのtableタグに変換されます。しかしJSFのタグはテーブルにするデータを直接ページに書き込むことよりも、データベース等からダイナミックに取り出してデータ数も自由自在に表示できることが最大の強みです。

ここではデータベース利用も紹介します。

leafこんな表にしたい

外車の簡単なカタログを作ってみます。左の列から、写真、ブランド、モデル、カラー、価格、をテーブル表示します。

160606-8

leafデータベースを使う

NetBeansに組み込まれているJavaDBを使います。サービスウィンドウを開くとそれが見えます。右クリックして[データベースの作成]を実行します。

160606-1dbcreate

データベース名とユーザー名など聞かれます。データベース名はcarsとしました。パスワードはあとでコーディングのときに必要になるので忘れないように。

160606-2dbcreate2

データベースへのコネクションが作られます。右クリックで[接続]を実行します。

160606-3connection

接続されるとコネクションを展開することができて、表のところで[表を作成]を実行します。

160606-4table1

表、つまりデータベースのテーブル作成に入ります。表の名前とか、必要なカラムを作ります。BRAND、MODEL、COLOR、PRICEの4つを作ります。PRICEだけINTEGERでほかはVARCHARです。

160606-5table2

NetBeansのサービスウィンドウにIMPORTCARSという表ができます。そこで右クリックして[コマンドを実行]を実行すると、メイン・ウィンドウにSQL文が実行できる準備が整います。次のようにデータを登録するSQL文を打ち込みます。

160606-6insert

SQLの実行ボタンを押すとデータベースにデータが登録されます。エラーが出なければです。エラーが出るのは大体が誤字、脱字です。よく確かめましょう。そのウィンドウでSQLを修正して再度実行すればOKです。SQL文はこんな感じです。

INSERT INTO KAWASAKI.IMPORTCARS (BRAND,MODEL,COLOR,PRICE) VALUES(‘Mercedes’,’C180AVANTGARDE’,’RED’,486);

160606-10run

サービスウィンドウで表IMPORTCARSで右クリックして[データを表示]を実行するとデータが全部表示されます。メインウィンドウでつぎのSQL文実行してもOKです。

SELECT * FROM KAWASAKI.IMPORTCARS;


160606-7insertresult

これでデータができました。

leafマネージドビーン

このマネージドビーンはデータベースにある全部の車情報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;
}
・・・省略
}
}

ちょっと複雑だったでしょうか。

leafどう表にするか

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でテーブルのスタイルを設定しています。
160606-8

<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>

leaf画像の置き場所

画像はJSFページからアクセスしやすいところにフォルダーを作って入れましょう。画像ファイル名はさっき言ったようにMODEL名と一致していることが、このプログラム設計上で必要です。

320iSE

C180AVANTGARDE.jpg

160606-9image

画像がこの位置にある場合、<h:graphicImage url=”/images/#{car.model}.jpg”/>となります。urlに注意です。

previousnext

JSF2.2のすべてをまとめたkindle電子書籍 「JavaServer Faces2.2 入門」もぜひご覧ください。パソコン、iPhone、Androidどんな端末用にもamazonが無料のKindle電子書籍リーダーを用意しています。それをつかってKindle本を手軽にお楽しみください。あなたが今お使いの端末用Kidle電子書籍リーダーのご案内

同書籍のPDF版は私自身が運営するこちらのサイトから直接購入できます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA