>> Visual Web Pack のほかのドキュメント

ページナビゲーション

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

このチュートリアルでは、次のテクノロジとリソースを使用します。

JavaServer Faces コンポーネント / Java EE プラットフォーム	Java EE 5* の場合、1.2 J2EE 1.4 の場合、1.1
Travel データベース	任意
BluePrints AJAX コンポーネントライブラリ	任意

* このチュートリアルの公開時点で Java EE 5 をサポートしていたのは Sun Java System Application Server だけです。

このチュートリアルは、Sun Java System Application Server PE 9.0 Update Release 1 と Tomcat 5.5.17 を使用することを想定しています。別のサーバーを使用している場合は、「リリースノート」と「FAQ」(または「日本語 FAQ」) で既知の問題やその回避策を確認してください。サポートされているサーバーと Java EE プラットフォームについては、「リリースノート」を参照してください。

最初のページの作成

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

1. 新しい Visual Web アプリケーションプロジェクトを「NavigationExample」という名前で作成します。

   新しいプロジェクトが作成され、ビジュアルデザイナーに初期ページが表示されます。次の図に、このあとの手順で作成するページを示します。

   図 1: Page1 のデザイン

2. 「パレット」の「基本」セクションから「静的テキスト」コンポーネントをドラッグし、ページにドロップします。コンポーネントのデフォルトテキストの上に直接入力して、コンポーネントの「text」プロパティーを「ページ 1」に変更します。
3. 「パレット」から「ボタン」コンポーネントをドラッグし、ページにドロップして、「text」プロパティーを「移動」に変更します。

2 ページ間の移動

1. ビジュアルデザイナー内の編集領域で空白の部分を右クリックし、ポップアップメニューから「ページナビゲーション」を選択します。

   ページナビゲーションエディタに Page1.jsp のアイコンが表示されます。このアイコンは、前の節で作成したページを表します。ページナビゲーションエディタは、「プロジェクト」ウィンドウの「ページナビゲーション」ノードをダブルクリックして開くこともできます。
2. 編集領域で右クリックし、「ページを追加」を選択します。

3. 「ページ名を指定」ダイアログで「了解」をクリックしてデフォルトの名前「Page2」を使用します。

   図 2 に示すように、Page2.jsp のアイコンがナビゲーションエディタに表示され、「プロジェクト」ウィンドウの「NavigationExample」>「Web ページ」ノードの下に「Page2.jsp」ノードが追加されます。
4. Page1.jsp のアイコンをクリックすると、拡大して button1 アイコンが見えます。「button1」の名前の横の青いアイコンを確認してください。これがボタンのコネクタポートです。
5. コネクタポートをクリックし、Page2.jsp のアイコンまで線をドラッグします。最初のページと 2 ページ目をつなぐコネクタが表示されます。新規に作成するコネクタの名前はデフォルトで「case1」になります。

6. コネクタの名前をダブルクリックし、名前を「case1」から「Page2」に変更します。

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

   図 2: ページナビゲーションエディタ

7. 編集用ツールバーの「XML」をクリックして、最後の 2 つの手順で生成されたコードを確認します。

   コード例 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 ページ目へのコンポーネントの追加

1. 編集用ツールバーの「ナビゲーション」をクリックします。

2. Page2.jsp のアイコンをダブルクリックします。

   ビジュアルデザイナーにページが開きます。
3. 次の図に示すように、ページに「静的テキスト」コンポーネントを配置し、「text」プロパティーを「ページ 2」に変更します。
   
   

   図 3: Page2 のレイアウト

4. F6 キーを押してアプリケーションを配備します。

5. Web アプリケーションが配備されると、次の図に示すように、ページ 1 がブラウザに開きます。

   図 4:単純なナビゲーションの Web アプリケーション

6. 「移動」ボタンをクリックします。これによって、最初のページから 2 ページ目に移動します。

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

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

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

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

図 5:修正された最初のページのレイアウト

1. ビジュアルデザイナーで Page1.jsp を開きます。
2. 「静的テキスト」コンポーネントの下に「ドロップダウンリスト」コンポーネントを配置します。
3. ドロップダウンリストを右クリックし、「デフォルトオプションを設定」を選択します。

4. 「オプションカスタマイザ - dropDown1」ダイアログで、各デフォルト項目の値を次の図に示す値に変更します。値を編集するには、表の各セルをクリックします。各フィールドを編集したあと、Enter キーを押すと変更が確定されます。

   図 6:「オプションカスタマイザ - dropDown1」ダイアログ

5. 「了解」をクリックして、すべての変更内容を保存します。

3 ページ目の追加

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

図 7:3 ページ目のレイアウト

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

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

1. ページナビゲーションエディタを開きます。
2. Page1.jsp のアイコンをクリックして内容を表示し、ボタンのコネクタポートから Page3.jsp のアイコンにコネクタの線をドラッグします。
3. コネクタの名前を「case1」から「Page3」に変更します。
4. Page1.jsp のアイコンをダブルクリックし、編集用ツールバーの「デザイン」をクリックしてページ 1 のレイアウトを表示します。
5. 「移動」ボタンコンポーネントをダブルクリックして、Java エディタでアクションハンドラメソッドのソースコードを開きます。

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

   コード例 2:return 文

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

アプリケーションの配備

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

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

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

4. 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 の各クラスが見つからないことが示されます。これらのクラスは、次の手順でインポートします。

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

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

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

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

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

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

2. 次に示す 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>

   
   

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

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

   public String button1_action() {
           return "login";
       }

まとめ

1. ページを作成します。
2. ナビゲーションをサポートするコンポーネント (ボタン、ドロップダウンリストなど) をページ上に配置します。
3. ナビゲーションエディタを使用して、コンポーネントとページの間をコネクタで接続します。
4. dropDown1_processValueChange() ハンドラメソッドを使用して、より高度なナビゲーションを実装します。
   

関連項目:

• NetBeans Visual Web Pack について
• データバウンドコンポーネント
• ページフラグメント