Step 2: Create a User Interface

Visual Studio 2008

It is now time to start to build the Web browser. You will use Visual Basic Express to build the user interface (the visible part that users interact with) by adding controls from the Toolbox to the form.

The Toolbox is on the left side of Visual Studio and consists of several tabs such as Data, Components, and All Windows Forms. Inside each tab is a set of entries that represent controls or components that you can add to your application. For example, the All Windows Forms tab has entries named TextBox, Button, and CheckBox that represent controls that you can add to your application by dragging them onto the form. Don't worry too much about the size of the controls; you will learn how to customize the look of your application in the next lesson.

You just added four controls to the form. Controls contain code that defines what the controls look like and what tasks they can perform.

Take, for example, the Button control— most programs have an "OK" button or an "Exit" button. While you could write your own code to draw a button on the screen, change its appearance when it is pressed, and perform some task when it is clicked, doing this for every program would quickly become tedious. The Button control already contains the code that is required to do these things. This saves you a lot of unnecessary work.

As you can see, the Toolbox contains many controls, and each control has a unique purpose. Panel controls can be used to hold other controls, such as the ones that you just added. Button controls are typically used to perform tasks when the user clicks them, for example, closing the program. TextBox controls are used to enter text on a screen through the keyboard. A WebBrowser control provides built-in Web-browsing capabilities similar to Internet Explorer—you definitely wouldn't want to write all the code for that!

In upcoming lessons you will learn how to customize the appearance of these and many other controls, and how to write code that defines their behavior. In addition to using the Toolbox controls, you can also create your own controls known as user controls—these are also covered in an upcoming lesson.

You just added all the necessary controls for your application. It probably looks rough and unfinished—because it is! In the next lesson, you will use the Properties window to set the properties that will control the appearance and behavior of your application.