Home -> Programming -> Planning -> Basic Controls

Basic Controls

Introduction

The purpose of writing a computer program is to transform user input into desired output. Before we start learning the many ways of making these transformations (processing), we must learn how to display information on the screen (Output), and receive information (Input) from the user through the screen. Historically, the two main types of program input/output.

Program Input / Output

The two main types of Input/Output are

Line input/output is simpler to create and the oldest form of computer IO (input/output). Since one of the main reasons for creating Visual BASIC was to provide more flexibility in representing information on a form, we will be focussing primarily on form IO. VB is very good at this, and because most of the code for it is already written, it is fairly simple to do. What complicates the matter is that there are so many different types of data, and for each type there is often more than one way to represent that data. The most common type of data is text, but we can also display images, choices, tables and so forth. For each type of data there is a different control which is used to represent it on the form. It will take some time to get through most of these controls simply because of the large number of them. Remember, whether the programming language focuses on line IO or the more complex form IO, it is only the mechanism that differs not the idea. First be sure you are clear about what data you want to display. Second you need to select the control you will use to display your data. At this point you need to learn how to represent information on a form, and that means you need to learn what the basic controls are, what type of data they can display, and how to use each control.

We will start with the controls listed below. These are the most commonly used controls for beginning programmers. This is a more complete version of a table you have already seen. In this version we add a list of the important properties and methods for each control previously introduced. If you read the table carefully, you will learn the most commonly used properties for each control, what aspect of the object they control, and what is the most common setting for that property. Methods will be explained a bit later on. The controls break down into the following groupings. Note that these groups correspond to their normal usage.

Controls by Function

Using the Basic Controls

Before you can start planning the form, you need to know what the basic controls are, what each is normally used for, and what event each control triggers. The following table provides this basic information. Since these three pieces of information are necessary in order to plan each and every program you write, you need to learn and remember them rather than looking them up each time. It is quite acceptable to look up some of the details of their properties, what they do and how to use them, but you need to learn the basic controls, what they are used for, and what the main event they trigger by heart. Since you will use it in every program you create, you should have no difficulty remembering it after you have created a few programs. This table is a summary of the most important basic controls. It is intended to introduce the essential information you need to know to understand the purpose of each control.

Control Name Main Use Main Event
Form Container for your program FormLoad - used to initialize the program
Label Descriptive or informational text on the form None *
Output field which the user cannot alter None *
Textbox Control used by the user for data input. It can also display output, but the contents can be altered by the user. TextChanged - executed every time a character is entered or deleted. You should not use this control just now. We will demonstrate its use later on.
Button User clicks this control to trigger an event Click - executed when control is clicked
RadioButton A round button normally used in sets. Only one of the set can be selected at a time Click - executed when control is clicked
CheckBox A white square which can be toggled on or off. May be used in sets but more than one can be selected at a time. Click - executed when control is clicked
GroupBox Creates an outline to surround other controls creating a visual grouping effect. It is normal to put a set of RadioButtons or a set of CheckBoxes inside one of these. They can also be used to enclose groups of text boxes. None *
PictureBox A container used to display an image. The image may be decorative or with the Enabled property set to True can be used as a Button. Click - executed when control is clicked
Tab Control When your program needs more space, you can double use space by creating a Tab control. The programming is already writen for switching from one tab to another. You need to be careful setting up your controls in each tab. Click - switches between tabs making the selected tab visible.
* Actually there is a Click event, but since we do not want the user interacting with Labels, we never program this event.

The controls which are most commonly used to trigger events are: the Button, Radio Button, and Checkbox. If we choose to use a particular control then there should always be some code written in its event!. In other words don't put a control on a form and then fail to use the associated event by leaving its event uncoded and unused. Doing so usually pushes the code into another event making the other event more complex. Simple is better!

Basic Controls, their Events, Important Properties and Methods
Control Name Main Use Main Event Important Properties Important Methods
Label Descriptive or Identifying text on the form None Name (string) - control’s identifier
AutoSize (boolean) - should be True, this minimizes the size of the label
Border (specific) - Three values: no border, line border, 3D border. Normal setting for descriptive text is No Border
Text (string) - contents which are displayed on the form
Output field which the user cannot alter None Name (string) - control’s identifier
AutoSize (boolean) - should be False, this lets the programmer manually set the size of the label
Border (specific) - Three values: no border, line border, 3D border. Normal setting for output is Line or 3D Border
Text (string) - contents which are displayed on the form
Clear - Clears the contents of the Text property
TextBox Field used by user for data input TextChanged - executed every time a character is entered or deleted Name (string) - control's identifier
ReadOnly (boolean) - Normally False this property prevents the user from entering data into a TextBox if set to True
TabIndex (integer) - property which determines the order of Focus when tab key is pressed
Text (string) - contents which are displayed on the form
Clear - Clears the contents of the Text property
Button User clicks this control to trigger an event Click - executed when control is clicked Name (string) - control’s identifier
Enabled (boolean) - normally set as True, this allows the user to click the button and trigger the associated event
Text (string) - displays as the button name, it should indicate what the button does
Visible (boolean) - determines whether the control is visible at run time
RadioButton A round button normally use in sets - Only one may be selected at a time CheckChanged - executed when control is clicked Name (string) - control’s identifier
Checked (boolean) - True if circle is filled, false if circle is unfilled
Enabled (boolean) - normally set as True, this allows the user to click the button and trigger the associated event
Visible (boolean) - determines whether the control is visible at run time
CheckBox A white square which can be toggled on or off CheckChanged - executed when control is clicked Name (string) - control’s identifier
Checked (boolean) - True if there is a check mark, false if there is no check mark, Indeterminate if it is gray and has a check mark
Enabled (boolean) - normally set as True, this allows the user to click the button and trigger the associated event
Visible (boolean) - determines whether the control is visible at run time
GroupBox Creates an outline to surround other controls creating a visual grouping effect. It is also normal to put a set of RadioButtons or a set of CheckBoxes inside one of these None Name (string) - control’s identifier
Text (string) - contents are displayed the name of the group on the form
PictureBox A control which displays an image. This control can also be used as a Button. Click - executed when control is clicked Name (string) - control’s identifier
Enabled (boolean) - if set as True, this allows the user to click the image and trigger the associated event, making the image function as a button
Image (image) - allows an image file to be attached to the control by selecting from images stored in the program or external images from a file
SizeMode (custom) - property which allow images to be compressed or stretched to fit into a certain space on the form, of course this can distort the image
Visible (boolean) - determines whether the control is visible at run time
ListBox Displays a list of items. It can be sized to show as may items as desired, but following user interface principles should show 7 items +/- 2. Name - executed when control is clicked
Name (string) - control’s identifier
Count (integer) - The number of items currently in the list.
SelectedIndex (integer) - property which tells us which item in the list is highlighted. It is zero based: when the first item in the list is highlighted, this property contains a 0. If no item is listed, this property contains a -1.
Visible (boolean) - determines whether the control is visible at run time

For an example of the process of creating a form for a simple program see the Three Riddles program.