Web Site Designer スタイルの例

この例は、Web サイトのナビゲーション・バー用のサンプル・テンプレートとともに、Web サイト内のファイルに 異なるテンプレートがどのように適用されるかを示しています。 ナビゲーション・テンプレートを持つファイルには、よく似たルック・アンド・フィールを持つ WebFacing ページへのリンクが含まれています。 この例では、他の Web プロジェクトを WebFacing プロジェクトにリンクさせる方法も示します。

ステップは以下のとおりです。

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