Design Considerations for DHTML Applications

See Also

There are several factors you should keep in mind when creating a DHTML application. These include deciding how you want your application to load in the Web browser or Web browser control, and making decisions about the layout and structure of the pages you create. You must make sure that the elements on your page are properly named and that your pages do not contain any references that would prevent the application from locating related files.

General Considerations

• Follow principles of good Web design. The HTML pages you develop for your application should follow principles of good Web design that are described in most HTML style references. For example, you should remember that end users sometimes view Web pages with the pictures turned off. This can make your application difficult or impossible to use if you embed key information in images. Keep this in mind as you design your interface, and provide backup mechanisms for any crucial information presented in a picture.
  
  
• Only elements with an ID attribute can be programmed. If you create your HTML pages outside of Visual Basic and then import them into the page designer, be sure to give all of the elements for which you want to handle events a unique ID attribute so that you can manipulate them easily in your Visual Basic code.
  
  
• All IDs must be unique when you use Dynamic HTML in Visual Basic. In a Visual Basic project, all of the names and IDs you give to forms, their elements, and associated modules must be unique. Dynamic HTML used outside of Visual Basic does not have this same restriction — multiple items on an HTML page created outside of Visual Basic can be given the same ID. If you use a page with duplicate IDs in Visual Basic, the page designer appends numbers to the duplicate IDs to make them unique. When you use an external page, be aware that some IDs may be changed.
  
  
• Use relative URLs. Your application and its HTML pages can be deployed onto a Web server with a different directory structure than the one on the development computer. Because of this, it is best to use relative URLs in your HTML pages rather than absolute URLs. Absolute URLs indicate the exact drive and directory in which your HTML page will expect to find any related images or other files it references. Relative URLs give the name of the file to locate and indicate its location in relation to your project directory, specifying how many directories up or down to move to find the reference.
  
  
• Use style sheets whenever possible. Rather than accessing the style property of an individual element to set an element's physical appearance, use global or linked style sheets as much as possible. Global or linked style sheets allow you to take full advantage of the flexible nature of Dynamic HTML. For more information on styles in Dynamic HTML, see "Element Appearance in DHTML Applications," earlier in this chapter.
  
  
• Not all properties cascade. In Dynamic HTML, most properties that you set for a page can cascade down to the page’s children through style sheets. For example, if you set a font for the page, paragraphs, buttons, and other elements with text will inherit that font setting and use the same font. When you set a background color, however, it does not cascade down to any of the object’s children.
  
  
• Some objects cannot be moved once you place them on the page. Some Visual Basic controls, such as the common dialog or the sysinfo control, are invisible at run time. If you add one of these objects to your HTML page, you cannot select it and move it around within the page after you initially draw it. You can, however, select the control in the treeview and either delete it or access its properties.
  
  
• You cannot use the page designer in a single-threaded DLL. To create a DHTML application, you must set your project to be apartment-threaded. You set this on the General tab of the Project Properties dialog box.

Asynchronous Loading Considerations

When the system loads a Visual Basic form, the entire form is loaded and then displayed. When the system loads an HTML page into a Web browser or Web browser control, some parts of the page that load more quickly are displayed first, while the browser finishes loading and displaying other portions of the page. This process is called asynchronous loading and presents some unique challenges for a Web application. Users may have access to some parts of your user interface before other, dependent elements appear. For example, if the code behind a command button references an event on an image control, an error can occur if the user selects the button before the image is loaded.

Note   By default, asynchronous loading is turned off for your HTML pages. If you want to change this setting, you can set the AsyncLoad property for page to True.

To lessen the effects of asynchronous loading in your application:

• When possible, leave AsyncLoad set to False. To prevent the browser from displaying any part of the page until the entire page is loaded, set the AsyncLoad property on the page designer to False. This makes the browser wait to run any Visual Basic code until all elements and events are loaded. False is the default setting of this property.
  
  
• When you must use asynchronous loading, check for the existence of an object before you reference it. When you must use asynchronous loading, it is best to not write code that crosses object boundaries by referencing one object on the page from within another object. There are times, however, when crossing object boundaries will be necessary. In these cases, include code that checks to see whether the object exists, or provide error handling that tells the system how to react when the referenced object does not exist.
  
  
• Don’t rely on backward references to avoid trouble. Backward referencing means using references to only those elements on the page that appear above the current item. The assumption is that the page will load in an orderly, top-to-bottom fashion. This is not the case. Elements on an HTML page can load in a random order.