Creating a Program in Visual Basic: Web Browser

This Instructable explains the process of creating a simple web browser application in VB.NET

It is designed as a followup to my first VB.NET Instructable: Creating Your First Program In Visual Basic. It is recommended that you read through that instructable first, as this instructable assumes you have a basic knowledge of the Visual Basic Express Edition Interface, as covered in my other instructable.

Although Visual Basic 2005 Express Edition work fine for this instructable, I am using Visual Basic 2008 Express Edition, available from Microsoft

Step 1: Create the Project

Create a new Windows Forms Project, and call it Web Browser. Resize the form to your liking.

Step 2: Add the Controls, and Change Properties

From the toolbox, drag a TextBox, WebBrowser and A Button onto the form. Place them like they are in the picture. Then, edit the Anchor property of the TextBox and WebBrowser so that all of the boxes around the grey square (shown when you edit the anchor property) are selected, this will allow the controls to 'stretch' when the form is resized. Do the same for the Button, but only set it to "Top, Right".
Also change the Text property of Form1 to Web Browser, or something similar to change the title bar.

Step 3: Code!

Double click on Button1, and add the following code to the editor, after the "Private Sub" line and before the "End Sub" Line

WebBrowser1.Navigate(TextBox1.Text)

This code simply tells the program:
When someone clicks Button1, Get WebBrowser to Navigate to whatever is in TextBox1
That's It! You have a functioning web browser. Click the play button to test it out.

Step 4: More Stuff

Now, you didn't think I was just going to give you one line of code - did you?

Over the next few steps, we will implement the following:

Address bar that changes as the page changes
Back, forward and refresh buttons
Status bar.

Step 5: Adress Bar

At the moment, all out address bar does is show the page that you type in, if you click on a link, the change is not reflected in the address bar. To fix this, we need to add some more code

Go back to the design view, click on "Form 1.vb (Design)" and then double click on the WebBrowser control. It will switch back to the code view, however there will be some more code there, notice that it says "WebBrowser1_DocumentCompleted", this is the code we want, so we don't need to make any changes here, but there is a blank line under that one, before the End Sub statement, and we want to add some code there. Type the following in there

TextBox1.Text = WebBrowser1.Url.ToString

This tells the program that once WebBrowser1_DocumentCompleted, we should change TextBox1.Text to the WebBrowser1.Url. The ToString is there because, by default, the URL property of the web browser is not the same data type (string), as needed by our text box. The ToString writes the URL to a string for the TextBox.

Step 6: Action Buttons

Switch back to design view and drag 3 new buttons onto the form and position them. Change the Text property of each: Button2 = Back, Button3 = Forward and Button4 = Refresh. If you position them like mine, adjust the anchor property of Refresh to Top, Right

Double click on the Back button, and type the following code.

WebBrowser1.GoBack()

Back to design, double click Forward and type

WebBrowser1.GoForward()

Design view, and a double click to Refresh.

WebBrowser1.Refresh()

Test the browser, and try out the new features.

Step 7: Status Bar

Back in design view, add a label, change the Text to "Loading..." (without the quotes)
Now, go into code view by clicking on the Form1.vb tab. Find the WebBrowser1_DocumentCompleted entry and type below the code you placed there earlier

Label1.Text = "Done"

Now, click up where the code says DocumentCompleted. Move your mouse up to where the two Drop down boxes are. Select the second one (The one that says DocumentCompleted) and select Navigating. Then, some new code will appear - type

Label1.Text =  "Loading"

This just provides an indicator when the page is loading.

Also, you might want to set the anchor property of the label.

Step 8: Comlete!

There you go. You have a fully functioning web browser. Keep on customising it as you wish.

As in my first instructable. I have some homework for those who complete this instructable.
Implement the following: