Integrating IE in Your VFP AppsRemi 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 now—the 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 desktopLet's start off with something light—putting 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.WidthENDWITH

* 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 browsingAs 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 bases—but, 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 Type Width DecimalsArt_id Character 10 0Art_categ Character 30 0Article MemoUrl Memo

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 IE—that'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.oBrowser—Gets into IE through the form.• Thisform.oBrowser.Document—Gets down to the document level.• Thisform.oBrowser.Document.Selection—Gives us access to the selected text inside

the document.• Thisform.oBrowser.Document.Selection.CreateRange—Creates a range object of the

selection.• Thisform.oBrowser.Document.Selection.CreateRange.HTMLText—Returns 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 it—often 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 much—think of IntelliSense, for instance. Again, I'm only showing the snippets with the gotcha's—the 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: InitThis.oBrowser.Navigate(CURDIR() + "help_topic.htm")DO WHILE .T.* 4=READYSTATE_COMPLETE IF This.oBrowser.readyState = 4 EXIT ENDIFENDDOThisForm.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.

* AfterRowColChangeWITH 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.