HOME / Docs & Support / NetBeans 6.1 / Web Application Documentation

JSF フレームワーク入門

JavaServer Faces (JSF) フレームワークを使用して NetBeans IDE で Web アプリケーションをプログラミングする基本的な手順を学べるチュートリアルとしては、このドキュメントがシリーズではじめてとなります。チュートリアルのシリーズを通して、ユーザー名と誕生日を取得し、ユーザーの星座、誕生石、星占いなどの情報を返す jAstrologer という Web アプリケーションを作成します。

JavaServer Faces フレームワークは、Web アプリケーションのユーザーインタフェースコンポーネントを構築する標準 Java API です。JSF フレームワークは、Web アプリケーションですばやく簡単に再利用できる既成のコンポーネントが詰まった道具箱と考えられます。ここにあるコンポーネントは、ユーザーデータを取得して格納するテキスト入力フィールドのように単純なものから、ポップアップカレンダー付きの書式付きデータフィールドのように、より複雑なものまであります。コンポーネントは JSP ページに埋め込み、別々の JSP ページ間の移動を処理するためにフレームワークを使用します。

このページの内容は NetBeans IDE 6.0/6.1 が対象です

JSF フレームワークを使用した Web アプリケーションの作成
JSP ページの作成
ページナビゲーションの設定
アプリケーションの構成と実行
バッキング Bean の接続
関連項目

このチュートリアルに従うには、次のソフトウェアとリソースが必要です。

ソフトウェアまたはリソース	必須バージョン
NetBeans IDE	Web および Java EE インストール版 version 6.1 または version 6.0
Java Development Kit (JDK)	version 6 または version 5
GlassFish	V2

注: GlassFish アプリケーションサーバーの V2 Update Release 1 は、NetBeans IDE の Web および Java EE インストール版にオプションで付属しています。

JSF フレームワークを使用した Web アプリケーションの作成

NetBeans IDE では、IDE で開いた既存 Web アプリケーションだけではなく、新規プロジェクト作成時の Web アプリケーションにも JSF サポートを追加できます。GlassFish サーバーは、JSF ライブラリがすでに含まれているため、これらをアプリケーションサーバーにダウンロードまたはインストールする必要はありません。この例では、新しい Web アプリケーションプロジェクトの作成中に JSF サポートを追加します。

「ファイル」>「新規プロジェクト」(Ctrl-Shift-N) を選択し、「新規プロジェクト」ウィザードを開きます。「カテゴリ」の下の「Web」を選択し、「プロジェクト」の下の「Web アプリケーション」を選択します。「次へ」をクリックします。
プロジェクトに「jAstrologer」と名前を付け、コンピュータ上のプロジェクトの場所を指定し、「次へ」をクリックします。
ウィザードの手順 3 の「サーバーと設定」で、サーバーを「GlassFish V2」に設定し、 Java EE バージョンを「Java EE 5」に設定し、「次へ」をクリックします。
「JavaServer Faces」オプションを選択し、「完了」をクリックします。

IDE でアプリケーション全体のプロジェクトテンプレートが作成され、空の JSP ページ (welcomeJSF.jsp) がソースエディタに表示されます。新しいプロジェクトの論理構造が「プロジェクト」ウィンドウ (Ctrl-1) に表示されます。プロジェクトの「ライブラリ」>「GlassFish V2」ノードを展開します。jsf-impl.jar などの JSF ライブラリは、クラスパスに追加されます。「構成ファイル」を展開し、IDE によって faces-config.xml ファイルが作成されていることを確認します。このファイルでは、Web アプリケーションでの JSF コンポーネントの動作を制御します。また、IDE で Faces サーブレットが web.xml 配備記述子に登録されます。Faces サーブレットによって、JSF フレームワークで制御される JSP ページ間のページナビゲーションが処理されます。

「プロジェクト」ウィンドウに表示された新しい jAstrologer プロジェクト

JSP ページの作成

greeting.jsp という名前の新しい JSP ページを作成します。このページでは、ユーザーに挨拶のメッセージを表示してユーザー情報を収集します。次に、success.jsp ページを作成します。このページでは、フォームからデータを受信したことにこたえる応答メッセージを表示します。

挨拶ページの作成

「プロジェクト」ウィンドウでプロジェクトノードを右クリックし、「新規」>「JSP」を選択します。ファイルに「greeting」という名前を付けます。「JSP ファイル (標準構文)」オプションを必ず選択し、「完了」をクリックします。IDE によって新しい JSP ファイルが生成され、ソースエディタで開きます。また、ファイルが「プロジェクト」ウィンドウの「Web ページ」ノードに追加されています。
ソースエディタで、JSF タグライブラリを greeting.jsp に宣言します。この操作は、次のコードをファイルの最初に追加することで実行します。
```
<%@ taglib prefix="f" uri="http://java.sun.com/jsf/core" %>
<%@ taglib prefix="h" uri="http://java.sun.com/jsf/html" %>
```
コード補完用の IDE ビルトインサポートを使用できます。入力時に、Ctrl- スペースキーを押してコンテキストに基づく候補の一覧を表示できます。このようにコード補完は、タブライブラリの URI など、タグ名や属性の追加に役立ちます。
「title」タグと「h2」タグの両方の内容を「Welcome to jAstrologer」に変更します。
次は、JSF フォームをファイルに追加します。「パレット」ウィンドウ (Ctrl-Shift-8) で「JSF」カテゴリを展開します。パレットから項目をドラッグし、直接ソースエディタにドロップします。「JSF フォーム」ボタンをクリックし、項目を h2 タブの下の箇所にドラッグし、マウスボタンを離します。ダイアログの「空のフォーム」が選択されたままにし、「了解」をクリックします。IDE で次のコードが入力されます (ボールドで表示)。
```
<h2>Welcome to jAstrologer</h2>

<f:view>
    <h:form>
    </h:form>
</f:view>
```
inputText コンポーネントを使用してユーザー入力を取得し、commandButton コンポーネントを使用してフォームを送信できます。ソースエディタで、<h:form> タグの内容を次のように (ボールドの変更箇所) 変更します。
```
<f:view>
    <h:form>
        <p>Enter your name: <h:inputText value="name" /></p>
        <p>Enter your birthday: <h:inputText value="birthday" /></p>
        <h:commandButton value="Submit" action="submit" />
    </h:form>
</f:view>
```
コードを整形するには、ソースエディタ内を右クリックし、「整形」(Alt-Shift-F) を選択します。

成功ページの作成

次に、単純に「Congratulations」と表示する JSP ページを作成します。

新しい JSP ファイルを前述のとおりに作成します。ファイルに「success」という名前を付けます。

ファイルの内容を次のように変更します。

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Congratulations</title>
</head>
<body>
    <h2>Congratulations</h2>

    <p>You've successfully registered with jAstrologer.</p>
</body>

これまでのファイルに含まれるのはプレーン HTML のみのため、JSF タグライブラリを宣言する必要はまだありません。

ページナビゲーションの設定

JSF フレームワークのページナビゲーションは、faces-config.xml で制御されます。プロジェクト内の各 JSP ページについて、ナビゲーション規則を faces-config.xml に設定します。このファイルには、1 つまたは複数のナビゲーションケースが含まれます。ここで、簡単に送信アクションを commandButton から success.jsp にマップし、フィールドに何が入力されてもユーザーに成功メッセージが表示されるようにできます。

「プロジェクト」ウィンドウで、「faces-config.xml」をダブルクリックしてこのファイルをソースエディタで開きます。ファイルの上にあるツールバーで、「XML」をクリックしてファイルをプレーン XML で表示します。
ファイル内の任意の場所を右クリックし、「Java ServerFaces」>「ナビゲーション規則を追加」を選択します。「遷移元ビューの規則」フィールドに「/greeting.jsp」と入力し、任意で規則の説明を入力します。

「追加」をクリックします。次のコードが faces-config.xml に入力されます。
```
<navigation-rule>
    <description>
        handle user input
    </description>
    <from-view-id>/greeting.jsp</from-view-id>
</navigation-rule>
```
再度 faces-config.xml 内の任意の場所を右クリックし、「Java ServerFaces」>「ナビゲーションケースを追加」を選択します。表示されるダイアログで、次のとおりに設定します。
- 「遷移元ビュー」: /greeting.jsp
- 「遷移元結果」: submit
- 「遷移先ビュー」: /success.jsp
「追加」をクリックします。IDE によって次のコードが faces-config.xml に入力されます (ボールドの変更箇所)。
```
<navigation-rule>
    <description>
        handle user input
    </description>
    <from-view-id>/greeting.jsp</from-view-id>
    <navigation-case>
        <from-outcome>submit</from-outcome>
        <to-view-id>/success.jsp</to-view-id>
    </navigation-case>
</navigation-rule>
```

アプリケーションの構成と実行

IDE を設定してアプリケーションの実行時に greeting.jsp が表示されるようにし、最後にアプリケーションをテストします。

「プロジェクト」ウィンドウでプロジェクトノードを右クリックし、「プロパティー」を選択します。
「実行」ノードをクリックし、「相対 URL」フィールドに「/faces/greeting.jsp」と入力します。これにより、アプリケーションの IDE でのエントリポイントを指定できます。「了解」をクリックします。
プロジェクトノードを右クリックし、「実行」(F6) を選択します。IDE でプロジェクトが構築され、アプリケーションサーバーが起動してアプリケーションが配備され、次のページがデフォルトの外部ブラウザに表示されます。

「Submit」ボタンをクリックすると、次のように表示されます。

バッキング Bean の接続

前の節で、JSF コンポーネントを使用して簡単な Web アプリケーションを作成しました。しかし、この Web アプリケーションには興味深い仕組みがまだ何もありません。豊富な機能を JSF Web アプリケーションに追加するため、UI コンポーネントをバッキング Bean と関連付けることができます。バッキング Bean は、JSF 管理対象 Bean とも呼ばれる通常の JavaBeans コンポーネントであり、このコンポーネントの Bean プロパティーとメソッドは JSF コンポーネントで使用できます。

この節では、name および birthday の 2 つの Bean プロパティーを公開する UserBean 管理対象 Bean を作成します。

「プロジェクト」ウィンドウでプロジェクトノードを右クリックし、「新規」>「その他」(Ctrl-N) を選択します。「JavaServer Faces」カテゴリの下で、「JSF 管理対象 Bean」テンプレートを選択し、「次へ」をクリックします。
Bean に「UserBean」という名前を付け、これを格納する「astrologer.user」という名前の新規パッケージを作成します。そのほかの設定をデフォルト値のままにし、「完了」をクリックします。

IDE で UserBean.java がソースエディタに表示され、次の Bean 宣言が faces-config.xml に追加されます。
```
<managed-bean>
    <managed-bean-name>UserBean</managed-bean-name>
    <managed-bean-class>astrologer.user.UserBean</managed-bean-class>
    <managed-bean-scope>request</managed-bean-scope>
</managed-bean>
```
次のフィールド宣言 (ボールドで表示) を UserBean.java に追加します。
```
public class UserBean {

    String name;
    String birthday;
```
フィールドの取得メソッドおよび設定メソッドを生成します。この操作は、ファイル内の任意の場所を右クリックし、「リファクタリング」>「フィールドをカプセル化」を選択します。表示されるダイアログで、name および birthday の両方の取得メソッドと設定メソッドのオプションを選択し、「リファクタリング」をクリックします。

IDE でフィールドのアクセスレベルが「private」に変わり、取得メソッドと設定メソッドがファイルに直接作成されます。
greeting.jsp に次の変更 (ボールドで表示) を加えます。
```
<f:view>
    <h:form>
        <p>Enter your name: <h:inputText value="#{UserBean.name}" /></p>
        <p>Enter your birthday: <h:inputText value="#{UserBean.birthday}" /></p>
        <h:commandButton value="Submit" action="submit" />
    </h:form>
</f:view>
```
変更を入力するとき、UserBeans.java およびそのプロパティーに対し、Ctrl- スペースキーを押して使用可能なオプションを選択することで、IDE のコード補完サポートを使用できます。
JSF の taglib 宣言を success.jsp に追加します。これは greeting.jsp からコピー＆ペーストすることができます。
空の JSF フォームを success.jsp に追加します。この操作は、「パレット」ウィンドウ (Ctrl-Shift-8) の「JSF フォーム」ボタンをクリックしてソースエディタの <h2> タグの下の箇所にドラッグして実行します。

次の変更を success.jsp に加えます (ボールドで表示)。

<h2>Congratulations</h2>

    <f:view>
        <h:form>
            <p>You've successfully registered with jAstrologer.</p>
            <p>Your name is <h:outputText value="#{UserBean.name}" /></p>
            <p>Your birthday is <h:outputText value="#{UserBean.birthday}" /></p>
        </h:form>
    </f:view>

「プロジェクト」ウィンドウでプロジェクトノードを右クリックし、「実行」を選択します。アプリケーションが再配備および実行されると、同じ greeting.jsp ページがブラウザに表示されます。値を入力して「Submit」をクリックすると、success.jsp は今度は次のように入力した値が表示されます。

ご意見をお寄せください

JSF フレームワーク入門

JSF フレームワークを使用した Web アプリケーションの作成

JSP ページの作成

挨拶ページの作成

成功ページの作成

ページナビゲーションの設定

アプリケーションの構成と実行

バッキング Bean の接続

関連項目

Training

Support

Documentation

More