This tutorial will at least introduce you to basic utilization of TWebBrowser. TWebBrowser is actually a wrapper to Internet Explorer web browser. Internet Explorer is by default installed in any Windows version starting from Windows 2000. Priorly you must install additional package or service packs to get Internet Explorer to your Windows.With TWebBrowser you are actually showing an interface to Internet Explorer. And you can harness all its power. You can even build a "new" web browser using it. New as in different look, different feel, new feature additions, and feature removals (as in feature hiding, ). Visit this page for official information on TWebBrowser.
Therefore this tutorial main purpose is to introduce you to the use of TWebBrowser, i.e. how to easily add the power of web browser to your application. To make this tutorial more usable, I will use Google Maps for our example material.
Let's say that we have been given assignment to develop program that:
- User could enter location information such as ZIP/postal code, street name, city name, and landmark name and then the program shows the map of the location using Google Maps service.
- Shows progress when querying google maps
- Shows the url of the page that currently showing
- Create new application, or VCL Forms application if you are using newer versions (D2009 and above) of Delphi.
- Drop a TPanel to the main form, name it Panel, set its Align property to alTop to make it sticks to the top part of the main form.
- Drop a TLabel and a TEdit in Panel. Name the TEdit as edtSearch. Adjust their position and size to match the next image.
- Drop a TStatusBar to the main form. Name it StatusBar. Add two TStatusPanel-s to it by clicking its Panels property in Object Inspector and use the property editor that pops up. For the first TStatusPanel set its Width to 300, and for the second one change its Style to psOwnerDraw. We need psOwnerDraw style for the second TStatusPanel since we will draw our progress bar here.
- Drop a TWebBrowser to the main form. Name it WebBrowser. Set its Align property to alClient. This will make it covers the whole "body" of the main form.
Problem 1: User could enter location information such as ZIP/postal code, street name, city name, and landmark name and then the program show the map of the location using Google Maps service
To solve this problem we will use edtSearch to capture the location information entered by the user, incorporate it into Google Maps' url, and then feed the result to our WebBrowser.
Google Maps Url
The basic of Google Maps' url is xxx - Google Maps, where the xxx part indicates the place to insert search parameter. Let's make this information a constant that can be used with Format function. We'll declare the constant in our interface section to make it available globally.
const GMAP_URL = 'http://maps.google.com/maps?q=%s';
Capturing search parameter
Here we want that search parameter is entered in edtSearch and the actual search operation is done after the user press enter/return key. Therefore we want to monitor OnKeyPress event of edtSearch to intercept the pressing of Enter/Return key.
Let's handle the OnKeyPress event and put the following codes for the event handler:
procedure TfrmGoogleMap.edtSearchKeyPress(Sender: TObject; var Key: Char); var vAddr: string; begin if Key=#13 then begin Key := #0; // to avoid the beep sound OpenGoogleMap(edtSearch.Text); end; end;
In the above code you can see that we intercept Enter/Return key pressing and then activate the Google Maps searching by calling OpenGoogleMap method and passing the content of edtSearch for search parameter value.
Opening Google Maps
Now that we have the search parameter, we can open Google Maps site and pass the search parameter there. This is done by OpenGoogleMap method. And the implementation of the method is:
procedure TfrmGoogleMap.OpenGoogleMap(const ASearchParam: string); var vAddr: string; begin vAddr := Format(GMAP_URL, [ASearchParam]); WebBrowser.Navigate(vAddr); // tells the web browser to visit the given address end;
this line: "vAddr := Format(GMAP_URL, [ASearchParam]);" will incorporate search parameter into Google Maps search url. Then we pass the result (vAddr) to our WebBrowser control as the url it must visit.
Problem 2: Shows progress when querying google maps
Depends on the internet connection speed that currently in use, the delay between submitting search and getting the actual map showing can be greatly varies. For very fast internet connection, the result seems to be instant, while for people who use dial up the result would be slow to show. The problem is for slow connection, the delay may makes users think that our program hung or that the operation was not successful. Therefore we need a way to tell users that the operation is currently in progress. The common way to indicate this is by showing progress bar.
We are going show the progress by drawing progress bar in the StatusBar, in its second TStatusPanel to be exact.
To do the drawing we have to set the Style of the TStatusPanel to psOwnerDraw and handle the TStatusBar's OnDrawPanel event. However we can not draw something before we know what to draw. In this case we have to know the progress values, i.e. the maximum progress and the current progress. We can get these fromOnProgressChange event of our TWebBrowser. We'll grab those values in the event handler, store it in private variable, then refresh the StatusBar display. Like this:
procedure TfrmGoogleMap.WebBrowserProgressChange(Sender: TObject; Progress, ProgressMax: Integer); begin FProgress := Progress; FProgressMax := ProgressMax; StatusBar.Invalidate; // refresh StatusBar display end;
FProgress and FProgressMax are our integer private variable. This way now the progress values are accessible through OnDrawPanel event of our StatusBar. Now we can easily write code to draw our progress bar.
procedure TfrmGoogleMap.StatusBarDrawPanel(StatusBar: TStatusBar; Panel: TStatusPanel; const Rect: TRect); var vRect : TRect; vProgress: Double; vWidth : Integer; begin vRect := Rect; InflateRect(vRect, 4, 4); if FProgressMax=0 then vProgress := 1 else vProgress := FProgress/FProgressMax; // calculating the progress bar dimension vProgress := vProgress * (vRect.Right - vRect.Left); vWidth := Round(vProgress); vRect.Right := vRect.Left + vWidth; // draw the progress bar StatusBar.Canvas.Brush.Color := clFuchsia; StatusBar.Canvas.Brush.Style := bsSolid; StatusBar.Canvas.Rectangle(vRect); end;
Problem 3: Shows the url of the page that currently showing
Technically our project is done. However there was still the last problem, i.e. to inform the user the actual url of the currently showing map. This actually very easy. We just need to handle events OnBeforeNavigate2 and OnNavigateComplete2 of our WebBrowser.
OnBeforeNavigate2 will be fired just before the TWebBrowser starts visiting a new url. The needed information, i.e. the url that is about to be visited, was provided in the event. So our code was as simple as this:
procedure TfrmGoogleMap.WebBrowserBeforeNavigate2(Sender: TObject; const pDisp: IDispatch; var URL, Flags, TargetFrameName, PostData, Headers: OleVariant; var Cancel: WordBool); begin StatusBar.Panels.Text := 'Start navigating to ' + URL; end;
OnNavigateComplete2 will be fired just after the TWebBrowser has been successfully visited the url. Note that the triggering of this event does not necessarily means that the page has been 100% loaded. And our code is:
procedure TfrmGoogleMap.WebBrowserNavigateComplete2(Sender: TObject; const pDisp: IDispatch; var URL: OleVariant); begin StatusBar.Panels.Text := URL; end;
Now we are done! If you compile and run the project then you might get something like this (it was showing Google Maps corresponding with search terms of "Gramedia, Medan" - bookstore in my city):
The complete source code is here ( GMaps_Demo.zip 5.31KB 474 downloads), feel free to use and improve it.
Edited by LuthfiHakim, 09 January 2012 - 06:56 PM.