この例は、Web サイトのナビゲーション・バー用のサンプル・テンプレートとともに、Web サイト内のファイルに
異なるテンプレートがどのように適用されるかを示しています。
ナビゲーション・テンプレートを持つファイルには、よく似たルック・アンド・フィールを持つ WebFacing ページへのリンクが含まれています。
この例では、他の Web プロジェクトを WebFacing プロジェクトにリンクさせる方法も示します。
ステップは以下のとおりです。
- WebFacing プロジェクトを作成し、「プロジェクトの作成」ウィザードの「Web スタイルの選択」ページで
「Web Site Designer で使用可能にする」を選択します。
- 「ナビゲーター」タブを使用して、プロジェクトのディレクトリー構造を確認します。
「ナビゲーター」ビューで、<project_name>/WebContent/index.jsp を右クリックして、
を選択します。
- 2 つのナビゲーション・リンク、INV1 および INV2 のサンプルが表示されます。
これは、プロジェクトに対して定義した最初の 2 つの CL コマンドを開きます。
これらのリンクはサンプルとして提供されているため、これらの CL コマンドが INV1 および INV2 の名前で定義されていなければ動作しません。
アプリケーションを実行するにはリンクをクリックします。
index.jsp からの元のリンクも使用できることに注意してください。
- 「WebFacing プロジェクト」タブを選択してプロジェクトを展開し、を選択します。
「.website-config」ファイルを右クリックし、を選択します。
テンプレートを編集するには、「索引」アイコンを右クリックし、
を選択します。
CSS スタイルを編集するには、「PageBuilder」アイコンを右クリックし、
を選択してから、
../../theme/blue.css を選択します。
「索引」アイコンには、PageBuilder に適用されたものとは異なる
テンプレートが適用されていても、スタイル・ファイルが同じであることに注意してください。
- 新しいナビゲーション・リンクを追加するには、「ナビゲーター」タブを選択して、
<project_name>/WebContent/inv2.jsp ファイルをコピーし、それを inv3.jsp という名前と同じディレクトリーに置きます。
inv3.jsp ファイルを編集し、INV2 を参照するすべてのテキストを INV3 に変更します。
次に、inv3.jsp ファイルを Web Site Designer の「ナビゲーション」ビューにドラッグし、それを
「索引」アイコンの下に置きます。
これで、3 番目の CL コマンド INV3 へのナビゲーションが作成されました。