Add page navigation

Note

In this lesson you add a new Web page for displaying product information. You also add a hyperlink to the Welcome page to access this new page. Lastly you add a button to the new page that eventually navigates to a Web page in which you can add new product information. Additional features are added to this Web page in a later lesson.

Create a 4GL product information Web page

Now you create a Web page for viewing and adding product information. You access the new Web page from the Welcome page.

  1. Right-click the Customer target in the System Tree.

    Select New from the pop-up menu.

  2. Click the 4GL JSP Page icon and click OK.

    The About the 4GL JSP Page Wizard page displays.

  3. Click Next.

    Type the Title Product in the Title text box and press Tab.

    The filename in the File Name text box defaults to Product.jsp.

  4. Click Next until the Define Page Parameters page displays (accept the wizard defaults).

    Type ID for the Parameter Name and leave the Default Value empty.

    Click Next.

    The Choose EAServer Profile page displays.

  5. Select the Skip EAServer Components check box.

  6. Click Next.

    Review the summary of page properties and click Finish.

    The Product.jsp page displays in Page view.

  7. Highlight the default text Put your data here.

    Type the words Product Information.

    Press Enter.

    The sample shows the text Product Information between two paragraph marks. Below it are two more paragraphs marks.
  8. Select File>Save to save these changes.

Add a hyperlink

Next you add a hyperlink in the Welcome page to access the Product Web page.

  1. Display the Welcome page (Welcome.jsp).

    Place the cursor in the paragraph near the bottom of the product picture and press Enter twice.

  2. Select Format>Hyperlink from the menu bar.

    The Hyperlink Properties dialog box displays.

  3. Type View Product Information in the Text of the Hyperlink text box.

    Click the browse (...) button next to the Destination text box.

    The Choose URL dialog box opens and displays the Web pages already created in the Customer target.

  4. Select Product.jsp and click OK.

    Shown is the Hyperlink tab page of the Hyperlink A 1 Properties dialog box. At top is a box labeled Text of the Hyperlink: with the entry View Product Information. Next is a Destination text box with a browse button and the entry Product dot j s p. Below this is a blank text box labeled Target Window or Frame, a Relationship box with the entry SAME, an ID for scripting box with the entry A 1, and a selected check box labeled Server Side Scriptable.
  5. Click OK again to add the hyperlink to the Web page.

    The Welcome page displays an underlined View Product Information hyperlink.

  6. Select File>Save from the menu bar.

    Close the Welcome page.

Add a button

Next you add a button to the Product page. Buttons are a typical navigation tool on Web pages. Later in the tutorial, you add navigation logic to this button.

  1. Display the Product page (Product.jsp).

    Place the cursor in the paragraph under the heading Product Information.

  2. Select Insert>Form Field>Push Button from the menu bar.

    The Button INPUT1 Properties dialog box displays.

  3. Select the Button Type Button from the drop-down list.

    Type cb_addproduct in the Name text box.

    Type Add New Product in the Label text box.

    Shown is the button tab page of the Button Properties dialog box. From top to bottom are a drop down list box labeled Button Type with the entry Button, a Button Name text box with the entry c b _ add product, a Label text box with the entry Add New Product, an ID for scripting box with the entry INPUT 1, and a selected check box labeled Server Side Scriptable.
  4. Click OK.

    The button displays on the Product.jsp page.

    Shown is the text Product Information and below it, a button labeled Add New Product.

    You will connect this button to a Web page in the next lesson.

  5. Select File>Save from the menu bar.

  6. Close the Product page.