(adsbygoogle = window.adsbygoogle || []).push({}); Introduction:

Hey guys, this is my second post in the VB.NET programming series, and within the first day at that . Once again, I have checked if this has been posted and no results have been found, so here we go.

Tutorial: #2 - Advanced Web Browser Tutorial

Required materials:

~ VB 2008 or 2010

Features:

We are going to make a web browser, that will have the following features:

- URL Bar W/ Go Button
- Favorites
- History
- Forward and Backwards controls

Video:

[Video is coming this week]

---

How to do it:

*ABOVE Public Class, put this code in:*

    Imports System.Net.WebClient

First, you're going to create a new WindowsFormApplication, OR open a project that is a WindowsFormApplication
You must login or register to view this content.

Now once you have done this, you may customize the form and such. You should see something similar to this on your screen:
You must login or register to view this content.

Now we will customize this. I'm going to call the browser "NGU Browser Tutorial". You can name it whatever you see fit. To do this, we will go to the "text" property in form1 and modify it.
You must login or register to view this content.

We have set the forms caption, now we will set the size, as obviously we don't want the opening size to be a small little box. My recommended size is: (926, 556). This looks like:
You must login or register to view this content.

Now to add some controls. First, I am going to add a MenuStrip for the top, for some easy access controls. I recommend setting this up BEFORE adding the web browser component, because the dropdown menu strip over the web browser can glitch in the editor (It does for me anyways).
You must login or register to view this content.

We are going to make 3 menu's. "Exit", "View", and "Tools". These are pretty standard for Web Browsers.
You must login or register to view this content.

In Exit, Just Double click the item, and in the code put:

    me.close

In "View" we are going to put the following SUB items: "Refresh", "Stop", "Go Forward", "Go Back", and "Zoom". We are also going to make the following sub items of "Zoom": "50%", "75%", "100%", "125%", "90%", "100%", "125%", "150%", "175%, and "%". You can also add some dividers via the arrow on the side, to make it look more organised.
You must login or register to view this content.

Finally, in "Tools" we are going to put the following SUB items: "Favorites", "History". You can also add some dividers via the arrow on the side, to make it look more organised.
IMG NOT AVAILABLE

Now we are going to add a "Table Layout Panel" and set the dock property to "fill". This is so that if the user maximizes the window, the controls aren't restricted to that size, and there isn't a lot of dead space. You can remove the vertical column, as we are not going to need it.
You must login or register to view this content.

You must login or register to view this content.

In the bottom portion, now you can add in the "WebBrowser" component into the bottom part of the table layout.
You must login or register to view this content.

In the top portion, we are going to drag a "Flow Layout Panel" onto the "Table Layout Panel". This is so we can put multiple controls in the portion. Also click the little arrow and click "Dock in parent container"
You must login or register to view this content.

We are going to drag 5 button's and a textbox onto the Flow Layout Panel. Put it in order as given: A "Back" button, "Forward" button, "Refresh Button", "Stop" Button, then put the textbox (set the length judging by visuals) and finally a "GO" button. The textbox is where people will type the URL, so make sure it fits according to the forms length and still fits the other buttons. Make the textbox multiline to fit the vertical height to align. Set a different font/font size/color if you want to be more stylish.
You must login or register to view this content.

Now for the coding.

Let's start with the button. Double click the "GO" button, to add the components section to the code editor. Now we are going to put the following code in:
You must login or register to view this content.

Here is the code to copy:

    WebBrowser1.Navigate(TextBox1.Text)

Now double click the "Stop" button to add the components section to the code editor. Now we are going to put the following code in:
You must login or register to view this content.

Here is the code to copy:

    WebBrowser1.Stop()

Now double click the "Refresh" button to add the components section to the code editor. Now we are going to put the following code in:
You must login or register to view this content.

Here is the code to copy:

    WebBrowser1.Refresh()

Now double click the "-->" (forward) button to add the components section to the code editor. Now we are going to put the following code in:
You must login or register to view this content.

Here is the code to copy:

    WebBrowser1.GoForward()

Now double click the "<--" (back) button to add the components section to the code editor. Now we are going to put the following code in:
You must login or register to view this content.

Here is the code to copy:

    WebBrowser1.GoBack()

Now for the menu strips.

Double Click "Refresh" to bring it up in the code editor. Now add the following code:
You must login or register to view this content.

Here is the code to copy:

    WebBrowser1.Refresh()

Now Double Click "Stop" to bring it up in the code editor. Now add the following code:
You must login or register to view this content.

Here is the code to copy:

    WebBrowser1.Stop()

Double Click "Go Forward" to bring it up in the code editor. Now you can add the following code:
You must login or register to view this content.

Here is the code to copy:

    WebBrowser1.GoForward()

Double Click "Go Back" to bring it up in the code editor. Now you can add the following code:
You must login or register to view this content.

Here is the code to copy:

    WebBrowser1.GoBack()

Now for the zooom functions!

Add a new textbox anywhere on the form and set its "visible" property to "false".

Now add this on all of the zoom items, just change the ZOOM percentage.
You must login or register to view this content.

Here is the code to copy:

    ' CHANGE 50 TO THE ZOOM VALUE!

        TextBox2.Text = "50"

        Dim Value As Integer

        If Integer.TryParse(TextBox2.Text, Value) Then

            WebBrowser1.Document.Body.Style = String.Format("zoom: {0}%", Value)

        End If

NOW FOR THE HISTORY AND FAVORITES!

History:

PLEASE NOTE! The history only stores the history of the session while its open. If you restart it, it will not reload the past history. Also the history only starts recording once you launch the window. I tried to make an all time history but for some reason its not saving.

First we need to add a new form to our project. To do this, go to "Project" --> "Add Windows Form..."
You must login or register to view this content.

Now we need to resize the form.
You must login or register to view this content.

Add a textbox. Now we need to make the textbox Multiline. Set the multiline property to "true". Now set the dock property to FILL.
Now we need to set the "isReadOnly" property to "True" as well, this is so the user cannot modify the history.

Now add the following code to the GO button:
You must login or register to view this content.

Here is the code to copy:

    WebBrowser1.Navigate(TextBox1.Text) ' THIS WAS IN HERE BEFORE

        ' THIS IS THE NEW STUFF

        Dim timeStamp As DateTime = DateTime.Now

        Form2.TextBox1.Text = Form2.TextBox1.Text & TextBox1.Text & vbCrLf & DateTime.Now & " >>>>>>>>>>>>>>>  " & TextBox1.Text

        My.Settings.Save()

        TextBox1.Text = My.Settings.History

There you go. Now just REPEAT THIS PROCESS FOR FAVORITES, Except make a favorite button and attach the code to that. I would add it below as well, except its the same code and stuff, and this thread is getting INSANELY long.

Planning on bringing more and better tutorials soon