IM VBN



Tutorial 2

Designing Applications

Lesson A: Planning an OOED Application in Visual Basic .NET

Lesson B: Building the User Interface

Lesson C: Coding, Testing, Debugging, and Documenting the Application

[pic]

Instructor’s Notes

Overview

Outline

Objectives

Lecture Notes

Discussion Topics

Extra Projects

Key Terms

[pic]

Overview

Designing an application is the process of deciding what an application will do, how it will do it, and what it will look like. Lesson A covers the basic concepts of OOED (Object-Oriented/Event-Driven) design, including planning a TOE (Task, Object, Event) chart and following the Windows standards for layout and labeling of controls. Lesson B explores building the user interface using the TOE chart; following Windows standards for graphics; adding text box control; using the TabIndex property to control focus; locking controls; and assigning access keys. Lesson C covers the use of a TOE chart to code an application, using pseudocode, using Focus method, and additional coding and documentation details including using built-in functions.

Outline

|Lecture Topics |Pages # |Teaching Suggestions in this Manual |

|Planning an OOED Application in Visual Basic .NET |83-98 |Procedure-Oriented vs. Object-Oriented/Event-Driven to GUI |

| | |Guidelines |

|Building the User Interface |104-119 |Build the User Interface through Access Keys |

|Coding, Testing, Debugging, and Documenting the Application |125-140 |Code the Application through Summarization |

Planning an OOED Application in Visual Basic .NET

Lesson A Objectives:

After completing this lesson, you will be able to:

• Plan an OOED application in Visual Basic .NET

• Complete a TOE (Task, Object, Event) chart

• Follow the Windows standards regarding the layout and labeling of controls

Technical Notes

There are student files available that can be installed at a proper location. In many instances, the student will need to copy the files to their own working directory. This may be a mapped server location or a floppy disk. Much of this depends upon your laboratory setup.

Lecture Notes

Creating an OOED Application

The process a programmer follows when creating an OOED application is similar to the process a builder follows when building a home. Figure 2-6 lists a builder’s process and a programmer’s process. The programmer tests the completed application, and any problems, called bugs, are fixed before the application is given to the user.

NOTE: Applications do not appear by magic. A programmer creates applications. In order to create an application, the programmer must know certain things:

• What the program is supposed to accomplish

• What rules need to be applied (such as the minimum and maximum order amount)

• What the UI should look like

Doing this is called Application Design.

Planning an OOED Application

Planning an OOED application requires the following four steps:

1. Identify the tasks the application needs to perform.

2. Identify the objects to which you will assign those tasks.

3. Identify the events required to trigger an object into performing its assigned tasks.

4. Draw a sketch of the user interface.

Identifying the Application’s Tasks

When identifying the tasks an application needs to perform, it is helpful to ask the following questions:

• 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?

• How will the user end the application?

• Will previous information need to be cleared from the screen before new information is entered?

Identifying the Objects

After completing the Task column of the TOE chart, you then assign each task to an object in the user interface. For this application, the only objects you will use, besides the Windows form itself, are the button, label, and text box controls.

Identifying the Events

Text boxes accept and display information automatically, so no special event is necessary for them to do their assigned task. Label controls automatically display their contents so, here again, no special event needs to occur. The remaining objects listed in the TOE chart are the three buttons: CalcButton, ClearButton, and ExitButton. Then list the tasks you have assigned to each object in the Task column, and list the event in the Event column.

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. In a vertical arrangement the information flows from top to bottom; the essential information is located in the first column of the screen, while secondary information is placed in subsequent columns. In a horizontal arrangement, on the other hand, the information flows from left to right; the essential information is placed in the first row of the screen, with secondary information placed in subsequent rows.

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, and 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. 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. 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.

1 Walk through:

Fill in the tasks for the application. Point out that one may iterate over the tasks.

First, identify major tasks.

Then, identify the details on how to accomplish the task.

Identify the objects involved in collecting information.

Identify events that will cause tasks to be performed.

Point out different ways to sketch the UI.

2 QUICK QUIZ

1. What is OOED? ANSWER: Object-oriented/Event-driven

2. What is a TOE? ANSWER: A chart indicating the Tasks, Objects and Events that are needed by an application.

3. What are the four steps in planning an OOED? ANSWER: Identify the tasks required; identify which objects will perform which tasks; identify the trigger events; draw a sketch of the user interface.

Building the User Interface

Lesson B Objectives:

After completing this lesson, you will be able to:

• 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

Preparing to Create the User Interface

Now, after planning the application, you will use the TOE chart and the sketch of the form to construct the UI (User Interface). This is where you set how the window will look when the application is executed. You can:

A. Create the entire interface and then set properties

B. Set properties for each object as it is placed on the form

It is somewhat a matter of choice. However, it may be more straightforward to set properties for an object as it is placed on a form.

NOTE: Often you can create an object, say a textbox, set properties, and then copy to get another textbox just like the original. Control arrays are gone! Also, unlike prior versions of Visual Basic, you will not have the problem of accidentally copying a control and making a control array. All you have to do now is name the copied version with all the properties.

Before continuing with updating the Skate solution, you will learn some guidelines for creating a graphical user interface (GUI).

NOTE: All users of Windows applications expect that every application will work like all the others. That is what these guidelines are about.

To design a Windows application, you must know how Windows applications work. Each person has to pay attention to what works and what doesn’t. Users expect that all applications will work in a similar manner. The main thing about the design is that the user must feel comfortable with the resultant program.

NOTE: These guidelines are just that, they are not absolute. If the company has a set of interface standards, those standards supercede Windows standards.

Walk through the interface design guidelines and then have the students sketch the interfaces for the application.

3 Hands-On

To save time, a partially completed solution is available that is only missing one textbox. The default location is \vbnet\Tut02\Order Solution.sln. Buttons are arranged across the bottom.

• Demonstrate how to align controls and show how to use the alignment dots that show on the form at design time.

• Explain the difference between Serif and Sans Serif fonts. Discuss the available fonts and the Tahoma font.

o Sans means without. Sans Serif means without wings on the characters. Two of the most common Sans Serif fonts are Arial and Tahoma. Tahoma is now the preferred font.

o Serif fonts have wings on the characters (like the text in the book). Times New Roman is a common Serif font.

• Explain about using fonts in building applications. Discuss the use of sizes and styles.

o The default font size for most items is 8.25. Some users (like me) find this too small. Make sure the text is readable. Many like a size of 10 or 12.

o Generally, avoid italics, bold, or underline. Underline generally implies a hyperlink.

• Discuss the use of color and the problems some have with color

1. Users may have monochrome monitors.

2. Some people suffer color confusion.

3. Colors are personal preferences. If you use colors, allow the user to select the color.

4. Colors have special meaning in certain cultures.

Usually, use gray background, black text and white for other items.

Including Different Fonts in the User Interface

In general, keep the design simple. Do not get too fancy. There may be some areas in which you disagree with the guidelines presented in the book. These are guidelines – not absolute rules. In terms of fonts, remind students that things like underlining often are interpreted as URLs. Pick a font size that can be easily read. A serif is a light cross stroke that appears at the top or bottom of a character. Limit use of bold text to titles, headings, and key items.

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. Limit the number of colors to three, not including white, black, and gray. The colors you choose should complement each other. Never use color as the only means of identification for an element in the user interface.

The BorderStyle Property

The BorderStyle property determines the style of a control’s border and can be set to None, FixedSingle, or Fixed3D. The BorderStyle property of the text boxes is set to Fixed3D(the default for a text box.

Setting the Text Property

Talk about the Text property and how it changes for the various controls. If you have a read-only label, you often will use a border to distinguish it from an identifier label.

NOTE: Warn students again about confusion between the Text property and the Name property. Visual Basic .NET sets these to the same value by default when the object is instantiated.

NOTE: In the book, it appears that identifier labels are named with a prefix Id.

Adding a Text Box Control to the Form

A text box control provides an area in the form where the user can enter data.

Locking the Controls on a Form

Once you have placed all of the controls in the desired locations on the forms, 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.

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. Access keys allow a user to work with the application even if the mouse becomes inoperative.

2. Access keys allow users who are fast typists to keep their hands on the keyboard.

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

You assign an access key by including an ampersand (&) in the control’s caption or identifying label.

NOTE: Access keys should be unique. If you use the same access key for more than one object, Visual Basic .NET will use the tab order to determine which object to transfer focus to. If then you press the alt-key again, focus will be transferred to the next object with that access key.

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.

NOTE: When an application is running, only one control can have focus at any time. When a control has focus the control is ready to receive user input. If the insertion point appears inside a Text box that indicates that the control has focus. If a command button shows a darkened border, as well as a dotted rectangle around its Text, it has focus. Focus can be moved to another control via the Tab key according to the TabIndex property. Demonstrate how the TabIndex property controls what happens when the user presses the tab key. Demonstrate how to use the View(Tab Order menu to visually set the tab order.

Walkthrough:

Explain how access keys are used to allow easy use of the form.

• Show adding the text box on the form

• Demo how the new text box is the last thing tabbed to on the form

• Use the visual tab order settings to change the tab order

• Demo how the new text box now is accessed through tabbing and the access key

4

5 QUICK QUIZ

1. What is the BorderStyle property? ANSWER: This determines what the style of the label’s border and can be None, FixedSingle, or Fixed3D.

2. What is the TabIndex property? ANSWER: This determines the order that controls get focus when the Tab key is pressed.

3. What does it mean to ‘Lock the controls’? ANSWER: All controls on the form cannot be moved by using the mouse. This is to prevent accidentally moving the controls.

Coding, Testing, Debugging and Documenting the Application

Lesson C Objectives:

After completing this lesson, you will be able to:

• Use the TOE chart to code the application

• Use pseudocode t

• Write an assignment statement

• Use the Focus method

• Include internal documentation in the code

• Write arithmetic expressions

• Use the Val and Format functions o plan an object’s code

Code the Application

Now that you have completed the UI, you need to tell Visual Basic .NET how to respond to the events. The process of writing Visual Basic .NET statements is called coding. In the TOE chart you have identified the events that need to be handled. You will learn about precedence and associatively of mathematical operators.

This lesson introduces basic concepts and techniques of coding and testing your code. You can use pseudocode to plan an event’s logic. It is important to use internal documentation to help remember what the coding is intended to accomplish. These are called Comments.

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. A string is simply a group of characters enclosed in quotation marks. A zero-length string, also called an empty string, is a set of quotation marks with nothing between them. 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.

Assigning a Value to a Property During Run Time

The format of the assignment statement: [Me].object.property = value. Items in square brackets are optional parts of the instruction. Other parts indicate where the programmer must supply pertinent information. VB assigns the value on the right side to the object and property appearing on the left side. This will typically be used to assign an arithmetic expression to a control property.

The use of Me will cause an IntelliSense dropdown that will help identify the correct object. The dot-resolution operator is used to identify different parts of an expression.

NOTE: When entering an expression such as me.nametextbox.text = “” Visual Basic .NET will automatically recapitalize the expression with the capitalization used when object was named. Me.NameTextbox.Text. This is one reason to use casing when naming objects.

Using the Focus Method

The Focus method allows you to move the focus to a specified control while the application is running. Explain that focus indicates what object will receive keystrokes if the keyboard is used. A program can use the Focus method – Me.NameTextbox.Focus() – to cause the NameTextbox object to have the focus. The user can cause focus to change by clicking on an object or pressing the tab key. Point out how the various objects appear when they have focus. This relates back to TabOrder.

NOTE: The Focus method replaces the SetFocus method of VB6. Also, all methods in Visual Basic .NET must have parenthesis even if there are no arguments.

Internally Documenting the Program Code

Visual Basic .NET 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 .NET ignores everything that appears after the apostrophe on that line.

Writing Arithmetic Expressions

Most computer programs do calculations. Operators are used to perform arithmetic manipulation. The precedence numbers indicate the order in which Visual Basic .NET performs the operation in an expression. When more that one operation is used, Visual Basic .NET has a strict operator order of precedence that is followed. If operators have equal precedence, Visual Basic .NET performs operations left to right. Expressions in parenthesis are always evaluated first.

Give some examples of expressions.

• 3 + 12 / 3 -1 The 12/3 is performed first to give 4

• 3 + 12 / (3 – 1) The (3 - 1) is performed first, then 12 / 2

The parentheses clarify the way the calculation should proceed. Figure 2-28 lists the arithmetic operators and their order of precedence.

NOTE: Most will not understand integer division. Explain that when integer division is used, the resultant is always an integer: 211\4 yields 52 while 211/4 yields 52.75. You may also need to explain exponentiation. Many will not understand the Mod operator. Point out the 211 Mod 4 returns 75, the remainder of the division. One use is for determining leap years. If the year Mod 4 is zero, it is a leap year unless year Mod 200 is zero.

WALKTHROUGH:

Talk about pseudocode and translation into Visual Basic .NET expressions:

Calculate order button

1. Calculate total skateboards = number of blue skateboards + number of yellow skateboards

2. Calculate total price = total skateboards * skateboard price * (1 + sales tax rate)

3. Display total skateboards and total price in labels

4. Set focus to clear screen button

Translate pseudocode into Visual Basic .NET statements

1. Me.TotalBoardsLabel.Text = Me.BlueTextbox.Text + Me.YellowTextbox.Text

2. Me.TotalPriceLabel.Text = Me.TotalBoardsLabel.Text * Me.PriceTextBox.Text * _ (1 + Me.RateTExtbox.Text)

3. Me.ClearButton.Focus()

Note: Step 3 of pseudocode is accomplished in steps 1 and 2 of the statements.

What happens when you enter something that is not a number for the number of skateboards? You get an error!

To deal with such, you can use a built-in Visual Basic .NET function.

Coding the Calculate Order Button

While a method does a unit of work, a function also returns a value that you can use.

Point out that there are many built-in functions that can be used in a program. That way, each programmer does not have to write all repetitive functions. The CLR is the repository of many of these functions in the class libraries.

The Val Function

The Visual Basic .NET Val function is a predefined procedure that performs a specific task. The Val function temporarily converts a string to a number, and then returns the number. Point out that the Val function will return any characters that happen to be digits or a decimal point up to the point a non-digit or decimal point is encountered.

Using the Format Function

The Format function is used to improve the appearance of the numbers displayed in an interface. The expression is :

Format(expression, style)

Style can be Currency, Fixed, Standard, Percent.

Some of Visual Basic’s predefined formats:

FormatCurrency

FormatNumber

FormatDateTime

FormatPercent

Testing and Debugging the Application

Testing is the process of trying your program with data

• Test with valid data to ensure that your program gets the correct answer. Valid data is data that the application is expecting.

• Text with invalid data to see what the program does. Invalid data is data that the application is not expecting.

Debugging is the process of locating and repairing errors in the program.

NOTE: The historical story is that the term debugging comes from Admiral Grace Hopper finding a problem in the computer. Some insects got inside the computer and fried themselves on the circuitry. Hence, the term debug was coined.

There are two types of errors in a program:

1. Syntax errors: You type a name incorrectly. These are generally easy to fix because the Visual Basic .NET compiler finds them.

2. Logic errors: The result of a program statement is not what you meant. Testing these requires that you examine the program statements to ensure validity. For example, you may need parenthesis in calculations.

NOTE: Error avoidance. Use the Val function to force anything used into a calculation to a number.

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.

You now have completed the six steps involved in creating an application:

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.

7 QUICK QUIZ

1. What is an assignment statement? ANSWER: This is typically used to assign an arithmetic expression to an object’s property.

2. What is pseudocode? ANSWER: English-like statements that convey the solution to a coding problem, without regard to the specific syntax of the coding language.

3. How do you test a running application? ANSWER: By supplying both valid (expected) data and invalid data. The application should handle both kinds of input.

NOTE: If you have an error, you will be able to determine values of internal data, such as a Textbox value. However, unlike Visual Basic 6, you cannot change code on the fly and continue in Visual Basic .NET.

Summarization

You have now walked through the basic steps for building a Visual Basic .NET application.

Discussion Topics

1. Why is it a good idea to test an application with invalid data?

2. Why is it a good idea to use pseudocode?

3. Why is it a good idea to use internal documentation?

4. What is debugging?

5. What kinds of errors can occur in a program?

Extra Projects

2

3 1. Temperature Conversion

Write an application that converts an input temperature from Fahrenheit to Celsius. The formula for converting from Fahrenheit to Celsius is:

Celsius = 5/9 * (Fahrenheit – 32)

The application should have three command buttons: Exit, Start, and Calculate. Display two labels: Fahrenheit and Celsius. Display empty text boxes to the right of each label.

Command Button Actions:

• Start: causes a short message to appear, telling the user that they should enter a temperature in Fahrenheit in the text box with the Fahrenheit label to its left. Start should give focus to the text box to the right of the Fahrenheit label.

• Calculate: causes the converted Celsius temperature to appear in the text box to the right of the Celsius label.

• Exit: causes the application to end

4

5 2. Average Calculation

Write an application that calculates the average of three numbers.

The application should have three command buttons: Exit, Start, and Calculate. Display four labels: “Value1”, “Value2”, “Value3”, and “Average”. Each label should have an empty text box to its right.

Command Button Actions:

• Start: causes a short message to appear, telling the user that they should enter values into the three text boxes. Start should give focus to the text box to the right of the “Value1” label.

• Calculate: causes the computed average to appear in the text box to the right of the “Average” label.

• Exit: causes the application to end

Key Terms

Debugging – The process of locating syntax and logic errors in a program.

Function – A procedure that you can use to do programming work for you.

Precedence –The order of evaluation of mathematical operators in an expression

Pseudocode –A series of English-like statements that express the solution to a programming problem.

Testing – Running a program with various kinds of input (valid and invalid) and verifying that it handles all the input correctly.

Solutions to Exercises can be found within the Instructor’s Resource Kit (CD-ROM) that accompanies this text or at the following link:



................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download