Integrating IE in Your VFP Apps

Remi Caron
Okay, we all know that the browser is an integral part of the operating system. That much
has been made clear. What may not be clear to you is that you can incorporate the
browser in your own Visual FoxPro applications just as inextricably. Remi Caron explains
how.

In this article, I'll show you around Internet Explorer. Most of you probably use this very
cool control to surf the Internet. What you can do with it in your own application
development is the focus of this article. The samples provided in this article are written in
Visual FoxPro, but there's no reason at all to stop reading nowthe samples work for
anybody in any language. Look through the code, feel the power, and deploy it in your
own development.
IE as your VFP desktop
Let's start off with something lightputting up Internet Explorer as an active desktop in
your development IDE (see Figure 1). You could have your favorite newsgroup or Web
site in the background while you do your work. (Note: The links will work just like they
do in the browser.)

Figure 1. Internet Explorer embedded in your IDE.

Now let's take a look at the huge amount of work we need to perform to accomplish
this. First, create a form that contains the following controls:
A text box to type in the URL.
The Web browser as an ActiveX control, as shown in Figure 2.

 A Go button to actually start the navigation of the Web browser control.

Figure 2. Select the Microsoft Web browser control in the FoxPro Options
dialog.
If this ActiveX control isn't installed on your system, you can download it free of
charge from www.microsoft.com/ie.
Now, create a form and place the controls on it as shown in Figure 3.

Figure 3. Desktop form with the Internet Explorer ActiveX control.

Next, set the properties as shown in the Properties Window. As you can see in the
Properties Window, there are three form methods in which the code for this example is
placed. I'll address them now:
* form: Init Event
*----------------* Set initial values for the form and the controls
WITH This
* Set address to the build in webpage
.txtAddress.Value = "About:blank"
* Navigate: call click event of the navigate button
.Navigate()
* Move browser control to the left of the form
.oBrowser.Left
= 0
.Visible = .T.
* Call resize method so the activex will be resized
.Resize()
ENDWITH

All this method does is navigate to the browser's internal page, set the form visibility to
true, and call the resize event to adjust itself to the size of the IDE frame. This way, the
browser fills the desktop.
* form: Resize Event
*------------------* Resize the browse each time the form is rezised.
WITH This.oBrowser
* Set the browser height keep address box visible
.Height = Thisform.Height - .Top
* Set the browser width
.Width = Thisform.Width
ENDWITH

* form: Navigate
*--------------* Call the navigate method in the ActiveX
Thisform.oBrowser.Navigate(ALLTRIM( ;
Thisform.txtAddress.value))

The navigate method will be invoked by the Go button on the screen as well.
* Go Button: Click event
*-------------------Thisform.Navigate()

Finally, there's one more "gotcha" you need to know to get this working properly.
There's one thing you must do to be able to run the form (thanks to Ken Levy for this tip).
In the Refresh() method of the browser control, include NODEFAULT. If you forget,
you'll get the error message shown in Figure 4 every time the control is refreshed.
After creating the form as specified, you can simply run it from the Command Window
with the following statement: DO FORM desktop. Done! That's all it takes to get this
working. The forms are in the Download file. (The Web browser control itself can't be
included.)

Figure 4. FoxPro error when using IE as ActiveX.

Using the information you're browsing
As you probably know, there's a lot of information out there on the Web you might use in
your professional life to help you with your work, such as newsgroups and knowledge
basesbut, actually, there's too much information. For example, the Microsoft
Knowledge Base is loaded with information you don't need. Normally, you work with two
or three programming languages, some other generic tools, and a Windows X platform.
Finding information in those huge databases can be a tedious task. Once you find it,
one of your colleagues might be searching for the same piece of information in the near
future. Why make them go through the same tedious search? To solve this "problem," I
came up with the idea to build a subset of the Microsoft Knowledge Base for our own
company. This knowledge base holds just those pieces of information that are of interest
for my colleagues and me. Although I only scratch the surface of it here, you get the idea
behind it and can take it on from there.
To store the information, we need a table. The structure of the table is shown in Table
1.

Table 1. The table's structure.

Field
Art_id
Art_categ
Article
Url

Type
Character
Character
Memo
Memo

Width
10
30

Decimals
0
0

The next thing we need is a FoxPro form with a reference to an instance of Internet
Explorer. The screen is shown in Figure 5. Since the screen is included with the Download
file, I won't go over all the code here, but I will address the important pieces of the code.

Figure 5. Building your personal knowledge base.

In the screen shot, you can see the selected text in the Web browser also entered into
the knowledge base screen. This is done by highlighting the text in the Web browser, and
then pushing the New button in the knowledge base form. The user will then be prompted
for a category; once that's selected, the selected text will actually be added to the
"personalized knowledge base."
The most import thing you should get from this example is how to access the
information inside the browser (in fact, you want access to the loaded document). Getting
access to the information inside the document is pretty easy. The browser lets you access
the loaded document as an object through the DOM. The Document Object Model is the
reference material you should dig into. Once you do, you'll discover the power of it, and
you'll learn how to use that power for your own needs. In the sample form, I accessed the
selected information in the instance of Internet Explorer, which is also shown in the screen
shot. To make this work, we need a reference to the instance of IE from within the
knowledge base form. This is done in the Init of the form:

* Init
* create a reference to IE and navigate
* to your favorite website make IE visible
WITH Thisform
.AddProperty("oBrowser", CREATEOBJECT( ;
"internetexplorer.application"))
.oBrowser.Navigate("http://www.foxcentral.net")
.oBrowser.Visible = .T.
ENDWith

Now that we have a reference to IE, we can start looking for information we might
want to store in our own private knowledge base. I selected some text in IE and pressed
the New button of the knowledge base screen. The code behind the New button does
some checking and adds a record to the table with the selected text. The FoxPro code to
add a record and do the checking is left out of the text but can be found in the Download
file. Let's analyze the line of code that gets the selected text from IEthat's what matters
here:
* cmdNew: Click
lcArticle = ThisForm.oBrowser.Document. ;
selection.createrange.htmltext
* include the URL of the page
lcAddress = ThisForm.oBrowser.LocationUrl

The line of code that assigns a value to lcArticle is fairly long. Let me break it down:
Thisform.oBrowserGets into IE through the form.
Thisform.oBrowser.DocumentGets down to the document level.
Thisform.oBrowser.Document.SelectionGives us access to the selected text inside
the document.
Thisform.oBrowser.Document.Selection.CreateRangeCreates a range object of the
selection.
Thisform.oBrowser.Document.Selection.CreateRange.HTMLTextReturns the text of
the range object.
Now, about that line that assigns a value to lcAddress: To give my colleagues a chance
to read more than the selected text of the page, I also put in the table the URL of the page,
which they can visit by clicking on the Refresh button on the form.
This is all there is to building a very simple personal knowledge base system. This is a
simple example, of course, but take the idea behind it and utilize the power of IE in your
development efforts for either yourself or your customers.
A user-adjustable Help system
The first example showed how to get information out of a document that was loaded into
IE. But, if getting text out is possible, then putting text in should be possible too, right?
But for what purpose? Well... how about a user-extendible Help system? I started out with
a simple form as shown in Figure 6. As you can see, there are many "normal " FoxPro
controls on it, but the black spot is Microsoft's Internet Explorer as an ActiveX control.

Figure 6. Help screen in design mode.

The list on the left side will show the Help topics available to the user. In the browser,
the information will be displayed in an HTML presentation. The buttons in the toolbar
speak for themselves.
The way the information is shown can be adjusted using any HTML editor to modify
the HTML page that represents the page. The HTML page is very simple, and its content
is shown in Listing 1.
Listing 1. Content of the HTML page.
<HTML>
<HEAD>
<meta http-equiv="Content-Language" content="nl">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>New Page 1</title>
</HEAD>
<BODY>
<P>
<DIV id="Helptopic" align="center" style="font-size:16pt;color:red;">
Help topic
</DIV>
</P>
<P>
<DIV id="helptext" align="left" style="font-size:10pt;font-family:verdana;">
Helptext starts here
</DIV>
</P>
</BODY>
</HTML>

As you can see in the HTML code, there are two IDs added: "HelpTopic" and
"Helptext." These IDs will be used from within our code later on to display the Help
content instead of the text that's displayed here right now. When you look at this code
rendered in a visual tool, you'll see something similar to Figure 7. You can use this page to
modify or extend its capabilities using FrontPage or another HTML editor.

Figure 7. The Help display HTML form in FrontPage.

Big deal, right? Well, actually, it is, because the whole Help system is viewed by the
users by adding the requested information in this one page, depending on the chosen topic
in the Help screen. The screen in action will look something like Figure 8.

Figure 8. The Help screen in action.

The normally raw data is now displayed in a page that can be modified to be more
appealing to its users. Let's face itoften times, a developer isn't the right person to write
Help text. So why not give the users of the system the option to change it themselves? The
ability for us to modify our tool is a feature of FoxPro itself we like so muchthink of
IntelliSense, for instance. Again, I'm only showing the snippets with the gotcha'sthe rest
you can explore by opening the screen in the Download file.
The browser's refresh command still gets the NODEFAULT for reasons explained
earlier in this article. In this particular case, I added a little loop to give IE the time to
initialize and load the HTML page properly.
* Form: Init
This.oBrowser.Navigate(CURDIR() + "help_topic.htm")
DO WHILE .T.
* 4=READYSTATE_COMPLETE
IF This.oBrowser.readyState = 4
EXIT
ENDIF
ENDDO
ThisForm.grdttrade.SetFocus()

The interaction between the data and the HTML form is as follows: I use the DOM to
get through the browser into the document. This is the code to make the HTML document
represent the information in the table for the selected topic. As I mentioned earlier, in this
method, I refer to the IDs that I placed on the tags in the HTML page.
* AfterRowColChange
WITH Thisform.oBrowser.Document.all
.Helptopic.Innertext = ALLTRIM(ttrade.topic)
.Helptext.Innertext = ALLTRIM(ttrade.details)
ENDWITH

It's a simple solution but flexible and extendible, and the source code is available in this
article's Download file, so you can play around with it and maybe embrace and extend it to
fit your own needs. If you want to deploy it for more than one customer or project, the
only thing you need to do is adjust the HTML file's look and feel, and you're done.
Next time, I'll show you how to use Internet Explorer as a content management tool
for data-driven Web content.
Download 04CARON.ZIP
Remi Caron is the CTO and co-founder of BizzView B.V. in The Netherlands. He's been programming in
FoxPro since Foxbase version 1.02. These days, his company uses all the Visual Studio tools available,
but FoxPro still has a special place in his developer's heart. In addition, he's president of the Microsoft
section within the Software Developers Group Netherlands. Remi.Caron@Bizzview.com.