PROGRAMMING WITH MICROSOFT VISUAL BASIC TH EDITION Chapter Two Designing Applications

 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 Figure 2-2 Completed order

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

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 Figure 2-3 Processes used by a builder and a programmer

 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 Figure 2-4 Steps for planning an OO application

 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 Figure 2-6 Tasks entered in a TOE chart

 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

 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 Figure 2-9 Completed TOE chart ordered by ob ject

 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 Figure 2-10 Vertical arrangement of the Playtime Cellular application

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

 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

 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

 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

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

 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 Figure 2-12 Partially completed interface for the Playtime Cellular application

 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

 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

 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

 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

 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 Figure 2-13 Snap lines shown in the interface

 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

 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

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

 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 Figure 2-15 TabIndex boxes showing the correct TabIndex values

 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

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

 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 Figure 2-18 Playtime Cellular application’s interface

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

 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 Figure 2-20 Pseudocode for the Playtime Cellular application

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 Figure 2-21 Flowcharts for the Playtime Cellular application

 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

 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

 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

 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 Figure 2-24 Comments entered in the General Declarations section

 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 Figure 2-25 Most commonly used arithmetic operators

 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 Figure 2-26 Examples of the integer division and Mod operators

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

 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 Figure 2-28 Pseudocode for the btnCalc control’s Click event procedure

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

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

 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 Figure 2-32 Examples of the Val function

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

 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 Figure 2-34 Some of the predefined format styles in Visual Basic

62 Figure 2-35 Format function entered in the procedure

 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

 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 Figure 2-39 Message dialog box Figure 2-38 Suggestion for fixing the error

66 Figure 2-40 Error list window in the IDE

 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

 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

 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