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.

Transcription

1 Planning an Object-Oriented Application LESSON A LESSON 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 63 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 A programmer s process 1. Meet with the client 1. Meet with the client 2. Plan the home (blueprint) 2. Plan the application (TOE chart) 3. Build the frame 3. Build the user interface 4. Complete the home 4. Code the application 5. Inspect the home and fi x any problems 5. Test and debug the application 6. Assemble the documentation 6. Assemble the documentation Figure 2-3 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

2 CHAPTER 2 Designing Applications in the planning phase. The steps for planning an OO application are listed in Figure 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. 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: ZIP: Number of blue phones ordered Number of pink phones ordered Total number of phones ordered Total price Figure 2-5 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.

3 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. 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. 65 Task Object Event 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 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).

4 CHAPTER 2 Designing Applications 66 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. 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 Object Event Get the following order information from the user: Customer s name txtname Street address txtaddress City txtcity State txtstate ZIP code txtzip Number of blue phones ordered txtblue Number of pink phones ordered txtpink Calculate total phones ordered and total price btncalc Figure 2-7 Tasks and objects entered in a TOE chart (continues)

5 Planning an Object-Oriented Application LESSON A (continued) Task Object Event Display the following information: Customer s name txtname Street address txtstreet City txtcity State txtstate ZIP code txtzip Number of blue phones ordered txtblue Number of pink phones ordered txtpink Total phones ordered btncalc, lbltotalphones Total price btncalc, lbltotalprice 67 End the application Clear screen for the next order btnexit btnclear Figure 2-7 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 Object Event Get the following order information from the user: Customer s name txtname None Street address txtaddress None City txtcity None State txtstate None ZIP code txtzip None Number of blue phones ordered txtblue None Number of pink phones ordered txtpink None Calculate total phones ordered and total price btncalc Click Figure 2-8 Completed TOE chart ordered by task (continues)

6 CHAPTER 2 Designing Applications (continued) 68 Task Object Event Display the following information: Customer s name txtname None Street address txtstreet None City txtcity None State txtstate None ZIP code txtzip None Number of blue phones ordered txtblue None Number of pink phones ordered txtpink None Total phones ordered btncalc, lbltotalphones Click, None Total price btncalc, lbltotalprice 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 Object Event 1. Calculate total phones ordered and total price btncalc Click 2. Display total phones ordered and total price in lbltotalphones and lbltotalprice 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, None txtaddress, txtcity, txtstate, txtzip, txtblue, txtpink 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.

7 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. 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. 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. Some companies have their own standards for interfaces used within the company. A company s standards supersede the Windows standards. The Ch02AVideo fi le demonstrates how to use the group box, panel, and table layout panel controls. 69 phone image Playtime Cellular Order Form Name: Address: City: State: ZIP: Calculate Order Clear Screen Exit Blue phones ordered: Pink phones ordered: Total phones: Total price: Figure 2-10 Vertical arrangement of the Playtime Cellular application

8 CHAPTER 2 Designing Applications phone image Playtime Cellular Order Form Order information 70 Name: City: Address: State: ZIP: Blue phones ordered: Pink phones ordered: Total phones: Total price: Calculate Order Clear Screen Exit Figure 2-11 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).

9 Lesson A Summary LESSON A 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. 71 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

10 CHAPTER 2 Designing Applications Build the user interface 4. Code the application 5. Test and debug the application 6. Assemble the documentation 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

11 Lesson A Exercises LESSON A 2. A button s caption should be entered using. a. book title capitalization b. sentence capitalization c. either book title capitalization or sentence capitalization 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 (:) 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. Lesson A Exercises Test and debug the application Build the user interface Code the application Assemble the documentation Plan the application Meet with the client 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 INTRODUCTORY

12 CHAPTER 2 Designing Applications 74 INTERMEDIATE INTERMEDIATE 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. 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 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 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. 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.