EclipseでJSF2.2学習記環境構築編

仕事でJSF(Java Server Faces)を利用することになりそうなので自習することになしましたので学習記を記します。

~~いずれ、きちんと記事化しますが、学習記ではある程度知識を持った人が見ることを前提としていきます。~~

2016/4/10追記—————————————–

新しく画像付きで環境構築の記事を作成しました。

———————————————————

今回は、Eclipseを使ってJSF2.2が動くところまでです。

利用した環境は以下のとおり

Eclipse4.3
Java 1.8.0_40
GlassFish4.1

JSF開発はNetBeansで！！というような情報もありますが、とりあえずは使い慣れたEclipseで開発できないか調査します。

結論から言うと、2015/4/7時点ではEclipseの最新はEclipse4.4ですがこのバージョンでは開発環境を整備することが出来ないようです。4.3ならOKでした。

1 Eclipseのダウンロード～インストール
2 サーバ設定
3 GlassFishのダウンロードとインストール
4 GlassFishのサーバランタイムの設定
5 JSFプロジェクトの作成
6 動作検証

Eclipseのダウンロード～インストール

Eclipseのダウンロードからインストールまでの記事を参考にEclipse4.3(kepler)をダウンロードします。

サーバ設定

今回はJ2EEサーバにGlassFishを利用します。

Eclipse4.3のデフォルト設定では利用することが出来ないためサーバアダプタを追加しEclipseからGlassFishを利用できるようにします。

※2015/4/7時点ではEclipse4.4にはGlassFishのサーバアダプタが用意されていないません。よってEclipseのバージョンを落として対応します。

Eclipseを起動
「ウィンドウ」 ⇒ 「設定] を選択
左のメニューから「サーバー」⇒「ランタイム環境」を選択
ウィンドウ右側の「追加」ボタンをクリック
画面右上にある「追加サーバー・アダプターのダウンロード」をクリック
「GlassFish Tools」を選択
あとは次へ次へと進んでインストールすれば完了

GlassFishのダウンロードとインストール

インストーラ付きのGlassFishではなくzip形式のGlassFishをここからダウンロードします。

2017/5/19 追記

GlassFishのダウンロード先が変わりました。

上記リンクは変更済みです。

ダウンロードしたら任意の場所に解凍して完了です。

GlassFishのサーバランタイムの設定

サーバアダプタがキチンと設定されていればGlassFish用の設定画面が表示されます。

新規サーバ・ランタイム環境の設定画面で「GlassFish4.0」を選択して次へ
JDKを選択して、GlassFishをインストールしたディレクトリを指定

※JDKのインストールディレクトリに空白が入っているとうまく設定が出来ないようです。JDKのデフォルトのインストール先は「C:\Program Files\Java」ですが空白が入っているためこのままだと設定は出来ません。

JDKを空白の無い場所に再インストールするか「デフォルトJRE」を使うかで対応してください。

サーバビューに表示されれば完了です。

JSFプロジェクトの作成

JSFに対応したプロジェクトを作成します。

Eclipseのパッケージエクスプローラから右クリック
「新規」 ⇒　「その他」を選択
「Web」 ⇒ 「動的Webプロジェクト」
プロジェクト名は任意
「構成」の「変更」ボタンを押す
(とりあえず今回はJSF2.2の学習なので)「JavaServer Faces」にチェック
プロジェクトを作成
作成したプロジェクトをサーバに追加

動作検証

web.xmlを下記のように編集


<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" id="WebApp_ID" version="3.1">
 <display-name>[作成したプロジェクト名]</display-name>
 <welcome-file-list>
 <welcome-file>faces/index.xhtml</welcome-file>
 </welcome-file-list>
 <servlet>
 <servlet-name>Faces Servlet</servlet-name>
 <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
 <load-on-startup>1</load-on-startup>
 </servlet>
 <servlet-mapping>
 <servlet-name>Faces Servlet</servlet-name>
 <url-pattern>/faces/*</url-pattern>
 </servlet-mapping>
</web-app>

WEB-INF直下に「index.xhtml」を作成し、下記を記入


<html xmlns="http://www.w3.org/1999/xhtml"
 xmlns:h="http://xmlns.jcp.org/jsf/html">
<h:head>
</h:head>
<h:body>
Hello World
</h:body>
</html>

WTPからサーバを起動し下記URLへアクセス

http://localhost:8080/[作成したプロジェクト名]

Hello Worldが表示されれば完了