LoginSignup
5
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@qi-shimizuinCLINKS株式会社

JSF導入手順

Last updated at Posted at 2024-10-08

JSFとは

JSF(JavaServer Faces)は、オブジェクト指向プログラミング言語JavaのWebアプリケーションを作るためのフレームワークの一つ。

フレームワークにはほかにも種類があり「Spring Framework」「Apache Struts」などがあります。

大規模なシステム向けのJava EE (Java platform Enterprise Edition) の仕様の一つでもあります。

「Faces」と付く通り、ユーザーに文字入力や回答を選択するボックスなどのユーザーインターフェースを作ることに特化しています。

たとえば「閲覧者はどんなことに興味があるのか」「どんな年代の人がこのページを読んでいるのか」などが分かるコードを組むことができます。

JSFの基本的な特徴

JSFの特徴は、Webアプリケーションを作るうえでの基本的なプレゼンテーションコンポーネントが用意されていることです。

  • 文字入力のためのテキストフィールド
  • 送信、キャンセルなどのボタン
  • 複数の選択肢の中から選べるセレクトボックス
    などのコンポーネントを、「JSPカスタムタグライブラリ」を使用して表現できます。

そしてそのコンポーネントへ追加機能を与えることも可能です。

  • イベントの制御
  • ステート情報の保持
  • 入力値のチェック
  • データモデル変形
  • データモデルへのマッピング

JSFはServlet API上に構築されているため、様々なクライアントのデバイスに対して出力できるようにカスタムが可能です。

JSF以外のプレゼンテーションテクノロジと併用できます。

JSFを使用するメリット

JSFを使うことにメリットは、とにかく扱いが簡単なことです。

ツール化していてセットのために新しい言語を覚える必要もなく、普段使い慣れた言語から離れることもありません。

そのためプログラマーへの負担が軽減されます。

また、タグを使うことで簡単にユーザーインターフェースを作成できることも大きな強みです。

長い入力コードを入れる場合、例えばマネージドビーン用のセッター入力などは自動生成することができます。

フレームワークが標準化しているため、ツールをユーザーに提供したい場合に開発ツールを作りやすいという利点もあります。

JSFの機能

ではJSFの機能を詳しく解説していきます。

なお、イベントハンドラ（イベント管理）はJavaScriptが適用されており、しっかり実装されているので安心してください。

UIコンポーネント

UIコンポーネントを使用するためのタグが用意され、JSFを使用したフォーム入力欄を簡単に形成できます。

自分だけのUIコンポーネント作成もでき、作ったコンポーネントは使い捨てることなく再利用可能です。

バリデーション

名前などの記入がされているか、必須項目を選択されているか、文字数は適当かなどフィールドをチェックし判断をします。

チェックしたときに不適切だった場合には赤枠で表示したり、文字を表示したりが可能です。

ステート管理（ステート情報保持）

フォームに入力された値がJSFのコンテキストに保持される機能です。

バリデータでチェックした値が適切ではなかった場合など、再度入力フォームを表示する時に、入力していたデータを表示します。

ユーザーに再入力の手間を省くためには必須といっても良い機能でしょう。

データコンバージョン

入力された値を、指示したJavaの型に変換することが可能です。データモデルとの連携を簡単にすることができます。

ナビゲーション機能

ページ移動の設定を簡単に行える機能。

JavaBeansやデータベースなど表にでないバックエンドシステムデータとUIコンポーネントをマッピングします。

国際化

デフォルトの言語だけでなく、英語やフランス語などをユーザーがボタン一つで変更できるように設定できます。

海外向けにWebページを展開する際、専用ページではなく、既存のページを利用したい時に欲しい機能です。

JSFのライフサイクルについて

JSFを知るうえで、ライフサイクルも押さえておきましょう。ライフサイクルは6つのフェーズから成り立っています。

Restore

ページのコンポーネントである、Javaオブジェクト「UI ViewRoot」でビュー（ここでは自由記入できる欄と選択肢）作り、「FacesContext」に納品。

初めてアクセスした場合は空の状態で表示されます。

JSFで作成したページから要求された場合は、すでに書き込みや選択が行われサーバーに納品されています。

レビューで記入したものが復元できるのも特徴です。

Apply Request

記入欄の各コンポーネントに付随されたデコード（decode）が呼び出され、各コンポーネントにその値が反映します。

Process Validation

記入欄に表記されたデータに正しく回答されているかのバリデータが行われます。

Update Model Value

数値がJSF構成ファイルであるfaces-config.xmlに登録されたJavaBeans「マネージドBean」に反映されます。

Invoke Application

ビジネスロジックが実行され、「送信」ボタンが解放されたり、リンクが増えたりといったアクションイベントが処理されます。

Renderer Response

エンコードメゾットが呼び出され、レスポンスが生成されるものです。

終了するとコンポーネントの状態がクライアント、またはサーバーに保存されます。

前準備

  • JDK (Java Development Kit) のインストール
  • Eclipse のインストール
  • Tomcat のインストール
  • Eclipse の Web, XML, Java EE 開発に関するプラグインのインストール
  • Eclipse 内部の Tomcat 新規サーバの追加

Eclipse での動的 Web プロジェクトの新規作成

下記の手順で，動的 Web プロジェクトを新規に作成する．

1. プロジェクト・エクスプローラを開く

「ウインドウ (Window)」→「ビューの表示 (Show View)」→「プロジェクト・エクスプローラ (Project Explorer)」 と操作する．

2. プロジェクトの新規作成の開始

「ファイル」→「新規 (New)」→「プロジェクト (Project)」
または，プロジェクト・エクスプローラ内で，右クリック→「新規 (New)」→「プロジェクト (Project)」

3. 「Web」の展開

新規プロジェクトのウインドウが開くので， 「Web」を展開する．

180.png

4. 「動的 Webプロジェクト (Dynamic Web Project)」の選択

展開した「Web」の下にある 「動的 Webプロジェクト (Dynamic Web Project)」を選び， 「次へ」をクリック．

34.png

5. プロジェクト名の設定など

設定用のウインドウが開くので，下記の設定を行う． 設定が終わったら，「次へ」をクリック．

  • 「プロジェクト名 (Project name)」は「MYFACES」と付けることにする

  • 「プロジェクト・コンテンツ (Project contents)」は「デフォルトの使用 (Use default)」にチェックを入れたままで良い

  • 「ターゲット・ランタイム (Target Server)」は「Apache Tomcat v6.0」に変更しておく

63.png

6. 次はデフォルトのままでよい

「次へ」をクリック．

184.png

7. 次の「Web モジュール」は，デフォルトのままでよい

「完了 (Finish)」をクリック．

64.png

8. もし「関連付けられたパースペクティブを開きますか？」 と聞いてきたら「はい」をクリック

185.png

9. 作成されたプロジェクトの確認

プロジェクト・エクスプローラで，いま作成した動的 Web プロジェクト MYFACES が表示されていることを確認する．

65.png

Apache MyFaces バージョン 2.0 に関するファイル群 jsf-blank のインポート

Apache MyFaces の動作確認のため， 公開されている jsf-blank プログラム (jsf-blank.zip) を実行してみる．

1. JSF チュートリアルの Web ページを開く

ここをクリック

59.png

2. 「JSF 2.0 Tutorial」をクリック

188.png

3. 「Installation, Setup, and Getting Started」をクリック

189.png

4. jsf-blank.zip のダウンロード

今開いている Web ページの「jsf-blank.zip」をダウンロード．

60.png

5. 解凍

展開（解凍）してできたファイルのうち，WEB-INF/web.xml, WEB-INF/struts-config.xml, WEB-INF/lib, css/styles.css, index.jsp, welcome.jsp を使う (要するに全部を使う)．

106.png

6. Eclipse で，インポート開始

プロジェクト・エクスプローラで， プロジェクト名 MYFACES を右クリックし，「インポート (import)」を選ぶ．

149.png

7. インポート・ソースの選択

「一般」→「ファイル・システム」と操作した後， 「次へ」をクリック．

107.png

8. ソース・ディレクトリの指定

  1. ソース・ディレクトリとして，先ほど解凍した jsf-blank を指定

  2. すると，ソース・ディレクトリの下に，ファイルの一覧が表示される． ここで，インポートすべきファイルを選ぶ． 「すべて選択」をクリック

  3. 以上の操作の後，「完了」をクリック

108.png

9. 「上書きしますか？」に対しては「すべてはい」と答える

164.png

10. インポートの結果，ファイルが増える

109.png

Java パッケージ作成

Eclipse のプロジェクト・エクスプローラを使って， Java パッケージを作成します． Java パッケージ名には hoge.hoge.com のようなドメイン名を付ける習慣があることに注意してください． このページでは，作成するJava パッケージ名は，hoge.hoge.com と書く． （Java パッケージ名を変えるときは，読み替えてください）．

1. （もし，プロジェクト・エクスプローラが開いていなければ）プロジェクト・エクスプローラを開く

「ウインドウ」→「ビューの表示」→「プロジェクト・エクスプローラ」 と操作する．

Java パッケージの作成，クラスの作成などの作業は，プロジェクト・エクスプローラで行う．

2. Java パッケージを新規作成すべきプロジェクトの選択

プロジェクト・エクスプローラに，プロジェクト一覧が表示されているはずです． Java パッケージを新規作成したいプロジェクト名 MYFACES を右クリックして， 「新規」→「パッケージ」と操作する．

169.png

3. Java パッケージ名の設定

「Java パッケージ (Java package)」の名前として，Java パッケージ名 hoge.hoge.comを記入する．

その後，「終了」をクリック．

170.png

4. Java パッケージの確認

プロジェクト・エクスプローラにおいて， Java パッケージ hoge.hoge.com が増えていることを確認する．

  • プロジェクト・エクスプローラで， Java パッケージ名 hoge.hoge.comが表示されていないときは， プロジェクト MYFACES の左横の「+」をクリックして展開した後， 下の 「Java リソース; src」の左横の「+」をクリックして展開して下さい．

171.png

設定ファイル web.xml と faces-config.xml

下記設定ファイルが存在していることを確認して下さい．

WEB-INF/lib/web.xml
WebContent\WEB-INF\lib\faces-config.xml

JSF のタグを使う JSP プログラムの実行

サンプルプログラムのファイル名は index.jsp とします （JSP プログラムなので，拡張子を 「.jsp」にしている）．

1. WebContent/WEB-INF の展開

プロジェクト・エクスプローラで， プロジェクト名 MYFACES の下の「WebContent」を展開し，その下の「WEB-INF」を展開する．

2. index.jsp の編集の開始

プロジェクト・エクスプローラで，index.jspをダブルクリック すると，エディタが開きます．

193.png

3. index.jsp の編集

「JavaServer Faces タグ」を使った index.jsp の例

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>
4. index.jsp の実行

  1. プロジェクト・エクスプローラーで，index.jsp を右クリック

  2. 「実行 (Run As)」→「サーバーで実行 (Run on Server)」と操作

  3. ウインドウが開くので， 「ローカルホストの Tomcat v6.0 サーバ」が選択されていることを確認の後，「終了」をクリック

175.png

5. Tomcat のサーバが起動（または，再起動）するので確認する

コンソール・ビューの表示を確認する．

6. 実行結果の確認

Eclipse の 組み込み Web ブラウザ (Internal Web ブラウザ)が開き，そこに実行結果が出る． しばらく待つ．「welcome to JSF」という画面が現れたら，うまく動作している．

126.png

5
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
5
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?