今回はJSFを使って簡単なWebアプリを作ります。
環境構築がまだの方はこちらの記事から読んでみてください。
talosta.hatenablog.com
テーブルの作成
まず、MySQLのコマンドラインを開きます。
開いたら前回設定したパスワードを入力します。
プロンプトが表示されたら
create database sample;
use sample;
create table user (id integer primary key, name varchar(30) not null);
insert into user values (1, "Ito");
insert into user values (2, "Sato");
insert into user values (3, "Muto");
select * from user;
と打ち込んでください。
このような出力があるはずです。
今回はSQLの意味については触れません。
IDと名前のカラムを持つテーブルを作ったことだけは覚えておいてください。
プロジェクトの作成
Eclipseを開き、ファイル→新規→動的Webプロジェクトを選択してください。
今回のプロジェクト名は「JsfSample」とします。
次にターゲット・ランタイムをWildFly 11.0にします。
最後に構成の欄の変更ボタンを押し、JavaServer Facesにチェックを付けます。
OKと完了を押します。
C:\Program Files(x86)\MySQL\Connector J 8.0にあるmysql-connector-java-8.0.20.jarをWebContent/WEB-INF/libに入れます。
JavaBeansを作成
まず、Javaリソースのsrc上で右クリックし、新規→クラスと進みます。
パッケージ名を「javabeans」、クラス名を「User」とし、インターフェースに「java.io.Serializable」を持ちます。
package javabeans;
import java.io.Serializable;
public class User implements Serializable {
private int id;
private String name;
public User() {
}
public User(int id, String name) {
this.id = id;
this.name = name;
}
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
DAOを作成
DAOはData Access Objectの略です。
基本的にはデータベース操作を行うクラスを指します。
JavaBeansと同様にクラスを作成します。
パッケージ名を「dao」、クラス名を「UserDao」とします。
package dao;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import javabeans.User;
public class UserDao {
private final String URL ="jdbc:mysql://localhost:3306/sample?serverTimezone=JST";
private final String USER = "root";
private final String PASSWORD = "root";
public ArrayList<User> getAllUsers() {
Connection con = null;
PreparedStatement ps = null;
ResultSet rs = null;
ArrayList<User> users = new ArrayList<>();
try {
con = DriverManager.getConnection(URL, USER, PASSWORD);
String sql = "select * from user";
ps = con.prepareStatement(sql);
rs = ps.executeQuery();
while (rs.next()) {
User user = new User();
user.setId(rs.getInt("id"));
user.setName(rs.getString("name"));
users.add(user);
}
}
catch (Exception e) {
e.printStackTrace();
}
finally {
try {
if (rs != null) {
rs.close();
}
if (ps != null) {
ps.close();
}
if (con != null) {
con.close();
}
}
catch (SQLException se) {
se.printStackTrace();
}
}
return users;
}
}
バッキングビーンを作成
バッキングビーンとはJSFで作られたページとやりとりをできるJavaプログラムです。
アノテーションを付けることでJSFページとやりとりができます。
アノテーションについては後ほど説明します。
また、バッキングビーンはJavaBeansと同じくカプセル化されています。
それでは作ってみましょう。
パッケージ名は「backingbeans」、クラス名は「UsersBean」とします。
package backingbeans;
import java.io.Serializable;
import java.util.ArrayList;
import javax.enterprise.context.RequestScoped;
import javax.inject.Named;
import dao.UserDao;
import javabeans.User;
@Named
@RequestScoped
public class UsersBean implements Serializable {
private ArrayList<User> users;
public UsersBean() {
UserDao userDao = new UserDao();
users = userDao.getAllUsers();
}
public ArrayList<User> getUsers() {
return users;
}
public void setUsers(ArrayList<User> users) {
this.users = users;
}
}
@Namedと@RequestScopedがアノテーションと呼ばれるものです。
@Namedはクラスに任意の名前を付けるものですが、指定しなければクラス名の1文字目を小文字にした名前が付けられます。
UserBeanクラスの場合はuserBeanとなります。
これがないとJSFページからアクセスできないので必ず付ける必要があります。
また、バッキングビーンはnewすることができません。
その代わり、オブジェクトの生成と廃棄をJavaEEシステムが自動で行ってくれます。
そのタイミングを指定しているのが@RequestScopedです。
@RequestScopedはリクエストが発生した時にオブジェクトが自動生成され、レスポンスが完了すると破棄されます。
他にも@SessionScopedや@ApplicationScopedなどがあり、@SessionScopedはユーザーがログインしてからログアウトするまでの過程に相当し、@ApplicationScopedはアプリケーションが起動してから停止するまでの過程に相当します。
WebContentフォルダ上で右クリックし、新規→XHTMLページへと進みます。
ファイル名は「index.xhtml」とします。
次へを押し、Blank JSF Pageを選択して完了を押します。
できたらこのように書いてみましょう。
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html">
<h:head>
<title>ユーザー一覧</title>
</h:head>
<body>
<h1>ユーザー一覧</h1>
<h:dataTable value="#{usersBean.users}" var="user" border="1">
<h:column>
<f:facet name="header">ID</f:facet>
#{user.id}
</h:column>
<h:column>
<f:facet name="header">名前</f:facet>
#{user.name}
</h:column>
</h:dataTable>
</body>
</html>
#{usersBean.users}はEL式と呼ばれます。
これはUserBeanクラスをのusersフィールドを表しています。
また、dataTableタグは拡張for文のように使い、表を作ることができます。
userという変数はusersリストの各行を表し、繰返し出力します。
実行する
index.xhtml上で右クリックし、実行→サーバーで実行を選択します。
ウィンドウが開いたら完了を押します。
すると以下のようなページが開くはずです。
なお、コードを変更したときは一度サーバーを停止してから実行してください。
おわりに
今回はJSFで簡単なWebアプリケーションを作りました。
次はもう少し難しいものを作ってみます。
