課題 1.3: Web サイトに Web ページを取り込む
Web サイトに Web ページを取り込む前に、『課題 1.2: Web サイトの構造を設計する』を完了しておく必要があります。
Web Site Designer のページ・アイコンを使用して 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 に開きます。
- 「ナビゲーション」「 - 広告チュートリアル
(Classifieds Tutorial)」タブをクリックして、Web
Site Designer に戻ります。「広告をすべて表示
(View All Classifieds)」アイコンが実線のボーダーになり、小さい青色のダイヤのアイコン
(
) は
JSP ファイルが関連付けらたことを示しています。
しかし、他のページ・アイコンは破線のボーダーのままで、ファイルがまだ作成されていないことを示しています。
- 他のページ・アイコンについても、各アイコンをダブルクリックし、「新規
Faces JSP ファイル」ウィザードを完了させて、Faces JSP ページの作成を続けます。
このチュートリアルでは、以下のような命名規則に従っています。
- 「リストの掲載 (Post a Listing)」-
new_record
- 「リストの更新 (Update Listing)」-
update_record
- 「フィルター済みリスト (Filtered Listings)」-
filtered_records
- Ctrl+S を押して Web サイト・ナビゲーションを保管します。
4 つのページの作成を終了すると、「プロジェクト・ナビゲーター」ビューの「WebContent」フォルダーの下に新規リソースがすべて表示されます。
これで、Web サイトの中のそれぞれのページについて、
ブランク・ページが作成されました。
ここで、『課題 1.4: Web
サイトのルック・アンド・フィールを設計する』を始めることができます。