Navigating in DHTML Applications

You can write code in your DHTML application to allow the end user to move from one page to another. If you have multiple page designers in your application, you can move from one page to another within your application, or you can navigate to an external Web site outside of the application.

There are two main ways you can allow for navigation:

• Program a hyperlink to move to the desired location by setting its HREF property.
  
  
• Program another element, such as a button, to move to a new page when activated.

Navigating with Hyperlinks

You can easily provide navigation to another page by including a hyperlink element in your page. You add the hyperlink to your page, then set a property called HREF that tells the system where to go when the link is selected.

After you add the hyperlink to your page, you indicate the location to which it should jump by setting the HREF property for the element. You can type in a full or relative location to another page on the Web site, whether that page is part of your application or not.

Note   It is best to use relative references to the pages to which you want to jump unless those pages are located on external Web sites. If they are pages that you intend to deploy with the application, make sure that your directory structure on the development machine mimics the structure on the site to which you will deploy, then use a relative path to the file. For Web pages on external sites, use a direct reference to the exact location.

To navigate using a hyperlink

1. In either panel of the designer window, click the hyperlink you want to use to navigate.
   • If you need to add a new hyperlink to your page, drag the Hyperlink icon from the toolbox to the page.
     
     
   • To convert existing text to a hyperlink, highlight the text and click the Make Selection into Link icon from the designer toolbar.
     
     
   • If you want to use an existing hyperlink on the page, select the hyperlink and make sure that its ID property is set.
2. In the Properties window, enter a full or relative path to another page in the HREF property.

   Note   To use an absolute reference, enter your link in the following format:

   http://www.server.com/directory/page.htm

   Test your link by running the project.

Navigating Programmatically

In addition to using the HREF property on the Hyperlink element, you can programmatically allow any other element to navigate to another page. The most common example of this would be to create a button which, when clicked, moves users backwards or forwards in your application.

Note   While it is possible to use other elements in addition to the button or the hyperlink to move from page to page, it may not be intuitive to your users that elements are being used in this way. Use principles of good design when determining what navigational features you want to include in your application.

After you add the element to your page, you can write code for it that tells the system how to respond when the element is activated. In this case, your code will tell the browser to navigate to another page.

The following code shows an example of how you would use a button to move from the current page in your application to another called DHTMLPage2:

Private Function Button1_onclick() As Boolean
BaseWindow.navigate "Project1.DHTMLPage2.html"
End Function

In this code the navigate method of the BaseWindow object is used to move to the desired location. Project1.DHTMLPage2.html is the name assigned to the page when the project is compiled.

To navigate using an element other than a hyperlink

1. In the page designer, click the element you want to use to navigate.
   • If you need to add a new element to your page, drag the appropriate icon from the toolbox to the page.
     
     
   • If you want to use an existing element on the page, select the element in either panel of the designer window.
2. Verify that the element has an ID, by checking the contents of the ID property in the Properties window. If the element does not have an ID, add a value for this property.
   
   
3. Access the Code Editor window for the element, and select the appropriate event from the Event list.
   
   
4. Write your code as shown in the example above.
   
   
5. Compile your project and test.