Chapter 2: Designing Applications Programming with Microsoft Visual Basic 2005, Third Edition

Planning an Object-Oriented (OO) Application in Visual Basic 2005 Lesson A Objectives Plan an OO application in Visual Basic 2005 Complete a TOE (Task, Object, Event) chart Follow the Windows standards regarding the layout and labeling of controls Programming with Microsoft Visual Basic 2005, Third Edition

Solving the Problem Using a Procedure-Oriented Approach Emphasis is on how to accomplish a task Flowchart Document representing program logic Standardized symbols show problem-solving steps Pseudocode English phrases describing the required steps User has little, if any, control over the program Programming with Microsoft Visual Basic 2005, Third Edition

Solving the Problem Using an Object-Oriented (OO) Approach Object-oriented programs Include objects that respond to events; e.g., clicks Examples of objects appearing on an interface Buttons, picture boxes, list boxes, text boxes, labels TOE (Task, Object, Event) chart Used to plan your object-oriented programs User has more control over program execution Programming with Microsoft Visual Basic 2005, Third Edition

Solving the Problem Using an Object-Oriented (OO) Approach (continued) Figure 2-4: Order screen created by the OO application Programming with Microsoft Visual Basic 2005, Third Edition

Creating an OO 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 2005, Third Edition

Creating an OO Application (continued) Figure 2-6: Processes used by a builder and a programmer Programming with Microsoft Visual Basic 2005, Third Edition

Planning an OO Application Actively involve the user in the planning phase Steps involved in planning an OO application Identify the tasks the application needs to perform Identify objects to which tasks will be assigned Identify events causing an object to perform tasks Draw a sketch of the user interface Use a TOE chart to record tasks, objects, events Programming with Microsoft Visual Basic 2005, Third Edition

Identifying the Application’s Tasks What information, if any, will the application need to display on the screen and/or print on the printer? What information, if any, will the user need to enter into the user interface to display and/or print the desired information? What information, if any, will the application need to calculate to display and/or print the desired information? Programming with Microsoft Visual Basic 2005, Third Edition

Identifying the Application’s Tasks (continued) How will the user end the application? Will previous information need to be cleared from the screen before new information is entered? Programming with Microsoft Visual Basic 2005, Third Edition

Identifying the Objects Each task is assigned to an object in the interface Objects 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 2005, Third Edition

Identifying the Events Seven text boxes get and display order information No special event is needed Two label controls display quantity and total price xCalcButton, xClearButton, and xExitButton Have buttons perform assigned tasks when clicked Programming with Microsoft Visual Basic 2005, Third Edition

Identifying the Events (continued) Figure 2-11: Completed TOE chart ordered by object Programming with Microsoft Visual Basic 2005, Third Edition

Drawing a Sketch of the User Interface Organizing the user interface in Western countries Information flows either vertically or horizontally Vertical arrangement Information flows from top to bottom Essential information is located in the first column Horizontal arrangement The information flows from left to right Essential information is placed in the first row Programming with Microsoft Visual Basic 2005, Third Edition

Drawing a Sketch of the User Interface (continued) Figure 2-12: Vertical arrangement of the Skate-Away Sales interface Programming with Microsoft Visual Basic 2005, Third Edition

Drawing a Sketch of the User Interface (continued) Figure 2-13: Horizontal arrangement of the Skate-Away Sales interface Programming with Microsoft Visual Basic 2005, Third Edition

Drawing a Sketch of the User Interface (continued) White space may be used to group related controls Containers: objects used to group related controls Examples: group box, panel, table layout panel Interface elements should have meaningful labels Example: “Name” identifies xNameTextBox Follow other stylistic conventions in layout Example: size buttons should be proportional Programming with Microsoft Visual Basic 2005, Third Edition

Summary – Lesson A Steps to create an OO application Meet with the client Plan the application Build the user interface Code the application Test and debug the application Assemble the documentation Programming with Microsoft Visual Basic 2005, Third Edition

Building the User Interface Lesson B Objectives Build the user interface using your TOE chart and sketch Follow the Windows standards regarding the use of graphics, color, and fonts Set a control’s BorderStyle property Add a text box to a form Programming with Microsoft Visual Basic 2005, Third Edition

Building the User Interface Lesson B Objectives (continued) Lock the controls on the form Assign access keys to controls Use the TabIndex property Programming with Microsoft Visual Basic 2005, Third Edition

Preparing to Create the User Interface TOE chart and sketch guide two major tasks Placing the appropriate controls on forms Setting applicable properties of the controls Some features of the user interface Information is arranged vertically Controls are aligned and appropriately labeled Try to create an interface that no one notices Programming with Microsoft Visual Basic 2005, Third Edition

Preparing to Create the User Interface (continued) Figure 2-14: Partially completed interface for the Skate-Away Sales application Programming with Microsoft Visual Basic 2005, Third Edition

Including Graphics in the User Interface Graphics: icons or pictures added to an interface The human eye is attracted to pictures before text Include a graphic only if it is necessary Graphics for aesthetic use should be small Avoid distracting the user Programming with Microsoft Visual Basic 2005, Third Edition

Including Different Fonts in the User Interface Font property: controls font type, style, and size Recommendations for setting fonts Use sans serif fonts (without strokes); e.g. Tahoma Use 8 - 12 point fonts for user interface elements Use only one or two font sizes and one font type Avoid italics and underlining, limit bold text Objects added to a form inherit form’s font setting Programming with Microsoft Visual Basic 2005, Third Edition

Including Color in the User Interface The eye is drawn to color before black and white Guidelines for adding colors Use dark text against a light background Add up to three, not including black, white, gray Colors added should be complementary Avoid using a dark color for the background Use color to help identify interface elements Programming with Microsoft Visual Basic 2005, Third Edition

The BorderStyle Property Determines the style of a control’s border Three ways to set the BorderStyle property None: ensures control will not have a border FixedSingle: surrounds control with a thin line Fixed3D: gives control a 3-D appearance Example: text box BorderStyle often set to Fixed3D Programming with Microsoft Visual Basic 2005, Third Edition

Adding a Text Box Control to the Form Provides an area in the form for data entry Use the TextBox tool to add a text box control Programming with Microsoft Visual Basic 2005, Third Edition

Adding a Text Box Control to the Form (continued) Figure 2-16: Form showing the correct location of the City text box Programming with Microsoft Visual Basic 2005, Third 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 One way to lock controls Click the form (or any control on the form) Click Format on the menu bar Click Lock Controls Follow the same procedure to unlock the controls Programming with Microsoft Visual Basic 2005, Third Edition

Assigning Access Keys Access key Each access key must be unique Enables object to be selected using keyboard Key combination: Alt key + letter or number Each access key must be unique Assigning an access key Include an ampersand (&) in the control’s caption Example: &CalculateOrder assigns ‘C’ to button Programming with Microsoft Visual Basic 2005, Third Edition

Setting the TabIndex Property Focus: control state allowing a user to enter input Pressing Tab or access key shifts focus TabIndex property Determines when a control receive will receive focus Example: label with TabIndex of 0 receives focus first Revise TabIndex using Properties or Tab Order Make a list of objects to determine proper ordering Programming with Microsoft Visual Basic 2005, Third Edition

Summary – Lesson B To control the border around a label control, set the label control’s BorderStyle property To assign an access key to a control, type an ampersand (&) in the Text property of the control’s caption or identifying label To set the tab order, set each control’s TabIndex property to a number that represents the order in which you want the control to receive the focus Programming with Microsoft Visual Basic 2005, Third Edition

Coding, Testing, Debugging, and Documenting the Application Lesson C Objectives 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 Programming with Microsoft Visual Basic 2005, Third Edition

Coding, Testing, Debugging, and Documenting the Application Lesson C Objectives (continued) Include internal documentation in the code Write arithmetic expressions Use the Val and Format functions Programming with Microsoft Visual Basic 2005, Third Edition

Coding the Application Code: instructions added to an application Coding follows planning and building of interface TOE charts show which objects and events to code Skate-Away Sales application code requirements Three buttons associated with Click events Use pseudocode or flowchart to design procedure Programming with Microsoft Visual Basic 2005, Third Edition

Using Pseudocode to Plan a Procedure Pseudocode: instructions in English syntax Short phrases describe the steps of a procedure Travel directions are a type of pseudocode xExitButton Click Event Procedure (pseudocode) End the application Programming with Microsoft Visual Basic 2005, Third Edition

Using a Flowchart to Plan a Procedure Uses standardized symbols to show program logic Pseudocode can be used within symbols Oval symbol: start/stop symbol Rectangle symbol: process symbol Parallelogram: input/output symbol Flowlines: connect symbols Programming with Microsoft Visual Basic 2005, Third Edition

Coding the Clear Screen Button xClearButton’s task: clear screen for next order String: group of characters in quote marks (“”) Zero-length string (empty string) Pair of quote 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 2005, Third Edition

Coding the Clear Screen Button (continued) Figure 2-28: Pseudocode for the xClearButton’s Click event procedure Programming with Microsoft Visual Basic 2005, Third Edition

Assigning a Value to a Property During Run Time Assignment statement Instruction assigning a value to an object at runtime Syntax: [Me.]object.property=expression Me refers to the current form (optional) object and property are object and property names expression contains the value to be assigned Assignment operator (=): assigns value (right to left) Programming with Microsoft Visual Basic 2005, Third Edition

Assigning a Value to a Property During Run Time (continued) Figure 2-32: Second assignment statement entered in the procedure Programming with Microsoft Visual Basic 2005, Third Edition

Using the Focus Method Method: a predefined procedure Focus method Allows you to move the focus to a specified control Syntax: [Me.]object.Focus() Object is the name of the control that receives focus Programming with Microsoft Visual Basic 2005, Third Edition

Internally Documenting the Program Code Comments: internal documentation How to create a comment in Visual Basic 2005 Place an apostrophe (‘) before a statement The compiler ignores characters after apostrophe Color of comments is different than color of code Comments help make code readable Programming with Microsoft Visual Basic 2005, Third Edition

Internally Documenting the Program Code (continued) Figure 2-33: Completed Click event procedure for the xClearButton Programming with Microsoft Visual Basic 2005, Third Edition

Writing Arithmetic Expressions Contains arithmetic operators and operands Precedence numbers Indicate the order of operations in an expression Order that operations are performed From lower precedence number to higher number Parentheses override default precedence Programming with Microsoft Visual Basic 2005, Third Edition

Writing Arithmetic Expressions (continued) Figure 2-35: Most commonly used arithmetic operators and their order of precedence Programming with Microsoft Visual Basic 2005, Third Edition

Writing Arithmetic Expressions (continued) Unary operator: requires one operand; e.g., -7 Binary operator: requires two operands Associativity: orders operations at same level Left to right for operations with same precedence Integer division operator (\): Divides two integers, returns an integer as a result Modulus operator: returns a remainder Programming with Microsoft Visual Basic 2005, Third Edition

Coding the Calculate Order Button The Calculate Order button is responsible for: Calculating total number of skateboards ordered The 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 Observe one problem: numbers treated as strings Programming with Microsoft Visual Basic 2005, Third Edition

Coding the Calculate Order Button (continued) Figure 2-39: Code entered in the xCalcButton’s Click event procedure Programming with Microsoft Visual Basic 2005, Third Edition

The Val Function Function: predefined procedure Val function Performs a specific task and returns a value Val function Temporarily converts a string to a number Returns the number Syntax: Val(string): string will be treated as a number Val corrects assignments in xCalcButton’s procedure Programming with Microsoft Visual Basic 2005, Third Edition

The Val Function (continued) Figure 2-42: Val function entered in the xCalcButton’s Click event procedure Programming with Microsoft Visual Basic 2005, Third Edition

Using the Format Function to Format Numeric Output Format function: improves numbers display Syntax: Format(expression, style) Expression specifies number, date, time, or string Style: predefined or user defined format style Currency: example of a format style Displays number with a dollar sign and two decimal places Programming with Microsoft Visual Basic 2005, Third Edition

Aligning The Text Within A Control TextAlign property Specifies the position of the text within the control Using the TextAlign property in the order form Center text contained in the xTotalBoardsLabel and xTotalPriceLabel controls Programming with Microsoft Visual Basic 2005, Third Edition

Testing and Debugging the Application Test an application using some sample data Use both valid and invalid data Valid data: data that the application is expecting Invalid data: data that the application is not expecting Debugging: locating errors in the program Errors can be related to either syntax or logic Programming with Microsoft Visual Basic 2005, Third Edition

Assembling the Documentation Important documentation Planning tools Printout of application’s interface and code Your planning tools include: The TOE chart Sketch of the interface Flowcharts and/or pseudocode Programming with Microsoft Visual Basic 2005, Third Edition

Summary – Lesson C To assign a value to the property of an object while an application is running, use an assignment statement that follows the syntax: [Me.]object.property = expression To document Visual Basic code with comments, begin the comment with an apostrophe (’) To temporarily convert a string to a number, use the Val function Programming with Microsoft Visual Basic 2005, Third Edition