EclipseでJSFプロジェクトを作成する

2016.09.09

EclipseでJSFプロジェクトを作成する

JavaEE7環境を構築したら次にMavenでJSFプロジェクトを構築してみます。

Eclipseを起動し、「ファイル」-「新規」-「その他」で以下ウィンドウを開き、Mavenプロジェクトを選択します。

EclipseでJSFをプロジェクトを作成する

「次へ」をクリックすると、以下ウィンドウが開きます。

EclipseでJSFをプロジェクトを作成する

「シンプルなプロジェクトの作成」にチェックを入れて「次へ」をクリックすると、以下ウィンドウが開きます。

EclipseでJSFをプロジェクトを作成する

グループID、アーティファクトID、バージョン、パッケージングを入力して「完了」をクリックします。

これでプロジェクトが作成されます。

EclipseでJSFをプロジェクトを作成する

最初はエラーが出ているので修正します。

まずプロジェクトを右クリックし、「プロパティー」を選択し、以下ウィンドウが開きます。

EclipseでJSFをプロジェクトを作成する

Java1.5を1.8に修正します。

EclipseでJSFをプロジェクトを作成する

次に「プロジェクト・ファセット」を選択し、以下のようにJavaServer Faces2.2にチェックをいれます。

EclipseでJSFをプロジェクトを作成する

次に「ランタイム」タブをクリックし、「GlassFish 4」にチェックをいれます。

EclipseでJSFをプロジェクトを作成する

次に「より詳しい構成が必要…」をクリックします。

EclipseでJSFをプロジェクトを作成する

このまま「OK」をクリックします。

EclipseでJSFをプロジェクトを作成する

このまま「OK」をクリックします。

これでエラーが消えるはず、と思ったら以下エラーが残りました。

EclipseでJSFをプロジェクトを作成する

再度、プロジェクトを右クリックし、「プロパティー」を選択します。

「プロジェクト・ファセット」を見ると、Javaのバージョンが1.5になっていました。

1.8に修正します。

EclipseでJSFをプロジェクトを作成する

これで、先ほどのエラーが消えました。

index.xhtmlを配置する

Test001プロジェクトのwebapp配下にindex.xhtmlを配置します。

EclipseでJSFをプロジェクトを作成する

index.xhtmlのの内容は以下の通りです。

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

このプロジェクトをGlassfishサーバに追加する必要があります。

追加するには、サーバービューからGlassfishを選択し、右クリックします。

EclipseでJSFをプロジェクトを作成する

「追加および除去」を選択します。以下ウィンドウが開いたら、サーバーに追加したいリソースを追加します。

EclipseでJSFをプロジェクトを作成する

Test001を左側から右側に追加します。

EclipseでJSFをプロジェクトを作成する

「完了」をクリックします。これでサーバーを起動することによりアプリケーションの動作を確認することができます。

サーバービューより、Glassfishを起動します。

起動後、http://localhost:8080/Test001/faces/index.xhtmlにアクセスします。

先ほどのindex.xhtmlが表示されればOKです。

http://localhost:8080/Test001/faces/index.xhtml

参考サイト：http://ittoybox.com/archives/553

バッキングビーン

JSFプロジェクトを作成したのでバッキングビーンというJava(POJO)を作成してみます。

バッキングビーンはJSFプロジェクトのxhtmlページの入力部品にバインドされるJava(POJO)のことを言います。

とりあえず適当なパッケージで適当なクラス名でnameとageプロパティと

getter,setterを持つクラスを作成します。（もちろんpublicで）

package jp.confrage;


import javax.enterprise.context.RequestScoped;
import javax.inject.Named;

@Named
@RequestScoped
public class Tekito001 {
  private String name;
  private Integer age;

  public String getName() {
    return name;
  }
  public void setName(String name) {
    this.name = name;
 }
  public Integer getAge() {
    return age;
  }
  public void setAge(Integer age) {
    this.age = age;
  }
  public String submit(){
    System.out.println(name + ":" + age);
    return "out.xhtml";
  }
}

一番下のsubmitメソッドは送信ボタン押下時の挙動で、とりあえずコンソールに出力してout.xhtmlに遷移するメソッドです。

バッキングビーンには@Namedアノテーションと@RequestScopedアノテーションを付ける必要があります。

@Namedアノテーション

@Namedアノテーションは、クラスに任意のアノテーションを付けるあのテーションです。

上記のように省略することも可能ですが、@Named(“input”)というようにバッキングビーンにinputという名前を付けることができます。省略した場合はクラス名の先頭を小文字にした名前がバッキングビーン名になります。

上記の場合、tekito001となります。

@RequestScoped

@RequestScopedアノテーションは、POJOをnewでインスタンス生成出来ないようにします。

HTTPリクエスト時に自動生成され、レスポンス後に自動廃棄されます。

javax.enterprise.context.RequestScopedをimportします。（２つあります）

index.xhtml

次に、先ほど作成したindex.xhtmlを以下のように修正します。

<?xml version='1.0' encoding='UTF-8' ?>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html">
<h:head>
</h:head>
<h:body>
<h2>TEST</h2>
<h:form>
名前：<h:inputText value="#{tekito001.name}" /><br/>
年齢：<h:inputText value="#{tekito001.age}" /><br/>
<h:commandButton action="#{tekito001.submit()}" value="送信" />
</h:form>
</h:body>
</html>

この画面で入力した値はクラス名は先ほどのバッキングビーン（Java）のプロパティに保持されるようになります。（h:で始まるタグはFaceletsタグです）

EL式は#{バッキングビーン名.プロパティ名}と記述します。

このように記述することによってJSFとバッキングビーンをバインドすることができます。

EclipseでJSFプロジェクトを作成する

名前と年齢を入力して送信ボタンを押下します。年齢はIntegerにしているのでとりあえずは数値を入力してください。

EclipseでJSFプロジェクトを作成する

送信ボタンを押すとtekito001バッキングビーンのsubmitメソッドが実行されます。

画面の遷移は文字列で遷移先を指定するだけです。今回はout.xhtmlを遷移先としています。

out.xhtml

<?xml version='1.0' encoding='UTF-8' ?>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html">
<h:head>
</h:head>
<h:body>
<h2>結果</h2>
あなたの名前：<h:outputText value="#{tekito001.name}"/><br/>
あなたの年齢：<h:outputText value="#{tekito001.age}"/><br/>
</h:body>
</html>

とりあえず上記のようなout.xhtmlを作成しました。

h:で始まるタグはFaceletsタグはどこかで纏めて記事にします。

では送信ボタンを押下します。

EclipseでJSFプロジェクトを作成する

xhtmlの日本語は文字化けしていませんが、リクエストで渡された日本語は文字化けしてしまっています。

どうもGlassfishはデフォルトがISO-8859-1のようで、WEB-INF配下にglassfish-web.xmlを作成してUTF-8にしてあげる必要があるようです。以下、glassfish-web.xmlです。

glassfish-web.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE glassfish-web-app PUBLIC "-//GlassFish.org//DTD GlassFish Application Server 3.1 Servlet 3.0//EN"
"http://glassfish.org/dtds/glassfish-web-app_3_0-1.dtd">
<glassfish-web-app error-url="">
<class-loader delegate="true"/>
<jsp-config>
<property name="keepgenerated" value="true">
<description>Keep a copy of the generated servlet class' java code.</description>
</property>
</jsp-config>
<parameter-encoding default-charset="UTF-8"/>
</glassfish-web-app>

Glassfishを再起動して再度送信してみます。

EclipseでJSFプロジェクトを作成する

今度は日本語が文字化けせずに表示されました。

web.xml

web.xmlは修正するところはほとんどないと思いますが以下を追加すると、入力部品にイレギュラーな値を入力した場合などに自動でエラーメッセージを表示してくれるようになります。

<context-param>
<param-name>javax.faces.PROJECT_STAGE</param-name>
<param-value>Development</param-value>
</context-param>

Developmentなので開発中という意味だと思います。

その他、Production、SystemTest、UnitTestが指定できます。それらを指定した時の挙動の違いは試していません。

Developmentに指定した後、index.xhtmlの年齢に数値以外を入力してみてください。

以下のように画面にエラーが出るようになるはずです。

EclipseでJSFプロジェクトを作成する

 

コメント

株式会社CONFRAGE ITソリューション事業部をもっと見る

今すぐ購読し、続きを読んで、すべてのアーカイブにアクセスしましょう。

続きを読む

タイトルとURLをコピーしました