課題 1.3: Web サイトに Web ページを取り込む
Web サイトに Web ページを取り込む前に、『課題 1.2: Web サイトの構造を設計する』を完了しておく必要があります。
Web サイト・デザイナーのページ・アイコンを使用して Web サイトのレイアウトができたら、ページの作成を始めることができます。
ページ・アイコンは現在、破線のボーダーになっています。これはページ・アイコンが表すファイル、つまり実際のページが存在していないことを示しています。
ファイルが作成されると、ページ・アイコンのボーダーは実線になります。
- 「広告をすべて表示 (View All Classifieds)」ページ・アイコンをダブルクリックします。
「ページの作成」ウィザードが開きます。
- このチュートリアルでは、「Faces JSP」オプションを選択する必要があります。
このオプションは、JavaServer Faces テクノロジーを使用できる JSP Web ページを作成します。
さらに学習するには、『JavaServer Faces および Faces コンポーネントについてさらに学習す
る』を参照してください。
また、『JavaServer Faces を使用して Web ページにダイナミックな情報を表示する』チュートリアルでは、Faces コンポーネントを使用して、Web サイトにデータ接続を追加する方法についても学習します。
- 「OK」をクリックします。
「新規 Faces JSP ファイル」ウィザードが表示されます。
- デフォルト・フォルダー (/ClassifiedsTutorial/WebContent) を受け入れます。
- 「ファイル名」フィールドに新規ファイルの名前 all_records を入力します。このファイルに、サイ
トをレイアウトするときにページに割り当てたナビゲーション・ラベルと同じ名前を付けると便利ですが、ローカル・システム上のリソースで意味が通
じる名前を付け、ナビゲーション・ラベルは将来のナビゲーションの命名規則としてのみ使用することができます。
- 「マークアップ言語」フィールドでは、必ず「HTML」を選択してください。
- 「拡張オプションの構成」チェック・ボックスはチェックをはずしておきます。
作成した新規ファイルに、追加のタグ・ライブラリーなどのオプションを構成したい場合、このウィザードを使用して追加オプションを指定することができます。しかし、このチュートリアルの目的では、デフォルトを受け入れることができます。
注: 新規ファイルは、Web プロジェクトを作成したときに作成された Master.css を自動的に参照します。
- 「完了」をクリックします。新規ファイルが
Page Designer に開きます。
- 「ナビゲーション」タブをクリックして Web サイト・デザイナーに戻ります。
「広告をすべて表示 (View All Classifieds)」アイコンが実線のボーダーになり、JSP ファイルが関連付けられていることを示す
小さい青色のダイヤのアイコン (
) があるのが分かります。
しかし他のページ・アイコンは破線のボーダーのままで、ファイルがまだ作成されていないことを示しています。
-
それぞれのアイコンをダブルクリックし、「新規 Faces JSP ファイル (New Faces JSP file) 」ウィザードを完了させて、他のページ・アイコンに
ついても Faces JSP ページの作成を続けます。このチュートリアルでは、各ファイルに以下のように名前を付けます。
- 「リストの掲載 (Post a Listing)」- new_record
- 「リストの更新 (Update Listing)」- update_record
- 「フィルタリングされたリスト (Filtered Listings)」- filtered_records
- Ctrl+S を押して Web サイト・ナビゲーションを保管します。
4 つのページの作成を終了すると、「プロジェクト・ナビゲーター」ビューの「WebContent」フォルダーの下に新規リソースがすべて表示されます。
これで、Web サイトの中のそれぞれのページについて、ブ
ランク・ページが作成されました。これで、『課題 1.4: Web
サイトの外観を設計する』を始めることができます。