1. PROGRAMMING WITH MICROSOFT VISUAL BASIC 2010 5 TH EDITION Chapter Two Designing Applications

2.  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 2

3. 3 Figure 2-2 Completed order

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

5. Developing an application is like building a home Role of programmer is analogous to that of builder Bugs Problems that affect application functions 5

6. 6 Figure 2-3 Processes used by a builder and a programmer

7.  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 7

8. 8 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? 9

10. 10 Figure 2-6 Tasks entered in a TOE chart

11.  Identifying the objects  Assign each task to an object in user interface  Objects used here  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 11

12.  Identifying the events  Determine which event (if any) must occur for an object to carry out its assigned task  Text boxes and label controls  No special event is needed  btnCalc, btnClear, and btnExit buttons  Perform assigned tasks when clicked 12

13. 13 Figure 2-9 Completed TOE chart ordered by ob ject

14.  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 14

15. 15 Figure 2-10 Vertical arrangement of the Playtime Cellular application

16. 16 Figure 2-11 Horizontal arrangement of the Playtime Cellular application

17.  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:” 17

18.  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 aligned  Also same height and width  Group related controls close to each other 18

19.  Steps to create an OO application  Meet with client  Plan application  Identify needed tasks, objects, and events  Identify information needed as input to produce desired result  Build user interface  Code application  Test and debug application  Assemble documentation 19

20. After studying Lesson B, you should be able to:  Build the user interface using your TOE chart and 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 20

21.  Use TOE chart and sketch as guides when building user interface  Place appropriate controls on forms  Set applicable properties of controls  Features of UI used in this lesson’s application  Information arranged vertically  Controls aligned and appropriately labeled  Try to create an interface that no one notices 21

22. 22 Figure 2-12 Partially completed interface for the Playtime Cellular application

23.  Including graphics in the user interface  Graphics: Icons or pictures added to an interface  Used to emphasize or clarify a portion of screen, or for aesthetic purposes  The human eye is attracted to pictures before text  Include graphics sparingly  Graphics for aesthetic use should be small and positioned to avoid distracting user 23

24.  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 only one or two font sizes and one font type  Avoid italics and underlining  Limit bold text to titles, headings, and key items 24

25.  Adding color to the interface  The eye is drawn to color before black and white  Add color only if there is good reason  Many people have trouble distinguishing color  Guidelines for adding colors  Use dark text against light background  Avoid using dark color for background  Limit colors to three, not including black, white, gray  Colors added should be complementary  Do not use color as only means of identification for an element in the UI 25

26.  BorderStyle property: Determines style of control’s border  None: Ensures control will not have border  FixedSingle: Surrounds control with thin line  Fixed3D: Gives control a 3-D appearance (default)  AutoSize property: Determines whether label control automatically sizes to fit its current contents  Use True for identifying labels, but use False for output labels 26

27.  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 used for vertical alignment  Pink snap lines used for horizontal alignment 27

28. 28 Figure 2-13 Snap lines shown in the interface

29.  Lock controls after they are properly placed  Purpose: avoid inadvertently moving controls  A locked control is identified by a small lock  To lock controls  Click form (or any control on the form)  Click Lock Controls on the Format menu  Follow same procedure to unlock controls 29

30.  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 the control’s caption  Example: “&Calculate Order” assigns ‘C’ to button 30

31. ASSIGNING ACCESS KEYS (CONT’D.)  Reasons to assign access keys  Allow user to work even if mouse does not  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 31

32.  Focus: State in which a control is ready to accept user input or action  Pressing Tab key or access key shifts focus  TabIndex property  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  Make a list of objects to determine proper ordering 32

33. 33 Figure 2-15 TabIndex boxes showing the correct TabIndex values

34.  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 TabIndex property to number that represents order in which you want the control to receive focus 34

35. 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 during run time  Include internal documentation in the code  Write arithmetic expressions  Use the Val and Format functions  Locate and correct syntax errors 35

36.  Code: Instructions added to an application  Coding is done after planning and building interface  TOE charts show which objects and events need to be coded  Playtime Cellular application code requirements  Three buttons associated with Click events 36

37. 37 Figure 2-18 Playtime Cellular application’s interface

38. 38 Figure 2-19 Playtime Cellular application’s TOE chart (ordered by object)

39.  Using pseudocode to plan a procedure  Psuedocode: Short phrases used to describe the steps a procedure must take to accomplish its goal  Travel directions are a type of pseudocode  btnCalc Click event procedure  Calculates total phones ordered and total price  Displays results 39

40. 40 Figure 2-20 Pseudocode for the Playtime Cellular application

41. Using a flowchart to plan a procedure A flowchart shows program logic using standardized symbols Oval: Start/stop symbol Rectangle: Process symbol; represents a task Parallelogram: Input/output symbol Flowlines connect the symbols Flowcharts depict same logic as pseudocode 41

42. 42 Figure 2-21 Flowcharts for the Playtime Cellular application

43.  btnClear control’s task: Clear screen for next order  String: Zero or more characters enclosed in quotation marks (“”)  Zero-length string (or empty string): Pair of quotation marks with nothing between them (“”)  Two ways to remove control contents at run time  Assign zero-length string to control’s Text property  Assign String.Empty to control’s Text property 43

44.  Assigning a value to a property during run time  Assignment statement: Instruction assigning a value to object at run time  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 44

45.  Using the Focus method  Allows you to move focus to specified control during run time  Syntax: object.Focus()  Object: Name of control that receives focus 45

46.  Internally documenting the program code  Comments: Internal documentation in program  Used by programmers to document a procedure’s purpose or explain sections of code  Comments help make code readable  To create comment, place an apostrophe (’) before a statement  Computer ignores all characters after apostrophe for rest of line  Comments are color-coded in IDE 46

47. 47 Figure 2-24 Comments entered in the General Declarations section

48.  Arithmetic expression  Contains one or more arithmetic operators  Precedence numbers  Indicate 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 48

49. 49 Figure 2-25 Most commonly used arithmetic operators

50.  Unary operator  Requires one operand  Example: -10 (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 50

51. 51 Figure 2-26 Examples of the integer division and Mod operators

52. 52 Figure 2-27 Expressions containing more than one operator having the same precedence

53.  btnCalc control is responsible for:  Calculating total number of phones ordered  Calculating total price of the order  Displaying results in two controls  Instructions placed in button’s Click event procedure  Instructions processed when user clicks button  Notice problem in text example  Numbers were treated as strings  Values stored in Text property treated as strings 53

54. 54 Figure 2-28 Pseudocode for the btnCalc control’s Click event procedure

55. 55 Figure 2-29 Illustration of the total phones ordered calculation Figure 2-30 Illustration of the total price calculation

56. 56 Figure 2-31 Interface showing the incorrect results of the calculations

57.  Function: Predefined procedure that performs a specific task and returns a value  The 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 57

58. 58 Figure 2-32 Examples of the Val function

59. 59 Figure 2-33 Val function entered in the assignment statements

60.  The Format function  Improves appearance of numbers  Syntax: Format(expression, style)  Expression : Specifies number, date, time, or string to format  Style : predefined or user-defined format style  Currency: Example of format style that displays number with dollar sign and two decimal places 60

61. 61 Figure 2-34 Some of the predefined format styles in Visual Basic

62. 62 Figure 2-35 Format function entered in the procedure

63.  Test an application using some sample data  Use both valid and invalid data  Valid data: Data that application is expecting  Invalid data: Data that application is not expecting  Debugging: Process of locating and correcting errors in a program  Errors can be related to either syntax or logic 63

64.  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 64

65. 65 Figure 2-39 Message dialog box Figure 2-38 Suggestion for fixing the error

66. 66 Figure 2-40 Error list window in the IDE

67.  Important documentation  Planning tools  Printout of application’s interface and code  Your planning tools include:  TOE chart  Sketch of interface  Flowcharts and/or pseudocode 67

68.  Use pseudocode or flowchart to plan an object’s code  To assign value to property of object while application is running  Use assignment statement with syntax: object.property = expression  To create comment  Begin comment text with an apostrophe (’)  Use the integer division operator (\) to divide and return an integer result 68

69.  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 69