FBT0025 Visual Programming

Source from: http://www.andysowards.com

Slide 1
 Learning Outcomes

At the end of this topic, students should be able to:

1. Use VB IDE for GUI design.

2. Distinct windows frame and controls.

3. Describe common controls.

4. Develop a basic GUI application.

Slide 2
Start a New VB Project

Slide 3
Initial Visual Basic Screen

Slide 4
Toolbox

Slide 5
 VB Control
• Toolbox lists all the available
tools/objects can be used to design
GUIs.
• Each tool/object has its own unique
properties but most of them share the
same properties like Name, Font,
Text, Backcolor, etc.
• A tool is selected by double clicking
it or drag it onto the form.
• Different version of VB.NET may
have different set of tools.

Slide 6
Visual Basic Controls

Slide 7
 Visual Basic Controls
1. A Window contains a form and a few controls:
a. Form - A window that contains these controls
b. Label - displays text the user cannot change
c. TextBox - allows the user to enter text
d. Button – performs an action when clicked
e. RadioButton - A round button that is selected or deselected with a mouse click
f. CheckBox – A box that is checked or unchecked with a mouse click
2. Forms and controls are objects which produces/responds to events.

3. Forms/Controls have
properties
a. Each property has a value
(or values)
b. Properties mainly deal with
appearance. Also for setting
behaviour, accessibility,
data, design and focus.

Slide 8
 Name property
1. “Name” property establishes a means for the program to refer to that control.
Usually, change the given name to something more meaningful
2. The Label controls use the default names (Label1, etc.)
3. Text boxes, buttons, and the Gross Pay label play an active role in the program
and have been changed

Form1
label1 txtHoursWorked
label2 txtPayRate
label3 lblGrossPay

btnCalcGrossPay btnClose

Slide 9
 Naming Conventions
1. Control names must start with a letter
2. Remaining characters may be letters, digits, or underscore
3. 1st 3 lowercase letters indicate the type of control
a. txt… for Text Boxes
b. lbl… for Labels
c. btn… for Buttons
4. After that, capitalize the first letter of each word

txthoursworked vs txtHoursWorked

Slide 10
 Naming Conventions
1. The following is a list of recommended prefixes of control names.

Slide 11
 VB Controls: Text Box

1. Purpose:
a. To handle text data and display text.
b. To capture input from user
2. Common properties:
a. Name
i. The name given to the text box and is
referred in the code
b. Text
i. Text that is displayed or entered by user
ii. Not to be referred in the code
c. Font
i. Set the font type, size and style of the text box
d. BackColor, ForeColor
i. Set the background and foreground color
of the text box
e. TextAlign
i. Controls alignment of text in the text box

Slide 12
 VB Events

1. Some controls/objects display information but many perform actions

2. Actions of objects are referred as events
3. Event is an action that triggers a program instruction.
4. Most commonly used are Form Load, Click, DoubleClick, Enter and
Leave
5. Examples:
a. A button used to exit the application
b. A set of check boxes used to determine user’s interest
c. A set of combo boxes used to determine user’s DOB
d. A text box used to validate a correct entry of input

Slide 13
 VB Events: Form Load

1. Triggers when the form is loaded into the

memory and before it is displayed on the screen.
2. This execution can be used to set all the
controls’ properties to their initial states or to
declare variables or object variables
3. Example:
Private Sub Form1_Load(..)
‘Declare and intialize a form level variable
Dim count As Integer = 0
‘Setting the start up position of form
Me.StartPosition = FormStartPosition.CenterScreen
‘Change the background color of the form
Me.BackColor = Color.Cyan
End Sub

Slide 14
 VB Events: Click

1. Triggers when the user clicks a control to perform

some specified tasks
2. Often associated with a command button
3. Examples:
Private Sub btnShow_Click(..)
‘To show the image
picClass.Visible = True
End Sub
Private Sub btnHide_Click(..)
‘To hide the image
picClass.Visible = False
End Sub
Private Sub btnExit_Click(..)
‘To exit the application
Me.Close()
End Sub

Slide 15
 Developing a VB GUI Application in MS VS

1
1. Create the GUI
2. Set the properties
3. Write the code 2

Button 1
Name: btnClear
Text: Clear
BackColor: Cyan
3

Slide 16
 Understanding VB GUI Design Code

Class name
Public Class Form1

'To add entered numbers and display the result Comment

Private Sub btnResult_Click(ByVal sender As System.Object, ByVal e

_ As System.EventArgs) Handles btnResult.Click

txtResult.Text = Val(txtInput1.Text) + Val(txtInput2.Text)

End Sub

Body/
Hander
Procedure event
code
/ Handler

Slide 17
 Understanding VB GUI Design Code

Private Sub btnResult_Click(ByVal sender As System.Object, ByVal e _

As System.EventArgs) Handles btnResult.Click

txtResult.Text = Val(txtInput1.Text) + Val(txtInput2.Text)

End Sub

assignment built-in function

Private Sub btnExit_Click(ByVal sender As System.Object, _

ByVal e As System.EventArgs) Handles btnExit.Click
Me.Close()
End Sub

Refers to method
current
class,
Form1

Slide 18
ACTIVITY 1

Slide 19
Using InputDialog and MessageBox for Accepting Inputs
and Displaying

Slide 20
 Input and Events

Private Sub btnOK_Click (..)Handles ControlName.Click

If txtPassword.Text = "SWORDFISH" Then
MsgBox("Access granted!")
Else
MsgBox("Wrong password!")
End If
End Sub CASE SENSITIVE!

Slide 21
 GUI – Dialogue Box and Message Box

Dialogue box:

Dim MyString = InputBox("Enter name")

Message box:

Messagebox.Show("Start")
MsgBox("File saved", 0, "Save Confirmation")

Prompt Button Title

MsgBox("File saved", MsgBoxStyle.OkOnly, "Save Confirmation")

Slide 22
Constant value for button

Slide 23
 BMI Calculator

Private Sub Button1_Click_

(sender As System.Object, e As System.EventArgs)_
Handles Button1.Click

Dim strWeight As String = InputBox("Enter weight in KG.", "Weight", "0")

Dim strHeight As String = InputBox("Enter height in M.", "Height", "0")
Dim dblWeight As Double = CDbl(strWeight)
Dim dblHeight As Double = CDbl(strHeight)
Dim dblBMI As Double = dblWeight / (Math.Pow(dblHeight, 2.0))
MessageBox.Show("Your BMI is " & dblBMI, "BMI")

End Sub

Slide 24
Other Common VB Controls

Slide 25
 VB Controls: Masked Text Box

1. Purpose:
a. To simplify data entry process.
b. To improve keying efficiency.
2. Enforcing the use of input patterns
by setting the Mask property:
a. (###)-###-####, ##-##-####, etc
c. For example, you can select a mask for
a. ZIP code, a date, a phone number, or
b. bank account number.
d. At run time the user cannot enter characters that
do not conform to the mask

Slide 26
 VB Controls: Group Box

1. Purpose:
a. Improves readability of form by separating the controls into logical groups
b. To group related data together in a box/container
c. To make GUIs looks neat, logical and uncluttered
d. All controls in a Group Box is treated as one unit

grpContact

grpMaritalStatus

grpGender

Slide 27
 VB Controls: Check Box

1. Purpose:
a. Allows the user to select or deselect one or more items in any group
2. Use the value of its Checked property to determine whether the check box
is selected or not:
a. Selected = Checked property has a True value
b. Unselected = Checked property has a False value
3. Use the Text property for the text you want to appear next
to the box

Slide 28
 VB Controls: Radio Button

1. Purpose:
a. Allows the user to select or deselect only one item in a
group
2. If one Radio Button is clicked on, the others will be set off
automatically
3. It shares the same properties as Check Box like Checked,
Text, Locked, Appearance, etc.

Slide 29
VB Controls: Radio Button vs Check Box

Slide 30
 VB Controls: Picture Box

1. Purpose:
a. To display an image of any extension
2. Common properties:
a. SizeMode
i. To set type of sizing either Normal, StrechImage, AutoSize,
CenterImage
b. Visible
i. To make the image appear or disappear using Boolean value:
PictureBox.Visible = True ‘Show the image
PictureBox.Visible = False ‘Hide the image
1. How to load an image into a picture box?
a. Design time: Browse and upload an image from the Image property.
b. Run time:
PictureBox.Image = Image.FromFile(“C:\pic.jpg”)

Slide 31
 VB Controls: List Box

1. Purpose:
a. Allow multiple selection of choices via a box with a list of elements
b. With scroll bar to support longer list as alternative to radio buttons and check boxes
2. Common properties:
a. SelectionMode
i. To set type of selection either None, One, MultiSimple or MultiExtended
b. Items
i. To set elements of list box via the String Collection Editor window

Slide 32
 VB Controls: Combo Box

1. Purpose:
a. Allow multiple selection of choices via a box with a list of elements
b. Combined the features of a Text Box and a List Box
2. User can enter data in the text box or/and select data from the list.
3. Common properties:
a. DropDownStyle
i. To set type of selection either Simple, DropDown or DropDownList
b. Items
i. To set elements of list box via the String Collection Editor window

Simple DropDown DropDownList

Slide 33
Slide 34
 Borders and Styles

1. Most controls can appear to be 3D or flat

2. Labels, text boxes, and pictures boxes all have a BorderStyle
property with different style choices including None,
FixedSingle or Fixed3D

Slide 35
 Selecting Multiple Controls

Use the mouse to drag a

selection box around
multiple controls

When multiple controls are

selected, each has resizing
handles (if resizable)

Slide 36
 Keyboard Access Key

1. Some users prefer to use the keyboard, rather than a

mouse, for most operations
2. Also referred to as Hot Keys
3. User presses Alt + underlined letter
4. Defined using Text property of the control
5. “&” is placed before the hot key
letter

Text=&OK
Text=E&xit

Slide 37
 Setting the Tab Order for Controls

1. One control on a Form always has the focus

2. Not all control types can receive the focus
a. Text boxes, buttons – has focus
b. Picture boxes and labels – has no focus
3. Properties involve:
a. TabStop
i. Is available only for controls that are capable of receiving the
focus like text box, list box, combo box and buttons
ii. Designates whether a control is allowed to receive the focus by
setting it to True or False
b. TabIndex
i. Determines the order the focus moves as the Tab key is pressed
(top to bottom or left to right)
ii. Define in tab sequence and always start by 0

Slide 38
Setting the Tab Order for Controls

Slide 39
 Setting the Form’s Location on Screen

1. You can set the form’s screen position by setting

the StartPosition property of the form

Slide 40
 Creating Tool Tips

1. Tool Tip is a small description that is displayed when user scrolls

mouse pointer over a control
2. Increase understandability
3. How?
a. Add a ToolTip Control to Form

b. The new control appears in a new pane called Component Tray

available at the bottom of the Form Designer
c. After you add the control to your form, each of the form’s controls
has a new property added named ToolTip on ToolTip1
d. Select ToolTip on ToolTip1 property of each control and add Tool
Tip comments

Slide 41
 Creating Tool Tips

Step 1:
Drag the ToolTip control
to the Form

Step 2: Step 3:
The ToolTip control will be Set the text via ToolTip on
made available to some controls on ToolTip1 property of the control
the Form

Slide 42
Other Common VB Events

Slide 43
 VB Events: Double Click

1. Triggers when the user clicks

a control twice
1. Simplifies the user’s action
2. Example: lstBox1

‘To add items selected from lstBox1 to lstBox2, lstBox2

‘then remove the selected item from lstBox1
Private Sub lstBox1_DoubleClick(..)
lstBox2.Items.Add(lstBox1.SelectedItem)
lstBox1.Items.Remove(lstBox1.SelectedItem)
End Sub
‘To add items selected from lstBox2 to lstBox2,
‘then remove the selected item from lstBox2
Private Sub lstBox2_DoubleClick(..)
lstBox1.Items.Add(lstBox2.SelectedItem)
lstBox2.Items.Remove(lstBox2.SelectedItem)
End Sub
Slide 44
 VB Events: Enter

1. Triggers when the focus entering a control

2. To perform preparatory operations to the control
3. Example:

‘To get the total score

Private Sub txtTotal_Enter(..)
txtTotal.Text = Val(txtMath.Text) + _
Val(txtEnglish.Text) + _
Val(txtBM.Text) + _
Val(txtScience.Text)
End Sub
‘To count the average score Underscore indicates the line
continuation marker
Private Sub txtAverage_Enter(..)
txtAverage.Text = Val(txtTotal.Text) / 4
End Sub

Slide 45
 VB Events: Leave

1. Triggers when the focus leaving a control

2. To perform additional operations to the control
such as converting entered input to upper case
3. Example:

Private Sub txtName_Leave(..)

txtName.Text = UCase(txtName.Text)
End Sub

Slide 46
 Moving from List 1 to List 2

Public Class Form1

Private Sub ListBox1_Click(sender As System.Object, e As System.EventArgs)_

Handles ListBox1.Click
ListBox2.Items.Add(ListBox1.SelectedItem)
ListBox1.Items.Remove(ListBox1.SelectedItem)
End Sub

Private Sub ListBox2_Click(sender As System.Object, e As System.EventArgs)_

Handles ListBox2.Click
ListBox1.Items.Add(ListBox2.SelectedItem)
ListBox2.Items.Remove(ListBox2.SelectedItem)
End Sub
End Class

Slide 47
 Moving from List 1 to List 2

2. Choose
event

3. Double-click
required event
1. Choose
control

4. Will bring out

skeleton code
for that clicked
event.

Slide 48
 Moving from List 1 to List 2

Note the Handles and the corresponding Event item for the sub.

Slide 49
Moving from List 1 to List 2

Slide 50
Moving from List 1 to List 2

Slide 51
Swapping Between Both List 1 to List 2

Slide 52
 The Next Step

1. With understanding of Controls, Events and Handlers, it’s

time to move on to learning the data types, data structures
and control structures in VB.
2. It is necessary to relate the latter to the former in order to
have effective use.

Slide 53
ACTIVITY 2 – Write code statement for all the buttons

Slide 54
Public Class Form1

Private Sub btn_xxxxxx( e as object…) handles btn_xxxxxx

End sub

Private Sub btn_xxxxxx( e as object…) handles btn_xxxxxx

End Sub

End class

Slide 55
 Summary
1. Learn VB controls, property and events.
2. Design GUI by adding, grouping, arranging and aligning controls.
3. Describe and use VB.NET events: Form Load, Click, DoubleClick, KeyPress,
Enter, Leave correctly.
4. Enter VB code correctly according to event type and control.
5. Know how to get input, process and display output in Event-Driven
programming style.
6. Identify parts of VD code.
7. Design a user-friendly GUI by:
a. defining access keys
b. controlling the tab sequence
c. resetting the focus during program execution
d. causing ToolTips to appear

Slide 56