このチュートリアルでは、Google App Engine(GAE)環境でJSF 2.0 Webアプリケーションを開発およびデプロイする方法について説明します。

使用されるツールと技術:

  1. JDK 1.6

  2. Eclipse用Eclipse 3.7 Google Plugin

  3. Google App Engine Java SDK 1.6.3.1

  4. JSF 2.1.7

1.新しいWebアプリケーションプロジェクト

Eclipseで、「

JSFGoogleAppEngine

」という名前の新しいWebアプリケーションプロジェクトを作成します。


新しいWebアプリケーションGAEプロジェクトを生成する、title = "gae-jsf2-example1"、width = 354、height = 479

「Google Plugin for Eclipse」では、GAEプロジェクトの構造のサンプルが生成されます。

2. JSF 2の依存関係

GAEでJSF 2を使用するには、次のjarファイルが必要です

  1. jsf-api-2.1.7.jar

  2. jsf-impl-2.1.7.jar

  3. el-ri-1.0.jar



war/WEB-INF/lib

“フォルダにコピーして入れてください。

「gae-jsf2-library-example2」、width = 478、height = 540]

プロジェクトフォルダを右クリックし、 ”

Properties

“を選択します。 ”

Java Build Path

” – > ”

Libraries

“タブを選択し、 ”

Add Jars

“ボタンをクリックし、上記のjarファイルを選択します。


gae jsf2 java build path、title = "gae-jsf2-java-build-example3"、width = 548、高さ= 480

  • Note ** +この `el-ri-1.0.jar`を置く必要があります。そうしないと、エラーメッセージが表示されます – link://google-app-engine/gae-jsf-unable-to-instantiate-expressionfactory-com -sun-el-expressionfactoryimpl/[ExpressionFactory ‘com.sun.el.E​​xpressionFactoryImpl’をインスタンス化できません。

3. JSFマネージドBean

3.1削除プラグインは `JSFGoogleAppEngineServlet.java`を生成しましたが、これは必要ありません。

3.2マネージドBeanを作成します。


File:src/com/mkyong/HelloBean.java

package com.mkyong;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

import java.io.Serializable;

@ManagedBean
@SessionScoped
public class HelloBean implements Serializable {

    private static final long serialVersionUID = 1L;

    private String name;

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

}

3.3新しいWebConfiguration.javaを作成します。

JSF 2はGAEをサポートしていない “javax.naming.InitialContext”を使用しています。

これを解決するには、JSFのソースコードのコピーを取得し、

WebConfiguration.java`をクローンし、


javax.naming.InitialContext`"クラスを使用しているメソッドをコメントし、 "

src/com/sun"/faces/comfig/WebConfiguration.java

"を参照してください。これで、新しく作成された `WebConfiguration.java`クラスは元の

WebConfiguration.java`をオーバーロードします。

  • 注** +完全なリンクを取得します://google-app-engine/gae-jsf-javax-naming-initialcontext-is-a-restricted-class/[WebConfiguration.javaのソースコード]

私はGAEチームがこのjarをホワイトリストに載せることは考えていませんが、JSFのチームがこれを将来のリリースで修正できることを願っています。

4. JSFページ

4.1 `hello.xhtml`ページを作成し、ユーザー入力を受け入れてhelloBeanに渡します。


File:war/hello.xhtml

<?xml version="1.0" encoding="UTF-8"?>
<!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:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html">

<h:head>
    <title>GAE + JSF</title>
</h:head>
<h:body>
    <h1>Google App Engine + JSF 2.0 example - hello.xhtml</h1>
    <h:form>
        <h:inputText value="#{helloBean.name}"></h:inputText>
        <h:commandButton value="Welcome Me" action="welcome"></h:commandButton>
    </h:form>
</h:body>
</html>

4.2 `welcome.xhtml`ページを作成し、hellobeanからのユーザ入力を表示します。


File:war/welcome.xhtml

<?xml version="1.0" encoding="UTF-8"?>
<!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:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html">

<h:head>
    <title>GAE + JSF</title>
</h:head>
<h:body bgcolor="white">
    <h1>Google App Engine + JSF 2.0 example - welcome.xhtml</h1>
    <h2>Welcome #{helloBean.name}</h2>
</h:body>
</html>

4.3プラグインが生成した `index.html`ファイルを削除すると、これは必要ありません。

5. web.xml

web.xmlを更新し、JSF 2を統合します。


File:web.xml

<?xml version="1.0" encoding="utf-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns="http://java.sun.com/xml/ns/javaee"
    xmlns:web="http://java.sun.com/xml/ns/javaee/web-app__2__5.xsd"
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
    http://java.sun.com/xml/ns/javaee/web-app__2__5.xsd"
    version="2.5">

    <display-name>JavaServerFaces</display-name>

    <!-- GAE 1.6.3 cannot handle server side (JSF default) state management. -->
    <context-param>
        <param-name>javax.faces.STATE__SAVING__METHOD</param-name>
        <param-value>client</param-value>
    </context-param>


    <!-- Change to "Production" when you are ready to deploy -->
    <context-param>
        <param-name>javax.faces.PROJECT__STAGE</param-name>
        <param-value>Development</param-value>
    </context-param>

    <!-- Welcome page -->
    <welcome-file-list>
        <welcome-file>faces/hello.xhtml</welcome-file>
    </welcome-file-list>

    <!-- JSF mapping -->
    <servlet>
        <servlet-name>Faces Servlet</servlet-name>
        <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
        <load-on-startup>1</load-on-startup>
    </servlet>

    <!-- Map these files with JSF -->
    <servlet-mapping>
        <servlet-name>Faces Servlet</servlet-name>
        <url-pattern>/faces/** </url-pattern>
    </servlet-mapping>
    <servlet-mapping>
        <servlet-name>Faces Servlet</servlet-name>
        <url-pattern>** .jsf</url-pattern>
    </servlet-mapping>
    <servlet-mapping>
        <servlet-name>Faces Servlet</servlet-name>
        <url-pattern>** .faces</url-pattern>
    </servlet-mapping>
    <servlet-mapping>
        <servlet-name>Faces Servlet</servlet-name>
        <url-pattern>** .xhtml</url-pattern>
    </servlet-mapping>

</web-app>

  • 注** GAEはサーバ側の状態管理をサポートしていないため、この “link://google-app-engine/gae”を避けるためには “javax.faces.STATE

    SAVING

    METHOD”〜 “` `クライアント ‘”を定義する必要があります。 -jsf-view-hello-xhtml-could-be-restored/[View/hello.xhtmlを復元できませんでした]」というエラーメッセージが表示されます。

6. GAEでセッションを有効にする

`appengine-web.xml`を更新し、セッションのサポートを有効にします.JSFはこれを必要とします。 +

+ファイル:appengine-web.xml

<?xml version="1.0" encoding="utf-8"?>
<appengine-web-app xmlns="http://appengine.google.com/ns/1.0">
  <application></application>
  <version>1</version>

    <sessions-enabled>true</sessions-enabled>

</appengine-web-app>

7.ディレクトリ構造

最終的なディレクトリ構造を確認します。


最終ディレクトリ構造、title = "gae-jsf2-final-folder-example5"、width = 571、height = 462

8.ローカルで実行する

プロジェクトを右クリックし、「Webアプリケーション」として実行します。


URL:http://localhost:8888/hello.jsf


ローカル出力、タイトル= "gae-jsf2-local-example6"、width = 638、height = 381

ボタンをクリックします。


ローカル出力、タイトル= "gae-jsf2-local-example6-1"、width = 638、height = 381

10. GAEに展開する

`appengine-web.xml`ファイルを更新し、あなたのApp EngineアプリケーションIDを追加してください。

ファイル:appengine-web.xml

<?xml version="1.0" encoding="utf-8"?>
<appengine-web-app xmlns="http://appengine.google.com/ns/1.0">
  <application>mkyong-jsf2gae</application>
  <version>1</version>

    <sessions-enabled>true</sessions-enabled>

</appengine-web-app>

プロジェクトを選択し、Googleのアイコン「

App Engineへのデプロイ

」をクリックします。


GAEでのデプロイ、title = "gae-jsf2-production-example7"、width = 627、height = 480


URL:http://mkyong-jsf2gae.appspot.com/hello.jsf


gae production output、title = "gae-jsf2-production-example7-1"、width = 638、height = 381

ソースコードをダウンロードする

ファイルサイズが大きいため、すべてのJSFおよびGAE jarは除外されます。

ダウンロード:

JSF2-GoogleAppEngine-Example.zip

(42 KB)