VISUAL BASIC Basic GUI Topic Structure of the

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 2

Learning Outcomes BASIC GUI At the end of this lecture you will be able to : 1. Use Masked. Edit controls to format input data 2. Use Check Boxes for selecting several choices 3. Use Combo. Box for selecting and displaying items VISUAL BASIC 3

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 Mask Edit – To validate user input Check Box – To select multiple options Combo Box – Displays items in a drop down manner 4

Mask Edit Control BASIC GUI § Specialized version of a Text. Box § Mask. Edit allows for validation of input data § It ensures that only data in the correct format is accepted VISUAL BASIC 5

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 6

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

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 8

Clearing the Mask Edit BASIC GUI Private Sub Command 1_Click() Mask. Ed. Box 1. Mask = “ ” 'Clear the mask Mask. Ed. Box 1. Text = “ ” 'Clear the edit box Mask. Ed. Box 1. Mask = “(###)-###” ‘ Restore the mask End Sub VISUAL BASIC 9

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

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 11

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 / unavailable / dimmed VISUAL BASIC 12

Check Box Example BASIC GUI Private Sub Command 1_Click() If chkbold. Value = 1 Then Msg. Box “Bold Selected” End If End Sub VISUAL BASIC 13

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 14

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 15

Combo Box Control BASIC GUI VISUAL BASIC 16

Combo Box Control BASIC GUI ‘Adding Data to a combo Box Private Sub cmd. Input_Click() cbo. Combo. Add. Item(txt. Input. Text) txt. Input. Text = "" End Sub ‘Displaying a text Private sub cbocombo_click() Msgbox cbo. Combo. text End Sub VISUAL BASIC 17

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 18

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 Msg. Box “You Have Selected” <selection> • Remove an item from the combo box when the item is selected VISUAL BASIC 19

BASIC GUI VISUAL BASIC Basic Graphical User Interface VISUAL BASIC 20

Learning Outcomes BASIC GUI At the end of this lecture you will be able to : 1. Use List. Box 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 21

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 user’s input from the keyboard. Menu Editor - To display pull down menus. 22

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 23

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 24

List Box Control BASIC GUI Commonly used methods of List Box Control Add. Item : It is used to add an item to List Box List 1. Add. Item “APIIT DH”, 0 List 1. Add. Item “APIIT KL”, 1 VISUAL BASIC 25

List Box Control BASIC GUI Commonly used methods of List Box Control Remove. Item: It is used to remove an item from the List Box List 1. Remove. Item , 1 Clear : It is used to remove all items from the List Box. List 1. Clear VISUAL BASIC 26

List Box Example BASIC GUI Private Sub cmd. Add_Click() lst. List. Add. Item(txt. Input. Text) txt. Input. Text = "" End Sub ‘add item to a list box Private Sub cmd. Remove_Click() If lst. List. Index <> -1 Then lst. List. Remove. Item(lst. List. Index) ‘remove an item from the list End If End Sub Private Sub cmd. Clear_Click() lst. List. Clear ' Remove all list items from the list box End Sub VISUAL BASIC 27

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 28

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 29

Using Option Buttons BASIC GUI Private Sub command 1_click() If optcash. Value = True Then Label 1. Caption = "Cash Payment" Else. If optcredit. Value = True Then Label 1. Caption = "Credit Payment" End If End Sub VISUAL BASIC 30

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 31

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 32

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 33

Text. Box Validation BASIC GUI Private Sub Text 1_Key. Press(Key. Ascii As Integer) valid = “abcdefghijklmnopqrstuvwxyz. ABCDEFGHIJKLMNOPQR STUVWXYZ /" If In. Str(valid, Chr(Key. Ascii)) = 0 Then Key. Ascii = 0 End If End Sub VISUAL BASIC 34

Text. Box Validation BASIC GUI Program below validates a text box to accept alphabets and the ‘/’ symbol Private Sub Text 1_Key. Press(Key. Ascii As Integer) Select Case Key. Ascii Case Is = vb. Key. Space 'control key Case Is < vb. Key. Space 'control key Case vb. Key. A To vb. Key. Z, 97 To 122 'uppercase and lowercase Case 47 ‘ / Symbol Case Else Msg. Box "Alpabets key only, please" Key. Ascii = 0 End Select End Sub VISUAL BASIC 35

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 Msg. Box. 2. Write a program that accepts your age in a text box. VISUAL BASIC 36

Menu Editor BASIC GUI • • To create pull down menus File – – • • Student 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 37

Menu Editor BASIC GUI VISUAL BASIC 38

BASIC GUI VISUAL BASIC 39

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 40

Create MDI Form –Project Menu BASIC GUI VISUAL BASIC 41

MDI Form BASIC GUI VISUAL BASIC 42

MDI Example BASIC GUI Private Sub mnuform 1_Click() Form 1. Show End Sub Private Sub mnuform 2_Click() Form 2. Show End Sub Private Sub mnuhorizontal_Click() MDIForm 1. Arrange (1) End Sub Private Sub mnucascade_Click() MDIForm 1. Arrange (0) End Sub VISUAL BASIC 43

MDI arrange methods constants BASIC GUI Constant vb. Cascade vb. Tile. Horizontal vb. Tile. Vertically vb. Arrange. Icons VISUAL BASIC 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 44

Unloading a Form BASIC GUI Private Sub Form_Query. Unload(Cancel As Integer, Unload. Mode As Integer) Dim r As Integer r = Msg. Box("Are you sure you want to exit", vb. Yes. No) If r = vb. No Then Cancel = True End If End Sub VISUAL BASIC 45

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 46

Using Timer to Display Real Time Clock BASIC GUI Private Sub Timer 1_Timer() Text 1. Text = Time End Sub VISUAL BASIC 47

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 48

Follow Up Assignment BASIC GUI When the users selects an item from the Combo. Box, remove the item from the Combo. Box and add it to the List. Box. Your program should check to ensure that the Combo. Box contains at least one item. If it does not, print a message using Msg. Box and terminate the program. VISUAL BASIC 49

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

Question and Answer Session BASIC GUI Q&A VISUAL BASIC 51