1 Microsoft Visual Basic 2010 Week Two Designing Applications

1

Microsoft Visual Basic 2010

Week TwoDesigning Applications

2

Solving the Problem Using a Procedure-Oriented Approach

Emphasis of a program is on how to accomplish a task

A flowchart uses standardized symbols to show the steps needed to solve a problem

Pseudocode uses English phrases to describe the required steps

User has little, if any, control

3

Solving the Problem Using an Object-Oriented/Event-Driven

(OOED) Approach Object-oriented/Event-driven

Emphasis of a program is on the objects included in the interface and the events that occur on those objects

You will use a TOE (Task, Object, Event) chart to assist you in planning your object-oriented/event-driven programs

User has a lot of control

Users can enter information in any order, change what they entered at any time, and calculate a subtotal whenever they like

4

Sample TOE Chart

Task Object Event

5

GUI Design Tips

Organize the user interface so that the information flows either vertically or horizontally, with the most important information always located in the upper-left corner of the screen

Group related controls together using either white space or a frame

Align controls to minimize number of margins

6

A Builder’s Process vs. A Programmer’s Process

Meet with the client

Plan the home (blueprint)

Build the frame

Complete the home

Inspect the home and fix any problems

Assemble the documentation

Meet with the client

Plan the application (TOE chart)

Build the user interface

Code the application

Test and debug the application

Assemble the documentation

7

Step 1 – Meet with client

The client is the person you are building an application for

The client will provide

Business rules: How calculations are to be performed

Standards

Other requirements

8

Step 2 - Plan the Application

Identify the tasks the application needs to perform

Identify the objects to which you will assign those tasks

Identify the events required to trigger an object into performing its assigned task

Draw a sketch of the user interface

9

Identify the Application’s Tasks

What will the user need to enter?

What will the application need to calculate?

What will the application need to display (screen) and/or print (printer)?

How will the user end the application?

Will previous information need to be cleared from the screen?

10

Identifying the Objects

After completing the Task column of the TOE chart, you then assign each task to an object in the user interface

You use a label control to display information that you do not want the user to change while your application is running, and you use a button control to perform an action immediately after it is clicked by the user

After defining the application’s tasks and assigning those tasks to objects in the user interface, you then determine which objects need an event (such as clicking or double-clicking) to occur for the object to do its assigned task

11

Identifying the Events

Text boxes and Label controls display their contents automatically, so no special event is necessary for them to do their assigned task

The remaining objects listed in the TOE chart are the three buttons: CalcButton, ClearButton, and ExitButton

You will have the buttons perform their assigned tasks when they are clicked by the user

Then list the tasks you have assigned to each object in the Task column, and list the event in the Event column

12

Drawing a Sketch of the User Interface

While the design of an interface is open to creativity, there are some guidelines to which you should adhere so that your application is consistent with the Windows standards

In Western countries, you should organize the user interface so that the information flows either vertically or horizontally, with the most important information always located in the upper-left corner of the screen

13

Drawing a Sketch of the User Interface In a vertical arrangement

The information flows from top to bottom

The essential information is located in the first column of the screen

Secondary information is placed in subsequent columns

14


In a horizontal arrangement

The information flows from left to right

The essential information is placed in the first row of the screen

Secondary information placed in subsequent rows

15


You can use white space, a GroupBox control, or a Panel control to group related controls together

If buttons appear in the interface, they should be positioned either in a row along the bottom of the screen, or stacked in either the upper-right or lower-right corner

Limit to six the number of buttons in the interface

Place the most commonly used button first—either on the left when the buttons are along the bottom of the screen

Or on the top when the buttons are stacked in either the upper-right or lower-right corner

16


Notice that each text box and button control in the interface is labeled so the user knows the control’s purpose

Labels that identify text boxes should be left-aligned and positioned either above or to the left of the text box

Labels and captions should be meaningful

A button’s caption, on the other hand, should tell the user what action the button will perform when the button is clicked

17


The colon (:) distinguishes an identifying label from other text in the user interface

The Windows standard is to use sentence capitalization for identifying labels

Sentence capitalization means you capitalize only the first letter in the first word and in any words that are customarily capitalized

When using book title capitalization, you capitalize the first letter in each word, except for articles, conjunctions, and prepositions that do not occur at either the beginning or the end of the caption

18

GUI Design Tips

Either center the command buttons along the

bottom of the screen or stack them in either

the upper-right or lower-right corner

Use no more than six command buttons on a

screen

Place the most commonly used command

button first

19

GUI Design Tips

Assign meaningful captions to command buttons

Place the caption on one line and use from one to three words only

Use book title capitalization for command button captions

20

GUI Design Tips

Label each control in the interface. The label should be from one to three words only, and it should be entered on one line

Align each label on the left, and position either above or to the left of the control it identifies

Follow the label with a colon (:) and use sentence capitalization

21

Building the User InterfaceObjectives

Build the user interface using your TOE chart and sketch

Follow the Windows standards regarding the use of graphics, color, and fonts

Set the BorderStyle property Add a text box to a form Lock the controls on the form Assign access keys to controls Use the TabIndex property

22

Step 3 - Build the User Interface

Use the sketch you drew during the

Planning step

Follow the GUI design guidelines

23

Preparing to Create the User Interface

Maintain a consistent margin of two or three dots from the edge of the window

Position related controls on succeeding dots. Controls that are not part of any logical grouping may be positioned from two to four dots away from other controls

Try to create an interface that no one notices

24

More GUI Design Tips

Command buttons in the interface should be sized relative to each other

If the command buttons are centered on the bottom of the screen, then each button should be the same height; their widths, however, may vary

If the command buttons are stacked in a corner, then each should be the same height and the same width

25

Including Graphics in the User Interface

The human eye is attracted to pictures before

text, so include a graphic only if it is necessary to

do so

If you are including the graphic for aesthetics

only, use a small graphic and place it in a

location that will not distract the user

26

Including Different Fonts in the User Interface

Use 8, 10, or 12 point fonts for the elements in the user interface

A serif is a light cross stroke that appears at the top or bottom of a character

Use only one or two font sizes

Use a sans serif (Tahoma) font for the text

Use only one font type for all of the text

Avoid italics and underlining

Limit the use of bold text to titles, headings, and key items

27

Including Color in the User Interface

The human eye is attracted to color before black and white

Build the interface using black, white, and gray first, then add color only if you have a good reason to do so

Use either white, off-white, light gray, pale blue, or pale yellow for an application’s background, and use black for the text

28

Including Color in the User Interface

Always use dark text on a light background because it is the easiest to read

Never use a dark color for the background or a light color for the text

Limit the number of colors (other than white, black, and gray) to three

Never use color as the only means of identification for an interface element

29

The BorderStyle Property

BorderStyle property determines the style of a control’s border and can be set to None, FixedSingle, or Fixed3D

Text – the visible portion of an object

Textbox – can be set to a default value

Label – used for identification, information, or for read-only data

Button – used for identification

Form – displays in the title bar

30

Setting the BorderStyle Property of a Text Box and Label

Set to Fixed3D (the default) the BorderStyle property of text boxes

Set to None (the default) the BorderStyle of labels that identify other controls

Set to FixedSingle the BorderStyle property of labels that display program output, such as the result of a calculation

31

Adding a Text Box Control to the Form

A text box control provides an area in the

form where the user can enter data

32

Locking the Controls on a Form

Once you have placed all of the controls in the desired locations on the form, it is a good idea to lock the controls in their current positions so you do not inadvertently move them

Once the controls are locked, you will not be able to move them until you unlock them; you can, however, delete them

33

Assigning Access Keys

An access key allows the user to select an object using the Alt key in combination with a letter or number.

It is important to assign access keys to these controls for the following three reasons:

1. Allows a user to work with the application even if the mouse becomes inoperative

2. Allows users who are fast typists to keep their hands on the keyboard

3. Allows people with disabilities, which may prevent them from working with a mouse, to use the application

34

Assigning Access Keys

Each access key must be unique

You can assign an access key to any control that has a Caption property

Place an & to the left of the desired letter in the Text property

To give keyboard access to a text box, assign an access key to its identifying label, then set the label’s TabIndex value to one less than the text box’s TabIndex value

35

Setting the TabIndex Property

The TabIndex property determines the order in which a control receives the focus when the user presses either the Tab key or an access key while the application is running

When a control has the focus, it can accept user input

The TabIndex property for the first control added to a form is 0 (zero), the TabIndex property for the second control is 1, and so on

36


To determine the appropriate TabIndex settings for an application, you first make a list of the controls (in the interface) that can accept user input

The list should reflect the order in which the user will want to access the controls

Notice that each text box in the list is associated with an identifying label control, whose name appears immediately above the text box name in the list

37


Also notice that the TabIndex value assigned to each text box’s identifying label control is one number less than the value assigned to the text box itself

For a text box’s access key (which is defined in the identifying label) to work appropriately, you must be sure to set the identifying label control’s TabIndex property to a value that is one number less than the value stored in the text box’s TabIndex property

You can use the Properties list to set the TabIndex property for each control; or, you can use the Tab Order option on the View menu

38

Rules for Assigning Access Keys and Controlling the Focus

When assigning an access key to a control, use the first letter of the caption or identifying label, unless another letter provides a more meaningful association

Access keys should be unique

Assign a TabIndex value to each control in the interface, except for controls that do not have a TabIndex property

The TabIndex values should reflect the order in which the user will want to access the controls

39

Rules for Assigning Access Keys and Controlling the Focus

To give user’s keyboard access to text boxes, assign an access key to the text box control’s identifying label

Set the TabIndex property of the label control so that its value is one number less than the value in the TabIndex property of the corresponding text box

40

Coding, Testing, Debugging, and Documenting the Application

Objectives

Use the TOE chart to code the application

Use pseudocode to plan an object’s code

Write an assignment statement

Use the Focus method

Include internal documentation in the code

Write arithmetic expressions

Use the Val and Format functions

41

Coding the Application

The instructions are called code, and the process of writing the instructions is called coding

Use pseudocode to help you plan the code

Internally document the code by placing an apostrophe before the comment in the Code window

Print Order button1. Hide the 4 command buttons

2. Print the form

3. Display the 4 command buttons

4. Send the focus to the Clear Screen button

‘hide the command buttons

<code>

‘print the form

<code>

‘display the command buttons

<code>

‘set the focus

42

Coding the Clear Screen Button

According to the TOE chart, the Clear Screen button is assigned the task of clearing the screen for the next order

Following this logic, a zero-length string, also called an empty string, is a set of quotation marks with nothing between them, like this: “”

Assigning a zero-length string to the Text property of a control removes the contents of the control

43

Coding the Clear Screen Button

Notice that the list shown in Figure 2-25 is composed of short statements in English

The statements represent the steps the Clear Screen button needs to follow in order to prepare the screen for the next order

The programmer uses the pseudocode as a guide when coding the application

You use an assignment statement, which is simply a Visual Basic .NET instruction, to set the value of a property while an application is running

44

Steps for the Clear Screen Button

45

Assigning a Value to a Property During Run Time

You use the syntax [Me.]object.property=expression to set the value of an object’s property while an application is running

In the syntax, Me refers to the current form; notice that Me. Is optional, as indicated by the square brackets ([ ]) in the syntax

When it appears in an assignment statement, the equal sign (=) is often referred to as the assignment operator

46

Assigning a Value to a Property During Run Time

When an assignment statement is encountered in a program, the computer assigns the value of the expression appearing on the right side of the assignment operator (=) to the object and property that appears on the left side of the assignment operator

A method is a predefined Visual Basic procedure

47

Using the Focus Method

The Focus method allows you to move the focus to a specified control while the application is running

The syntax of the Focus method is [Me.]object.Focus(), where object is the name of the object to which you want the focus sent

It is a good practice to leave yourself some comments as reminders in the Code editor window

Programmers refer to this as internal documentation

48

Internally Documenting the Program Code

Visual Basic provides an easy way to document a program internally

You simply place an apostrophe (‘) before the statement you want treated as a comment

Visual Basic ignores everything that appears after the apostrophe on that line

49

Writing Arithmetic Expressions

The precedence numbers indicate the order in which Visual Basic performs the operation in an expression

Operations with a precedence number of 1 are performed before operations with a precedence number of 2, which are performed before operations with a precedence number of 3, and so on

However, you can use parentheses to override the order of precedence, because operations within parentheses are always performed before operations outside of parentheses

50

Operator Order of Precedence

You use the integer division operator (\) to divide two integers (whole numbers), and then return the result as an integer

The modulus arithmetic operator is also used to divide two numbers, but the numbers do not have to be integers

After dividing the numbers, the modulus arithmetic operator returns the remainder of the division

Operator Operation

^ exponentiation

- negation

*, / multiplication and division

\ integer division

Mod modulus arithmetic

+, - addition and subtraction

You can use parentheses to override the order of precedence

51

The Val Function

Like a method, a function is a predefined procedure that performs a specific task

The Val function, for instance, temporarily converts a string to a number, and then returns the number

The syntax of the Val function is Val(string), where string is the string you want treated as a number

52

Using the Format Function

You can use the Format function to improve the appearance of the numbers displayed in an interface

Syntax: Format(expression, style)

Expression specifies the number, date, time, or string whose appearance you want to format

Style is either the name of a predefined Visual Basic format style or, if you want more control over the appearance of the expression, a string containing special symbols that indicate how you want the expression displayed

53

Step 5 - Testing and Debugging

You test an application by starting it and entering some sample data

You should use both valid and invalid test data

Valid data is data that the application is expecting

Invalid data is data that the application is not expecting

Debugging refers to the process of locating errors in the program

54

Step 5 - Testing and Debugging

Program errors can be either syntax errors or logic errors

Most syntax errors are simply typing errors that occur when entering instructions

You create a logic error when you enter an instruction that does not give you the expected results

55

Step 6 – Assembling the Documentation

Assembling the documentation refers to putting in a safe place your planning tools and a printout of the application’s interface and code, so you can refer to them if you need to change the application in the future

Your planning tools include:

The TOE chart

Sketch of the interface

Flowcharts and/or pseudocode

56

Summary

You have completed the six steps

1. Meet with the client

2. Plan the application

3. Build the user interface

4. Code the application

5. Test and debug the application

6. Assemble the documentation

Documents

1 Microsoft Visual Basic 2010 Week Two Designing Applications