◆ この Web ページで行うことの概略
Eclipse を使って,JavaServer Faces (JSF) タグや tomahawk 拡張タグ を使った JSP プログラムを作り,動作させる手順を説明する. https://www.tutorialspoint.com/jsf/index.htmに記載のjsf-blank プログラムを書き換えて使うことにする.
Tomcat 上で動く Java サーブレット・プログラムを,Eclipse で扱うので,Eclipse の動的 Web プロジェクトが必要.
作成した動的 Web プロジェクトに, https://www.tutorialspoint.com/jsf/index.htm で公開されている Apache MyFaces 関係のファイルをインポートします. (インポート用のファイルは,数種類公開されているのですが,プログラム見本が同封された jsf-blank を選びます.
※(補足)Eclipse で Spring 2.0 を設定している場合には,JSP (JSF のベースとなる部分)は Spring 2.0 内のものが使われます.
Apache MyFaces が持つ JSF の機能や,拡張機能を 使ったプログラム作成については,別の Web ページになる. JSF タグ の Web ページなどで,プログラム例を交えて説明している.
【補足説明】
下記の 2つのサーバは別物です. 2つを同時に動かすことはできません(ポートを奪い合うことができないので).一方を動かすときは,もう一方を止めることになる.
Eclipse では,Eclipse 内部の tomcat サーバが動き, Java サーブレットの動作テストなどに使う.
Eclipse とは無関係の tomcat サーバ(C:\tomcat55\bin\tomcat5w.exe 等で起動する Tomcat サーバのこと).当然, 公開 tomcat サーバが管理するディレクトリも Eclipse とは独立している.
なお,「Eclipse 内部の tomcat サーバ」を使えるようには, Eclipse で「新規サーバの定義」を行う必要がある.これは,1回行うだけで十分です.
以下,Eclipse を使う. 動的 Web プロジェクトの作成,Apache MyFaces のインポートとテストプログラムの実行という一連の操作を,図解で説明する.
Eclipse のプロジェクト等を作る. このページでは,Eclipse のプロジェクト名は次のように記述します. (すでに同じ名前のプロジェクトがある,といったときは,プロジェクト名を変えてください).
下記の手順で,動的 Web プロジェクトを新規に作成する.
「ウインドウ (Window)」→「ビューの表示 (Show View)」→「プロジェクト・エクスプローラ (Project Explorer)」 と操作する.
「ファイル」→「新規 (New)」→「プロジェクト (Project)」
または,プロジェクト・エクスプローラ内で,右クリック→「新規 (New)」→「プロジェクト (Project)」
新規プロジェクトのウインドウが開くので, 「Web」を展開する.
展開した「Web」の下にある 「動的 Webプロジェクト (Dynamic Web Project)」を選び, 「次へ」をクリック.
■ Windows での設定例
設定用のウインドウが開くので,下記の設定を行う. 設定が終わったら,「次へ」をクリック.
プロジェクト名は,好きな名前でよいが,スペースや全角文字は避けること. ここでは,プロジェクト名を,「MYFACES」と付けることにする.
「デフォルトの使用 (Use default)」にチェックを入れたままで良い.
他のもの(例えば「なし」)になっていたら,「Apache Tomcat v6.0」に変更しておく
■ Ubuntu での設定例
※ 変更のとき,「なし (None)」だけしか無くて,「Apache Tomcat v6.0」が候補として表示されない場合は,
■ Ubuntu での設定例
「次へ」をクリック.
「完了 (Finish)」をクリック.
プロジェクト・エクスプローラで,いま作成した動的 Web プロジェクト MYFACES が表示されていることを確認する.
Apache MyFaces の動作確認のため, 公開されている jsf-blank プログラム (jsf-blank.zip) を実行してみる.
https://www.tutorialspoint.com/jsf/index.htm をクリック.
今開いている Web ページの「jsf-blank.zip」をダウンロード.
展開(解凍)してできたファイルのうち,WEB-INF/web.xml, WEB-INF/struts-config.xml, WEB-INF/lib, css/styles.css, index.jsp, welcome.jsp を使う (要するに全部を使う).
プロジェクト・エクスプローラで, プロジェクト名 MYFACES を右クリックし,「インポート (import)」を選ぶ.
「一般」→「ファイル・システム」と操作した後, 「次へ」をクリック.
zip 形式ファイル tomahawk-1.1.11-bin.zip をクリック.
URL をクリック.
どこに解凍しても良いが,後で分かりやすい ディレクトリに展開(解凍)すること.
上記と同様の手順で,MyFaces Tomahawk を,プロジェクトの WebContent\WEB-INF\lib にインポートします.
プロジェクト・エクスプローラで,WebContent\Web-INF\lib を右クリックし,「インポート」を選ぶ
「一般」→「ファイルシステム」と操作した後, 「次へ」をクリック.
「lib」を展開
Eclipse のプロジェクト・エクスプローラを使って, Java パッケージを作成します. Java パッケージ名には hoge.hoge.com のようなドメイン名を付ける習慣があることに注意してください. このページでは,作成するJava パッケージ名は,hoge.hoge.com と書く. (Java パッケージ名を変えるときは,読み替えてください).
「ウインドウ」→「ビューの表示」→「プロジェクト・エクスプローラ」 と操作する.
Java パッケージの作成,クラスの作成などの作業は,プロジェクト・エクスプローラで行う.
プロジェクト・エクスプローラに,プロジェクト一覧が表示されているはずです. Java パッケージを新規作成したいプロジェクト名 MYFACES を右クリックして, 「新規」→「パッケージ」と操作する.
「Java パッケージ (Java package)」の名前として,Java パッケージ名 hoge.hoge.comを記入する.
その後,「終了」をクリック.
プロジェクト・エクスプローラにおいて, Java パッケージ hoge.hoge.com が増えていることを確認する.
※ プロジェクト・エクスプローラで, Java パッケージ名 hoge.hoge.comが表示されていないときは, プロジェクト MYFACES の左横の「+」をクリックして展開した後, 下の 「Java リソース; src」の左横の「+」をクリックして展開して下さい.
JSF のタグを使うときは,JSP ファイルに,次の2行を追加することになっています.
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%> <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
Tomahawk のタグを使うときは,JSP ファイルに,さらに次の2行を追加することになっています.
<%@ taglib uri="https://myfaces.apache.org/tomahawk" prefix="t"%>
詳しくは,https://svn.apache.org/repos/asf/myfaces/site/publish/tomahawk/extensionsFilter.html を参照のこと.
JSF のタグを使う JSP プログラムのサンプルプログラムです. これは,下の図のようにラジオボタンのプログラムです. ラジオボタンのデータ(これは,一種のフォームデータといえます) を Java オブジェクトにマッピングすることが簡単にできる, というのが JSF の良さです. やってみましょう.
図. JSF を使ったラジオボタンの例 (プログラムは下記)
サンプルプログラムのファイル名は index.jsp とします (JSP プログラムなので,拡張子を 「.jsp」にしている).
プロジェクト・エクスプローラで, プロジェクト名 MYFACES の下の「WebContent」を展開し,その下の「WEB-INF」を展開する.
プロジェクト・エクスプローラで,index.jspをダブルクリック すると,エディタが開きます.
【要点】
<f:view>, <h:form id="form1">, <h:selectOneRadio>, <f:selectItem/> などのタグ を使う.
※ タグについては,「JavaServer Faces タグ」の Web ページ で,実例を使って説明している.
◆ index.jsp の例
下記のプログラムを、カット&ペースト.
<%@ page contentType="text/html; charset=utf-8" %> <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %> <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %> <%@ taglib uri="https://myfaces.apache.org/tomahawk" prefix="t" %> <html> <head> <title>簡単なサンプル</title> </head> <body> <f:view> <h:form id="form1"> <h:selectOneRadio> <f:selectItem itemValue="男性" itemLabel="男性" /> <f:selectItem itemValue="女性" itemLabel="女性" /> </h:selectOneRadio> </h:form> </f:view> </body> </html>
ウインドウが開くので, 「ローカルホストの Tomcat v6.0 サーバ」が選択されていることを確認の後,「終了」をクリック.
※ 下記のエラーが出て,Eclipse 内部の Tomcat サーバが起動しない場合には,公開 Tomcat サーバが稼働中である可能性がある。もしそうなら公開 Tomcat サーバを停止する
「公開 Tomcat サーバを稼働させている」ときは, Eclipse 内部の Tomcat サーバが起動しない(ポートを奪い合うので)ので, 公開 Tomcat サーバを停止させて下さい
コンソール・ビューの表示を確認する.
Eclipse の 組み込み Web ブラウザ (Internal Web ブラウザ)が開き,そこに実行結果が出る. しばらく待つ.「welcome to JSF」という画面が現れたら,うまく動作している.
tomahawk 拡張タグを使う JSP プログラムのサンプルプログラムです. これは,下の図のようにカレンダーのプログラムです. Eclipse での操作手順は,普通の JSF の場合と同じです.
図. JSF を使ったラジオボタンとカレンダーの例。カレンダーは tomahawk 拡張タグ
プロジェクト・エクスプローラで, プロジェクト名 MYFACES の下の「WebContent」を展開し,その下の「WEB-INF」を展開する.
プロジェクト・エクスプローラで,index.jspをダブルクリック すると,エディタが開きます.
【要点】
Tomahawk 関係の設定については、https://svn.apache.org/repos/asf/myfaces/site/publish/tomahawk/extensionsFilter.html を参照のこと。
◆ index.jsp の例
下記のプログラムを、カット&ペースト.
<%@ page contentType="text/html; charset=utf-8" %> <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %> <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %> <%@ taglib uri="https://myfaces.apache.org/tomahawk" prefix="t" %> <html> <head> <title>tomahawk を使う簡単なサンプル</title> </head> <body> <f:view> <h:form id="form1"> <h:selectOneRadio> <f:selectItem itemValue="男性" itemLabel="男性" /> <f:selectItem itemValue="女性" itemLabel="女性" /> </h:selectOneRadio> <h:panelGrid border="1"> <h:panelGroup> <h:outputText value="今月のカレンダー" /> <t:inputCalendar monthYearRowClass="yearMonthHeader" weekRowClass="weekHeader" renderAsPopup="false" popupDateFormat="yyyy/MM/dd" popupTodayString="本日は" popupWeekString="週目" /> </h:panelGroup> </h:panelGrid> </h:form> </f:view> </body> </html>
ウインドウが開くので, 「ローカルホストの Tomcat v6.0 サーバ」が選択されていることを確認の後,「終了」をクリック.
コンソール・ビューの表示を確認する.
Eclipse でエクスポートして、C:\tomcat55\webapps 下に war ファイルを置くわけですが、 アクセスするための URL は、 http://localhost/<war ファイルの名前>/index.jsf のように、拡張子が jsf になるようです(調査中)。
WEB-INF/lib/web.xml を,以下の手順で書き換える.
faces-config.xml は、ビーン名とクラス名のマッピングを取るなどのためのファイル。
ファイルの中身は次のようになっているので,確認しておく。見て分かる通り、実質的な定義は空になっている。
これは、この Web ページでのプログラムが、表示しかせず、ページ遷移や、 Java プログラムとの連携がないため。