chapter two designing applications programming with microsoft visual basic 2010 5 th edition

Chapter TwoDesigning Applications

Programming with Microsoft Visual Basic 2010

5th Edition

Programming with Microsoft Visual Basic 2010, 5th Edition

Previewing the Playtime Cellular ApplicationPlaytime 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


Previewing the Playtime Cellular Application (cont’d.)

Figure 2-2 Completed order

3


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) chartFollow the Windows standards regarding

GUI control’sLayout, and labeling

4


Creating an Object-Oriented Application

Programmer’s process in creating an OO applicationMeet with the clientPlan the application (Create TOE chart)

TOE chartUsed to record tasks, objects, and events required for the application

Build the user interfaceCode the applicationTest and debug the applicationAssemble the document

5


Planning an Object-Oriented Application

Actively involve user in planning phaseEnd product should closely match the user’s

needsSteps 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


Planning an Object-Oriented Application (cont’d.)

Identifying the application’s tasksWhat 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


Figure 2-6 Tasks identified in the TOE chart for Chapter 28


Planning an Object-Oriented Application (cont’d.)Identifying the objectsAssign each task to an object in user interfaceObjects used for chapter 2

Label controlDisplays information that user should not change

Button controlPerforms an action immediately after a Click event

Text box controlProvides an area for user to enter data

9


Planning an Object-Oriented Application (cont’d.)Identifying the eventsDetermine which event (if any) must occur for an object to carry out its assigned taskText boxes and label controls

No special event is neededbtnCalc, btnClear, and btnExit buttons

Perform assigned tasks when clicked

10


Figure 2-9 Completed TOE chart ordered by object

11

TOE Chart of Playtime Cellular Application


Planning an Object-Oriented Application (cont’d.)Drawing a sketch of the user interfaceFollow Windows standards for designing the interfaceIn 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



Figure 2-10 Vertical arrangement of the Playtime Cellular application

Information flow style ? Why ?

13



Figure 2-11 Horizontal arrangement of the Playtime Cellular application

Information flow style ? Why ?

14


Planning an Object-Oriented Application (cont’d.)White space or containers may be used to

group related controlsContainers: Objects used to group related

controlsExamples: GroupBox, Panel, TableLayoutPanel

Label controls that display output should have meaningful namesExample: “Total Price” identifies lblTotalPrice

labelIdentifying labels should end with colon (:)

Example: “Total Price:”

15


Planning an Object-Oriented Application (cont’d.)Sentence capitalization

Only first letter in the first word is capitalizedUse for identifying labels

Book title capitalizationCapitalize first letter of each word except

articles, conjunctions, and prepositionsUse for button text

Buttons should be alignedAlso same height and width

Group related controls close to each other

16


Lesson A SummarySteps to create an OO application

Meet with clientPlan application

Identify needed tasks, objects, and eventsIdentify information needed as input to produce

desired result (output)Build user interfaceCode applicationTest and debug applicationAssemble documentation

17


Lesson B ObjectivesAfter studying Lesson B, you should be able to:Build the user interface using your TOE chart

and UI sketchFollow the Windows standards regarding the

use of graphics, fonts, and colorSet a control’s BorderStyle propertyAdd a text box to a formLock the controls on the formAssign access keys to controlsUse the TabIndex property

18


Building the User InterfaceUse TOE chart and UI sketch as guides

when building user interfacePlace appropriate controls on formsSet applicable properties of controls

Features of UI used in this lesson’s applicationInformation arranged vertically Controls aligned and appropriately labeled

Try to create an interface that no one notices

19


Building the User Interface (cont’d.)

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

20


Building the User Interface (cont’d.)How to include graphics in the user interfaceGraphics: 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 sparinglyGraphics for aesthetic use should be small

and positioned to avoid distracting user

21


Building the User Interface (cont’d.)How to select fonts for the interfaceFont 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


Building the User Interface (cont’d.)

How to add color to the interfaceThe eye is drawn to color before black and whiteAdd color only if there is good reasonMany people have trouble distinguishing colorGuidelines for adding colors

Use dark text against light backgroundAvoid using dark color for background

Limit colors to three, not including black, white, grayColors added should be complementaryDo not use color as only means of identifying a UI

element

23


Building the User Interface (cont’d.)BorderStyle property: Determines style of

control’s borderNone: Ensures control will not have borderFixedSingle: Surrounds control with thin lineFixed3D: Gives control a 3-D appearance

(default)AutoSize property: Determines whether

label control automatically sizes to fit its current contentsUse True for identifying labels, but use False

for output labels

24


Building the User Interface (cont’d.)How to add a Text Box Control to the FormText box control provides an area in the form for data entryUse TextBox tool to add a text box controlMake all text boxes same size and align them using snap linesBlue snap lines used for vertical alignmentPink snap lines used for horizontal alignment

25


Adding a Text Box Control to the Form (continued)

Figure 2-13 Snap lines shown in the interface

26


Locking the Controls on a FormLock controls after they are properly placed

Purpose: avoid inadvertently moving controlsA locked control is identified by a small lockTo lock controls

Right-click the form (or any control on the form)

Click Lock Controls on the Format menuFollow same procedure to unlock controls

27


Assigning Access KeysAccess key

Enables object to be selected using keyboardKey combination: Alt key + letter or number

Shown in interface as underlined letterEach access key must be uniqueAssigning an access key

Include an ampersand (&) in the control’s caption

Example: “&Calculate Order” assigns ‘C’ to button

28


Assigning Access Keys (cont’d.)Reasons to assign access keys

Allow user to work even if mouse does notAllow fast typists to keep hands on the

keyboardAllow 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


Controlling the Tab OrderFocus: A state ( 狀態 ) in which a control is

ready to accept user input or actionPressing 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 firstSet TabIndex using Properties window or

Tab Order ( 定位順序 ) option on View menuMake a list of objects to determine proper

ordering

30


Controlling the Tab Order (cont’d.)

Figure 2-15 TabIndex boxes showing the correct TabIndex values

31


Lesson B SummaryTo specify control’s border

Set BorderStyle propertyTo lock/unlock controls on form

Use Lock Controls option on Format menuTo assign an access key to control

Type an ampersand (&) in Text property of control or identifying label

To set tab orderSet TabIndex property to a number that

represents the order in which you want the control to receive focus

32


Lesson C ObjectivesAfter studying Lesson C, you should be able to:Code an application using its TOE chartPlan an object’s code using pseudocodeWrite an assignment statementSend the focus to a control during run timeInclude internal documentation (comment) in

the codeWrite arithmetic expressionsUse the Val and Format functionsLocate and correct syntax errors

33


Coding the ApplicationCode: program instructions added to an

applicationCoding is done after planning and building

interfaceTOE charts show which objects and events

need to be codedPlaytime Cellular application code

requirementsThree buttons associated with Click events

34

UITasks


Coding the Application (cont’d.)

Figure 2-18 Playtime Cellular application’s interface

35



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

36

UI


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 procedureCalculates total phones ordered and total

priceDisplays results

37

UIPsuedoco

de


Coding the btnClear Control’s Click Event ProcedurebtnClear 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

propertyAssign String.Empty to control’s Text property

38

steps


Coding the btnClear Control’s Click Event Procedure (cont’d.)How to assign a value to a property during run timeAssignment statement: Instruction assigning a value to object at run timeSyntax: 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


Focus method

Focus methodAllows you to move focus to specified control

during run timeSyntax: object.Focus()

Object: Name of control that receives focus

40



Figure 2-20 Pseudocode for the Playtime Cellular application

41


CommentsComments

Internal documentation in programUsed 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 statementComputer ignores all characters after

apostrophe for rest of lineComments are color-coded in IDE

42

example


Coding the btnClear Control’s Click Event Procedure (cont’d.)

Figure 2-24 Comments entered in the General Declarations section

43


Writing Arithmetic Expressions

Arithmetic expressionContains 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


Precedence Number of Arithmetic Operators

Figure 2-25 Most commonly used arithmetic operators

45


Arithmetic OperatorsUnary operator

Requires one operand Example: -10 (the negation operator)

Binary operatorRequires two operandsExample: 20 -10

Integer division operator (\)Divides two integers; returns an integer as a

resultDiscards the remainder

Modulus operator (Mod)Returns only remainder in a division

46


Example of Arithmetic Expressions

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

47


Operation Sequence of Arithmetic Expressions

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

48


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 orderedCalculating total price of the orderDisplaying results in two controls

Notice problem in text exampleNumbers were treated as stringsValues stored in Text property treated as

strings

49

pseudocode


Pseudocode for Calculate Order Button

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

50

Code


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


Incorrect Response of the Program

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

52


Predefined procedureFunction: A predefined procedure that

performs a specific task and returns a valueThe 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


Example of Val Function

Figure 2-32 Examples of the Val function

54


Code of Using Val to Correct Calculations

Figure 2-33 Val function entered in the assignment statements

55


Format FunctionThe Format function

Improves the appearance of numbersSyntax: Format(expression, style)

Expression: Specifies number, date, time, or string to format

Style: A predefined or user-defined format styleCurrency: An example of format style that displays number with dollar sign and two decimal places

56

Example Code


Coding the Calculate Order Button (cont’d.)

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

57


Coding the Calculate Order Button (cont’d.)

Figure 2-35 Format function entered in the procedure

58


Debugging the ApplicationSyntax error: Occurs when a rule of

programming language is brokenLogic error: Occurs when program syntax

is correct but outcome is not what was desiredCauses may include

missing instructions, instructions out of order, or wrong type of instruction

59

Example


Figure 2-39 Message dialog box when you start an application

Figure 2-38 Suggestion for fixing the error

60


Error List when starting the Application

Figure 2-40 Error list window in the IDE

61


Assembling the DocumentationImportant documentation

Planning toolsPrintout of application’s interface and code

Planning tools include:TOE chartSketch of interfaceFlowcharts and/or pseudocode

62


Lesson C SummaryUse pseudocode to plan an object’s codeTo assign value to property of object while

application is runningUse assignment statement with syntax:

object.property = expressionTo create comment

Begin comment text with an apostrophe (’)Use the integer division operator (\) to

divide and return an integer result

63


Lesson C Summary (cont’d.)Use modulus operator to divide two

numbers and return the remainderTo temporarily convert string to number,

use the Val functionUse Format function to improve the

appearance of numbersApplication should be tested with both valid

and invalid data

64

chapter two designing applications programming with microsoft visual basic 2010 5 th edition

Documents