Chapter Two Designing Applications Programming with Microsoft Visual Basic th Edition

Programming with Microsoft Visual Basic 2010, 5 th Edition Previewing the 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 2

Programming with Microsoft Visual Basic 2010, 5 th Edition Previewing the Playtime Cellular Application (cont’d.) Figure 2-2 Completed order 3

Programming with Microsoft Visual Basic 2010, 5 th Edition Lesson A Objectives 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 GUI control’s Layout, and labeling 4

Programming with Microsoft Visual Basic 2010, 5 th Edition Creating an Object-Oriented Application Programmer’s process in creating an OO application Meet with the client Plan the application (Create TOE chart) TOE chart Used to record tasks, objects, and events required for the application Build the user interface Code the application Test and debug the application Assemble the document 5

Programming with Microsoft Visual Basic 2010, 5 th Edition Planning an Object-Oriented Application Actively involve user in planning phase End product should closely match the user’s needs Steps for planning an OO application Identify the tasks the application needs to perform Identify the objects to which you will assign the tasks Identify the events required to trigger an object into performing its assigned tasks Draw a sketch of the user interface 6

Programming with Microsoft Visual Basic 2010, 5 th Edition Planning an Object-Oriented Application (cont’d.) Identifying the application’s tasks 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? What information will the application need to display on the screen and/or print on the printer? How will the user end the application? Will previous information need to be cleared from the screen before new information is entered? 7

Programming with Microsoft Visual Basic 2010, 5 th Edition Figure 2-6 Tasks identified in the TOE chart for Chapter 2 8

Programming with Microsoft Visual Basic 2010, 5 th Edition Planning an Object-Oriented Application (cont’d.) Identifying the objects Assign each task to an object in user interface Objects used for chapter 2 Label control Displays information that user should not change Button control Performs an action immediately after a Click event Text box control Provides an area for user to enter data 9

Programming with Microsoft Visual Basic 2010, 5 th Edition Planning an Object-Oriented Application (cont’d.) 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 10

Programming with Microsoft Visual Basic 2010, 5 th Edition Figure 2-9 Completed TOE chart ordered by ob ject 11 TOE Chart of Playtime Cellular Application

Programming with Microsoft Visual Basic 2010, 5 th Edition Planning an Object-Oriented Application (cont’d.) 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 12

Programming with Microsoft Visual Basic 2010, 5 th Edition Planning an Object-Oriented Application (cont’d.) Figure 2-10 Vertical arrangement of the Playtime Cellular application Information flow style ? Why ? 13

Programming with Microsoft Visual Basic 2010, 5 th Edition Planning an Object-Oriented Application (cont’d.) Figure 2-11 Horizontal arrangement of the Playtime Cellular application Information flow style ? Why ? 14

Programming with Microsoft Visual Basic 2010, 5 th Edition Planning an Object-Oriented Application (cont’d.) 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:” 15

Programming with Microsoft Visual Basic 2010, 5 th Edition Planning an Object-Oriented Application (cont’d.) 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 16

Programming with Microsoft Visual Basic 2010, 5 th Edition Lesson A Summary 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 (output) Build user interface Code application Test and debug application Assemble documentation 17

Programming with Microsoft Visual Basic 2010, 5 th Edition Lesson B Objectives After studying Lesson B, you should be able to: Build the user interface 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 18

Programming with Microsoft Visual Basic 2010, 5 th Edition Building the User Interface Use TOE chart and UI 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 19

Programming with Microsoft Visual Basic 2010, 5 th Edition Building the User Interface (cont’d.) Figure 2-12 Partially completed interface for the Playtime Cellular application 20

Programming with Microsoft Visual Basic 2010, 5 th Edition Building the User Interface (cont’d.) How to include 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 21

Programming with Microsoft Visual Basic 2010, 5 th Edition Building the User Interface (cont’d.) How to select 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 22

Programming with Microsoft Visual Basic 2010, 5 th Edition Building the User Interface (cont’d.) How to add 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 identifying a UI element 23

Programming with Microsoft Visual Basic 2010, 5 th Edition Building the User Interface (cont’d.) 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 24

Programming with Microsoft Visual Basic 2010, 5 th Edition Building the User Interface (cont’d.) How to add 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 25

Programming with Microsoft Visual Basic 2010, 5 th Edition Adding a Text Box Control to the Form (continued) Figure 2-13 Snap lines shown in the interface 26

Programming with Microsoft Visual Basic 2010, 5 th Edition 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 To lock controls Right-click the form (or any control on the form) Click Lock Controls on the Format menu Follow same procedure to unlock controls 27

Programming with Microsoft Visual Basic 2010, 5 th Edition Assigning Access Keys Access key Enables object to be selected using keyboard Key combination: Alt key + letter or number Shown in interface as underlined letter Each access key must be unique Assigning an access key Include an ampersand (&) in the control’s caption Example: “&Calculate Order” assigns ‘C’ to button 28

Programming with Microsoft Visual Basic 2010, 5 th Edition 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 29

Programming with Microsoft Visual Basic 2010, 5 th Edition Controlling the Tab Order 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 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 Make a list of objects to determine proper ordering 30

Programming with Microsoft Visual Basic 2010, 5 th Edition Controlling the Tab Order (cont’d.) Figure 2-15 TabIndex boxes showing the correct TabIndex values 31

Programming with Microsoft Visual Basic 2010, 5 th Edition 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 TabIndex property to a number that represents the order in which you want the control to receive focus 32

Programming with Microsoft Visual Basic 2010, 5 th Edition 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 Write an assignment statement Send the focus to a control during run time Include internal documentation (comment) in the code Write arithmetic expressions Use the Val and Format functions Locate and correct syntax errors 33

Programming with Microsoft Visual Basic 2010, 5 th Edition Coding the Application Code: program 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 34 UI Tasks

Programming with Microsoft Visual Basic 2010, 5 th Edition Coding the Application (cont’d.) Figure 2-18 Playtime Cellular application’s interface 35

Programming with Microsoft Visual Basic 2010, 5 th Edition Coding the Application (cont’d.) Figure 2-19 Playtime Cellular application’s TOE chart (ordered by object) 36 UI

Programming with Microsoft Visual Basic 2010, 5 th Edition Coding the Application (cont’d.) Using pseudocode to plan a procedure Psuedocode ( 模擬碼、擬碼 ) : Short phrases used to describe the steps of a program procedure btnCalc Click event procedure Calculates total phones ordered and total price Displays results 37 UI Psuedocode

Programming with Microsoft Visual Basic 2010, 5 th Edition Coding the btnClear Control’s Click Event Procedure btnClear control’s task: Clear screen for next order String: Zero or more 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 run time Assign zero-length string to control’s Text property Assign String.Empty to control’s Text property 38 steps

Programming with Microsoft Visual Basic 2010, 5 th Edition Coding the btnClear Control’s Click Event Procedure (cont’d.) How to assign 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 39

Programming with Microsoft Visual Basic 2010, 5 th Edition Focus method Allows you to move focus to specified control during run time Syntax: object.Focus() Object: Name of control that receives focus 40

Programming with Microsoft Visual Basic 2010, 5 th Edition Coding the Application (cont’d.) Figure 2-20 Pseudocode for the Playtime Cellular application 41

Programming with Microsoft Visual Basic 2010, 5 th Edition 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 42 example

Programming with Microsoft Visual Basic 2010, 5 th Edition Coding the btnClear Control’s Click Event Procedure (cont’d.) Figure 2-24 Comments entered in the General Declarations section 43

Programming with Microsoft Visual Basic 2010, 5 th Edition Writing Arithmetic Expressions Arithmetic expression Contains one or more arithmetic operators (e.g., + 、 - 、 * 、 /) Precedence numbers Indicate order of operations in expression Performed from lower precedence numbers to higher number If two operations are at same level, they are performed from left to right Parentheses can be used to override default precedence 44

Programming with Microsoft Visual Basic 2010, 5 th Edition Precedence Number of Arithmetic Operators Figure 2-25 Most commonly used arithmetic operators 45

Programming with Microsoft Visual Basic 2010, 5 th Edition Arithmetic Operators Unary operator Requires one operand Example: -10 (the negation operator) Binary operator Requires two operands Example: Integer division operator (\) Divides two integers; returns an integer as a result Discards the remainder Modulus operator (Mod) Returns only remainder in a division 46

Programming with Microsoft Visual Basic 2010, 5 th Edition Example of Arithmetic Expressions Figure 2-26 Examples of the integer division and Mod operators 47

Programming with Microsoft Visual Basic 2010, 5 th Edition Operation Sequence of Arithmetic Expressions Figure 2-27 Expressions containing more than one operator having the same precedence 48

Programming with Microsoft Visual Basic 2010, 5 th Edition Coding the Calculate Order Button Instructions in button’s Click event procedure are processed when user clicks button btnCalc control is responsible for: Calculating total number of phones ordered Calculating total price of the order Displaying results in two controls Notice problem in text example Numbers were treated as strings Values stored in Text property treated as strings 49 pseudocode

Programming with Microsoft Visual Basic 2010, 5 th Edition Pseudocode for Calculate Order Button Figure 2-28 Pseudocode for the btnCalc control’s Click event procedure 50 Code

Programming with Microsoft Visual Basic 2010, 5 th Edition Coding the Calculate Order Button Figure 2-29 Illustration of the total phones ordered calculation Figure 2-30 Illustration of the total price calculation 51

Programming with Microsoft Visual Basic 2010, 5 th Edition Incorrect Response of the Program Figure 2-31 Interface showing the incorrect results of the calculations 52

Programming with Microsoft Visual Basic 2010, 5 th Edition Predefined procedure Function: A 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 53 Example Code

Programming with Microsoft Visual Basic 2010, 5 th Edition Example of Val Function Figure 2-32 Examples of the Val function 54

Programming with Microsoft Visual Basic 2010, 5 th Edition Code of Using Val to Correct Calculations Figure 2-33 Val function entered in the assignment statements 55

Programming with Microsoft Visual Basic 2010, 5 th Edition Format Function The Format function Improves the appearance of numbers Syntax: Format(expression, style) Expression : Specifies number, date, time, or string to format Style : A predefined or user-defined format style Currency: An example of format style that displays number with dollar sign and two decimal places 56 Example Code

Programming with Microsoft Visual Basic 2010, 5 th Edition Coding the Calculate Order Button (cont’d.) Figure 2-34 Some of the predefined format styles in Visual Basic 57

Programming with Microsoft Visual Basic 2010, 5 th Edition Coding the Calculate Order Button (cont’d.) Figure 2-35 Format function entered in the procedure 58

Programming with Microsoft Visual Basic 2010, 5 th Edition Debugging the Application Syntax error: Occurs when a rule of programming language is broken Logic error: Occurs when program syntax is correct but outcome is not what was desired Causes may include missing instructions, instructions out of order, or wrong type of instruction 59 Example

Programming with Microsoft Visual Basic 2010, 5 th Edition Figure 2-39 Message dialog box when you start an application Figure 2-38 Suggestion for fixing the error 60

Programming with Microsoft Visual Basic 2010, 5 th Edition Error List when starting the Application Figure 2-40 Error list window in the IDE 61

Programming with Microsoft Visual Basic 2010, 5 th Edition Assembling the Documentation Important documentation Planning tools Printout of application’s interface and code Planning tools include: TOE chart Sketch of interface Flowcharts and/or pseudocode 62

Programming with Microsoft Visual Basic 2010, 5 th Edition Lesson C Summary Use pseudocode 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 63

Programming with Microsoft Visual Basic 2010, 5 th Edition Lesson C Summary (cont’d.) 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 64