Introduction

This tutorial will help you build a mini browser using IE engine. It is based on WTL and uses a wrapper class which I've wrote for handling IWebBrowser2 interface. Since I know it can be hard to read code, this tutorial will help you develop a mini browser - step by step.

Background

Most of my projects are related to internet browsing. I'm using SDI with HTML view a lot of time. Sometimes, I need to use real browser capabilities, so I've written a wrapper for IWebBrowser2. This wrapper class can handle a window which is embedded in IE. It can also handle events sinking in a very easy way (for example: OnDocumentComplete).

Creating a new project

We first start by creating a new WTL project. I assume you have WTL files installed (if not, check here). On the first wizard screen, select an SDI application and check for generating .CPP files.

On the second screen, change the default view to an HTML view.

First step will be to edit stdafx.h. Please include atlmisc.h (we'll use CString from time to time) and atlctrlx.h (for CMultiPaneStatusBarCtrl). We also need to comment out the _ATL_DLL definition (we don't want our executable to depend on atl.dll) and to change IE version to version 5.

Creating the address bar

We now have a working framework, but we still can't enter any URL there! To solve the problem, we'll create an address bar, so the user can enter a URL for navigating. We'll add a new member variable (CEdit) to our mainframe class - called m_URL. We'll create and initialize it from CMainFrame::OnCreate. Since we also want auto completion for our address bar, we'll use SHAutoComplete function on the edit control.

If we try to compile the project, we'll get an error while linking the files. This error occurs since SHAutoComplete is exported from shlwapi.dll. To solve it, we need to add the library (shlwapi.lib) to our project.

After compiling the project, we'll see our new bar waiting for us to type in. But hey! If we try to press the Enter key, our browser would just keep sleeping! Let's fix it!

Navigating

Since the HTML framework forwards all keystrokes to the HTML document, we can't just wait for the WM_CHAR message. We need to add some code to the PreTranslateMessage function. We need to grab the WM_CHAR message from the address bar and handle the VK_RETURN character.

Commands

We can now enter a URL and watch our browser navigate it. But something is still missing. Why can't we use back, forward and the rest of our new commands? We need to add their functions to our mainframe class (since there is nothing special there, simply check the source code to see how it's done).

UI Tweaks

Let's test our browser. Try to go to http://www.codeproject.com/ and click on the WTL section. Why can't we see the new location in our address bar? To fix it, we need to update the address bar each time our location changes. A good place is to handle the OnNavigateComplete2 from our view class. Since we need to update m_URL which resides inside the mainframe class, we'll create a new reference to it inside our view class and pass the variable on the constructor. We now can handle our message and update the address bar.

Another useful tweak includes a progress notification, secured icon, and status bar text. They all reside on the status bar. It's time to bring our big guns - CMultiPaneStatusBarCtrl! We'll create a new variable inside the mainframe class, plus a reference inside our view class. The status bar should contain 3 parts: the default text, a secured icon, and a progress notification. Since the default text has a unique id (ID_DEFAULT_PANE), all we need to do is to create additional two identifiers. From the "View->Resource Symbols" menu, we need to create our new symbols: IDR_LOCK and IDR_PROGRESS. After creating them, we can initialize our new status bar from the CMainFrame::OnCreate function.

File Command

To allow the browser to save and print files, we need to handle file messages. To send a command to the browser, we need to use the ExecWB function. To query a command status (for the UI map), we can use the QueryStatusWB function. We need to add the proper functions (for saving/printing), update the UI update map and handle their UI from the OnIdle function. Since it is fairly simple, I won't include it in the article (check the source code for more details).

Edit Command

Edit commands are a special case. Since they can be used with the browser, as well as with our address bar, we need to check our focus window each time we use those commands. First, we add them to the UI update map, then we handle their update via the OnIdle function:

Final Words

Please excuse me for any typing/grammar mistakes I might have made. English is not my natural language, so I make mistakes from time to time. You can use any part of the code posted with the article. If you use it within your software, please email me and let me know (don't worry - no money will be asked for it). Special thanks to Michael Dunn, Ed Gadziemski and PJ Naughter. I've learned a lot from their articles.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

Share

About the Author

Gilad was born accidently to a pair of old lesbians. His childhood was full of vibrators and drugs. Married without kids. Has 14 grandsons around the world, 4 crocodiles, 2 mushrooms and a green alien living behind the refrigerator.