EclipseでJSFプロジェクトを作成する
JavaEE7環境を構築したら次にMavenでJSFプロジェクトを構築してみます。
Eclipseを起動し、「ファイル」-「新規」-「その他」で以下ウィンドウを開き、Mavenプロジェクトを選択します。
「次へ」をクリックすると、以下ウィンドウが開きます。
「シンプルなプロジェクトの作成」にチェックを入れて「次へ」をクリックすると、以下ウィンドウが開きます。
グループID、アーティファクトID、バージョン、パッケージングを入力して「完了」をクリックします。
これでプロジェクトが作成されます。
最初はエラーが出ているので修正します。
まずプロジェクトを右クリックし、「プロパティー」を選択し、以下ウィンドウが開きます。
Java1.5を1.8に修正します。
次に「プロジェクト・ファセット」を選択し、以下のようにJavaServer Faces2.2にチェックをいれます。
次に「ランタイム」タブをクリックし、「GlassFish 4」にチェックをいれます。
次に「より詳しい構成が必要…」をクリックします。
このまま「OK」をクリックします。
このまま「OK」をクリックします。
これでエラーが消えるはず、と思ったら以下エラーが残りました。
再度、プロジェクトを右クリックし、「プロパティー」を選択します。
「プロジェクト・ファセット」を見ると、Javaのバージョンが1.5になっていました。
1.8に修正します。
これで、先ほどのエラーが消えました。
index.xhtmlを配置する
Test001プロジェクトのwebapp配下にindex.xhtmlを配置します。
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を選択し、右クリックします。
「追加および除去」を選択します。以下ウィンドウが開いたら、サーバーに追加したいリソースを追加します。
Test001を左側から右側に追加します。
「完了」をクリックします。これでサーバーを起動することによりアプリケーションの動作を確認することができます。
サーバービューより、Glassfishを起動します。
起動後、http://localhost:8080/Test001/faces/index.xhtmlにアクセスします。
先ほどのindex.xhtmlが表示されればOKです。
参考サイト: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します。(2つあります)
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とバッキングビーンをバインドすることができます。
名前と年齢を入力して送信ボタンを押下します。年齢はIntegerにしているのでとりあえずは数値を入力してください。
送信ボタンを押すと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タグはどこかで纏めて記事にします。
では送信ボタンを押下します。
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を再起動して再度送信してみます。
今度は日本語が文字化けせずに表示されました。
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の年齢に数値以外を入力してみてください。
以下のように画面にエラーが出るようになるはずです。

KHI入社して退社。今はCONFRAGEで正社員です。関西で140-170/80~120万から受け付けております^^
得意技はJS(ES6),Java,AWSの大体のリソースです
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^
コメント