November 1998

Introducing Visual Basic 6.0 DHTML Applications

With Visual Basic 6.0, Microsoft added new Internet features that bring the power of Internet to the traditional client/server capabilities of VB. Not only did Microsoft build in the ability to create server-side Internet Information Services (IIS) applications, it also included the capability to create Dynamic HTML (DHTML) applications with Internet Explorer (IE) 4. In this article, we'll explain what a DHTML application is and demonstrate how to create one. What's DHTML? A DHTML application is a VB application that uses a combination of Dynamic HTML coding and compiled VB code in an IE browser. A DHTML application resides on the browser machine, where it interprets and responds to actions the end user performs in the browser. This is in contrast to traditional applications, which process user actions on the server.

In its simplest form, a DHTML application can be a single HTML page that uses VB code and the Dynamic HTML object model to instantly respond to actions that occur on the page. This could involve responding to user-initiated actions, such as mouse movements and clicks, or responding to actions the browser itself performs, such as opening the page or loading a picture.

The power of VB then combines with the user-interface manipulation of DHTML to allow for highly interactive Web applications. You can control the page's appearance and behavior, as well as interact with business objects and data. Instead of the traditional VB forms interface, you can build a DHTML interface and work in a familiar browser environment. Table A compares traditional VB applications with DHTML applications.

Table A: Comparing VB and DHTML applications

A style sheet is a collection of properties that control the appearance of elements on a Web page. Style sheets can apply a style to a group of elements or to a single element. In addition, you can apply multiple styles to each element on the page. You can implement style sheets from the tag level all the way to covering multiple pages.

Dynamic content means that you can customize or replace the contents of a page on the fly after the page has been downloaded from the server, without making a trip back to the server. In past versions of HTML, any change to a page's contents required the browser to submit a request to the Web server and then wait for a new version of the page to be returned. The bottom line was that pages were made simple and fast for download and reduced trips to the server. In many cases, that would spell boring for the user or require graphic elements to jazz the page up (requiring lengthy download times).

Using the properties and methods provided in Dynamic HTML, you can easily add new elements with events or remove existing elements. In addition, you can change portions of existing elements by inserting new content within them. The DHTML object model allows you to work with just about every object on the DHTML page. (For an outline of the DHTML Object Model, see the MSDN documentation that comes with VB 6.0.)

With DHTML, you can overcome many of the limitations of standard HTML, such as the difficulties with exact placement of content and dynamic manipulation. This was especially troublesome with the need to overlap elements on a page--for example, placing text on top of a graphic without incorporating it into the image. With the use of CSSs and the dynamic code environment, you have complete control over the placement of elements on a page and how they're manipulated during the life of the page.

DHTML improves on standard VB forms, because the Web browser environment provides for a much more flexible interface. For example, you can have a form with essentially unlimited length. And, you can easily manipulate elements and insert new content dynamically at runtime. Test driving DHTML To get started, let's work with a simple DHTML page. Launch Visual Basic 6.0 and select a new DHTML Application. Figure A shows the application when it starts. In the page designer, drag and drop a Hyperlink control and a Text Field control onto the page, as shown in Figure B.

Figure A: A DHTML application looks like this at start up--note the page designer in the center window.

Figure B: Place a hyperlink and a text field on the DHTML application page.

Once the elements are on the page, you're ready to place code behind them. Enter the code from Listing A in the OnClick events of the hyperlink and the text field. The hyperlink's code uses the bgcolor property of the document object in the DHTML Object Model to set the background color of the page to red. The text field's code changes the value of the text in the box to Clicked! by accessing the Value property of the text field element.

Listing A: Hyperlink code

Option Explicit

'  Click event of the hyperlink.
Private Function Hyperlink1_onclick() As Boolean

'  When the hyperlink is clicked on the
'  background color of the document is set to red.
Document.bgColor = "red"
      
End Function

'  Click event of the text field box.
Private Function TextField1_onclick() As Boolean

'  Set the value of the text field to new text.
TextField1.Value = "Clicked!"

End Function

Figure C: At runtime, the Web page displays the hyperlink and text box.

Click on the hyperlink and the text box. Figure D shows the results of clicking both: The document's background turns red, and the text in the text box changes.

Figure D: The Web page looks like this after you click on the hyperlink and text box.

Now, you're ready to tackle a few more challenges in your Web page. Start a new DHTML application. On the form, add a hyperlink, a text field, a button, and a select box. Right-click on the select box and open the Property Pages dialog box. Add two option elements, as shown in Figure E.

Figure E: Add two option elements in the Property Pages dialog box.

Listing B shows the code behind each of the elements on the page. When you click a button, the InsertAdjacentHTML method of the body object dynamically adds a new button to the page. The BeforeEnd parameter indicates that the button will go before the end of the page. The second parameter is the HTML text to be displayed.

Listing B: Control code

Option Explicit

'  Global counter that keeps track of the
'  number of the last inserted item.
Dim cnt As Integer

'  Click event of button 1.
Private Function Button1_onclick() As Boolean

'  Use InsertAdjacentHTML method of body object to add an
'  HTML button before the end of the document.
Document.body.insertAdjacentHTML "BeforeEnd", _
  "‹BR›‹BR›‹input type=""button"" name=""NewButton"" _
value=""New Button""›"
End Function



'  This subroutine is called when page is initialized.
Private Sub DHTMLPage_Initialize()
'  Since we already have two items in the list, the
'  count will start at two.
cnt = 2
End Sub


'  Click event of the hyperlink.
Private Function Hyperlink1_onclick() As Boolean
'  Using the innerHTML method of the hyperlink object,
'  we will dynamically replace the link with a text box.
Hyperlink1.innerHTML = "‹input type=""text"" _
value=""New Text Box"" name=""NewText""›"
 End Function


'  The click event of the select box.
Private Function Select1_onclick() As Boolean
Dim selectoption As HTMLOptionElement

'  Increase counter.
cnt = cnt + 1

'  Create a new option element for the list.
Set selectoption = Document.createElement("option")

'  Set the value and display text to the count.
selectoption.Value = cnt
selectoption.Text = cnt

'  Add the new option to the select box.
Select1.Add selectoption
End Function


'  Click event of the text field box.
Private Function TextField1_onclick() As Boolean
'  Change the text in the text box.
TextField1.Value = "Clicked!"
End Function

When you click on the hyperlink, the innerHTML method of the hyperlink object changes and recompiles the HTML code for the hyperlink section of the page. That way, any HTML tags in the new text will be parsed and displayed. If you used the innerText function instead, the text would be displayed regardless of any tags in the text--in other words, you'd see the raw HTML. In this case, you replace the hyperlink with an HTML text element.

Each time you click on the select element, the code adds an option item. First, a new option element is created, using the CreateElement method of the document object. Next, the new object's value and text are set. The text is displayed, and the value of the new option is set for return to the server if a form were submitted. Note that each time you add a new option, the cnt counter increases. Finally, the code adds the new option to the list by using the Add method of the select list. This capability would be especially useful in such situations as dynamic queries of a database based on user actions--you could populate the list on the fly.

Now, you're ready to try out your new DHTML tricks. Figure F shows the application at runtime in the browser.

Figure F: At runtime, the Web page displays the hyperlink, text field, button, and select box.

Next, click on the hyperlink, text field, button, and text box. When you click on the hyperlink, it's transformed into an HTML element. Clicking on the text box changes the displayed text. Each time you click on the select element, you add a new option item indicating the count. And finally, clicking the button adds a new button to the bottom of the page. Figure G shows these results.

Figure G: Clicking on each type of Web page element yields a different result.

Conclusion

DHTML applications provide a powerful new user interface for Visual Basic. Combined with IE, IIS Applications, and SQL Server, you have a great delivery environment for applications that can run on your intranet or Internet sites. In this article, we touched on some of the many possibilities for using the power of DHTML from VB. You can extend these possibilities by integrating databases, business objects, and VB's extensive capabilities.