DHTML-VB Combination Adds Programming Power

Welcome Guest. | Log In| Register | Membership Benefits

June 8, 1998

DHTML-VB Combination Adds Programming Power

Microsoft's IE 4.0 unites best of both programming models

By Don Kiely

he Internet and the Web are fueling the most significant innovations in programming today. HTML by itself has some user-interface features that could simplify traditional Windows application design. But Dynamic HTML, which lets programmers create more interactive Web sites than HTML, coupled with Visual Basic enable a whole new programming p aradigm.

The cross-platform nature of the Internet has helped develop a programming model that is largely platform-independent. The HTML skills needed are relatively easy to acquire and are now quite common--certainly easier and more widespread than C or even Visual Basic. Combining the VB and DHTML programming models is a great way to leverage the skills of your VB and HTML developers.

Microsoft's Internet Explorer 4.0 uses a regular custom control to display Web pages and a rich document object model for DHTML. These features, implemented as ActiveX components, are available to Visual Basic applications, offering the benefits of the user-interface support in DHTML while letting you use full VB code instead of the limited VBScript subset. The result is a broad new programming model. Microsoft is working on ways to further integrate the DHTML and VB programming models into its tools.

There are plenty of reasons to combine the features of DHTML with Visual Basic. While VB makes it re latively easy to create a functional, traditional user interface, DHTML is focused on creating a much richer interface. Block elements in an HTML page have customizable margins, borders, and cell padding. It's easy to nest elements and selectively apply formatting, for example, highlighting individual words and phrases within a text string contained within the cell of a table. Text can flow around, hide behind, or lie on top of images. You have access to more measurement units and can easily place page elements based on percentage placements. And the formatting and display of all these elements can be changed dynamically at run time based on user action and the contents of database fields.

Web pages have access to more multimedia effects than standard VB forms. The VB Image and Picture controls support Windows bitmap, icon, metafile, GIF, and JPEG images; to add others, you have to rely on third-party controls. But HTML supports these, as well as MPG, PNG, and others, with support added regularly for new formats.

DHTML provides support for animating page elements and, when combined with cascading style sheet features, lets you selectively apply formatting and transition effects to page elements and regions of the window. You can embed ActiveX components, ActiveX documents, and Java applets in a page using the Object tag, and control the objects through code just as you can in a Web page.

DHTML gives you far more control over a VB form and its elements, separating an application's navigation features from its content, and the logic from its look and feel. DHTML eliminates the need for code or third-party controls to implement dynamic resizing and layout or for scrolling long forms, because these are built into Microsoft's WebBrowser control.

So, for example, all you need to do to implement resizing features is to resize the WebBrowser control when the user resizes the VB form: WebBrowser1.Move 0, 0, Me. ScaleWidth, Me.ScaleHeight. The WebBrowser control and DHTML then take care of resizing and placement of the text, images, and controls within the form. If you've spent a lot of hours writing code to move controls around when a form resizes, you'll recognize this as a significant advantage.

Hyperlinks and URLs support navigation and application flow, eliminating the need for all the code required in a typical application for managing these functions. DHTML supports table-based layouts, giving you precise control over small regions of the form and rich formatting capabilities with very little code.

Take a look at Microsoft Money 98 for an example of how DHTML can be seamlessly integrated into an application. You usually can't tell when you're in an HTML page or region. Many of these features are possible in VB, but require either heavy coding to extend the standard VB controls, or the use of many different third-party custom controls. But by using Internet Explorer 4.0's WebBrowser control with the DHTML object model--both freely available from Microsoft--you can imp lement these features more easily and effectively.

Browser Coordination
The key to using DHTML in VB is to coordinate the WebBrowser control with the DHTML Document Object Model. The WebBrowser control you'll use is the same control used in Internet Explorer 4.0 to display Web pages. It has lots of properties, events, and methods, but most of these are useful only in a browser application and are useless when you just want to use DHTML in a VB application. I've found that in VB-DHTML projects, I use very few of the WebBrowser's properties, needing only to move and resize the control and load and navigate pages. Most of the coding manipulates the DHTML object model.

Internet Explorer 4.0 must be installed on your development machine to carry out the following: Including the WebBrowser control in the VB toolbox requires you to use Project|Components and to select Microsoft Internet Controls, implemented in ShDocVW.dll. Then add a reference to the DHTML document object model using P roject|References and select the Microsoft HTML Object Library, implemented in MSHTML.dll. Then you'll have access to all DHTML objects shown in VB's object browser.

The second critical step to link the control with the object model is to create an object reference to the WebBrowser document. Start by creating an object variable: Private WithEvents htmlDoc As HTMLDocument. Then, in the Form's Load event procedure, navigate to a Web page. The WebBrowser control has a few built-in pages that you see when you cancel navigation or otherwise need help. One of these pages is "about:blank," which displays a blank page but creates the control's document object so we have access to it: WebBrowser1. Navigate "about:blank."

The last step is to link the htmlDoc object variable to the document in the WebBrowser control. Place this code in the control's DocumentComplete event procedure, which fires once the about:blank document is finished loading in the control:

Private Sub WebBrowser1_DocumentC omplete(ByVal pDisp As Object, URL As Variant).

If WebBrowser1.Document Is Nothing Then Exit SubSet htmlDoc = WebBrowser1.Document'Continue with code to set up and manipulate the DHTML document End Sub.

The htmlDoc object now gives you full access to the DHTML object model, and you manipulate it directly rather than the WebBrowser control.

Programming the DHTML object model is quite different from regular VB programming, but has some similarity to programming DHTML pages. The first thing to understand is that script is no longer embedded in the document that is loaded into the WebBrowser control. You can still include VBScript or JScript there, but it's a nightmare of coordinating and debugging as you switch between code running in the page and in VB. But by declaring the htmlDoc object variable using WithEvents, as I did above, all events are passed from the DHTML document to your VB application, where you can choose to handle or ignore them as usual.

Internally, DHTML par ses the HTML tags in the document and exposes collections and individual elements through its automation object model. DHTML gives you access to these page elements primarily through the All and Children collections. This lets you manipulate collections of elements, say all H1 headings, or refer to individual elements identified through the ID attribute. This code uses the All collection to print to the VB Immediate window all the tags within the current document when the user clicks anywhere in the WebBrowser control:

Private Function htmlDoc_ onclick() As Boolean Dim sTagNames As String Dim i As Integer Debug.Print "Tag names in the document:" For i = 0 To htmlDoc.All. length - 1 Debug.Print htmlDoc. All(i).tagName Next End Function.

Probably the biggest difference between the two programming models is DHTML's event bubbling. In VB, when an event is fired for a form or control, that's the end of it. DHTML's event bubbling, however, causes an event to bubble up the hierarchy of the page, gi ving every element containing the other element that caused the event a chance to respond. This is vaguely analogous to how VB handles errors, except that errors stop moving up the call stack once they find a procedure with an error handler. Event bubbling lets common actions be handled centrally, reducing the amount of duplicate code.

Here's a typical scenario of how event bubbling works:

The user clicks a word in bold font embedded in some text between <p></p> tags. The <b> tag receives the event and can respond to it. The <p> tag receives the event and can respond to it. The text is contained within <div></div> tags, which receive the event and can respond to it. The tag receives the event and can respond to it.

Finally, the document itself receives the event and can respond to it. At any point along this chain of events, an event handler can set the CancelBubble property of the Event object to True, preventing t he event from bubbling any further up the page structure hierarchy.

DHTML supports cascading style sheets--essentially collections of property values that you can create and apply to groups of elements. For example, you can set up a pair of styles for normal and highlighted text:

<style> .Item { cursor: hand; font-family: verdana; font-size: 20; font-style: normal; background-color: blue; color: white } .Highlight { cursor: hand; font-family: verdana; font-size: 20; font-style: italic; background-color: white; color: blue } </style>

Then use a Span object variable to apply the styles in the onmouseover and onmouseout events to text delimited with the SPAN tag:

Private Sub htmlSpan_ onmouseover() If htmlSpan.Style = "Item" Then htmlSpan.Style = "Highlight" End If End Sub Private Sub htmlSpan_onmouseout() If html Span.Style = "Highlight" Then htmlSpan.Style = "Item" End If

End Sub.
Visual Basic lets you dynamically add controls to a form at run time, but only if you create a prototype control during design, from which you essentially make copies. With DHTML, you can use the inertAdjacentHTML and the pasteHTML methods to add or completely change the document's HTML. This makes it possible to create data-driven applications and context-sensitive user interfaces, such as to modify a page based on the user's ID level. All such added controls and elements can include event handlers like any other page element.

One tricky part of programming VB and DHTML together is that HTML pages load asynchronously. This enables parts of a Web page to become active even though the entire page is not yet loaded. A user can then click on an image's placeholder, assuming that it's within an anchor tag, and move to another page even while the image itself is still downloading.

VB uses synchronous loading, so that no element is available to the user until the entire form is loaded into memory. But VB provides events earlier that you can respond to in code . Depending on the application and your perspective, this can be good or bad. But unless you're loading huge images, and if all the page elements are on the local machine, a form will generally load fast enough that this won't be noticeable to the user.

DHTML also makes XML available to your application. XML lets you create custom tags for metadata--information about the information in the document. I'm sure we'll see many third-party tools in the coming months that support XML in VB, but with DHTML, you have those features today.

Combining DHTML and the WebBrowser control in a VB application has plenty of advantages, but the features aren't yet perfectly integrated. One problem I've had is with debugging. If you start single-stepping through the code, some DHTML events don't fire--even though they work just fine if you run the application normally. The document object's DocumentComplete event is the main culprit, but the problem is easily solved by placing a breakpoint on the first statemen t in the event procedure. Then debugging works normally.

Another problem is that you can't distribute just the ShDocVW.dll and MSHTML.dll components. In its push to put Internet Explorer on every desktop, Microsoft requires that you distribute and install the entire Internet Explorer 4.0 package, adding multimegabytes to your distribution files. Microsoft says this is because the WebBrowser control and DHTML object model require tricky registry settings, and installing IE is the only way to ensure that everything is set up properly. The good news, of course, is that IE is free, but you have to OK the Internet Explorer Administration Kit's license and distribution agreement. The downside: It has marketing and reporting requirements that will rankle some developers.

All these features are great if you buy into the Microsoft way of doing things, but worthless if you prefer Netscape's programming models. The DHTML implementations in the latest browser releases are incompatible, though the World Wide Web Consortium seems to be making progress on a standard.

The combination of DHTML and VB provides some amazing user-interface features that can dramatically reduce the amount of management code you need to write, and reduce your reliance on third-party products. Microsoft has hinted that it will continue to increase its support for such combinations of programming models in future products.

Don Kiely is technology director for the SkyFire Group application development consulting firm in Fairbanks, Alaska. He can be reached at donkiely@computer.org .