BLOGブログ

2016.02.09

プログラミング

新卒SEのJavaEE挑戦記2(JSF編)

こんにちは、入社一年目のYです。

前回の記事では、eclipseから新規GlassFishサーバーの追加を行いました。
今回より、JavaEE6による簡単なwebアプリケーションを作成しながら、JavaEEについて学んでいきます。

見出し

この連載で作成するアプリケーション

社員情報の登録、一覧、詳細機能からなる、社員情報を管理するアプリケーションを作成します。

今回作成する画面

登録機能の中から、静的な画面を表示するだけで済む、社員情報の入力画面を作成します。

Mavenプロジェクトの作成

Mavenプロジェクトではpom.xmlという設定ファイルを使用し、依存ライブラリの管理とビルドの設定を簡単に行うことができます。

Mavenプロジェクトを作成するには、eclipse画面上部の[ファイル > 新規　> その他]を選択します。

[新規]ダイアログを開いたら、[Maven > Mavenプロジェクト]を選択し、「次へ」を押下します。

[シンプルなプロジェクトの作成]にチェックを入れ、「次へ」を押下します。

グループIdとアーティファクトId（プロジェクト名になります）は任意の名前にしてください。
私の環境では、グループIdは社名、アーティファクトId（プロジェクト名）は「 blog 」としています。
パッケージングは「war」を選択します。

「完了」ボタンを押下すると、Mavenプロジェクトが作成されます。

ライブラリの追加

今回追加するライブラリは以下の通りです。

JSF2.1

ライブラリは基本的に、ローカル環境で動作させる最低限必要なもののみで構成し、必要になった際に随時追加していきます。
pom.xmlは以下の通りです。

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
	<modelVersion>4.0.0</modelVersion>
	<groupId>jp.co.iterative</groupId>
	<artifactId>blog</artifactId>
	<version>0.0.1-SNAPSHOT</version>
	<packaging>war</packaging>
	<dependencies>
		<dependency>
			<groupId>javax.faces</groupId>
			<artifactId>jsf-api</artifactId>
			<version>2.1</version>
		</dependency>
	</dependencies>
</project>

<groupId>jp.co.iterative</groupId>

<version>0.0.1-SNAPSHOT</version>

<groupId>javax.faces</groupId>

</dependency>

</dependencies>

</project>

JSF2.1を使った社員情報入力画面の作成

JSFはJavaEEの仕様であり、動的なwebページを生成するフレームワークです。
社員情報入力画面を下記手順で作成します。

eclipseでXHTMLの雛形を生成する

XHTMLファイルを以下のディレクトリに作成します。
blog/src/main/webapp/inputEmp.xhtml

eclipseではJSFの構成をもったXHTMLファイルを簡単に作成することができます。[新規 > HTML]から新規HTMLファイルのダイアログを開きます。

ファイル名「inputEmp.xhtml」を入力して「次へ」ボタンを押下します。

[新規Facelet構成ページ]を選択して「完了」するとJSFの構成をもつXHTMLが作成されます。

社員情報入力画面の作成

新規作成したinputEmp.xhtmlは以下の内容で記述します。

<!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:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core">
<h:body>
	<h1>社員情報登録</h1>
	<h:form>
	<h:panelGrid columns="2">
		<h:outputText value="氏名"/>
		<h:inputText/>
		<h:outputText value="部署"/>
		<h:selectOneMenu>
			<f:selectItem itemLabel="総務"/>
			<f:selectItem itemLabel="経理"/>
		</h:selectOneMenu>
		<h:outputText value="性別"/>
		<h:selectOneRadio>
			<f:selectItem itemLabel="男性"/>
			<f:selectItem itemLabel="女性"/>
		</h:selectOneRadio>
	</h:panelGrid>
	<h:commandButton value="確認画面へ進む"/>
	</h:form>
</h:body>
</html>

<!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:h="http://java.sun.com/jsf/html"

xmlns:f="http://java.sun.com/jsf/core">

<h:body>

<h1>社員情報登録</h1>

<h:form>

<h:panelGrid columns="2">

<h:outputText value="氏名"/>

<h:inputText/>

<h:outputText value="部署"/>

<h:selectOneMenu>

<f:selectItem itemLabel="総務"/>

<f:selectItem itemLabel="経理"/>

</h:selectOneMenu>

<h:outputText value="性別"/>

<h:selectOneRadio>

<f:selectItem itemLabel="男性"/>

<f:selectItem itemLabel="女性"/>

</h:selectOneRadio>

</h:panelGrid>

<h:commandButton value="確認画面へ進む"/>

</h:form>

</h:body>

</html>

「h:」から始まるタグは、HTMLタグを出力するJSFのカスタムタグです。
使用しているカスタムタグの大まかな役割は下記の通りです。

カスタムタグ	タグの役割
<h:body>	<body>タグを出力する
<h:form>	<form>タグを出力する
<h:panelGrid>	表を出力する
<h:outputText>	文字列を出力する
<h:inputText>	テキストボックスを出力する
<h:selectOneMenu>	リストボックスを出力する
<h:selectOneRadio>	ラジオボタンを出力する
<f:selectItem>	選択肢の項目を出力する
<h:commandButton>	ボタンを出力する

グラスフィッシュにデプロイする

作成したアプリケーションをグラスフィッシュサーバーにデプロイします。
画面下の[ サーバー ]ビューの[ローカルホストのGlassFish3.1]を右クリックし、[追加および除去]を選択します。

作成したプロジェクトをサーバーに追加します。

サーバーを起動して、下記のURLで作成したページにアクセスしてみましょう。
http://localhost:8080/blog/faces/inputEmp.xhtml

上のような画面が表示されたら成功です。

JSFについて

JSFとは、「 JavaServer Fasces 」の頭文字をとったもので、動的なwebページを生成するフレームワークです。JSFはMVCパターンを使用しており、上で作成したXHTMLはMVCで言うV(iew)にあたります。そして、C(ontroller)にあたるのが、FacesServletと呼ばれるサーブレットです。FacesServletはユーザーからのリクエストを受け取り、M(odel)へと情報を伝えています。

先ほどの画面で言うと、URLの「 /faces 」の部分がFacesServletを使用するためのURLになっています。

書籍『Beginning Java EE 6』では下記のように記載されています。

JSFアプリケーションはFacesServletを使用してHTTPをインターセプトし、HTMLを生成する標準のWebアプリケーションです。

先ほどの画面のHTMLソースを見てみましょう。

http://localhost:8080/blog/faces/inputEmp.xhtml

<!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"><body>
	<h1>社員情報登録</h1>
<form id="j_idt5" name="j_idt5" method="post" action="/blog/faces/inputEmp.xhtml" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="j_idt5" value="j_idt5" />
<table>
<tbody>
<tr>
<td>氏名</td>
<td><input type="text" name="j_idt5:j_idt8" /></td>
</tr>
<tr>
<td>部署</td>
<td><select name="j_idt5:j_idt10" size="1">	<option value="" selected="selected">総務</option>
	<option value="" selected="selected">経理</option>
</select></td>
</tr>
<tr>
<td>性別</td>
<td><table>
	<tr>
<td>
<input type="radio" name="j_idt5:j_idt14" id="j_idt5:j_idt14:0" value="" /><label for="j_idt5:j_idt14:0"> 男性</label></td>
<td>
<input type="radio" name="j_idt5:j_idt14" id="j_idt5:j_idt14:1" value="" /><label for="j_idt5:j_idt14:1"> 女性</label></td>
	</tr>
</table></td>
</tr>
</tbody>
</table>
<input type="submit" name="j_idt5:j_idt17" value="確認画面へ進む" /><input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="-5371502134818739882:6579382049968047725" autocomplete="off" />
</form></body>
</html>