talosのプログラミング教室

トップ > Webアプリケーション > JavaServer FacesでWebアプリ開発　～基本編～

JavaServer FacesでWebアプリ開発　～基本編～

Webアプリケーション プログラミング プログラミング-Java

スポンサーリンク

今回はJSFを使って簡単なWebアプリを作ります。

環境構築がまだの方はこちらの記事から読んでみてください。

talosta.hatenablog.com

テーブルの作成

まず、MySQLのコマンドラインを開きます。

f:id:talosta:20200608213041p:plain

開いたら前回設定したパスワードを入力します。

f:id:talosta:20200608213231p:plain

プロンプトが表示されたら

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;

と打ち込んでください。

f:id:talosta:20200608214908p:plain

このような出力があるはずです。

今回はSQLの意味については触れません。

IDと名前のカラムを持つテーブルを作ったことだけは覚えておいてください。

プロジェクトの作成

Eclipseを開き、ファイル→新規→動的Webプロジェクトを選択してください。

今回のプロジェクト名は「JsfSample」とします。

次にターゲット・ランタイムをWildFly 11.0にします。

f:id:talosta:20200608215732p:plain

最後に構成の欄の変更ボタンを押し、JavaServer Facesにチェックを付けます。

f:id:talosta:20200608215915p:plain

OKと完了を押します。

JDBCドライバを入れる

C:\Program Files(x86)\MySQL\Connector J 8.0にあるmysql-connector-java-8.0.20.jarをWebContent/WEB-INF/libに入れます。

f:id:talosta:20200608221925p:plain
f:id:talosta:20200608221942p:plain


スポンサーリンク



JavaBeansを作成

まず、Javaリソースのsrc上で右クリックし、新規→クラスと進みます。

f:id:talosta:20200609215257p:plain

パッケージ名を「javabeans」、クラス名を「User」とし、インターフェースに「java.io.Serializable」を持ちます。

f:id:talosta:20200609223137p:plain

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はアプリケーションが起動してから停止するまでの過程に相当します。

xhtmlファイルの作成

WebContentフォルダ上で右クリックし、新規→XHTMLページへと進みます。

f:id:talosta:20200608220405p:plain

ファイル名は「index.xhtml」とします。

f:id:talosta:20200608220432p:plain

次へを押し、Blank JSF Pageを選択して完了を押します。

f:id:talosta:20200608220447p:plain

できたらこのように書いてみましょう。

<!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"
      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上で右クリックし、実行→サーバーで実行を選択します。

ウィンドウが開いたら完了を押します。

すると以下のようなページが開くはずです。

f:id:talosta:20200613171946p:plain

なお、コードを変更したときは一度サーバーを停止してから実行してください。

f:id:talosta:20200613172203p:plain

おわりに

今回はJSFで簡単なWebアプリケーションを作りました。

次はもう少し難しいものを作ってみます。


あわせて読みたい

talosta.hatenablog.com

参考

わかりやすいＪａｖａＥＥウェブシステム入門 /秀和システム/川場隆
posted with カエレバ
楽天市場
Amazon
Yahooショッピング
7net