Using IE 4 as a User Interface

VB Articles

HTML is becoming a standard interface, as many users are familiar with web browsers it makes sense to model your are applications around this interface.

In this tutorial you will learn how to respond to the web browser control's events.  The program we will create, will display a message box box when you click on the icons (configuration or search).

Note: You need Internet Explorer 4.01 installed on your system for this tutorial.

Step 1.
Creating a new program and adding components

Start VB and select Standard EXE.  This program use the Internet Explorer Webbrowser control so select Components... from the Project menu.  Make sure there is a check next to "Microsoft Internet Controls" and click on OK.

The Webbrowser only has a limited number of events, to use the other events generated by Internet explorer we need to add a Reference to Microsoft HTML Object Library.
To do this click References... from the Projects menu.  Click Browse... and find the "mshtml.dll" file.  It should be in the system directory.

Step 2.
Creating the interface

The interface for this program is an html file.  The buttons this program responds to are created using this code

<a id="search" title="Search" href="#">
<img src="Search.gif" width="100" height="77" border=0><br>
Search
</a>

When an item is clicked on the program acts depending on what the element's ID is.

When the program loads it loads the interface from a HTML file.

Private Sub Form_Load()
    Web1.Navigate App.Path & "\internet_interface.htm" ' Load the user interface
End Sub

You can download internet_interface.htm and the rest of the project at the end of this article.

Step 3.
Adding a HTMLDocument object.

Now our program has to respond to the user clicking on the icons.  To do this we must add another object.

In the declarations section of the form add this:

Dim WithEvents HTMLpage As HTMLDocument

This object allows use to access the events of the Webbrowser's HTMLDocument.

HTMLpage needs to be associated with the Webbrowser control's Document using the code below.

Private Sub Web1_BeforeNavigate2(ByVal pDisp As Object, URL As Variant, Flags As Variant, TargetFrameName As Variant, PostData As Variant, Headers As Variant, Cancel As Boolean)
Set HTMLpage = Nothing
End Sub

Private Sub Web1_DocumentComplete(ByVal pDisp As Object, URL As Variant)
    'may be word or some other server
    On Error Resume Next

    If pDisp Is Web1.Object Then Set HTMLpage = Web1.Document
End Sub

Step 4.
Responding to events.

The final step of this project is to respond to the click events.  From the code window select the HTMLpage object from the list on the left and select the onclick event.  Add this code.

    ' the element may not have an id
    On Error Resume Next
    Dim CompareID As String
    Dim curElement As IHTMLElement

    Set curElement = HTMLpage.parentWindow.event.srcElement ' Get a reference to the selected element

    'If current item does not have an id use the parents ID
    If Len(curElement.id) > 0 Then
        CompareID = curElement.id
    Else
        CompareID = curElement.parentElement.id
    End If

    Select Case CompareID
        Case "config"
            MsgBox "The configure button was Clicked"
        Case "search"
            MsgBox "The search button was Clicked"
        End Select

Step 4.
Running the program

Now press F5 to run the program.  Clicking on the pictures will display a message box. You could easily change this so it opened a form or performed some other action.