Planning an Object-Oriented Application
❚
LESSON A
LES S ON A
After studying Lesson A, you should be able to:
• Plan an object-oriented Windows application in Visual Basic 2010
• Complete a TOE (Task, Object, Event) chart
• Follow the Windows standards regarding the layout and labeling of
controls
Creating an Object-Oriented Application
As Figure 2-3 indicates, the process a programmer follows when creating
an object-oriented (OO) application is similar to the process a builder follows when building a home. Like a builder, a programmer first meets with
the client to discuss the client’s wants and needs. Both then create a plan for
the project. After the client approves the plan, the builder builds the home’s
frame, whereas the programmer builds the user interface, which is the application’s frame. Once the frame is built, the builder completes the home by
adding the electrical wiring, walls, and so on. The programmer, on the other
hand, completes the application by adding the necessary code to the user
interface. When the home is complete, the builder makes a final inspection
and corrects any problems before the customer moves in. Similarly, the programmer tests the completed application and fixes any problems, called bugs,
before releasing the application to the user. The final step in both processes is
to assemble the project’s documentation (paperwork), which then is given to
the customer/user.
A builder’s process
1. Meet with the client
2. Plan the home (blueprint)
3. Build the frame
4. Complete the home
5. Inspect the home and fix any problems
6. Assemble the documentation
Figure 2-3
A programmer’s process
1. Meet with the client
2. Plan the application (TOE chart)
3. Build the user interface
4. Code the application
5. Test and debug the application
6. Assemble the documentation
Processes used by a builder and a programmer
You will learn how to plan an OO application in this lesson. Steps three
through six of the process are covered in Lessons B and C.
Planning an Object-Oriented Application
As any builder will tell you, the most important aspect of a home is not its
beauty. Rather, it is how closely the home matches the buyer’s wants and
needs. The same is true of an OO application. For an application to fulfill the
wants and needs of the user, it is essential for the programmer to plan the
application jointly with the user. It cannot be stressed enough that the only
way to guarantee the success of an application is to actively involve the user
63
CHAPTER 2
Designing Applications
in the planning phase. The steps for planning an OO application are listed
in Figure 2-4.
64
1.
2.
3.
4.
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.
Figure 2-4
Steps for planning an OO application
You can use a TOE (Task, Object, Event) chart to record the application’s
tasks, objects, and events, which are identified in the first three steps of the
planning phase. In the next section, you begin completing a TOE chart for
the Playtime Cellular application. The first step is to identify the application’s
tasks.
Identifying the Application’s Tasks
Realizing that it is essential to involve the user when planning the application, you meet with the sales manager of Playtime Cellular, Ms. Garrison,
to determine her requirements. You ask Ms. Garrison to bring the form the
salespeople currently use to record the orders. Viewing the current forms
and procedures will help you gain a better understanding of the application.
You also can use the current form as a guide when designing the user interface. Figure 2-5 shows the current order form used by the company.
Playtime Cellular Order Form
Customer name:
Address:
City:
State:
Number of blue
phones ordered
Figure 2-5
ZIP:
Number of pink Total number of phones ordered
phones ordered
Total price
Current order form used by Playtime Cellular
When identifying the major tasks an application needs to perform, it is
helpful to ask the questions italicized in the following bulleted items. The
answers pertaining to the Playtime Cellular application follow each question.
• What information will the application need to display on the screen and/
or print on the printer? The Playtime Cellular application should display
the customer’s name, street address, city, state, ZIP code, number of blue
phones ordered, number of pink phones ordered, total number of phones
ordered, and total price of the order. In this case, the application does not
need to print anything on the printer.
Planning an Object-Oriented Application
LESSON A
• What information will the user need to enter into the user interface to
display and/or print the desired information? In the Playtime Cellular
application, the salesperson (the user) must enter the customer’s name,
street address, city, state, ZIP code, and number of blue and pink phones
ordered.
• What information will the application need to calculate to display and/
or print the desired information? The Playtime Cellular application needs
to calculate the total number of phones ordered and the total price of the
order.
65
• How will the user end the application? All applications should provide a
way for the user to end the application. The Playtime Cellular application
will use an Exit button for this task.
• Will previous information need to be cleared from the screen before new
information is entered? After the salesperson enters and calculates an
order, he or she will need to clear the customer’s information from the
screen before entering the next order.
Figure 2-6 shows the Playtime Cellular application’s tasks listed in a TOE
chart. The tasks do not need to be listed in any particular order. In this case,
the data entry tasks are listed first, followed by the calculation tasks, display
tasks, application ending task, and screen clearing task.
Task
Get the following order information from the user:
Customer’s name
Street address
City
State
ZIP code
Number of blue phones ordered
Number of pink phones ordered
Object
Event
Calculate total phones ordered and total price
Display the following information:
Customer’s name
Street address
City
State
ZIP code
Number of blue phones ordered
Number of pink phones ordered
Total phones ordered
Total price
End the application
Clear screen for the next order
Figure 2-6
Tasks entered in a TOE chart
You can draw
a TOE chart
by hand or use
the table feature
in a word
processor (such as
Microsoft Word).
CHAPTER 2
Designing Applications
Identifying the Objects
66
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. As you already know, you use a label to display information that
you do not want the user to change while the application is running, and you
use a button to perform an action immediately after the user clicks it. You
use a text box to give the user an area in which to enter data.
The first task listed in Figure 2-6 is to get the order information from the
user. For each order, the salesperson will need to enter the customer’s name,
address, city, state, and ZIP code, as well as the number of blue phones
ordered and the number of pink phones ordered. Because you need to provide the salesperson with areas in which to enter the information, you will
assign the first task to seven text boxes—one for each item of information. The
three-character ID used when naming text boxes is txt, so you will name the
text boxes txtName, txtAddress, txtCity, txtState, txtZip, txtBlue, and txtPink.
The second task listed in the TOE chart is to calculate both the total number
of phones ordered and the total price. So that the salesperson can calculate
these amounts at any time, you will assign the task to a button named btnCalc.
The third task listed in the TOE chart is to display the order information, the
total number of phones ordered, and the total price. The order information
is displayed automatically when the user enters that information in the seven
text boxes. The total phones ordered and total price, however, are not entered
by the user. Instead, those amounts are calculated by the btnCalc control.
Because the user should not be allowed to change the calculated results, you
will have the btnCalc control display the total phones ordered and total price
in two label controls named lblTotalPhones and lblTotalPrice. Notice that
the task of displaying the total phones ordered involves two objects: btnCalc
and lblTotalPhones. The task of displaying the total price also involves two
objects: btnCalc and lblTotalPrice.
The last two tasks listed in the TOE chart are “End the application” and
“Clear screen for the next order.” You will assign the tasks to buttons named
btnExit and btnClear, respectively; doing this gives the user control over
when the tasks are performed. Figure 2-7 shows the TOE chart with the Task
and Object columns completed.
Task
Get the following order information from the user:
Customer’s name
Street address
City
State
ZIP code
Number of blue phones ordered
Number of pink phones ordered
txtName
txtAddress
txtCity
txtState
txtZip
txtBlue
txtPink
Calculate total phones ordered and total price
btnCalc
Figure 2-7
Object
Tasks and objects entered in a TOE chart (continues)
Event
Planning an Object-Oriented Application
LESSON A
(continued)
Task
Display the following information:
Customer’s name
Street address
City
State
ZIP code
Number of blue phones ordered
Number of pink phones ordered
Total phones ordered
Total price
txtName
txtStreet
txtCity
txtState
txtZip
txtBlue
txtPink
btnCalc, lblTotalPhones
btnCalc, lblTotalPrice
End the application
btnExit
Clear screen for the next order
btnClear
Figure 2-7
Object
Event
67
Tasks and objects entered in a TOE chart
Identifying the Events
After defining the application’s tasks and assigning the tasks to objects in the
interface, you then determine which event (if any) must occur for an object
to carry out its assigned task. The seven text boxes listed in the TOE chart in
Figure 2-7 are assigned the task of getting and displaying the order information. Text boxes accept and display information automatically, so no special
event is necessary for them to do their assigned task. The two label controls
listed in the TOE chart are assigned the task of displaying the total number of
phones ordered and the total price of the order. Label controls automatically
display their contents; so, here again, no special event needs to occur. (Recall
that the two label controls will get their values from the btnCalc control.) The
remaining objects listed in the TOE chart are the three buttons. You will have
the buttons perform their assigned tasks when the user clicks them. Figure 2-8
shows the completed TOE chart for the Playtime Cellular application.
Task
Get the following order information from the user:
Customer’s name
Street address
City
State
ZIP code
Number of blue phones ordered
Number of pink phones ordered
Object
Event
txtName
txtAddress
txtCity
txtState
txtZip
txtBlue
txtPink
None
None
None
None
None
None
None
Calculate total phones ordered and total price
btnCalc
Click
Figure 2-8
Completed TOE chart ordered by task (continues)
CHAPTER 2
Designing Applications
(continued)
68
Task
Display the following information:
Customer’s name
Street address
City
State
ZIP code
Number of blue phones ordered
Number of pink phones ordered
Total phones ordered
Total price
Object
Event
txtName
txtStreet
txtCity
txtState
txtZip
txtBlue
txtPink
btnCalc, lblTotalPhones
btnCalc, lblTotalPrice
None
None
None
None
None
None
None
Click, None
Click, None
End the application
btnExit
Click
Clear screen for the next order
btnClear
Click
Figure 2-8
Completed TOE chart ordered by task
If the application you are creating is small, as is the Playtime Cellular application, you can use the TOE chart in its current form to help you write the
Visual Basic code. When the application is large, however, it is often helpful to rearrange the TOE chart so that it is ordered by object rather than by
task. To do so, you list all of the objects in the Object column of a new TOE
chart, being sure to list each object only once. Then list each object’s tasks
and events in the Task and Event columns, respectively. Figure 2-9 shows the
rearranged TOE chart ordered by object rather than by task.
Task
1. Calculate total phones ordered and total price
2. Display total phones ordered and total price
in lblTotalPhones and lblTotalPrice
Object
btnCalc
Event
Click
Clear screen for the next order
btnClear
Click
End the application
btnExit
Click
Display total phones ordered (from btnCalc)
lblTotalPhones
None
Display total price (from btnCalc)
lblTotalPrice
None
Get and display the order information
txtName,
txtAddress,
txtCity, txtState,
txtZip, txtBlue,
txtPink
None
Figure 2-9
Completed TOE chart ordered by object
After completing the TOE chart, the next step is to draw a rough sketch of
the user interface.
Planning an Object-Oriented Application
LESSON A
Drawing a Sketch of the User Interface
Although the TOE chart lists the objects to include in the interface, it does
not tell you where to place those objects on the form. 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.
This consistency will make your application easier to both learn and use,
because the user interface will have a familiar look to it. The guidelines are
referred to as GUI (graphical user interface) guidelines.
Some companies
have their own
standards for
interfaces used
within the company. A company’s standards supersede the
Windows standards.
The first GUI guideline covered in this book pertains to the organization of the
controls in the interface. In Western countries, the user interface should be organized so that the information flows either vertically or horizontally, with the most
important information always located in the upper-left corner of the interface.
In a vertical arrangement, the information flows from top to bottom: the essential information is located in the first column of the interface, 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 interface, with secondary information placed in
subsequent rows. Related controls should be grouped together using either white
(empty) space or one of the tools located in the Containers section of the toolbox. Examples of tools found in the Containers section include the GroupBox,
Panel, and TableLayoutPanel tools. The difference between a panel and a group
box is that, unlike a group box, a panel can have scroll bars. However, unlike a
panel, a group box has a Text property that you can use to indicate the contents
of the control. Unlike the panel and group box controls, the table layout panel
control provides a table structure in which you place other controls.
The Ch02AVideo
file demonstrates
how to use the
group box, panel,
and table layout panel
controls.
Figures 2-10 and 2-11 show two different sketches of the Playtime Cellular
interface. In Figure 2-10 the information is arranged vertically, and white
space is used to group related controls together. In Figure 2-11 the information is arranged horizontally, with related controls grouped together using
tools from the Containers section of the toolbox. Each text box and button in
both figures is labeled so the user knows the control’s purpose. The “Name:”
label that identifies the txtName control tells the user the type of information to enter in the text box. Similarly, the “Calculate Order” caption on the
btnCalc control indicates the action the button will perform when it is clicked.
phone
image
Playtime Cellular Order Form
Name:
Calculate Order
Address:
Clear Screen
City:
State:
Exit
ZIP:
Blue phones ordered:
Total phones:
Pink phones ordered:
Total price:
Figure 2-10
Vertical arrangement of the Playtime Cellular application
69
CHAPTER 2
Designing Applications
phone
image
Playtime Cellular Order Form
Order information
Name:
Address:
City:
State:
Blue phones ordered:
Pink phones ordered:
Total phones:
Total price:
70
Calculate Order
Figure 2-11
Clear Screen
ZIP:
Exit
Horizontal arrangement of the Playtime Cellular application
Most times, program output (such as the result of calculations) is displayed
in a label control in the interface. Label controls that display program output
should be labeled to make their contents obvious to the user. In the interfaces shown in Figures 2-10 and 2-11, the “Total phones:” and “Total price:”
labels identify the contents of the lblTotalPhones and lblTotalPrice controls,
respectively. The text contained in an identifying label should be meaningful
and left-aligned within the label. In most cases, an identifying label should be
from one to three words only and appear on one line. In addition, the identifying label should be positioned either above or to the left of the control it
identifies. An identifying label should end with a colon (:). The colon distinguishes an identifying label from other text in the user interface, such as the
heading text “Playtime Cellular Order Form”. Some assistive technologies,
which are technologies that provide assistance to individuals with disabilities,
rely on the colons to make this distinction. 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.
As you learned in Chapter 1, buttons are identified by the text that appears
on the button’s face. The text is often referred to as the button’s caption. The
caption should be meaningful. In addition, it should be from one to three
words only and appear on one line. A button’s caption should be entered
using book title capitalization, which means you capitalize the first letter in
each word, except for articles, conjunctions, and prepositions that do not
occur at either the beginning or end of the text. When the buttons are positioned horizontally, as they are in Figure 2-11, all the buttons should be the
same height; their widths, however, may vary if necessary. If the buttons are
stacked vertically, as they are in Figure 2-10, all the buttons should be the
same height and width. In a group of buttons, the most commonly used button typically appears first—either on the left (in a horizontal arrangement) or
on the top (in a vertical arrangement).
Lesson A Summary
When positioning the controls in the interface, place related controls close
to each other and be sure to maintain a consistent margin from the edges of
the form. Also, it’s helpful to align the borders of the controls wherever possible to minimize the number of different margins appearing in the interface.
Doing this allows the user to more easily scan the information. You can align
the borders using the snap lines that appear as you are building the interface.
Or, you can use the Format menu to align (and also size) the controls.
In this lesson, you learned some basic guidelines to follow when sketching
a graphical user interface (GUI). You will learn more GUI guidelines in the
remaining lessons and in subsequent chapters. You can find a complete list of
the GUI guidelines in Appendix B of this book.
GUI DESIGN TIP Layout and Organization of the User Interface
•
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 (empty) space or one
of the tools contained in the Containers section of the toolbox.
•
Use a label to identify each text box in the user interface. Also use a
label to identify other label controls that display program output. The
label text should be meaningful. It also should be from one to three
words only and appear on one line. Left-align the text within the label, and
position the label either above or to the left of the control it identifies.
Enter the label text using sentence capitalization, and follow the label
text with a colon (:).
•
Display a meaningful caption on the face of each button. The caption
should indicate the action the button will perform when clicked. Enter the
caption using book title capitalization. Place the caption on one line and
use from one to three words only.
•
When a group of buttons are positioned horizontally, each button in
the group should be the same height. When a group of buttons are
positioned vertically, each button in the group should be the same height
and width. In a group of buttons, the most commonly used button is
typically the first button in the group.
•
Align the borders of the controls wherever possible to minimize the
number of different margins appearing in the interface.
Lesson A Summary
• To create an OO application:
1. Meet with the client
2. Plan the application
LESSON A
71
CHAPTER 2
Designing Applications
3. Build the user interface
4. Code the application
5. Test and debug the application
6. Assemble the documentation
72
• To plan an OO application in Visual Basic 2010:
1. Identify the tasks the application needs to perform.
2. Identify the objects to which you will assign the tasks.
3. Identify the events required to trigger an object into performing its
assigned tasks.
4. Draw a sketch of the user interface.
• To assist you in identifying the major tasks an application needs to
perform, ask the following questions:
1. What information will the application need to display on the screen
and/or print on the printer?
2. What information will the user need to enter into the user interface
to display and/or print the desired information?
3. What information will the application need to calculate to display
and/or print the desired information?
4. How will the user end the application?
5. Will previous information need to be cleared from the screen before
new information is entered?
Lesson A Key Terms
Book title capitalization—the capitalization used for a button’s caption; refers
to capitalizing the first letter in each word, except for articles, conjunctions,
and prepositions that do not occur at either the beginning or end of the
caption
Sentence capitalization—the capitalization used for identifying labels; refers
to capitalizing only the first letter in the first word and in any words that are
customarily capitalized
Text box—a control that provides an area in the form for the user to enter data
Lesson A Review Questions
1. When designing a user interface, the most important information
should be placed in the
corner of the interface.
a. lower-left
b. lower-right
c. upper-left
d. upper-right
Lesson A Exercises
2. A button’s caption should be entered using
LESSON A
.
a. book title capitalization
b. sentence capitalization
c. either book title capitalization or sentence capitalization
73
3. Which of the following statements is false?
a. The text contained in identifying labels should be left-aligned
within the label.
b. An identifying label should be positioned either above or to the
left of the control it identifies.
c. Identifying labels should be entered using book title capitalization.
d. Identifying labels should end with a colon (:).
4. Listed below are the four steps you should follow when planning an
OO application. Put the steps in the proper order by placing a number (1 through 4) on the line to the left of the step.
Identify the objects to which you will assign the
tasks.
Draw a sketch of the user interface.
Identify the tasks the application needs to perform.
Identify the events required to trigger an object into
performing its assigned tasks.
5.
Listed below are the six steps you should follow when creating an
OO application. Put the steps in the proper order by placing a number (1 through 6) on the line to the left of the step.
Test and debug the application
Build the user interface
Code the application
Assemble the documentation
Plan the application
Meet with the client
Lesson A Exercises
1. Sarah Brimley is the accountant at Paper Products. The salespeople
at Paper Products are paid a commission, which is a percentage of
the sales they make. Sarah wants you to create an application that
will compute the commission after she enters the salesperson’s name,
sales, and commission rate (expressed as a decimal number). For
example, if Sarah enters 2000 as the sales and .1 (the decimal equivalent of 10%) as the commission rate, the commission amount should
INT R OD UCT O RY
CHAPTER 2
Designing Applications
be 200. Prepare a TOE chart ordered by task, and then rearrange the
TOE chart so that it is ordered by object. Draw a sketch of the user
interface.
I N T E R ME D I AT E
2. RM Sales divides its sales territory into four regions: North, South,
East, and West. Robert Gonzales, the sales manager, wants an application that allows him to enter the current year’s sales for each region
and the projected increase (expressed as a decimal number) for each
region. He wants the application to compute the following year’s projected sales for each region. As an example, if Robert enters 10000
as the current sales for the South region, and then enters .05 (the
decimal equivalent of 5%) as the projected increase, the application
should display 10500 as the next year’s projected sales. Prepare a TOE
chart ordered by task, and then rearrange the TOE chart so that it is
ordered by object. Draw a sketch of the user interface.
I N T E R ME D I AT E
3. Open the Time Solution (Time Solution.sln) file contained in the
VB2010\Chap02\Time Solution folder. If necessary, open the designer
window. Lay out and organize the interface so it follows all of the GUI
design guidelines you have learned so far. (Refer to Appendix B for a
listing of the guidelines.) Code the Exit button’s Click event procedure
so it ends the application. Save the solution and then start the application. Click the Exit button to end the application and then close the
solution.
74