課題 1.6: Web サイトの動的ナビゲーションを実現する

デモの表示

Web サイトの動的ナビゲーションの実現を開始する前に、『課題 1.5: Web サイトにページ・テンプレートを適用する』を完了しておく必要があります。

課題 1.2 で Web サイトの構成を設計したときに、ページ間の関係について決定したことがいくつかあります。ページ・アイコンを線でつないでレイアウトしたことを思い出してください。

サイトの構造

1 つのページを他のページに関連付ける方法は、いくつかあります。 このような関係は、ファミリー内の関係に例えて表現されます。 この例では、「広告をすべて表示 (View All Classifieds)」が親ページとなり、他の 3 つのページが子ページとなります。 また、この 3 つのページは兄弟ページとなります。

このページの関係は、ナビゲーション・バーやタブなどのナビゲーション・リンクを生成する場合に使用されます。 各ページでは、関連付けられているページに基づいて、ナビゲーション・リンクが自動的に作成されます。 このプロセスは、動的ナビゲーション と呼ばれています。

サイト構造を検査する

サイト構造の設定で、どのページがナビゲーションに含まれるようにセットアップされているかを確認します。Web Site Designer で、リンクとして動的ナビゲーションに含めるページ、サイト・マップに含めるページ、およびサイト構造とページ関係に基づいた他のナビゲーション・オプションを指定できます。これはサイトにインクルードすべきページがあるときには便利ですが、ナビゲーション・フィーチャーの一部としては意味がありません。例えば、サイトに問題が生じたときにエラー・ページが表示されることがありますが、このエラー・ページはナビゲーションの一部としては表示しないほうが良いでしょう。
  1. 「プロジェクト・エクスプローラー」ビューの「Web サイト・ナビゲーション」をダブルクリックして、サイト構造を表示します。
  2. 「ナビゲーションで表示」アイコン () が可視となっているので、 すべてのページで「ナビゲーションで表示」オプションがデフォルトで選択されていることが分かります。 このオプションは、ナビゲーション・バーに表示させたい各ページごとに選択する必要があります。ページを使用不可にし、 ナビゲーションにページが表示されないようにすることもできます。 「広告をすべて表示 (View All Classifieds)」ページの検索オプションからユーザーが送信されるため、検索結果ページ「フィルター済みリスト (Filtered Listings) 」をナビゲーションから使用できないようにする必要があります。
    1. フィルター済みリスト (Filtered Listings)」ページ・アイコンを右クリックします。
    2. ナビゲーション」>「ナビゲーションで表示」の順に選択し、このチェック・マークを外します。 これで、「ナビゲーションで表示」アイコンは、「フィルター済みリスト (Filtered Listings)」ページ・アイコン上で使用不可になったはずです。
  3. また、「広告をすべて表示 (View All Classifieds)」ページの更新オプションからユーザーが送信されるため、「リストの更新 (Update Listing)」ページも使用不可にする必要があります 「リストの更新 (Update Listing)」ページ・アイコンを右クリックします。「ナビゲーション」>「ナビゲーションで表示」の順に選択し、このチェック・マークを外します。 これで、「ナビゲーションで表示」アイコンは「リストの更新 (Update Listing)」ページ・アイコン上で使用不可になるはずです。
  4. サイトにナビゲーション・ルートを設定する必要があります。トップ・ページは、 通常、サイトで最初に作成されるページですが、多くの場合、ナビゲーション・ルートとして設定されます。 「広告をすべて表示 (View All Classifieds)」ページ・アイコンを右クリックし、「ナビゲーション」>「ナビゲーション・ルートの設定」の順にクリックします。ページ・アイコンの上部にあるアイコン () は ルート・アイコンです。ナビゲーション・ルートが重要なのは、Web サイト・ナビゲーションを生成するときに 使用される、ナビゲーション・バーなどのリンク・レベルを決定するからです。
    注:「広告をすべて表示 (View all Classifieds page)」ページおよび「リストの掲載 (Post a Listing)」ページのサイト・ナビゲーションによって設定されたデフォルト・オプションは選択したままにしておいてください。
  5. Ctrl+S を押して、変更を保管します。

ナビゲーション・コンポーネントをページ・テンプレートに追加する

  1. 「プロジェクト・エクスプローラー」ビューの「template.jtpl」をダブルクリックして、ページ・テンプレートに戻ります。
  2. 「パレット」ビューで「Web サイト・ナビゲーション」をクリックして、ナビゲーション・コンポーネントが入っているドロワーを開きます。Web サイトに追加できる動的ナビゲーション・コンポーネントには、 サイト・マップを含め、さまざまなタイプがあります。 最も基本的なコンポーネントは水平バーですが、これはサイト構造に基づいてリンクの行で構成されています。
  3. リンクの行をそれぞれのページの上に設けて、ユーザーがサイト内の他のページにアクセスできるようにする必要がありますが、 ナビゲーションには何か視覚的に興味を引くものも追加したいものです。 「水平タブ」コンポーネントをページ・テンプレートの 2 行目にドラッグします。 このコンポーネントは、タブ付きの行に動的リンクを作成するものです。 「水平タブの挿入」ウィザードが開きます。
  4. デフォルトを受け入れ、「サンプル」ナビゲーション・コンポーネントを使用します。
  5. サムネール」イメージでデフォルトを受け入れます (horizontal-tab01.jsp)。 「ファイル名」フィールドに自動的に値が取り込まれていることに注意してください。 「次へ」をクリックします。
  6. ページ間の関係に基づいて、ナビゲーション・バーに表示するリンクのタイプを選択します。サイトのトップ・ページと、 それぞれのページの兄弟と子がすべてナビゲーションに表示されるように指定するために、 以下のページが選択されていることを確認してください。 直前のまたは次のリンクを選択すると、 それらのリンクを表示する「進む」や「戻る」などをラベル表示できます。
  7. 次へ」をクリックします。 ウィザードの「仕様ファイルのオプション設定」ページのデフォルト設定を受け入れます。 JSP カスタム・タグを使用してランタイムにリンクを生成する場合は、 「JSP ナビゲーション (JSP Navigation)」を選択します。 HTML カスタム・タグを使用して設計時にリンクを生成する場合は、「HTML ナビゲーション (HTML Navigation)」を選択します。 Faces JSP ページに HTML カスタム・タグを追加する場合は、 「Faces リンクを使用する」チェック・ボックスをクリックして、Faces 用の出力リンク・タグを作成します。
  8. 終了」をクリックします。ページ・テンプレートにナビゲーション・コンポーネント・アイコン () が表示されます。
  9. ページ・テンプレートに対する変更を保管します。ページ・テンプレートを保管すると、 動的ナビゲーションの変更はサイト内のすべてのページに適用されます。
  10. 「プロジェクト・エクスプローラー」ビューの「Web サイト・ナビゲーション」をダブルクリックして、サイト構造を表示します。 この Web ページにはナビゲーション・コンポーネントが入ったので、 ページに Web サイト・ナビゲーションがないことを示すアイコン () は、 このページ・アイコンには現れません。
    ナビゲーション・コンポーネントを持つ「Web サイト・ナビゲーション」

ナビゲーション・コンポーネントは Web プロジェクトにいくつかのファイルを追加します。 テンプレートを保管した後で、「プロジェクト・エクスプローラー」ビューに新しい .jsp およびいくつかの .gif ファイルが含まれていることに注意してください。 これらのファイルは、ページ内でタブとして表示されます。

ナビゲーションを持つ「プロジェクト・エクスプローラー」

ナビゲーションのプレビュー

ナビゲーションがテンプレートではなくページでどのように見えるか、1 つのインスタンスを確認する場合は、 「プロジェクト・エクスプローラー」ビューの中の「all_records.jsp」をダブルクリックして、Page Designer の「プレビュー」タブをクリックします。 タブの上に表示された名前が、ファイル名ではなく、ページのナビゲーション・ラベルになっていることが分かります。また、 現行ページは、強調表示タブで表示されており、 サイト内をナビゲートしている間も常に上部に強調表示タブとして存在することに注意してください。

ヒント: 「ナビゲーション」ビューでサイトの構造を変更すると、 動的ナビゲーション・リンクは、新規の構造を反映するように自動的に更新されます。

ナビゲーション・タブ

これで、動的ナビゲーションのセットアップが完了しました。『課題 1.7: Web サイトをプレビューする』を始めることができます。

ご利用条件 | フィードバック

(C) Copyright IBM Corporation 2000, 2004. All Rights Reserved.