You are on page 1of 23

1

User Interface Design

DESIGNING USER INTERFACE

Control are added onto the form to enables users to interact with the program.

Controls are added onto the form using Visual Basic 6.0 ToolBox.
The user interface of a windows program usually includes : > Title or caption bar > Menus > Label boxes > Text boxes > Buttons > Windows > Scroll bars 2

TOOLBOX
PictureBox Label Textbox CommandButton OptionButton ComboBox HScrollBar Timer ListBox VScrollBar DriveListBox FileListBox Line Data

Frame
CheckBox

DirListBox Shape Image OLE

Diagram 1.0 : Toolbox

Text Boxes
Use when you want the user to type some input or display output. Example : Text Box

Use Text Property. Prefix naming txt (txtTitle).

Program Code For Text Boxes


Example 1 : lblName.Caption = txtName.Text * Input from user enter into the text box is assigned to the caption property of lblName. Example 2 : txtMessage.Text = Watson, come here * Display text in a text box during program execution, assign a literal to the Text property.

Frames
Use as containers for other controls. Example :

Groups of option buttons or check boxes. Make form easier to understand. Prefix naming fra (fraColor).

Check Boxes
Allow the user to select (or deselect) an option. Example :

In any group of check boxes, any number may be selected. Value property of a check box is set to 0 if unchecked, 1 if checked, or 2 if grayed (disabled). Prefix naming chk (chkBold).

Program Code For Check Boxes


* Set the initial value for check boxes :
Example 1 : chkBold.Value = 1 Make box checked chkBold.Value = 0 Make box unchecked Example 2 : chkBold.Value = Checked chkBold.Value = Unchecked

Make box checked Make box unchecked

Option Buttons
Use when only one button of a group may be selected. Example :

Value property of an option button is set to True if selected or to False if unselected. Prefix naming opt (optRed).

Locate The Option Button

Any option button placed directly on the form (not in a frame) function as single event. A group of option buttons inside a frame function together.

* The best method is to first create a frame and then create each option button inside the frame. * Must be careful to create the button inside the frame, dont create it on the form and drag it inside the frame its still belongs to the forms group, not the frames group.
10

Program Code For Option Button


* To make an option button appear selected initially :

Example : optRed. Value = True Make button selected

11

Images
Control holds a picture. Enable to set an images Picture property to a file with an extension of .bmp, .wmf, .ico, .dib, .gif, .jpg, .emf, or .cur. Set Stretch property to True to make the picture enlarge to fill the control. Set Visible property to False to make the image disappear. Prefix naming img (imgPicture).

12

Program Code For Images


Example : imgLogo.Visible = False * Make an image invisible at rum time.

13

Setting a Border and Style


Most controls can appear to be 3-dimensional or flat. Labels, text boxes, check boxes, option buttons and images all have an Appearance property. 0 Flat or 1 3D.

* To make a label or an image appear 3D, you must give it a border. * Set the BorderStyle to 1 Fixed Single.

14

Shape Control
Place shapes on a form : i) Rectangle ii) Squares iii) Ovals iv) Circles Example :

Prefix naming shp (shpCircle).

15

Shape property

Determine the shape by setting its Shape property : 0 - Rectangle 1 - Squares 2 - Ovals 3 Circles 4 Rounded Rectangle 5 Rounded Squares

16

Line
Draw line on a form. Example :

Line

Prefix naming lin (linLogo).


17

ADDING CONTROLS ON THE FORM

To use a control, double click on the specific control on the toolbox. You can control the number of objects in the Toolbox but VB provides 20 intrinsic controls in the toolbox.

18

DETERMINING THE PROPERTIES


Different controls have different set of property. Due to some controls that have long list; the Properties Windows have a scrollbar to move through the long list. You need not to define every single property for the controls. You only have to change what is required for the application designed. Visual Basic has set all of the properties to its default value. You only need to change the value when you want it to be different from its default.

19

NAMING CONTROLS

Visual Basic provides a unique name for the controls such as Label1, Label2, Text1 and Command1. The names are the controls names. Each control has a unique name that distinguishes it from other controls from the same object. For example, the The Average of Two Numbers application has more than one TextBox control. It is important to distinguish each Textbox on the form.
20

DELETING THE CONTROLS

If you wish to delete any of the controls from the form, you may do so at design time. Follow the steps in the box.

i) Point the cursor on the required control, which is on the form. ii) Click on the control and hit the DELETE key.

21

Activity 1
Follow the sketch below to create the form :
Your Name
txtMessage fraText txtName

Message
fraColor COLOR Red Green Blue Black optRed optGreen optBlue optBlack Display Clear Print ImgBig ImgLittle lblMessage Exit cmdDisplay fraStyle STYLE Bold Italic Underline chkBold

chkItalic
chkUnderline

cmdClear
cmdPrint cmdExit 22

Thank You

23