Web Site Designer style example

This example shows how files within a Web site can have different templates applied to them, as well as a sample template for a navigation bar for a Web site. The file with the navigation template includes links to your WebFacing pages that have a similar look and feel. The example also shows how to link other Web projects to your WebFacing project.

Here are the steps:

  1. Create a WebFacing project and make sure you choose to Enable for Web Site Designer in the Choose a Web Style page of the project creation wizard.
  2. Select the Navigator tab to see the directory structure for your project. In the Navigator view, right-click on <project_name>/WebContent/index.jsp and select Run As > Run on Server
  3. You will see a sample of two navigation links, INV1 and INV2, that will open the first two CL commands that you defined for your project. These are provided as samples and will not work unless you have these CL commands defined with names INV1 and INV2. Click on the links to run your application. Notice that the original links from index.jsp are also available.
  4. Select the WebFacing projects tab, expand your project, and select Style > Web Site. Right-click the .website-config file, and select Open With > Web Site Designer. To edit the template, right-click on the Index icon and select Page Template > Open Page Template With > Page Designer for Template. To edit the CSS style, right-click on the PageBuilder icon and select Style > Edit CSS and then select ../../theme/blue.css. Notice that the Index icon has a template applied to it that is different from what is applied to PageBuilder, but the style file is the same.
  5. To add a new navigation link, select the Navigator tab and copy the <project_name>/WebContent/inv2.jsp file and place it in the same directory with the name inv3.jsp. Edit the inv3.jsp file and change any text that refers to INV2 to INV3. Then drag the inv3.jsp file to the Web Site Designer navigation view and place it under the Index icon. Now you have navigation for a third CL command named INV3.
Related reference
Web Settings
Related information
Customizing your WebFacing applications

Feedback