1. Basic GUI VISUAL BASIC

2. BASIC GUI Slide 2 of 53 Topic & Structure of the lesson Introduction Data Validation Use controls for making choices Write Pull Down Menus

3. VISUAL BASIC BASIC GUI Slide 3 of 53 Learning Outcomes 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

4. VISUAL BASIC BASIC GUI Slide 4 of 53 Key Terms you must be able to use 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

5. VISUAL BASIC BASIC GUI Slide 5 of 53 Mask Edit Control  Specialized version of a TextBox  MaskEdit allows for validation of input data  It ensures that only data in the correct format is accepted

6. VISUAL BASIC BASIC GUI Slide 6 of 53 Mask Edit Control 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

7. VISUAL BASIC BASIC GUI Slide 7 of 53 Mask Characters #Numeric character. Decimal point,Thousand Separator /Date Separator :Time > Convert character to uppercase < Convert character to lowercase AAlphanumeric character ?Alpha character

8. VISUAL BASIC BASIC GUI Slide 8 of 53 Using Clip Text 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

9. VISUAL BASIC BASIC GUI Slide 9 of 53 Clearing the Mask Edit Private Sub Command1_Click() MaskEdBox1.Mask = “ ” 'Clear the mask MaskEdBox1.Text = “ ” 'Clear the edit box MaskEdBox1.Mask = “(###)-###-###” ‘ Restore the mask End Sub

10. VISUAL BASIC BASIC GUI Slide 10 of 53 Controls for making choices 1. Check Box 2. Option Button 3. List Box 4. Combo Box

11. VISUAL BASIC BASIC GUI Slide 11 of 53 Check Box Control  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

12. VISUAL BASIC BASIC GUI Slide 12 of 53 Check Box Control 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

13. VISUAL BASIC BASIC GUI Slide 13 of 53 Check Box Example Private Sub Command1_Click() If chkbold.Value = 1 Then MsgBox “Bold Selected” End If End Sub

14. VISUAL BASIC BASIC GUI Slide 14 of 53 Group Exercise 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”.

15. VISUAL BASIC BASIC GUI Slide 15 of 53 Combo Box Control  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

16. VISUAL BASIC BASIC GUI Slide 16 of 53 Combo Box Control

17. VISUAL BASIC BASIC GUI Slide 17 of 53 Combo Box Control ‘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

18. VISUAL BASIC BASIC GUI Slide 18 of 53 Combo Box Control ‘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

19. VISUAL BASIC BASIC GUI Slide 19 of 53 Group Exercise 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” Remove an item from the combo box when the item is selected

20. VISUAL BASIC BASIC GUI Slide 20 of 53 VISUAL BASIC Basic Graphical User Interface

21. VISUAL BASIC BASIC GUI Slide 21 of 53 Learning Outcomes 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

22. VISUAL BASIC BASIC GUI Slide 22 of 53 Key Terms you must be able to use If you have mastered this topic, you should be able to use the following terms correctly in your assignments and tests: List Box – To display items vertically. Option Buttons – To select a choice such as male of female. Key Press – To validate user’s input from the keyboard. Menu Editor - To display pull down menus.

23. VISUAL BASIC BASIC GUI Slide 23 of 53 List Box Control  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

24. VISUAL BASIC BASIC GUI Slide 24 of 53 List Box Control 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.

25. VISUAL BASIC BASIC GUI Slide 25 of 53 List Box Control 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

26. VISUAL BASIC BASIC GUI Slide 26 of 53 List Box Control 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

27. VISUAL BASIC BASIC GUI Slide 27 of 53 List Box Example Private Sub cmdAdd_Click() lstList.AddItem(txtInput.Text) ‘add item to a list box txtInput.Text = "" End Sub 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

28. VISUAL BASIC BASIC GUI Slide 28 of 53 Group Exercise 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

29. VISUAL BASIC BASIC GUI Slide 29 of 53 Option Buttons/Radio Buttons Control  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.

30. VISUAL BASIC BASIC GUI Slide 30 of 53 Using Option Buttons 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

31. VISUAL BASIC BASIC GUI Slide 31 of 53 Group Exercise 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 $____

32. VISUAL BASIC BASIC GUI Slide 32 of 53 SSTab Control 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

33. VISUAL BASIC BASIC GUI Slide 33 of 53 SSTab Control 1.Click Project menu, select Components 2.Check the box “Microsoft Tabbed Dialog Control 6.0” 3.Click the OK Button

34. VISUAL BASIC BASIC GUI Slide 34 of 53 TextBox Validation Private Sub Text1_KeyPress(KeyAscii As Integer) valid = “abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQR STUVWXYZ /" If InStr(valid, Chr(KeyAscii)) = 0 Then KeyAscii = 0 End If End Sub

35. VISUAL BASIC BASIC GUI Slide 35 of 53 TextBox Validation 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

36. VISUAL BASIC BASIC GUI Slide 36 of 53 Group Exercise 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.

37. VISUAL BASIC BASIC GUI Slide 37 of 53 Menu Editor To create pull down menus File –Student Registration –Book Registration –Book Borrow –Logout Each Menu item must have a menu name Menu name is given a prefix - mnu –mnufile –mnustudent –mnubookregister Menu Items

38. VISUAL BASIC BASIC GUI Slide 38 of 53 Menu Editor

39. VISUAL BASIC BASIC GUI Slide 39 of 53

40. VISUAL BASIC BASIC GUI Slide 40 of 53 Multiple Document Interface (MDI)  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

41. VISUAL BASIC BASIC GUI Slide 41 of 53 Create MDI Form –Project Menu

42. VISUAL BASIC BASIC GUI Slide 42 of 53 MDI Form

43. VISUAL BASIC BASIC GUI Slide 43 of 53 MDI Example 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

44. VISUAL BASIC BASIC GUI Slide 44 of 53 MDI arrange methods constants ConstantValue Description vbCascade0Cascades child window vbTileHorizontal1Tiles child window horizontally vbTileVertically2Tiles child window vertically vbArrangeIcons3Arranges minimized child window at the bottom of parent window

45. VISUAL BASIC BASIC GUI Slide 45 of 53 Unloading a Form 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

46. VISUAL BASIC BASIC GUI Slide 46 of 53 Timer Control 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

47. VISUAL BASIC BASIC GUI Slide 47 of 53 Using Timer to Display Real Time Clock Private Sub Timer1_Timer() Text1.Text = Time End Sub

48. VISUAL BASIC BASIC GUI Slide 48 of 53 Follow Up Assignment 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.

49. VISUAL BASIC BASIC GUI Slide 49 of 53 Follow Up Assignment 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.

50. VISUAL BASIC BASIC GUI Slide 50 of 53 Summary of Main Teaching Points Validation Mask Edit Key Press Event Controls for Choices Check Box Radio Buttons Combo Box

51. VISUAL BASIC BASIC GUI Slide 51 of 53 Q & A Question and Answer Session