2. Tutorial 21 Procedure-Oriented vs Object- Oriented/Event-Driven w Procedure-oriented Emphasis of a program is on how to accomplish a task User has little, if any, control w Object-oriented/Event-driven Emphasis of a program is on the objects included in the interface and the events that occur on those objects User has a lot of control

3. Tutorial 22 Architect vs Programmer w Plan the home (blueprint) w Build the frame w Complete the home w Inspect the home and fix any problems w Assemble the documentation w Plan the application (TOE chart) w Build the user interface w Code the application w Test and debug the application w Assemble the documentation

4. Tutorial 23 Step 1 - Plan the Application w Identify the tasks the application needs to perform w Identify the objects to which you will assign those tasks w Identify the events required to trigger an object into performing its assigned task w Draw a sketch of the user interface

5. Tutorial 24 Identify the Application’s Tasks w What will the user need to enter? w What will the application need to calculate? w What will the application need to display (screen) and/or print (printer)? w How will the user end the application? w Will previous information need to be cleared from the screen?

6. Tutorial 25 Sample TOE Chart

7. Tutorial 26 GUI Design Tips - 1 w Organize the user interface so that the information flows either vertically or horizontally, with the most important information always located in the upper-left corner of the screen. w Group related controls together using either white space or a frame. w Align controls to minimize number of margins.

8. Tutorial 27 GUI Design Tips - 2 w Either center the command buttons along the bottom of the screen or stack them in either the upper-right or lower-right corner. w Use no more than six command buttons on a screen. w Place the most commonly used command button first.

9. Tutorial 28 GUI Design Tips - 3 w Assign meaningful captions to command buttons. w Place the caption on one line and use from one to three words only. w Use book title capitalization for command button captions.

10. Tutorial 29 GUI Design Tips - 4 w Label each control in the interface. The label should be from one to three words only, and it should be entered on one line. w Align each label on the left, and position each either above or to the left of the control it identifies. w Follow the label with a colon (:) and use sentence capitalization.

11. Tutorial 210 Step 2 - Build the User Interface w Use the sketch you drew during the Planning step. w Follow the GUI design guidelines.

12. Tutorial 211 More GUI Design Tips - 1 w Maintain a consistent margin of two or three dots from the edge of the window. w Position related controls on succeeding dots. Controls that are not part of any logical grouping may be positioned from two to four dots away from other controls. w Try to create an interface that no one notices.

13. Tutorial 212 More GUI Design Tips - 2 w Command buttons in the interface should be sized relative to each other. If the command buttons are centered on the bottom of the screen, then each button should be the same height; there widths, however, may vary. If the command buttons are stacked in a corner, then each should be the same height and the same width.

14. Tutorial 213 More GUI Design Tips - 3 w The human eye is attracted to pictures before text, so include a graphic only if it is necessary to do so. w If you are including the graphic for aesthetics only, use a small graphic and place it in a location that will not distract the user.

15. Tutorial 214 More GUI Design Tips - 4 w Use 8, 10, or 12 point fonts for the elements in the user interface. w Use only one or two font sizes. w Use a sans serif font for the text. w Use only one font type for all of the text. w Avoid italics and underlining.

16. Tutorial 215 More GUI Design Tips - 5 w The human eye is attracted to color before black and white. w Build the interface using black, white, and gray first, then add color only if you have a good reason to do so. w Use either white, off-white, light gray, pale blue, or pale yellow for an application’s background, and use black for the text.

17. Tutorial 216 More GUI Design Tips - 6 w Always use dark text on a light background because it is the easiest to read. w Never use a dark color for the background or a light color for the text. w Limit the number of colors (other than white, black, and gray) to three. w Never use color as the only means of identification for an interface element.

18. Tutorial 217 More Properties w BackStyle—determines whether the label is transparent or opaque w BorderStyle—determines the style of the object’s border w Appearance—determines if the control appears flat or three-dimensional

19. Tutorial 218 Caption vs Text Text box controls have a Text property. Forms and label controls have a Caption property.

20. Tutorial 219 TabIndex Property w Determines the order in which a control receives the focus when the user is using the Tab key to tab through the controls in the interface. w The value of the TabIndex property for the first control placed on a form is 0.

21. Tutorial 220 Access Keys w Allows the user to select an object using the Alt key in combination with a letter or number. w Assign an access key to each of the essential elements in the interface. mouse may be inoperative accommodate fast typists accommodate people with disabilities

22. Tutorial 221 More on Access Keys w Each access key must be unique. w You can assign an access key to any control that has a Caption property. w Place an & to the left of the desired letter in the Caption property. w To give keyboard access to a text box, assign an access key to its identifying label, then set the label’s TabIndex value to one less than the text box’s TabIndex value.

23. Tutorial 222 Step 3 - Code the Application w Use pseudocode to help you plan the code. w Internally document the code by placing an apostrophe before the comment in the Code window. Print Order button 1. Hide the 4 command buttons 2. Print the form 3. Display the 4 command buttons 4. Send the focus to the Clear Screen button ‘hide the command buttons ‘print the form ‘display the command buttons ‘set the focus

24. Tutorial 223 Assignment Statement w Use to assign a value to a property. w [form.]object.property = value

25. Tutorial 224 Operator Order of Precedence w ^exponentiation w -negation w *, /multiplication and division w \integer division w Modmodulus arithmetic w +, -addition and subtraction w You can use parentheses to override the order or precedence.

26. Tutorial 225 Function w A predefined Visual Basic procedure. w A function returns a value. w Val and Format are two examples of Visual Basic’s intrinsic functions.

27. Tutorial 226 Val Function w Val function - returns the numeric equivalent of a string w Syntax: Val(string) This Val function:Would be converted to: Val(“456”)456 Val(“24,500) 24 Val($56.88) 0 Val(“A”) 0 Val(“”) 0

28. Tutorial 227 Translating Pseudocode into a Visual Basic Equation Total skateboards = blue skateboards + yellow skateboards lblTboards.Caption = Val(txtBlue.Text) + Val(txtYellow.Text)

29. Tutorial 228 Format Function w Format function - returns a formatted expression w Syntax: Format(expression, format) w Some of Visual Basic’s predefined formats: Currency Fixed Standard Percent

30. Tutorial 229 Method w Like a function, a method is a predefined Visual Basic procedure. Unlike a function, a method does not return a value. w PrintForm method - prints the form during run time Syntax: [form.]PrintForm w SetFocus method - allows you to move the focus to a specified control or form while the application is running Syntax: [form.]object.SetFocus

31. Tutorial 230 Form Properties w BorderStyle w ControlBox w MaxButton w MinButton

32. Tutorial 231 Step 4 - Testing and Debugging w Test with both valid and invalid data. w Debugging refers to the process of locating errors in the program. Syntax error typing PrntForm rather than PrintForm Logic error calculating the net pay before calculating the state income tax

33. Tutorial 232 Step 5 - Assemble the Documentation w Place your planning tools and a printout of the application in a safe place. w Your planning tools include the TOE chart, sketch of the interface, and either the flowcharts or pseudocode.

34. Tutorial 233 Debugging Technique Always use the Val function in equations that include either the Text property or the Caption property. The Val function tells Visual Basic to treat these properties as numbers rather than as strings.