1. UI Prototyping with VB 6.0 SIMS213 Tutorial March 5, 1999 Melody Y. Ivory

2. Tutorial Outline zVB 6.0 Overview zDesigning Screens zAdding Interactivity

3. VB 6.0 Overview zQuickly design interactive UI prototype yCreate new project xStandard Windows application yDesign screens (forms) xAdd controls (text boxes, buttons, etc.) xSet properties (color, caption, size, etc. for forms & controls) yAdd interactivity xWrite code for controls (event handling) yRun application

4. Getting Started zStarting VB 6.0 zCreating new project (application) yStandard Windows Application yDB Application yDHTML Application yApplication Wizard

5. VB 6.0 IDE Controls that can be added to form Form to design List of project components Properties for selected object Description of property Code associated with object and event Position form(s) on screen

6. Project Overview zProject Components (UI Prototype) yForm Modules yOptional xResource Files xStandard Modules

7. Activity One - Create New Project zCreate a new project (Standard EXE) yChange the project name to Orders yChange the name and caption for Form1 to Ord1 and Customer Information respectively yAdd a new form to the project yChange the name and caption for this new form to Ord2 and Customer Preferences respectively ySave the project yRun the application yStop the application Run application Stop application

8. Tutorial Overview zVB 6.0 Overview zDesigning Screens zAdding Interactivity

9. Designing Screens zChanging form properties ysize, screen position, background

10. Designing Screens zAdding controls yselect control & draw on form ycontrol properties xname, caption, tab order xtext label & box - size, alignment, font, multiline, scrollbars, text xcheck box & radio button - value, frames xlist & combo list boxes - adding items Graphic Control Text Box Command Button Radio Button List Box Vertical Scroll Bar Lines Text Label Frame (grouping controls) Check Box Combo List Box Horizontal Scroll Bar Shapes Image Controls

11. Activity Two - Create Ord1 Screen zCreate the screen zCustomer Information Text Label yFont - size 24, bold yBorder - Fixed Single zAddress Text Box yMultiLine set to True zNext & Cancel Buttons yFont - size 10, bold zUse meaningful names for the text boxes & command buttons zResize the form and set the Startup Position to center of screen zRun the application to see the screen zStop the application

12. Activity Two - Resulting Ord1 Screen

13. Activity Three - Create Ord2 Screen zCreate the screen zCustomer Preferences Text Label yFont - size 24, bold yBorder - Fixed Single zUse frames for both the radio buttons and the check boxes zSet the value of the email radio button to True zUse meaningful names for the radio buttons, check boxes & command buttons zResize the form and set the Startup Position to center of screen zSet the project Startup object to this screen zRun the application to see the screen

14. Activity Three - Resulting Ord2 Screen

15. Tutorial Overview zVB 6.0 Overview zDesigning Screens zAdding Interactivity

16. Adding Interactivity zVB Programming Model yObject-Oriented xObjects - Application, Form, Control, etc. referenced by name and possibly context e.g. NextButton or Ord1.NextButton xObjects have properties e.g. NextButton.Value or If Ord1.Visible Then xObjects have methods (actions) e.g. Ord1.Unload, List1.RemoveItem

17. Adding Interactivity zVB Programming Model yEvent-Driven xObjects have events e.g. click on Next command button or check box xSubroutines associated with each object x event add event handling code –e.g. change object properties, –e.g. invoke object methods double clicking object brings up code window

18. Adding Interactivity zEvent Handling Examples Stop application on Cancel button click Private Sub Cancel_Click(Index As Integer) End End Sub Add items to combo list when form loads Private Sub Form_Load() Combo1.AddItem "AK" Combo1.AddItem "CA" Combo1.AddItem "CO" End Sub

19. Adding Interactivity zScreen transition yload form & show yunload form Screen Transition on Button Click Private Sub Next_Click(Index As Integer) Unload Ord1 Load Ord2 Ord2.Show End Sub

20. zUsing predefined dialog boxes yMsgBox ”Msg”, Type, ”Title" MsgBox Types vbOKOnly - Display OK button only. vbOKCancel - Display OK and Cancel buttons. vbYesNoCancel - Display Yes, No, and Cancel buttons. vbYesNo - Display Yes and No buttons. vbCritical - Display Critical Message icon. vbQuestion - Display Warning Query icon. vbExclamation - Display Warning Message icon. vbInformation - Information Message icon. Private Sub Next_Click(Index As Integer) Response = MsgBox("Are you sure you want to quit?", vbYesNo, "Exit Application") If Response = vbYes Then ' User chose Yes. End End If End Sub

21. Activity Five - Add Interactivity zSet the project Startup object to Ord1 zAdd the following actions to Ord1 yThe Next button unloads Ord1 and loads/shows Ord2 yThe Cancel button ends the application yAdd code to the form Load event to add the items, AK, CA and CO, to the state combo box zAdd the following actions to Ord2 yThe Next button displays the vbOkOnly predefined dialogue box using MsgBox, then stops the application xUse the message “Your information is complete.” and the title “Information Complete” yThe Prev button unloads Ord2 and loads/shows Ord1 yThe Cancel button ends the application zRun the application to see the interactivity