MacでJSFのプロジェクトを作る

  • 環境
    • macOS Big Sur バージョン11.0.1
    • openjdk version "11.0.8" 2020-07-14

以前、CentOSJSFのプロジェクトを作ったので今回はMacでつくる

ponsuke-tarou.hatenablog.com

CentOSでせっかく作っても・・・Dockerイメージを取らずに、Gitにコミットせずに・・・うっかりEC2インスタンスもろとも削除してしまいました。 というわけでMacで再び作ります。

f:id:ponsuke_tarou:20201221231926j:plain
豊島区の目白庭園

Eclipseを配置する

  1. Mac 版 Eclipse Pleiades All in One リリース - Qiitaを参考にEclipseを配置する
  2. 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をインストールする

  1. zipでインストールする - Qiita
  2. Eclipseに設定する - Qiita

Mavenプロジェクトを作成する

  1. [パッケージ・エクスプローラー]にカーソルを入れて「Ctrl + N」で新規作成ダイアログを表示する。
  2. [Maven] > [Mavenプロジェクト] > [次へ]ボタン
  3. [シンプルなプロジェクトの作成(アーキタイプ選択のスキップ)]チェックボックスをONにする > [次へ]ボタン
  4. 以下を設定して[完了]ボタンでプロジェクトを作成する

pom.xml文字コードUTF-8」を設定する

文字コードを設定しないと各OSの文字コードでコードがビルドされます。 そうなるとビルドする環境によって内容が変わってしまいます。

なので、プラットフォームのエンコーディング (実際は UTF-8) を使用してフィルターされたリソースをコピーします。つまり、ビルドはプラットフォームに依存します!というメッセージがログや[エラー・ログ]ビューに出力されます。

<!-- ...省略... -->
  <properties>
    <!-- ソースの文字コードを定義 -->
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
  </properties>
</project>

コンパイラを設定する

  1. [パッケージ・エクスプローラー]でプロジェクトを選択 > 「Command + I」でプロパティダイアログを表示する
  2. [Java コンパイラー] > [Javaビルド・パス上の実行環境'J2SE-1.5'から準拠を使用]チェックボックスをOFFにする
  3. [コンパイラー準拠レベル]で「11」を選択
  4. [デフォルトの準拠設定の使用]チェックボックスをOFFにする
  5. [適用]ボタン > メッセージダイアログが表示されるので[はい]でビルドを行う f:id:ponsuke_tarou:20201229095524p:plain

pom.xmlMavenコンパイル用のJDKを定義する

pom.xmlを開いて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>

f:id:ponsuke_tarou:20201229115210j:plain
台東区の鶴の湯

JSFを設定する

  1. [パッケージ・エクスプローラー]でプロジェクトを選択 > 「Command + I」でプロパティダイアログを表示する
  2. [プロジェクト・ファセット] > [ファセット・フォームへ変換...]リンクから一覧を表示する
  3. [Java]をONにして[Version]を「11」にする
  4. [JavaServer Faces]をONにして[Version]を「2.2」にする
    • ここを「2.3」にすると後でコードをサーバで実行するときにUnable to find CDI BeanManager.となることがあるので注意してください
  5. [動的Webモジュール]をONにして[Version]を「3.1」にする
    1. [ランタイム]タブ > 表示されたPayaraをONにする
    2. 下の方に出てくる[より詳しい構成が必要...]リンクを押下して[ファセット・プロジェクトの変更]画面を表示する
      • f:id:ponsuke_tarou:20201229101314p:plain
    3. [コンテキストルート : ]を設定する(今回はデフォルトのまま)
      • Content directoryは、HTMLやCSSや画像ファイルなどのコンテンツを格納するディレクトリルート
    4. [web.xmlデプロイメント記述子の生成 : ]チェックボックスをONにする > [次へ]ボタン
      • f:id:ponsuke_tarou:20201216225927p:plain
    5. [URLマッピング・パターン:]で「/faces/」を[除去]して、「.jsf」「*.xhtml」を[追加...]する
      • f:id:ponsuke_tarou:20201229101140p:plain
    6. [OK]ボタンでダイアログを閉じる
  6. [適用して閉じる]ボタンでプロパティダイアログを閉じる
  7. メッセージダイアログが表示されるので[はい]でビルドを行う
    • f:id:ponsuke_tarou:20201216230210p:plain

f:id:ponsuke_tarou:20201229101623p:plain
この設定によりWebContentsディレクトリやweb.xml、faces-config.xmlが作成されます。

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.xmlJSFのライブラリを定義する

  1. Maven Repository: org.glassfish » javax.facesから任意のバージョンのMaven用定義をコピーしてpom.xmlに定義を貼り付ける
    • 今回は作業時点で最新の「2.4」を使う
  2. Maven Repository: org.primefaces » primefacesから任意のバージョンのMaven用定義をコピーしてpom.xmlに定義を貼り付ける
    • 今回は作業時点で最新の「8.0」を使う
    • 参考 : Primefacesの紹介
  3. [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を作成する

  1. [パッケージ・エクスプローラー]で[WebContent]を選択して「Command + N」で新規ダイアログを開く
  2. [Web] > [HTML ファイル] > [次へ]ボタン > [ファイル名:]に「index.xhtml」を入力し[次へ]ボタン
  3. [テンプレート:] > [新規Faceletテンプレート] > [完了]ボタンで新規ページを作成する f:id:ponsuke_tarou:20201221230531p:plain

今はとりあえずなので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を起動する

  1. [パッケージ・エクスプローラー]でプロジェクトを選択 > Option + Shift + X + R(サーバーで実行)
  2. ダイアログでPayaraを選択 > [OK]ボタンで実行
  3. ブラウザでhttp://localhost:8080/tryJsf/にアクセスしてページが表示されたら動作確認完了

f:id:ponsuke_tarou:20201229114256p:plain

f:id:ponsuke_tarou:20201221232307j:plain
世田谷の用賀にある栄湯