1. Programming with Microsoft Visual Basic 2008 4th Edition Chapter Two Designing Applications

2. Previewing Playtime Cellular Application Playtime Cellular application: –Allows salespeople to enter customer’s name, address, and number of blue and pink phones ordered –Calculates and displays total number of phones ordered and the total price of the order Programming with Microsoft Visual Basic 2008, Fourth Edition2

3. Previewing the Playtime Cellular Application (continued) Programming with Microsoft Visual Basic 2008, Fourth Edition3 Figure 2-2 Completed order form

4. Lesson A Objectives After studying Lesson A, you should be able to: Plan an object-oriented application in VB 2008 Complete a TOE (Task, Object, Event) chart Follow the Windows standards regarding the layout and labeling of controls Programming with Microsoft Visual Basic 2008, Fourth Edition4

5. Creating an Object-Oriented Application Developing an application is like building a home Role of programmer analogous to that of builder Bugs: Problems that affect application functions Programming with Microsoft Visual Basic 2008, Fourth Edition5

6. Creating an Object-Oriented Application (continued) Programming with Microsoft Visual Basic 2008, Fourth Edition6 Figure 2-3: Processes used by a builder and a programmer

7. Planning an Object-Oriented Application Actively involve user in planning phase –End product should closely match the user’s needs and wants TOE chart: Used to record tasks, objects, and events required for the application Programming with Microsoft Visual Basic 2008, Fourth Edition7

8. Planning an Object-Oriented Application (continued) Programming with Microsoft Visual Basic 2008, Fourth Edition8 Figure 2-4: Steps for planning an OO application

9. Identifying the Application’s Tasks What information will the application need to display on the screen and/or print on the printer? What information will the user need to enter into the user interface? What information will the application need to calculate to produce the desired result? How will the user end the application? Will previous information need to be cleared from the screen before new information is entered? Input, Output, I/O mapping Programming with Microsoft Visual Basic 2008, Fourth Edition9

10. Identifying the Application’s Tasks (Task Examples) Programming with Microsoft Visual Basic 2008, Fourth Edition10 Figure 2-6: Tasks entered in a TOE chart

11. Programming with Microsoft Visual Basic 2008, Fourth Edition11 Figure 2-6: Tasks entered in a TOE chart (continued) Identifying the Application’s Tasks (Task Examples)

12. Identifying the Objects Assign each task to an object in user interface Objects to be used: Label control, button control, text box Label control: Displays information that user should not change Button control: Performs an action immediately after a click event Text box: Provides an area for user to enter data Programming with Microsoft Visual Basic 2008, Fourth Edition12

13. Identifying the Events Determine which event (if any) must occur for an object to do its assigned task Text boxes: No special event is needed Label controls: No special event is needed btnCalc, btnClear, and btnExit buttons: Must perform assigned tasks when clicked Programming with Microsoft Visual Basic 2008, Fourth Edition13

14. Identifying the Events (continued) Programming with Microsoft Visual Basic 2008, Fourth Edition14 Figure 2-9: Completed TOE chart ordered by object

15. Drawing a Sketch of the User Interface Follow Windows standards for designing the interface –In Western countries, information flows either vertically or horizontally Vertical arrangement: Information flows from top to bottom, with essential information located in first column Horizontal arrangement: Information flows from left to right, with essential information placed in first row Programming with Microsoft Visual Basic 2008, Fourth Edition15

16. Drawing a Sketch of the UI (Vertical arrangement, why?) Programming with Microsoft Visual Basic 2008, Fourth Edition16 Figure 2-10: Vertical arrangement of the Playtime Cellular application

17. Drawing a Sketch of the UI (Horizontal arrangement) Programming with Microsoft Visual Basic 2008, Fourth Edition17 Figure 2-11: Horizontal arrangement of the Playtime Cellular application

18. Drawing a Sketch of the UI White space or containers may be used to group related controls Containers: Objects used to group related controls –Examples: GroupBox, Panel, TableLayoutPanel Label controls that display output should have meaningful names –Example: “Total Price” identifies lblTotalPrice label Identifying labels should end with colon (:) –Example: “Total Price:” Programming with Microsoft Visual Basic 2008, Fourth Edition18

19. Sentence capitalization: Only first letter in the first word is capitalized –Use for identifying labels Book title capitalization: Capitalize first letter of each word except articles, conjunctions, and prepositions –Use for button text Buttons should be same height and width, and should be aligned Group related controls together, and keep margins consistent Programming with Microsoft Visual Basic 2008, Fourth Edition19 Drawing a Sketch of the UI

20. Lesson A Summary Steps to create an OO application: –Meet with client –Plan application –Build user interface –Code application –Test and debug application –Assemble documentation To plan OO application, identify tasks, objects and events that are needed Identify information needed as input to produce desired result Programming with Microsoft Visual Basic 2008, Fourth Edition20

21. Lesson B Objectives After studying Lesson B, you should be able to: Build the UI using your TOE chart and UI sketch Follow the Windows standards regarding the use of graphics, fonts, and color Set a control’s BorderStyle property Add a text box to a form Lock the controls on the form Assign access keys ( 快速鍵 ) to controls Use the TabIndex ( 定位順序 ) property Programming with Microsoft Visual Basic 2008, Fourth Edition21

22. Building the User Interface Use TOE chart ( 圖表 ) and UI sketch ( 草圖 ) as guides when building a UI –Place appropriate controls on forms –Set applicable properties of controls Some features of UI in Playtime Cellular application –Information is arranged vertically –Controls are aligned and appropriately labeled Programming with Microsoft Visual Basic 2008, Fourth Edition22

23. Building the User Interface (continued) Programming with Microsoft Visual Basic 2008, Fourth Edition23 Figure 2-12: Partially completed interface for the Playtime Cellular application Completed UI

24. Including Graphics in the UI Graphics: Icons or pictures added to a UI –Used to emphasize or clarify a portion of screen, or for aesthetic purposes The human eye is attracted to graphics before text –Include graphic only if it is necessary (Most database applications are text-based) Graphics for aesthetic use should be small and positioned to avoid distracting ( 使分心 ) user Programming with Microsoft Visual Basic 2008, Fourth Edition24

25. Selecting Fonts for the Interface Font property: Controls font type, style, and size Recommendations for fonts: –Use sans serif fonts (without strokes) e.g., Segoe UI, Tahoma, Microsoft Sans Serif –Use 8-12 point size fonts for interface –Use only one or two font sizes and one font type –Avoid italics and underlining –Limit bold text to titles, headings, and key items Objects added to form inherit form’s font setting Programming with Microsoft Visual Basic 2008, Fourth Edition25

26. Adding Color to the Interface The eye is drawn to color before black and white Add color only if there is a good reason –Many people have trouble distinguishing color Guidelines for adding colors: –Use dark text against light background –Limit of three colors Not including black, white, gray –Colors added should be complementary –Avoid using dark color for background –Use color to help identify interface elements, but not as only means of identification Programming with Microsoft Visual Basic 2008, Fourth Edition26

27. The BorderStyle and AutoSize Properties BorderStyle property: Determines the style of control’s border –None: Control will not have border –FixedSingle: Surrounds control with thin line –Fixed3D: Gives control a 3-D appearance (default) AutoSize property: Determines whether a label control automatically sizes to fit its current contents –Use True for identifying labels, but use False for output labels Programming with Microsoft Visual Basic 2008, Fourth Edition27

28. Adding a Text Box Control to the Form Text box control –Provides an area in the form for data entry Use TextBox tool to add a text box control Make all text boxes same size and align them using snap lines Blue snap lines: For vertical alignment Pink snap lines: For horizontal alignment Programming with Microsoft Visual Basic 2008, Fourth Edition28

29. Adding a Text Box Control to the Form (continued) Programming with Microsoft Visual Basic 2008, Fourth Edition29 Figure 2-13: Snap lines shown in the interface

30. Locking the Controls on a Form Lock controls after they are properly placed –Purpose: Avoid inadvertently moving controls A locked control is identified by a small-lock when it is clicked. To lock controls: –Click form (or any control on the form) –Click Format on menu bar –Click Lock Controls Follow same procedure to unlock controls Programming with Microsoft Visual Basic 2008, Fourth Edition30

31. Assigning Access Keys Access key –Enables object to be selected using keyboard –Key combination: Alt key + letter or number Each access key must be unique Shown in interface as underlined letter Assigning an access key: –Include an ampersand (&) in caption of the control’s identifying label –Example: “&Calculate Order” assigns ‘C’ to button Programming with Microsoft Visual Basic 2008, Fourth Edition31

32. Assigning Access Keys (continued) Reasons to assign access keys: –Allow user to work even if mouse doesn’t work –Allow fast typists to keep hands on the keyboard –Allow people with disabilities that prevent them from using a mouse to be able to use application Follow Windows standards for assigning commonly used access keys Programming with Microsoft Visual Basic 2008, Fourth Edition32

33. Setting the TabIndex Property Focus: A state in which a control is ready to accept user input or action Pressing Tab key or access key shifts focus TabIndex property: Contains a number representing order in which control will receive focus when user presses Tab key –Control with TabIndex of 0 receives focus first Set TabIndex using Properties window or Tab Order option on View menu –Press ESC to remove the TabIndex boxes from the form Programming with Microsoft Visual Basic 2008, Fourth Edition33

34. Setting the TabIndex Property (continued) Programming with Microsoft Visual Basic 2008, Fourth Edition34 Figure 2-15: TabIndex boxes showing the correct TabIndex values

35. Lesson B Summary To specify control’s border, set BorderStyle property To lock/unlock controls on form, use Lock Controls option on Format menu To assign an access key to control, type an ampersand (&) in Text property of control or identifying label To set tab order, set each control’s TabIndex property to a number that represents order in which you want the control to receive focus Programming with Microsoft Visual Basic 2008, Fourth Edition35

36. Lesson C Objectives After studying Lesson C, you should be able to: Code an application using its TOE chart Plan an object’s code using pseudocode or a flowchart Write an assignment statement Send the focus to a control while an application is running Include internal documentation in the code Write arithmetic expressions Use the Val and Format functions Programming with Microsoft Visual Basic 2008, Fourth Edition36

37. Coding the Application Code: Instructions added to an application Coding is done after planning and building the UI TOE charts show which objects and events need to be coded Playtime Cellular application code requirements: –Three buttons associated with Click events Programming with Microsoft Visual Basic 2008, Fourth Edition37 TOE UI

38. Coding the Application (continued) Programming with Microsoft Visual Basic 2008, Fourth Edition38 Figure 2-18: Playtime Cellular application’s interface

39. Coding the Application (continued) Programming with Microsoft Visual Basic 2008, Fourth Edition39 Figure 2-19: Playtime Cellular application’s TOE chart (ordered by object)

40. Planning a Procedure Using Pseudocode Pseudocode: Short phrases used to describe the steps a procedure must take to accomplish its goal –Travel directions are a type of pseudocode The task of btnCalc Click event procedure: –calculate total phones ordered and total price –display results Programming with Microsoft Visual Basic 2008, Fourth Edition40

41. Planning a Procedure Using Pseudocode (continued) Programming with Microsoft Visual Basic 2008, Fourth Edition41 Figure 2-20: Pseudocode for the Playtime Cellular application

42. Planning a Procedure Using a Flowchart Flowchart: Uses standardized symbols to show program logic –Oval: Start/stop symbol –Rectangle: Process symbol; represents a task –Parallelogram: Input/output symbol –Flowlines: Connect the symbols Flowcharts depict same logic as pseudocode Programmers usually use either flowcharts or pseudocode (but not both) Programming with Microsoft Visual Basic 2008, Fourth Edition42

43. Assigning a Value to a Property During Run Time Assignment statement: Instruction assigning a value to an object at runtime Syntax: object.property = expression –object and property are object and property names –expression contains the value to be assigned Assignment operator (=): Assigns value on right side to the object on left side Programming with Microsoft Visual Basic 2008, Fourth Edition43

44. Using the Focus Method Method: Predefined procedure Focus method: –Allows you to move focus to specified control Syntax: object.Focus() –Object: Name of control that receives focus Programming with Microsoft Visual Basic 2008, Fourth Edition44

45. Internally Documenting the Program Code Comments: Internal documentation in program –Used by programmers to document a procedure’s purpose or explain sections of code To create comment, place an apostrophe (’) before a statement –Compiler ignores all characters after apostrophe for the rest of line Comments are color-coded (green color) in IDE Comments help make code readable Programming with Microsoft Visual Basic 2008, Fourth Edition45

46. Internally Documenting the Program Code (continued) Programming with Microsoft Visual Basic 2008, Fourth Edition46 Figure 2-25: Comments entered in the General Declarations section

47. Coding the btnClear Control’s Click Event Procedure btnClear control’s task: Clear screen for next order String: A group of characters enclosed in quotation marks (“”) Zero-length string (or empty string): A pair of quotation marks with nothing between them (“”) Two ways to remove control contents at runtime: –Assign zero-length string to control’s Text property –Assign String.Empty to control’s Text property Programming with Microsoft Visual Basic 2008, Fourth Edition47

48. Coding the btnClear Control’s Click Event Procedure (continued) Programming with Microsoft Visual Basic 2008, Fourth Edition48 Figure 2-22: Pseudocode for the btnClear control’s Click event procedure

49. Internally Document and Program Code ( btnClear control ) Programming with Microsoft Visual Basic 2008, Fourth Edition49 Figure 2-24: Completed Click event procedure for the btnClear control

50. Writing Arithmetic Expressions Arithmetic expression: Expression that contains arithmetic operators and operands Precedence numbers: Indicate the order of operations in expression –Performed from lower precedence numbers first to higher number –If two operations are at same level, they are performed left to right –Parentheses can be used to override default precedence Programming with Microsoft Visual Basic 2008, Fourth Edition50

51. Writing Arithmetic Expressions (continued) Programming with Microsoft Visual Basic 2008, Fourth Edition51 Figure 2-26: Most commonly used arithmetic operators and their order of precedence

52. Writing Arithmetic Expressions (continued) Unary operator: Requires one operand –Example: -7 (the negation operator) Binary operator: Requires two operands Integer division operator (\): –Divides two integers; returns an integer as a result –Discards the remainder Modulus operator (Mod): Returns only remainder in a division Programming with Microsoft Visual Basic 2008, Fourth Edition52

53. Examples of Arithmetic Expression Programming with Microsoft Visual Basic 2008, Fourth Edition53 Figure 2-27: Expressions containing arithmetic operators

54. Coding the Calculate Order Button btnCalc control is responsible for: –Calculating total number of phones ordered –Calculating total price of the order –Displaying results in two labels Add instructions to button’s Click event procedure –Instructions are processed when user clicks button Programming with Microsoft Visual Basic 2008, Fourth Edition54 Figure 2-28: Pseudocode for the btnCalc control’s Click event procedure

55. Coding the Calculate Order Button (continued) Programming with Microsoft Visual Basic 2008, Fourth Edition55 Figure 2-29: Illustration of the total phones ordered calculation Figure 2-30: Illustration of the total price calculation

56. Coding the Calculate Order Button Programming with Microsoft Visual Basic 2008, Fourth Edition56 Figure 2-31: Interface showing the incorrect results of the calculations Observe one problem: Numbers were treated as strings –Values stored in the Text property are treated as strings

57. The Val Function Function: A predefined procedure that performs a specific task and returns a value Val function: Temporarily converts a string to a number and returns the number –Syntax: Val(string) Can use Val to correct calculations in btnCalc control’s Click procedure Programming with Microsoft Visual Basic 2008, Fourth Edition57

58. The Val Function (continued) Programming with Microsoft Visual Basic 2008, Fourth Edition58 Figure 2-32: Examples of the Val function

59. The Val Function (continued) Programming with Microsoft Visual Basic 2008, Fourth Edition59 Figure 2-33: Val function entered in the assignment statements

60. Format Numeric Output Format function: Improves numbers display Syntax: Format(expression, style) –expression : specifies a number, date, time, or string –style : predefined or user defined format style Currency: Example of format style that displays number with dollar sign and two decimal places Programming with Microsoft Visual Basic 2008, Fourth Edition60

61. Format Style of Format Function Programming with Microsoft Visual Basic 2008, Fourth Edition61 Figure 2-34: Some of the predefined format styles in Visual Basic

62. 62Programming with Microsoft Visual Basic 2008, Fourth Edition Example of Using Format Function Figure 2-35: Format function entered in the procedure

63. Testing and Debugging Applications Syntax error: Occurs when a rule of programming language is broken Logic error: Occurs when syntax is correct, but outcome is not what was desired –Causes may include missing instructions, instructions out of order, or wrong type of instruction If “build” errors are indicated, do not run program – fix errors first! Programming with Microsoft Visual Basic 2008, Fourth Edition63

64. Testing and Debugging the Application (continued) Programming with Microsoft Visual Basic 2008, Fourth Edition64 Figure 2-38: Message box indicates that the code contains errors Figure 2-37: Jagged blue line and message indicate a syntax error

65. Testing and Debugging the Application (continued) Programming with Microsoft Visual Basic 2008, Fourth Edition65 Figure 2-40: Thin red rectangle, message, and Error icon indicate a syntax error Figure 2-41: The Error Correction window displays a way to correct the syntax error

66. Assembling the Documentation Important documentation includes: –Planning documents TOE chart Sketch of UI Flowcharts and/or pseudo-code –Printout of application’s UI and code Programming with Microsoft Visual Basic 2008, Fourth Edition66

67. Lesson C Summary Use pseudocode or flowchart to plan an object’s code To assign a value to the property of an object while application is running, use the following syntax for an assignment statement: object.property = expression To create comment, begin comment text with an apostrophe (’) Use integer division to divide and return an integer result Programming with Microsoft Visual Basic 2008, Fourth Edition67

68. Lesson C Summary (continued) Use modulus operator to divide two numbers and return the remainder To temporarily convert string to number, use the Val function Use Format function to improve the appearance of numbers Application should be tested with both valid and invalid data Programming with Microsoft Visual Basic 2008, Fourth Edition68