MacでJSFのプロジェクトを作る
- 以前、CentOSでJSFのプロジェクトを作ったので今回はMacでつくる
- Eclipseを配置する
- Payaraをインストールする
- Mavenプロジェクトを作成する
- JSFを設定する
- 最初に表示されるページを作成する
- 環境
- macOS Big Sur バージョン11.0.1
- openjdk version "11.0.8" 2020-07-14
以前、CentOSでJSFのプロジェクトを作ったので今回はMacでつくる
CentOSでせっかく作っても・・・Dockerイメージを取らずに、Gitにコミットせずに・・・うっかりEC2インスタンスもろとも削除してしまいました。 というわけでMacで再び作ります。
Eclipseを配置する
- Mac 版 Eclipse Pleiades All in One リリース - Qiitaを参考にEclipseを配置する
- eclipse.iniで以前インストールしたJava11を設定する
オプション | 意味 | 参考 |
---|---|---|
-vm | JVM(Javaプログラムを動かすためのソフトウェア)のパスを設定 | eclipse.iniに-vmを指定する方法 - Qiita |
--illegal-access=deny | コマンドで起動するときに出るワーニングを抑制 | 警告を出ないようにする - Qiita |
#...省略...以下追記箇所... -vm /usr/local/opt/openjdk@11/bin/java -vmargs --illegal-access=deny #...省略...
Payaraをインストールする
Mavenプロジェクトを作成する
- [パッケージ・エクスプローラー]にカーソルを入れて「Ctrl + N」で新規作成ダイアログを表示する。
- [プロジェクト・エクスプローラー]でもOK
- [Maven] > [Mavenプロジェクト] > [次へ]ボタン
- [シンプルなプロジェクトの作成(アーキタイプ選択のスキップ)]チェックボックスをONにする > [次へ]ボタン
- 以下を設定して[完了]ボタンでプロジェクトを作成する
- GroupId : プロジェクトのルートパッケージ名
- ArtifactId : プロジェクト名
pom.xmlに文字コード「UTF-8」を設定する
文字コードを設定しないと各OSの文字コードでコードがビルドされます。 そうなるとビルドする環境によって内容が変わってしまいます。
なので、プラットフォームのエンコーディング (実際は UTF-8) を使用してフィルターされたリソースをコピーします。つまり、ビルドはプラットフォームに依存します!というメッセージがログや[エラー・ログ]ビューに出力されます。
<!-- ...省略... --> <properties> <!-- ソースの文字コードを定義 --> <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding> </properties> </project>
コンパイラを設定する
- [パッケージ・エクスプローラー]でプロジェクトを選択 > 「Command + I」でプロパティダイアログを表示する
- [プロジェクト・エクスプローラー]でもOK
- [Java コンパイラー] > [Javaビルド・パス上の実行環境'J2SE-1.5'から準拠を使用]チェックボックスをOFFにする
- [コンパイラー準拠レベル]で「11」を選択
- [デフォルトの準拠設定の使用]チェックボックスをOFFにする
- [適用]ボタン > メッセージダイアログが表示されるので[はい]でビルドを行う
pom.xmlにMavenコンパイル用のJDKを定義する
JDKを定義しないとMavenビルド後にJava compiler level does not match the version of the installed Java project facet.というエラーになることがあります。
<!-- ...省略... --> <properties> <!-- ソースの文字コードを定義 --> <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding> <!-- Mavenコンパイル用のJavaを定義 --> <maven.compiler.source>11</maven.compiler.source> <maven.compiler.target>11</maven.compiler.target> </properties> </project>
JSFを設定する
- [パッケージ・エクスプローラー]でプロジェクトを選択 > 「Command + I」でプロパティダイアログを表示する
- [プロジェクト・ファセット] > [ファセット・フォームへ変換...]リンクから一覧を表示する
- [Java]をONにして[Version]を「11」にする
- [JavaServer Faces]をONにして[Version]を「2.2」にする
- ここを「2.3」にすると後でコードをサーバで実行するときにUnable to find CDI BeanManager.となることがあるので注意してください
- [動的Webモジュール]をONにして[Version]を「3.1」にする
- [適用して閉じる]ボタンでプロパティダイアログを閉じる
- メッセージダイアログが表示されるので[はい]でビルドを行う
WebContentディレクトリは、コンテキストディレクトリともいいます。 コンテキストディレクトリは、任意のディレクトリに変更することもできます。
中身はこんな感じです。(まだないものもあります)
ディレクトリ/ファイル名 | 内容 |
---|---|
WebContent/WEB-INF | コンパイル済みのプログラムや各種のライブラリファイル、設定ファイルなどが入ります。 このディレクトリ配下のリソースは、クライアント(WEBブラウザ)からアクセスすることはできません。 |
WebContent/WEB-INF/lib | 各種ライブラリのJARファイル。 ここに配置したJARファイル中のクラスファイルはWebアプリケーションから参照することができます。 |
WebContent/WEB-INF/classes | 作成したプログラムのclassファイルやメッセージプロパティファイルが格納されます。 |
WebContent/WEB-INF/faces-config.xml | JSF の構成ファイルです。エラー・メッセージの国際化などに使用するリソース・バンドルの情報が記述されています。 |
WebContent/WEB-INF/web.xml | アプリケーションの動作を指定する必須ファイルです。 FacesServletの動作環境や条件を定義します。 |
WebContent/resources | 画像やCSSなどWebページに読み込ませるデータを配置します。 |
- 参考
出力された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>tryJSF</display-name> <welcome-file-list> <welcome-file>index.html</welcome-file> <welcome-file>index.htm</welcome-file> <welcome-file>index.jsp</welcome-file> <welcome-file>default.html</welcome-file> <welcome-file>default.htm</welcome-file> <welcome-file>default.jsp</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>*.jsf</url-pattern> <url-pattern>*.xhtml</url-pattern> </servlet-mapping> </web-app>
出力されたfaces-config.xmlはこんな感じです。
<?xml version="1.0" encoding="UTF-8"?> <faces-config xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-facesconfig_2_2.xsd" version="2.2"> </faces-config>
pom.xmlにJSFのライブラリを定義する
- Maven Repository: org.glassfish » javax.facesから任意のバージョンのMaven用定義をコピーしてpom.xmlに定義を貼り付ける
- 今回は作業時点で最新の「2.4」を使う
- Maven Repository: org.primefaces » primefacesから任意のバージョンのMaven用定義をコピーしてpom.xmlに定義を貼り付ける
- 今回は作業時点で最新の「8.0」を使う
- 参考 : Primefacesの紹介
- [Package Explorer]でプロジェクトを選択 > 「fn + option + F5」でダイアログを表示 > [OK]ボタンでMavenを更新する
<!-- ...省略... --> </properties> <dependencies> <!-- https://mvnrepository.com/artifact/org.glassfish/javax.faces --> <dependency> <groupId>org.glassfish</groupId> <artifactId>javax.faces</artifactId> <version>2.4.0</version> </dependency> <!-- https://mvnrepository.com/artifact/org.primefaces/primefaces --> <dependency> <groupId>org.primefaces</groupId> <artifactId>primefaces</artifactId> <version>8.0</version> </dependency> </dependencies> </project>
最初に表示されるページを作成する
JSFのページはWebContentディレクトリにXHTMLで作成します。
index.xhtmlを作成する
- [パッケージ・エクスプローラー]で[WebContent]を選択して「Command + N」で新規ダイアログを開く
- [Web] > [HTML ファイル] > [次へ]ボタン > [ファイル名:]に「index.xhtml」を入力し[次へ]ボタン
- [テンプレート:] > [新規Faceletテンプレート] > [完了]ボタンで新規ページを作成する
今はとりあえずなのでindex.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://xmlns.jcp.org/jsf/facelets"> <head> <title><ui:insert name="title">Default title</ui:insert></title> </head> <body> <ui:debug hotkey="x" rendered="#{initParam['javax.faces.FACELETS_DEVELOPMENT']}"/> <div id="header"> <ui:insert name="header"> Header area. See comments below this line in the source.<!-- include your header file or uncomment the include below and create header.xhtml in this directory --> <!-- <ui:include src="header.xhtml"/> --> </ui:insert> </div> <div id="content"> <ui:insert name="content"> Content area. See comments below this line in the source. <!-- include your content file or uncomment the include below and create content.xhtml in this directory --> <!-- <div> --> <!-- <ui:include src="content.xhtml"/> --> <!-- </div> --> </ui:insert> </div> <div id="footer"> <ui:insert name="footer"> Footer area. See comments below this line in the source. <!-- include your header file or uncomment the include below and create footer.xhtml in this directory --> <!--<ui:include src="footer.xhtml"/> --> </ui:insert> </div> </body> </html>
index.xhtmlをウェルカムページに設定する
ファイル名を指定しなかった場合に、既定で返されるドキュメントは設定ファイルで指定することが出来ます。 この既定のファイルのことを、ウェルカムページ (Welcome page) といいます。
JSP のウェルカムページ (デフォルトページ) の設定 - Java による Web アプリケーション開発 - Java の基本 - Java 入門
web.xmlにあるwelcome-file-list
タグ配下を以下のように変更します。
<!-- ...省略... --> <welcome-file-list> <welcome-file>index.jsf</welcome-file> </welcome-file-list> <!-- ...省略... -->
Payaraを起動する
- [パッケージ・エクスプローラー]でプロジェクトを選択 > Option + Shift + X + R(サーバーで実行)
- ダイアログでPayaraを選択 > [OK]ボタンで実行
- ブラウザでhttp://localhost:8080/tryJsf/にアクセスしてページが表示されたら動作確認完了