An Overview of Web Browser Express

 

John Kennedy
Microsoft Corporation

July 2004

Summary: Build your own Web browser that supports tabs and an integrated link to a search engine. (8 printed pages)

Download the WebBrowserExpress.msi sample file.

Contents

Introduction
The Benefits of Building on Other People's Work
Designing the Web Browser
How It Works
Points of Interest
Expansion Suggestions
Conclusion

Introduction

One Web browser feature that is growing in popularity is the ability to open different tabs, or sub-pages, within the same browser window. Using tabs to separate multiple pages keeps the desktop tidy, while browsing multiple sites. Several third party Web browsers offer this facility on Windows and other platforms, and if you're like me, you'll find it an addictive way to surf. Many browsers, either by default or through plug-ins, also provide a quick way to perform Web searches without having to go directly to a search engine. Wouldn't it be great to be able to write your own browser that could do all this, and also be able to fine-tune it and adjust it to exactly suit your needs?

ms379558.browserexpress-fig01(en-US,VS.80).gif

Figure 1. Design and implement your own Web Browser with Visual C# Express

Turning these feature cravings into an entirely new product might seem like a lot of work. After all, how many hours went into building Internet Explorer? (Answer: A lot.) How could I, just one person, possibly manage to duplicate the great HTML rendering features of Internet Explorer and add my own list of new features all in one evening's work? It's because I'm using Visual C# Express.

The Benefits of Building on Other People's Work

The secret to writing a Web browser in an evening is to make use of other people's work. In this case, the secret is to use the C# Express WebBrowser control. If you installed C# Express and opened up the help, you might have seen a topic called How to: Create a Windows Application with C# Express. This short project guides you through the steps involved in creating a Windows Form application. If you haven't worked through it, and you're new to C#, I recommend reading it.

The bottom line is that by making use of the controls that ship with C# Express, it's easy to create a multitude of applications, including an entire Web browser. Once the WebBrowser control is safely on your Windows Form, all you need do is tell it what URL to fetch and display, and whether to go back or forward or refresh or stop. All the hard work of connecting to the Internet, getting the data, formatting the HTML, displaying the graphics and so on, is handled by the control.

This project is similar to the Help project, except instead of a single WebBrowser control added to the Windows Form, multiple WebBrowser controls are created and added to pages in a TabControl. Yes, I didn't even need to write the code to create the TabControl. It's another example of drag-and-drop from the Toolbox to the Windows Form.

So, while I know this looks like a hugely complicated application that took months of work, the reality is that I just joined the dots between existing controls and did it all in an evening. Now that's my kind of programming!

Designing the Web Browser

ms379558.browserexpress-fig02(en-US,VS.80).gif

Figure 2. Dragging controls from the ToolBox is the key to writing this application

Here's how I went about creating the Web Browser Express project. After creating a Windows Application from the C# Express New Project dialog, I dragged the following controls to the Windows Form:

  1. TabControl: This control stores all the sub-pages that can each control a WebBrowser control. It's easy to add other pages to it, once it has been created. To make sure it fills the entire Windows Form, the Dock property is set to Fill. This keeps the control as large as the Windows Form, even when it is resized.
  2. MenuStrip: Although there are no menus in this application, the MenuStrip exists to provide an area at the top of the screen into which buttons and textboxes can be added. Plus, if you decided to add some menu options, this is where you do it. I dragged out the MenuStrip to make it a little larger.
  3. Buttons: There needed to be some simple controls for Web browsing. The buttons were dragged into the MenuStrip, resized, and had an image applied to them. The only thing I had to do was repaint the image background to make them pale blue, to look like the MenuStrip.
  4. Textboxes and ComboBoxes: As well as buttons, I needed a textbox for the URL and the Search string. In fact, the URL is a ComboBox, allowing the user to enter a Web address and also select items from a pull-down list. The list is populated in the designer, but you can programmatically add new items if you wish.
  5. PictureBox: The PictureBox control on the far right is for decoration. It displays some animation when the Web browser is downloading content.
  6. A timer: The timer object is used to fire off a message several times a second. This message is trapped by a method called timer1_tick(), and is used to change the image displayed in the PictureBox. The result is animation. Not the most elegant solution, but it works.

How It Works

When the program is launched, the first thing it does is call Create_a_new_tab(). This method creates a new tab page, adds it to the TabControl, and then creates a WebBrowser control on it. The WebBrowser URL is set to "home," whatever that maybe on your system. Here's the code that creates the new tab:

// Create a new Tab Page
TabPage newpage = new TabPage("Loading...");
tabControl1.TabPages.Add(newpage);

And here's the code that creates the new WebBrowser control:

// Create a new WebBrowser control.
WebBrowser webpage = new WebBrowser();       
webpage.Parent = newpage;
webpage.Dock = DockStyle.Fill;
webpage.DocumentCompleted += new WebBrowserDocumentCompletedEventHandler(webpage_DocumentCompleted);
webpage.GoHome();                              
            

This code makes sure that the parent of the WebBrowser is the Tab page. It also uses Dock set to Fill to make sure it too remains the full-size of the window. We also add an event handler: controls work by sending messages to your program. You get to choose what messages you want to listen to, and what methods are called by linking an Event Handler to the message. In this case, the message tells us that the WebControl has finished loading and displaying the site, and when it's done, it will call the method entitled webpage_DocumentComplete(). This allows us to define what code is executed when the page is loaded. For example, stopping the animation.

The last line in Create_a_new_tab() method enables the timer:

timer1.Enabled = true;      

The timer merrily sends little messages to timer1_tick(), which changes the image displayed in the PictureBox control, like this:

private void timer1_Tick(object sender, EventArgs e)
        {
            // This method is called by the timer, and we use it to update the
            // image displayed by the PictureBox control to create a simple
            // animation.

            image_animation++;
            if (image_animation > 10) image_animation = 0;

            switch (image_animation)
            {
                case 0: pictureBox_busy.Image = wbe.Properties.Resources.anim0; break;
                case 1: pictureBox_busy.Image = wbe.Properties.Resources.anim1; break;
                case 2: pictureBox_busy.Image = wbe.Properties.Resources.anim2; break;
...
                case 7: pictureBox_busy.Image = wbe.Properties.Resources.anim7; break;
                case 8: pictureBox_busy.Image = wbe.Properties.Resources.anim8; break;
                case 9: pictureBox_busy.Image = wbe.Properties.Resources.anim9; break;
            }
        }

You can see that each time the timer fires, a different image is displayed in the PictureBox. The images were loaded from disk using the dialog appears when you try to assign an image to a button or PictureBox control.

The rest of the program is event driven—specific methods are called when the user clicks on the buttons or enters a Web address or search string.

For example, the Web navigation buttons all call the current WebBrowser control. For example, if you click on the Back button, the following method is called:

private void button_back_Click(object sender, EventArgs e)
        {
            // Go Back - if the web control can go back, do it.
            WebBrowser thiswebpage = GetCurrentWebBrowser();
            if (thiswebpage.CanGoBack)
                thiswebpage.GoBack();
        }

When a URL is entered into the Address ComboBox, we use the WebControl's navigate method to fetch and display the page. The code below uses the text currently displayed in the ComboBox and passes it to the navigate method:

WebBrowser thiswebpage = GetCurrentWebBrowser();                
thiswebpage.Navigate(comboBoxurl.Text);
timer1.Enabled = true;  

Points of Interest

While writing this project, a few little tricks came to mind. Well, maybe they aren't actually tricks, but rather techniques that you might find useful when writing your own code.

Making the Text and Combo Boxes React to the Return Key

The Address ComboBox and Search TextBox allow the user to enter text, which is then used when the Go buttons are clicked. It's easy to extract the text from the control using the Text property. However, it's also nice to be able to press the return key on the keyboard, and perform the same action as if you had clicked a button. I got this to work by checking for the KeyUp message from the two text boxes. When the KeyUp message arrived, I checked to see if it was the Return key. If it was, I triggered the same action as the button click.

ComboBox rather than TextBox

The first version of Web Browser Express used a TextBox for both the Address URL and Search box. This worked well, but in practice it was annoying to always have to enter the URLs by hand each time. I deleted the TextBox and added a ComboBox, populating it with some URLs to get the user started. You can add your own from the ComboBox properties explorer.

All the trendy Web browsers have a text box that you can enter search words and get results back in a Web page, without having to browse to the search engine first. As MSN Search recently got an update, this seemed the ideal excuse to build the feature into my own Web browser.

This was very easy. All it took was a look at the history on MSN Search in Internet Explorer to see the format that the search string needed to be in. The Search method then appends the search text to the URL and navigates to it, and results come back as a standard Web page.

Animation

From the earliest days of graphical Web browsers, some indication that content is being requested from the Web is essential so the user doesn't think something has gone wrong with their computer, and everything has locked up. In general, it's always a good idea to let the user know something is happening and that they need to be patient.

This was one of my favorite parts of the project to implement, and if you have some degree of artistic talent, you can have a lot of fun creating the coolest logo you can imagine. In this case, I created a sequence of 12 or so frames in an animation program, and exported them as BMP images to load into C# Express.

ms379558.browserexpress-fig03(en-US,VS.80).gif

Figure 3. Adding graphics is easy. Select the Image property for a Button or PictureBox and you can import the images directly from disk. Make sure they are the right size before you begin.

Expansion Suggestions

If you have tried the Web Browser Express and have an itch to add your own features, then I did a good job with this article. To keep you busy, here are some ideas for improvements that you can make relatively quickly.

  • History: Keep track of all the Web sites you've visited, and make it easy to revisit them.
  • Auto-completion: The method that checks for the Return key could also check for previously entered URLs and complete them automatically. You could change the way this happens compared to Internet Explorer and only auto-complete when the Tab key is pressed for example.
  • Favorites: The ComboBox comes populated with six Web sites, which you can easily change from the Properties explorer. However, what about adding a new button to the MenuStrip that takes the current Web site being displayed and adds that to the ComboBox list? That way the user can build up a list of their favorite sites. You'll need some way of saving and reloading the list when the program is quit and restarted.
  • Integrated RSS reader: Keep one step ahead of the competition and try to build in an RSS reader into your Web browser.

Conclusion

The secret to creating an application with C# Express is to know what controls are available, and what you can do with them. In this case, it only took a few controls to construct a fully functioning Web browser. Good luck with your own programming.

John Kennedy is a Programmer/Writer in the C# User Education team. You can read his exploits in online Help authoring by reading his blog, at https://blogs.msdn.com/johnkenn.

© Microsoft Corporation. All rights reserved.