Visual Basic for the intermediate user:
Creating a web browser
By: Nick Hosein
Table of Contents
iii
Table of Contents
Overview ....................................................................................................................................v
What you should know before you begin ............................................................................. vi
What you should have before you begin .............................................................................. vi
Security ................................................................................................................................. vi
Planning the application ........................................................................................................... 3
Wire Framing............................................................................................................................. 4
Pseudo Code ............................................................................................................................. 5
Building the application ............................................................................................................ 9
Creating the GUI.................................................................................................................... 9
Adding actions to elements ................................................................................................ 15
Defining actions ...................................................................................................................... 19
So what did I just do? .......................................................................................................... 19
Using the debugger ................................................................................................................. 23
What is the debugger? ........................................................................................................ 23
Troubleshooting .................................................................................................................. 24
Index........................................................................................................................................ 25
Introduction
Overview
This manual is a guide to create a fully functional web browser using Microsoft
Visual Basic. My goal for writing this manual is help beginners with some prior
knowledge of Visual Basic learn more about the programming language and its
capabilities. As you proceed through the step-by-step process on creating a web
browser, you will be putting your prior experience with the language to the test by
building a more advanced application than the famed “Hello World!” applications.
v
What you should know before you begin
You should have some prior knowledge of the Microsoft Visual Basic programming
language, but knowing advance algorithms and complex strings is not necessary.
General understanding of the concept of strings, structures, functions, sub routines,
and the GUI (Graphic User Interface) design is necessary for this manual.
What you should have before you begin
This manual will be going through the step-by-step process of making a web browser
in the Microsoft Visual Basic 2010 Express version. You can have the regular, nonexpress version if you like, but it may be slightly different. The express version is
free, but at the end of the first 30 days, you will need to register with Microsoft, but
that is free as well.
Security
Take note that the web browser you will be creating is not nearly as secure as
Windows Explorer or Mozilla Firefox. Your basic internet protection software will
not be able to keep you safe, as the browser is missing many features which protect
your computer and your privacy.
Chapter 1:
Planning the application
Chapter 1
3
Planning the application
Planning out the application you are going to make is an important first step that all
programmers, even experts, take when creating a new application. There are two
steps in planning the application. First is the “wire framing” of the application. What
do you want the application to look like? Second is the “pseudo code” for all the user
interface of your application. What will each button do?
Wire Framing
To start out your wire framing, you want to figure out what shape the form you are
creating is going to be. On paper you want to draw it very large so that you can draw
in all the buttons and other user interface features without running out of space. It is
common to abbreviate the name of the buttons while on paper, but remember to write
out the full name when you create the application. It is also common for programmers
to write out the pseudo code as they create the buttons on their application.
As this manual is going to direct you step by step on how to create your application
Graphic User Interface (GUI), this is only an introduction to a necessary step that you
will have to take when you begin writing your own programs.
Chapter 1
5
Pseudo Code
While drawing out your buttons and other various features on your wire frame, most
programmers tend to write out their pseudo code for each of the buttons. Take the
“go” button for instance. What will its function be? Simple, to take the user to the
directed web address. But how would a programmer write this in pseudo code? An
example is shown below.
Go.button
Web browser navigates to text in textbox
The above text is a common way for Visual Basic programmers to write their pseudo
code so when they are making the program they can easily remember what the button
is going to do and program the function. This manual is going to give you the code
necessary to program the operation performed by each button, so writing pseudo code
is not necessary.
Chapter 2:
Building the application
Chapter 2
Building the application
Creating the GUI
1. Startup Visual Basic 2010 Express.
2. Select File, which is located in the top left corner, and select New Project.
3. Select Windows Forms Application. The new project window page will be created
and labeled as “Form1”.
4. On the right side of the screen there is a “Properties” area. Scroll down to the
“Text” label that has “Form1” directly to the right of it. Change “Form1” to “Web
Browser” (Shown in figure 2.1). Now the top left corner of your blank application
should be labeled “Web Browser”.
Figure 2.1
9
5. Increase the size of the form by dragging the bottom right corner of the form. You
can fine tune the size of the form after step seven.
6. Next step is creating your buttons. These buttons will consist of:
-Go
-Home
-Refresh
-Stop
-Forward
-Backward
7. Make six buttons and arrange them on the form as depicted in figure 2.2
Figure 2.2
Chapter 2
11
8. Next label the buttons in order from left to right as Home, Refresh, Stop, Back,
Forward, and Go. To label the buttons, do as you did for renaming the form, but with
the button selected.
9. Now add a text box in between the Forward button and Go (Depicted in figure
2.3).
Figure 2.3
10. After creating the text box, make a label to the left of the text box that says
“URL”. To change the name of the label, go to the properties and find the Text section
as you did to rename the form.
11. Add the Menu Strip to the top right corner as depicted in figure 2.4.
Figure 2.4
Chapter 2
12. Click the “Type Here” section of the Menu Strip. Label it “Menu”.
13. Click the Menu Strip down arrow on the right corner of the Menu box.
14. Click MenuItem.
15. Label the box that was created “Print”.
16. Label the next box “Exit”.
17. Next we have to create the actual object where we view the websites. Locate
WebBrowser tool in the tool box and create the object as depicted in figure 2.5
Figure 2.5
13
This is all for the layout of interface elements. The next section will address the
assignment of actions to the elements.
Adding actions to elements:
*Note: All actions will be explained in the following section. For now follow the
steps to create the web browser.
Chapter 2
15
Adding actions to elements
1. The first button we will address is the “Print” button located in the “Menu” that we
created in steps 13 and 14. Double click “Print”. This should bring you to a screen
that looks like figure 2.6.
Figure 2.6
2. Insert the following code on the blank line directly above End Sub:
WebBrowser1.Print()
3. Next click the “Form1.vb [Design]*” tab, which will take you back to the GUI that
we created in the previous section. From here you want to double click the Exit button
that is in the menu below the Print button.
4. On the blank line (Same as in previous step, except for this particular element)
insert the following code: End
*Note: End should turn in the same shade of blue as “End Sub”
5. Double click the Home button.
6. Insert the following code on the blank line: WebBrowser1.GoHome()
7. Double click on the Refresh button.
8. Insert the following code on the blank line: WebBrowser1.Refresh()
9. Double click on the Stop button.
10. Insert the following code on the blank line: WebBrowser1.Stop()
11. Double click on the Back button.
12. Insert the following code on the blank line: WebBrowser1.GoBack()
13. Double click on the Forward button.
14. Insert the following code on the blank line: WebBrowser1.GoForward()
15. Double click on the Go button.
16. Insert the following code on the blank line: WebBrowser1.Navigate(TextBox1.Text)
Chapter 2
17. The code should look like figure 2.7
Figure 2.7
17
18. Single Click on the Web browser space on the design form.
19. In the properties section locate URL and type in a website. For all intents and
purposes, I am typing in “www.unt.edu”.
20. Press the debugger button at the top to start your application and see if everything
is functioning properly. The next chapter will go in to a brief description on the uses
of the Debugger. Your application should appear as it does in figure 2.8.
Figure 2.8
The next section will explain to you what you did in this section and how it all works.
Chapter 2
19
Defining actions
So what did I just do?
You just created a GUI using Microsoft Visual Basic’s easy click and drag form design
system and wrote the code for each object on your form. You should now have a working
browser. If not, there is troubleshooting at the end of the debugging section.
Since most of the code in Visual Basic is automated commands, there isn’t much to write
except the object and what action is assigned to the object. It is all pretty straight forward and
easy to learn, making Visual Basic an extremely simple language to program in.
Chapter 3:
Using the debugger
Chapter 3
23
Using the debugger
What is the debugger?
The debugger is a program that is part of Visual Basic and allows the programmer to test out
the application they are making. The debugger offers more to the table than just running
your program, it also tells you about any errors and where they are located. The errors may
seem cryptic to the untrained programmer, but the error codes can give all the information
you need to solve the problem. When there is a vast amount of code, the debugger can be
less useful with its error codes, because the codes will tend to offer a more broad solution.
Troubleshooting
I have compiled a list of common errors that you may have received while creating your web
browser. If the error you received is not listed below, I suggest carefully going back over the
steps and making sure everything is exact. If that does not solve it, I suggest resorting to a
search engine and looking through forums.
“Compiler error: Syntax
error”
This basically means you have
a spelling error. Just go back
and make sure the code
matches my code.
“Invalid Outside
Procedure” “Only
comments may appear after
End Sub, End Function, or
End Property”
This code means that you have
text somewhere that there is no
text allowed. By using cut and
paste you can reposition the
code to its appropriate place.
“User-Defined Type Not
Defined”
This just means you don’t
have the write data type in
your project. To fix this, check
the declaration for that
variable/parameter and make
sure there isn’t a typo and that
you have selected the relevant
reference.
“Ambiguous Name
Detected”
This code means that your project has
more than one procedure that has the
same name. Look for the declarations
that are highlighted and remove one of
them.
Index
Index
Debugger, 18
GUI, vi, 4, 9, 16, 19
Pseudo Code, 5
URL, 12
user interface, 3, 4
wire framing, 3, 4
25