VISUAL BASIC

Basic GUI

Topic & Structure of the lesson

BASIC GUI

Introduction Data Validation Use controls for making choices Write Pull Down Menus

VISUAL BASIC

Slide 2 of 53

Learning Outcomes
BASIC GUI

At the end of this lecture you will be able to : 1. Use MaskedEdit controls to format input data 2. Use Check Boxes for selecting several choices 3. Use ComboBox for selecting and displaying items

VISUAL BASIC

Slide 3 of 53

Key Terms you must be able to use

BASIC GUI

If you have mastered this topic, you should be able to use the following terms correctly in your assignments and tests:

Mask Edit To validate user input Check Box To select multiple options Combo Box Displays items in a drop down manner

VISUAL BASIC

Slide 4 of 53

References
BASIC GUI

VB How to Program - Deitel and Deitel Chapter 10 & 11

VISUAL BASIC

Slide 5 of 53

Mask Edit Control

BASIC GUI

Specialized version of a TextBox MaskEdit allows for validation of input data It ensures that only data in the correct format is accepted

VISUAL BASIC

Slide 6 of 53

Mask Edit Control

BASIC GUI

Select Microsoft Masked Edit Control 6.0 from Project - Components Drag the Mask Edit Text Box from toolbar to the Form Right Click on the Mask Edit Control to set Properties for Mask Characters

VISUAL BASIC

Slide 7 of 53

Mask Characters
BASIC GUI

# . , / : > < A ?

Numeric character Decimal point Thousand Separator Date Separator Time Convert character to uppercase Convert character to lowercase Alphanumeric character Alpha character

VISUAL BASIC

Slide 8 of 53

Using Clip Text

BASIC GUI

Clip text is used to remove all mask characters Private sub cmdsshow_click() Msgbox Birthdate is & mskbirthdate.text Msgbox Birthdate clip text is & mskbirthdate.cliptext End sub

VISUAL BASIC

Slide 9 of 53

Clearing the Mask Edit

BASIC GUI

Private Sub Command1_Click() MaskEdBox1.Mask = 'Clear the mask MaskEdBox1.Text = 'Clear the edit box MaskEdBox1.Mask = (###)-###-### Restore the mask End Sub

VISUAL BASIC

Slide 10 of 53

Controls for making choices

BASIC GUI

1. Check Box
2. Option Button 3. List Box 4. Combo Box

VISUAL BASIC

Slide 11 of 53

Check Box Control

BASIC GUI

Use to give the user a True / False option Allows the user to select one / more options from a list of independent options When a check box is selected, the box is checked and the box is filled with a check mark When a check box is deselected, the box is unchecked and the check mark is disappeared from the box

VISUAL BASIC

Slide 12 of 53

Check Box Control

BASIC GUI

Commonly used properties of Check Box : Alignment : to set the alignment of the caption Caption : to specify the text that appears besides the check box Enabled : to set to True / False Name : to assign a name to check box Value : indicates whether the check box is checked / unchecked / unavailable / dimmed

VISUAL BASIC

Slide 13 of 53

Check Box Example

BASIC GUI

Private Sub Command1_Click() If chkbold.Value = 1 Then MsgBox Bold Selected End If End Sub

VISUAL BASIC

Slide 14 of 53

Group Exercise
BASIC GUI

Write a program that allows a user to select any 3 movie titles. Each movie costs RM 10. A user can select more than one movie Use check boxes to allow user selection Your program should display the total cost on a textbox with the message You have to pay RM 99.99.
VISUAL BASIC Slide 15 of 53

Combo Box Control

BASIC GUI

It enables the users to select either by typing a text into the Combo Box or by selecting an item from the list. It combines the features of Text Box and List Box An item to Combo Box can be added both at design time and at run time
VISUAL BASIC Slide 16 of 53

Combo Box Control

BASIC GUI

VISUAL BASIC

Slide 17 of 53

Combo Box Control

BASIC GUI

Adding Data to a combo Box Private Sub cmdInput_Click() cboCombo.AddItem(txtInput.Text) txtInput.Text = "" End Sub Displaying a text Private sub cbocombo_click() Msgbox cboCombo.text End Sub

VISUAL BASIC

Slide 18 of 53

Combo Box Control

BASIC GUI

Clear All Items Private sub cmdclear_click() cbocombo.clear End sub

Removing a Selected Item Private sub cmdremove_click() cbocombo.removeitem (cbocombo.listindex) End sub

VISUAL BASIC

Slide 19 of 53

Group Exercise
BASIC GUI

Write a program to add the following items to a combo box : Plane Ship Road When the user selects an item , display the selected item to a MsgBox You Have Selected <selection> Remove an item from the combo box when the item is selected
VISUAL BASIC Slide 20 of 53

BASIC GUI

VISUAL BASIC
Basic Graphical User Interface

VISUAL BASIC

Slide 21 of 53

Learning Outcomes
BASIC GUI

At the end of this lecture you will be able to : 1. Use ListBox for displaying and removing items 2. Select options using Radio/Option buttons 3. Use the SSTab Control 4. Validate Text Boxes 5. Write pull down menus using Menu Editor

VISUAL BASIC

Slide 22 of 53

Key Terms you must be able to use

BASIC GUI

If you have mastered this topic, you should be able to use the following terms correctly in your assignments and tests:

VISUAL BASIC

List Box To display items vertically. Option Buttons To select a choice such as male of female. Key Press To validate users input from the keyboard. Menu Editor - To display pull down menus.
Slide 23 of 53

List Box Control

BASIC GUI

It allows the user to view a list of items

User can select one / more items If the no. of items exceed the value that can be displayed, a scrollbar will automatically appear on this control The scrollbar allows the user to view a list of items
VISUAL BASIC Slide 24 of 53

List Box Control

BASIC GUI

Commonly used properties of List Box Listcount : specifies the no. of items in the box Listindex : contains the index of the selected item in the box.

VISUAL BASIC

Slide 25 of 53

List Box Control

BASIC GUI

Commonly used methods of List Box Control AddItem : It is used to add an item to List Box List1.AddItem APIIT DH, 0 List1.AddItem APIIT KL, 1

VISUAL BASIC

Slide 26 of 53

List Box Control

BASIC GUI

Commonly used methods of List Box Control RemoveItem: It is used to remove an item from the List Box List1.RemoveItem , 1 Clear : It is used to remove all items from the List Box. List1.Clear

VISUAL BASIC

Slide 27 of 53

List Box Example

BASIC GUI

Private Sub cmdAdd_Click() lstList.AddItem(txtInput.Text) txtInput.Text = "" End Sub

add item to a list box

Private Sub cmdRemove_Click() If lstList.ListIndex <> -1 Then lstList.RemoveItem(lstList.ListIndex) remove an item from the list End If End Sub Private Sub cmdClear_Click() lstList.Clear ' Remove all list items from the list box End Sub
VISUAL BASIC Slide 28 of 53

Group Exercise
BASIC GUI

Write a program to add the following car type to a list box :

Toyota Honda Mitsubishi Volvo Proton

1. Create a button to add the items to a list box 2. Create a button to remove an item from the list box 3. Create a button to clear all items in the list box

VISUAL BASIC

Slide 29 of 53

Option Buttons/Radio Buttons Control

BASIC GUI

Option Buttons are used to display options. They are grouped in an option group from which only one Option Button can be selected by the user. Option Buttons are grouped by drawing the Buttons inside a Frame control / Picture control. All Option Button controls within the same container act as single group. When a user selects an Option Button, the other Buttons in the same group are automatically unavailable.
VISUAL BASIC Slide 30 of 53

Using Option Buttons

BASIC GUI

Private Sub command1_click() If optcash.Value = True Then Label1.Caption = "Cash Payment" ElseIf optcredit.Value = True Then Label1.Caption = "Credit Payment" End If End Sub

VISUAL BASIC

Slide 31 of 53

Group Exercise
BASIC GUI

Write a program to accept a customers name and a purchase amount using two Text Boxes. Use option buttons to select a mode of payment either Cash or Credit If the payment is by Credit a charge of 15% is added to the purchase amount Display the actual amount to be paid on a label Sam you have to pay $____
VISUAL BASIC Slide 32 of 53

SSTab Control
BASIC GUI

To have different sections on a form Treat data as one logical unit Save, Update, Retrieve all data in as a single logical unit SS Tab must be added to the toolbox

VISUAL BASIC

Slide 33 of 53

SSTab Control
BASIC GUI

1. Click Project menu , select Components 2. Check the box Microsoft Tabbed Dialog Control 6.0 3. Click the OK Button

VISUAL BASIC

Slide 34 of 53

TextBox Validation
BASIC GUI

Private Sub Text1_KeyPress(KeyAscii As Integer) valid = abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQR STUVWXYZ /" If InStr(valid, Chr(KeyAscii)) = 0 Then KeyAscii = 0 End If End Sub

VISUAL BASIC

Slide 35 of 53

TextBox Validation
BASIC GUI

Program below validates a text box to accept alphabets and the / symbol Private Sub Text1_KeyPress(KeyAscii As Integer) Select Case KeyAscii Case Is = vbKeySpace 'control key Case Is < vbKeySpace 'control key Case vbKeyA To vbKeyZ, 97 To 122 'uppercase and lowercase Case 47 / Symbol Case Else MsgBox "Alpabets key only,please" KeyAscii = 0 End Select End Sub
VISUAL BASIC Slide 36 of 53

Group Exercise
BASIC GUI

1. Write a program that will accept alphabets in a text box. If the user enters integers or other characters display an error message using a MsgBox. 2. Write a program that accepts your age in a text box.

VISUAL BASIC

Slide 37 of 53

Menu Editor
BASIC GUI

To create pull down menus File

Student Registration Book Registration Book Borrow Logout Menu Items

Each Menu item must have a menu name Menu name is given a prefix - mnu
mnufile mnustudent mnubookregister

VISUAL BASIC

Slide 38 of 53

Menu Editor
BASIC GUI

VISUAL BASIC

Slide 39 of 53

BASIC GUI

VISUAL BASIC

Slide 40 of 53

Multiple Document Interface (MDI)

BASIC GUI

Able to open many child forms on a single parent form Each window inside an MDI is called a child window. Application window is called the parent window Set Child Form property - MDI Child True

VISUAL BASIC

Slide 41 of 53

Create MDI Form Project Menu

BASIC GUI

VISUAL BASIC

Slide 42 of 53

MDI Form
BASIC GUI

VISUAL BASIC

Slide 43 of 53

MDI Example
BASIC GUI

Private Sub mnuform1_Click() Form1.Show End Sub Private Sub mnuform2_Click() Form2.Show End Sub Private Sub mnuhorizontal_Click() MDIForm1.Arrange (1) End Sub Private Sub mnucascade_Click() MDIForm1.Arrange (0) End Sub

VISUAL BASIC

Slide 44 of 53

MDI arrange methods constants BASIC GUI

Constant vbCascade vbTileHorizontal vbTileVertically vbArrangeIcons Value 0 1 2 3 Description Cascades child window Tiles child window horizontally Tiles child window vertically Arranges minimized child window at the bottom of parent window

VISUAL BASIC

Slide 45 of 53

Unloading a Form
BASIC GUI

Private Sub Form_QueryUnload(Cancel As Integer, UnloadMode As Integer) Dim r As Integer r = MsgBox("Are you sure you want to exit", vbYesNo) If r = vbNo Then Cancel = True End If End Sub

VISUAL BASIC

Slide 46 of 53

Timer Control
BASIC GUI

Used to trigger an event at a scheduled time Timer control is located on the toolbar Timer event triggers at a set interval Interval is set on the Properties Windows One second = 1000 interval

VISUAL BASIC

Slide 47 of 53

Using Timer to Display Real Time Clock

BASIC GUI

Private Sub Timer1_Timer() Text1.Text = Time End Sub

VISUAL BASIC

Slide 48 of 53

Follow Up Assignment
BASIC GUI

Write a program that displays the names of 10 states of your country in a Combo Box. When an item is selected from the Combo Box, remove it.

VISUAL BASIC

Slide 49 of 53

Follow Up Assignment
BASIC GUI

When the users selects an item from the ComboBox, remove the item from the ComboBox and add it to the ListBox. Your program should check to ensure that the ComboBox contains at least one item. If it does not, print a message using MsgBox and terminate the program.

VISUAL BASIC

Slide 50 of 53

Summary of Main Teaching Points

BASIC GUI
Validation

Mask Edit Key Press Event Controls for Choices Check Box Radio Buttons Combo Box

VISUAL BASIC

Slide 51 of 53

Question and Answer Session

BASIC GUI

Q&A
VISUAL BASIC Slide 52 of 53