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

Web アプリケーションでのページの移動

このチュートリアルでは、NetBeans 6.0 と 6.1 でのページナビゲーションの設定方法について説明します。最初に、2 つのページ間の単純なナビゲーションを使用する Web アプリケーションを IDE で作成します。1 つめのページのボタンで、2 つめのページに移動します。次に、アプリケーションを修正して、実行時にドロップダウンリストコンポーネントから返される値に基づいて表示するページをアプリケーションが特定するようにします。また、より高度な動的ページナビゲーションのほかの方法についても説明します。この方法では、ドロップダウンリストでページを選択するとすぐにページナビゲーションが実行されます。

予想される所要時間: 20 分

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

最初のページの作成
2 ページ間の移動
2 ページ目へのコンポーネントの追加
動的ナビゲーション用ドロップダウンリストの追加
3 ページ目の追加
動的ページナビゲーションの実装
アプリケーションの配備
高度な動的ページナビゲーションの実装

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

ソフトウェアまたはリソース	必須バージョン
NetBeans IDE	Web および Java の version 6.1 または 6.0
Java Development Kit (JDK)	version 6 または version 5
JavaServer Faces コンポーネント / Java EE プラットフォーム	1.2 と Java EE 5* または 1.1 と J2EE 1.4
GlassFish アプリケーションサーバー	V2
Travel データベース	任意

* NetBeans IDE の Java EE 5 機能を活用するためには、GlassFish アプリケーションサーバー V2 UR2 などの、Java EE 5 仕様に完全に準拠したアプリケーションサーバーを使用してください。別のサーバーを使用している場合は、「リリースノート」と「FAQ」で既知の問題やその回避策を確認してください。サポートされているサーバーと Java EE プラットフォームについては、「リリースノート」を参照してください。

NetBeans IDE 6.1 を使用している方へ

NetBeans 6.1 でプロジェクトを作成すると新しいオプションが含まれますが、これらのオプションはデフォルトのままでかまいません。たとえば、「ライブラリの格納用に専用フォルダを使用」チェックボックスは選択しないままにします。
NetBeans IDE 6.1 には、要求時バインド機能があります。コンポーネントに Java コーディングが必要な場合は、Visual Web JSF アプリケーション内のコンポーネントにバインド属性を手動で追加する必要があります。バインド属性を追加するには、各コンポーネントを右クリックし、「バインド属性を追加」を選択します。詳細は、「On-demand Binding Attribute Wiki」を参照してください。

最初のページの作成

このチュートリアルの最初の部分では、2 つのページを持つ Web アプリケーションを作成し、ボタンを使用してその 2 つのページ間を移動します。そのあと、ドロップダウンリストコンポーネントを追加して、ユーザーが実行時に移動先ページを選択できるようにします。

最初に、「静的テキスト」コンポーネントと「ボタン」コンポーネントを含むページを作成します。

GlassFish V2 Application Server と Visual Web JavaServer Faces フレームワークを使用する、新しいプロジェクトを「NavigationExample」という名前で作成します。

新しいプロジェクトが作成され、ビジュアルデザイナに初期ページが表示されます。次の図に、このあとの手順で作成するページを示します。
「パレット」の「基本」セクションから「静的テキスト」コンポーネントをドラッグし、ページにドロップします。コンポーネントのデフォルトテキストの上に直接入力して、コンポーネントの「text」プロパティーを「ページ 1」に変更します。
「パレット」から「ボタン」コンポーネントをドラッグし、ページにドロップして、「text」プロパティーを「移動」に変更します。
注: IE 7 では、JSF 1.2 の「ボタン」コンポーネントの幅に影響する既知の問題があります。問題を回避するには、「ボタン」コンポーネントをレイアウトコンポーネント (グリッドパネル、グループパネル、またはレイアウトパネル) 内に配置します。レイアウトコンポーネントのサイズを変更すると、「ボタン」コンポーネントのサイズが自動的に変更されます。

2 ページ間の移動

次に、アプリケーションにページをもう 1 つ追加し、リンク (ページコネクタ) を作成して 1 ページ目と 2 ページ目の間のナビゲーションを指定します。

注: NetBeans IDE 6.1 には要求時バインド機能があります。コンポーネントに Java コーディングが必要な場合は、Visual Web JSF アプリケーション内のコンポーネントにバインド属性を手動で追加する必要があります。バインド属性を追加するには、各コンポーネントを右クリックし、「バインド属性を追加」を選択します。詳細は、「On-demand Binding Attribute Wiki」を参照してください。

ビジュアルデザイナ内の編集領域で空白の部分を右クリックし、ポップアップメニューから「ページナビゲーション」を選択します。
ページフローエディタに Page1.jsp のアイコンが表示されます。このアイコンは、前の節で作成したページを表します。このアイコンには 4 つの機能があります。
1. アイコンがどのページを表しているかは、バッジによって示されます。緑色の矢印は、そのページがプロジェクトのメインページであることを示します。
2. アイコンが表すファイルの名前は、製品中のページを区別しています。
3. + 印でアイコンを展開すると、そのページのコンポーネントが表示されます。
4. ページ間のナビゲート行を描画するために、コネクタポートが使用されます。
次に示すように、新しい JSP ページを作成します。
1. 編集領域で右クリックし、「新規ファイル」を選択します。
2. 「新規ファイル」ウィザードで「カテゴリ」の下の「JavaServer Faces」を選択し、「ファイルの種類」の下で「Visual Web JSF ページ」を選択して、「次へ」をクリックします。
3. デフォルトのファイル名「Page2」のまま、「完了」をクリックします。
  ビジュアルデザイナで Page2.jsp が開きます。「Faces-config.xml」タブをクリックしてページフローエディタを再び開きます。図 2 に、両方のページを含むページフローエディタを示します。
Page1.jsp アイコンの + 印をクリックすると、拡大して button1 アイコンが見えます。
button1 アイコンをクリックし、Page2.jsp のアイコンまで線をドラッグします。最初のページと 2 ページ目をつなぐコネクタが表示されます。新規に作成するコネクタの名前はデフォルトで「case1」になります。
コネクタの名前をダブルクリックし、名前を「case1」から「Page 2」に変更します。

ページフローエディタで 2 つのページがコネクタで接続されたところを次の図に示します。

編集用ツールバーの「XML」をクリックして、最後の 2 つの手順で生成されたコードを確認します。次に太字で示されたナビゲーション規則が、管理対象 Bean コードの下に追加され、省略符号 (...) で表示されます。

コード例 1:生成されたコード

<?xml version="1.0" encoding="UTF-8"?>
<faces-config version="1.2" xmlns="http://java.sun.com/xml/ns/javaee" 
   xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
   xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
   http://java.sun.com/xml/ns/javaee/web-facesconfig_1_2.xsd">
...
    <navigation-rule>
        <from-view-id>/Page1.jsp</from-view-id>
        <navigation-case>
            <from-outcome>Page 2</from-outcome>
            <to-view-id>/Page2.jsp</to-view-id>
        </navigation-case>
    </navigation-rule>
</faces-config>

faces-config タグ内に追加されたコードは、この Web アプリケーションの単一のナビゲーション規則を指定しています。ナビゲーション規則では、1 つの移動元ページと、1 つまたは複数の移動先ページを指定します。

2 ページ目へのコンポーネントの追加

2 ページ目と最初のページを視覚的に区別するために、2 ページ目にラベルを追加し、それからアプリケーションを実行します。

編集用ツールバーの「ページフロー」をクリックします。
Page2.jsp のアイコンをダブルクリックします。
ビジュアルデザイナにページが開きます。
次の図に示すように、ページに「静的テキスト」コンポーネントを配置し、「text」プロパティーを「ページ 2」に変更します。
F6 キーを押してアプリケーションを配備します。
Web アプリケーションが配備されると、次の図に示すように、ページ 1 がブラウザに開きます。
「移動」ボタンをクリックします。これによって、最初のページから 2 ページ目に移動します。

この節では、2 つのページを作成し、一方のページから別のページへの単純なナビゲーションを設定しました。次の節では、「ドロップダウンリスト」コンポーネントからの選択に基づくナビゲーションを設定します。

動的ナビゲーション用ドロップダウンリストの追加

次は、動的ページナビゲーションについて説明します。アプリケーションの最初のページに「ドロップダウンリスト」コンポーネントを追加します。ドロップダウンリストにより、ユーザーが実行時に移動先ページを選択できるようになります。そのあと、アプリケーションに 3 ページ目を追加して、ドロップダウンリストに移動先の 2 つの選択肢が含まれるようにします。

次の図に、このあとの手順で Page1 に加える修正を示します。

ビジュアルデザイナで Page1.jsp を開きます。
「静的テキスト」コンポーネントの下に「ドロップダウンリスト」コンポーネントを配置します。
ドロップダウンリストを右クリックし、「デフォルトオプションを設定」を選択します。
「オプションカスタマイザ - dropDown1」ダイアログで、各デフォルト項目の値を次の図に示す値に変更します。値を編集するには、表の各セルをクリックします。各フィールドを編集したあと、Enter キーを押すと変更が確定されます。
「了解」をクリックして、すべての変更内容を保存します。

3 ページ目の追加

次に、最初のページからの移動先として使用する 3 ページ目を作成します。

「プロジェクト」ウィンドウで、「NavigationExample」>「Web ページ」ノードを右クリックし、「新規」>「Visual Web JSF ページ」を選択します。「新規 Visual Web JSF ページウィザード」で「完了」をクリックします。Page3.jsp が作成され、表示されます。
「パレット」から「静的テキスト」コンポーネントをドラッグし、ページにドロップします。コンポーネントのテキストを「ページ 3」に設定します。

動的ページナビゲーションの実装

この節では、動的ページナビゲーションを有効にします。動的なページナビゲーションでは、実行時にユーザーが最初のページで「移動」ボタンをクリックしたときに、アプリケーションによって表示するページが決定されます。

ページフローエディタを開く.
Page1.jsp のアイコンをクリックして内容を表示し、ボタンのコネクタポートから Page3.jsp のアイコンにコネクタの線をドラッグします。
コネクタの名前を「case1」から「Page 3」に変更します。
Page1.jsp のアイコンをダブルクリックして、ページをビジュアルデザイナで開きます。
「移動」ボタンコンポーネントをダブルクリックして、Java エディタでアクションハンドラメソッドのソースコードを開きます。

メソッド内の return 文を次のコード (ボールド部分) に置き換えます。

注: NetBeans IDE 6.1 には要求時バインド機能があります。NetBeans IDE 6.1 を使用している場合は、ページ 1 のドロップダウンリストにバインド属性を手動で追加する必要があります。バインド属性を追加するには、コンポーネントを右クリックし、「バインド属性を追加」を選択します。詳細は、「On-demand Binding Attribute Wiki」を参照してください。

コード例 2:return 文

public String button1_action() {
     return (String) dropDown1.getValue();
                     }

アプリケーションの配備

ページ間のナビゲーションをテストします。

F6 キーを押してアプリケーションを配備します。
最初のページで、ドロップダウンリストから「ページ 2」を選択し、「移動」をクリックして 2 ページ目に移動します。
ページ 2 から最初のページに戻るには、ブラウザの「戻る」ボタンをクリックします。
次に、ドロップダウンリストから「ページ 3」を選択し、「移動」をクリックして 3 ページ目に移動します。

高度な動的ページナビゲーションの実装

前の作業では、動的なページナビゲーションを簡単な方法で処理しました。ユーザーは、移動先のページをドロップダウンリストで選択し、「移動」ボタンをクリックします。ドロップダウンリストの値が変更されたらすぐにページを移動するには、次の手順に従って、前の節で作成したプロジェクトを変更します。

「Page1」タブをクリックし、編集用ツールバーの「デザイン」をクリックして、ビジュアルデザイナを開きます。
「移動」ボタンを右クリックして「削除」を選択します。
「ドロップダウンリスト」コンポーネントをダブルクリックして、Java エディタに Page1 クラスのコードを表示します。

dropDown1_processValueChange() ハンドラメソッドに次のコード (太字部分) を追加します。最初の 2 行のコードでは、アプリケーションへのオブジェクト参照を取得します。アプリケーションオブジェクトから、ナビゲーションハンドラのインスタンスを取得できます。このオブジェクトに対して handleNavigation() メソッドを、「ドロップダウンリスト」コンポーネントから取得した値 (移動先のページ) を指定して呼び出します。

コード例 3:ナビゲーションハンドラメソッド

public void dropDown1_processValueChange(ValueChangeEvent event) {
    Application application = getApplication();
    NavigationHandler navigator = application.getNavigationHandler();
    FacesContext facesContext = getFacesContext();
    navigator.handleNavigation(facesContext,
        null,(String) dropDown1.getValue());

                     }

赤い波線が表示され、Application、NavigationHandler、および FacesContext の各クラスが見つからないことが示されます。これらのクラスは、次の手順でインポートします。

ソースエディタ内の任意の場所を右クリックし、「インポートを修正」を選択して、ソースファイルの先頭付近に次のインポート文を自動的に追加します。

コード例 4:ナビゲーションハンドラメソッドのインポート文

import javax.faces.application.Application;
import javax.faces.application.NavigationHandler;
import javax.faces.context.FacesContext;

編集用ツールバーの「デザイン」をクリックして、ビジュアルデザイナで Page1 を表示します。
「ドロップダウンリスト」コンポーネントを右クリックし、「変更時に自動送信」を選択して、選択された項目が選択時に自動的に送信されるようにします。
アプリケーションを配備し、実行します。
ドロップダウンリストで「ページ 2」を選択し、最初のページから 2 ページ目に移動します。「戻る」ボタンをクリックして 1 ページ目に戻ります。
ドロップダウンリストで「ページ 3」を選択し、最初のページから 3 ページ目に移動します。

その他の可能な操作:多数のページの操作

このチュートリアルで説明したシナリオは、ページ数が比較的少ないときには有効ですが、現実の多くのアプリケーションでは、多数のページ間でのナビゲーションが要求されます。このようなナビゲーションを確立するには、次の手順に従います。

ページナビゲーションエディタの編集用ツールバーにある「XML」ボタンをクリックします。

次に示す XML の、最初のエントリのようなナビゲーション規則を追加します。<from-view-id> を /* に、<from-outcome> を任意の識別文字列に、<to-view-id> を接続先ページにそれぞれ設定します。

コード例 5: 多数のページを含むアプリケーション用のページナビゲーション XML

<?xml version="1.0" encoding="UTF-8"?>
<faces-config version="1.2" xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-facesconfig_1_2.xsd">
    <navigation-rule>
        <from-view-id>/*</from-view-id>
        <navigation-case>
            <from-outcome>login</from-outcome>
            <to-view-id>/Page3.jsp</to-view-id>
        </navigation-case>
    </navigation-rule>
    <navigation-rule>
        <from-view-id>/Page1.jsp</from-view-id>
        <navigation-case>
            <from-outcome>case1</from-outcome>
            <to-view-id>/Page2.jsp</to-view-id>
        </navigation-case>
    </navigation-rule>
</faces-config>

ページナビゲーションエディタに戻るとエラーが表示されますが、これらのエラーは無視してもかまいません。

ページに送信するアクションコンポーネントのすべてのアクション処理メソッドでは、次に示すように、from-outcome が返されるようにします (この場合は「login」)。
```
public String button1_action() {
        return "login";
    }
```