Presentation is loading. Please wait.

Presentation is loading. Please wait.

T U T O R I A L  2009 Pearson Education, Inc. All rights reserved. 1 17 Flag Quiz Application Introducing One-Dimensional Arrays and ComboBox es.

Similar presentations


Presentation on theme: "T U T O R I A L  2009 Pearson Education, Inc. All rights reserved. 1 17 Flag Quiz Application Introducing One-Dimensional Arrays and ComboBox es."— Presentation transcript:

1 T U T O R I A L  2009 Pearson Education, Inc. All rights reserved. 1 17 Flag Quiz Application Introducing One-Dimensional Arrays and ComboBox es

2  2009 Pearson Education, Inc. All rights reserved. 2 Outline 17.1 Test-Driving the Flag Quiz Application 17.2 Introducing Arrays 17.3 Declaring and Allocating Arrays 17.4 Constructing the Flag Quiz Application 17.5 Sorting Arrays

3  2009 Pearson Education, Inc. All rights reserved. 3 In this tutorial you will learn: ■Create and initialize arrays. ■Store information in an array. ■Refer to individual elements of an array. ■Sort arrays. ■Use ComboBox es to display options in a drop-down list. ■Replace characters in a String. Objectives

4 Application Requirements  2009 Pearson Education, Inc. All rights reserved. 4 17.1 Test-Driving the Flag Quiz Application A geography teacher would like to quiz students on their knowledge of the flags of various countries. The teacher has asked you to write an application that displays a flag and allows the student to select the corresponding country from a list. The application should inform the user of whether the answer is correct and display the next flag. The application should display five flags randomly chosen from the flags of Australia, Brazil, China, Italy, Russia, South Africa, Spain and the United States. When the application is run, a given flag should be displayed only once.

5  2009 Pearson Education, Inc. All rights reserved. 5 Test-Driving the Flag Quiz Application ■Run the completed Flag Quiz application (Fig. 17.1). Figure 17.1 | Flag Quiz application running. ComboBox contains answers (country names) PictureBox displays flag

6  2009 Pearson Education, Inc. All rights reserved. 6 Test-Driving the Flag Quiz Application (Cont.) ■The ComboBox contains eight country names. ■The scrollbar allows you to browse through the ComboBox ’s drop-down list (Fig. 17.2). Figure 17.2 | Selecting an answer from the ComboBox. Scrollbar in ComboBox’s drop- down list Answer being selected

7  2009 Pearson Education, Inc. All rights reserved. 7 Test-Driving the Flag Quiz Application (Cont.) ■Click the Submit Button to check your answer. ■If it’s correct, the message "Correct!" is displayed in an output Label (Fig. 17.3). Figure 17.3 | Submitting the correct answer.

8  2009 Pearson Education, Inc. All rights reserved. 8 Test-Driving the Flag Quiz Application (Cont.) ■Click the Next Flag Button to display a different flag (Fig. 17.4). Figure 17.4 | Displaying the next flag.

9  2009 Pearson Education, Inc. All rights reserved. 9 Test-Driving the Flag Quiz Application (Cont.) ■To demonstrate the application’s response, select an incorrect answer and click Submit, as in Figure 17.5. Figure 17.5 | Submitting an incorrect answer.

10  2009 Pearson Education, Inc. All rights reserved. 10 Test-Driving the Flag Quiz Application (Cont.) ■After the application displays five flags and the user has submitted five answers, the quiz ends (Fig. 17.6). Figure 17.6 | Finishing the quiz. ComboBox is disabled when the quiz ends

11  2009 Pearson Education, Inc. All rights reserved. 11 ■An array is a group of variables that all contain data items of the same name and type. –Array names follow the same conventions that apply to other identifiers. –To refer to a particular location in an array, you specify the name of the array and the position number of the location, starting at 0. 17.2 Introducing Arrays

12  2009 Pearson Education, Inc. All rights reserved. 12 ■Each array element is referred to by providing the name of the array followed by the position number of the element in parentheses. –The position number in parentheses is called an index or a subscript. ■An index must be either zero, a positive integer or an integer expression. 17.2 Introducing Arrays (Cont.)

13  2009 Pearson Education, Inc. All rights reserved. 13 ■Figure 17.7 depicts an Integer array named netUnitsSold. 17.2 Introducing Arrays (Cont.) Figure 17.7 | Array consisting of 13 elements.

14  2009 Pearson Education, Inc. All rights reserved. 14 ■To declare an array, you provide the array’s name and data type: Dim netUnitsSold As Integer() –The parentheses that follow the data type indicate that netUnitsSold is an array. –Before you can use an array, you must specify its size and allocate memory for it. ■Arrays are represented as objects in Visual Basic. 17.3 Declaring and Allocating Arrays

15  2009 Pearson Education, Inc. All rights reserved. 15 ■To allocate memory for the array netUnitsSold after it has been declared, use the statement: netUnitsSold = New Integer(0 To 12) {} –Array bounds determine what indices can be used to access an element in the array. ■Here, the array bounds are 0 and 12. –Note that because of array element 0, the actual number of array elements (13) is one larger than the upper bound specified in the allocation ( 12 ). 17.3 Declaring and Allocating Arrays (Cont.)

16  2009 Pearson Education, Inc. All rights reserved. 16 Common Programming Error Attempting to access elements in the array by using an index outside the array bounds results in an IndexOutOfRangeException.

17  2009 Pearson Education, Inc. All rights reserved. 17 ■If you know the number of elements at the time you declare the array, you can write the array declaration as Dim netUnitsSold(0 To 12) As Integer ■The required braces ( { and } ) are called an initializer list and specify the initial element values. –When the initializer list is empty, the elements are initialized to the default value for the array ’ s data type. –The initializer list also can contain a comma-separated list specifying the initial values of the elements in the array: Dim salesPerDay As Integer() salesPerDay = New Integer() {0, 2, 3, 6, 1, 4, 5, 6} 17.3 Declaring and Allocating Arrays (Cont.)

18  2009 Pearson Education, Inc. All rights reserved. 18 ■You can specify both the array bounds and an initializer list, as in: Dim temperatures As Double() = _ New Double(0 To 3) {23.45, 34.98, 78.98, 53.23} ■The preceding statement can also be written as: Dim temperatures As Double() = { 23.45, 34.98, 78.98, 53.23 } 17.3 Declaring and Allocating Arrays (Cont.)

19  2009 Pearson Education, Inc. All rights reserved. 19 ■In this case, the compiler determines the array bounds from the number of elements in the initializer list and implicitly uses the New keyword for you. ■Arrays can also be initialized using implicit lower bounds. For example, the preceding statement could have been written as follows: Dim temperatures As Double() = _ New Double(3) {23.45, 34.98, 78.98, 53.23} 17.3 Declaring and Allocating Arrays (Cont.)

20  2009 Pearson Education, Inc. All rights reserved. 20 Common Programming Error If you specify an upper bound when initializing an array, it is a compilation error if you provide too many or too few values in the initializer list.

21  2009 Pearson Education, Inc. All rights reserved. 21 Computing the Sum of an Array’s Elements ■Open the SumArray template application (Fig. 17.8). Figure 17.8 | Sum Array application’s Form in Design view.

22  2009 Pearson Education, Inc. All rights reserved. 22 Computing the Sum of an Array’s Elements (Cont.) ■Double click the Sum Array Button to generate the empty event handler sumButton_Click (Fig. 17.9). ■Variable array is a reference to an array of Integer s containing 10 elements. Figure 17.9 | Declaring an array in the event handler. Creating an array of Integers

23  2009 Pearson Education, Inc. All rights reserved. 23 ■This For...Next loop (Fig. 17.10) retrieves each element’s value, and adds it to total. ■Method GetUpperBound returns the index of the last element in the array. –For one-dimensional arrays, GetUpperBound ’ s argument is always 0. ■The length of the array is returned by the expression array.Length. ■Note that we could have set the upper bound in the For...Next loop as array.Length - 1 Computing the Sum of an Array’s Elements (Cont.)

24  2009 Pearson Education, Inc. All rights reserved. 24 Error-Prevention Tip Use method GetUpperBound when you need to find an array’s highest index. Using an actual numerical value for the upper bound instead could lead to errors if you change the number of array elements.

25  2009 Pearson Education, Inc. All rights reserved. 25 Error-Prevention Tip It is important to note the difference between the “seventh element of the array” and “array element seven.” Array indices begin at 0, which means that the former has the index 6, whereas the latter has the index 7. This confusion is a common source of “off-by-one” errors.

26  2009 Pearson Education, Inc. All rights reserved. 26 Computing the Sum of an Array’s Elements (Cont.) Figure 17.10 | Calculating the sum of the values of an array’s elements. Retrieve the values of each element and add them to the total, one at a time

27  2009 Pearson Education, Inc. All rights reserved. 27 Computing the Sum of an Array’s Elements (Cont.) Figure 17.11 | Displaying the sum of the values of an array’s elements. ■Run the application (Fig. 17.11).

28  2009 Pearson Education, Inc. All rights reserved. 28 When the Form loads: Sort the country names alphabetically Place country names in the ComboBox Call DisplayFlag to randomly select a flag and display it When the user clicks the Submit Button: Retrieve the selected country name If the selected value matches the correct answer Display "Correct!" in the Label Else Display "Sorry, incorrect." in the Label If five images have been displayed Append "Done!" to the Label’s text Disable the Next Flag Button and the ComboBox 17.4 Constructing the Flag Quiz Application

29  2009 Pearson Education, Inc. All rights reserved. 29 Else Enable Next Flag Button Disable Submit Button When the user clicks the Next Flag Button: Call DisplayFlag to randomly select a flag and display it Clear the Label’s text Set ComboBox to display its first item Update the number of flags shown Enable Submit Button Disable Next Flag Button When DisplayFlag is called: Call GetUniqueRandomNumber to obtain the index of a flag that has not yet been used Obtain the name of the country from the countries array 17.4 Constructing the Flag Quiz Application (Cont.)

30  2009 Pearson Education, Inc. All rights reserved. 30 Obtain the name of the country from the countries array Call BuildPathName to get the image’s path and file name Display the flag in a PictureBox When GetUniqueRandomNumber is called: Create a Random object Select the index of a flag that has not been used Set the corresponding element of the used array to true Return the index When BuildPathName is called: Use String method Replace to remove spaces from the country String Return a String containing the corresponding image’s path and file name 17.4 Constructing the Flag Quiz Application (Cont.)

31  2009 Pearson Education, Inc. All rights reserved. 31 Action/Control/Event (ACE) Table for the Flag Quiz Application ■Use an ACE table to convert the pseudocode into Visual Basic (Fig. 17.12). Figure 17.12 | Flag Quiz application’s ACE table. (Part 1 of 5.)

32  2009 Pearson Education, Inc. All rights reserved. 32 Figure 17.12 | Flag Quiz application’s ACE table. (Part 2 of 5.) Action/Control/Event (ACE) Table for the Flag Quiz Application (Cont.)

33  2009 Pearson Education, Inc. All rights reserved. 33 Figure 17.12 | Flag Quiz application’s ACE table. (Part 3 of 5.) Action/Control/Event (ACE) Table for the Flag Quiz Application (Cont.)

34  2009 Pearson Education, Inc. All rights reserved. 34 Figure 17.12 | Flag Quiz application’s ACE table. (Part 4 of 5.) Action/Control/Event (ACE) Table for the Flag Quiz Application (Cont.)

35  2009 Pearson Education, Inc. All rights reserved. 35 Figure 17.12 | Flag Quiz application’s ACE table. (Part 5 of 5.) Action/Control/Event (ACE) Table for the Flag Quiz Application (Cont.)

36  2009 Pearson Education, Inc. All rights reserved. 36 Initializing Important Variables Figure 17.13 | String array that stores country names. ■Open the FlagQuiz template application (Fig. 17.13) to the application. ■Each element in array countries is a String containing the name of a country. Creating an array of Strings to store country names

37  2009 Pearson Education, Inc. All rights reserved. 37 ■The application should not display any flag more than once. –Since the application uses random-number generation to pick a flag, the same flag could be selected more than once. –Use a Boolean array to keep track of which flags have been displayed (Fig. 17.14). Initializing Important Variables (Cont.) Figure 17.14 | Boolean array that keeps track of displayed flags. Creating an array of Boolean values with the same number of elements as the array of country names

38  2009 Pearson Education, Inc. All rights reserved. 38 Initializing Important Variables (Cont.) ■This application ensures that only five flags are displayed by incrementing variable count (Fig. 17.15). Figure 17.15 | Instance variables used throughout the application. Creating an array of Boolean values with the same number of elements as the array of country names

39  2009 Pearson Education, Inc. All rights reserved. 39 Adding and Customizing a ComboBox ■Add a ComboBox to the Form (Fig. 17.16) by double clicking the control in the Toolbox. Figure 17.16 | Flag Quiz template application’s Form.

40  2009 Pearson Education, Inc. All rights reserved. 40 GUI Design Tip Each ComboBox should be accompanied by a descriptive Label describing the ComboBox ’s contents.

41  2009 Pearson Education, Inc. All rights reserved. 41 ■Name the ComboBox countriesComboBox. –Position the ComboBox just below the Select country: Label ■The Form should look like Fig. 17.17. Adding and Customizing a ComboBox (Cont.) Figure 17.17 | ComboBox added to Flag Quiz application’s Form.

42  2009 Pearson Education, Inc. All rights reserved. 42 Good Programming Practice Append the ComboBox suffix to ComboBox control names.

43  2009 Pearson Education, Inc. All rights reserved. 43 ■Property DropDownStyle determines the ComboBox ’s appearance. –Set this property to DropDownList. –You can click the arrow button to display a drop-down list of items. ■ DataSource specifies the source of the items displayed in the ComboBox. In this case, the source is array countries. ■Set the MaxDropDownItems property of the countriesComboBox to 4, so that the drop-down list displays a maximum of four items at one time. Adding and Customizing a ComboBox (Cont.)

44  2009 Pearson Education, Inc. All rights reserved. 44 GUI Design Tip If a ComboBox ’s content should not be editable, set its DropDownStyle property to DropDownList.

45  2009 Pearson Education, Inc. All rights reserved. 45 Adding and Customizing a ComboBox (Cont.) Figure 17.18 | Assigning the String elements of an array to a ComboBox. ■Double click the Form to generate the empty event handler FlagQuizForm_Load (Fig. 17.18). Specifying the source of the ComboBox items

46  2009 Pearson Education, Inc. All rights reserved. 46 ■Function BuildPathName (Fig. 17.19) constructs and returns the flag-image’s file name. ■Line 24 uses String method Replace to replace occurrences of the space character with an empty String. Building a Flag-Image File’s Path Name Figure 17.19 | Removing whitespace from the country name. Removing whitespace from a country name

47  2009 Pearson Education, Inc. All rights reserved. 47 Building a Flag-Image File’s Path Name (Cont.) Figure 17.20 | Generating a unique index. Determining whether a country’s flag has been displayed previously ■Add the GetUniqueRandomNumber procedure, which returns the index of a country name whose flag has not been displayed (Fig. 17.20).

48  2009 Pearson Education, Inc. All rights reserved. 48 Building a Flag-Image File’s Path Name (Cont.) Figure 17.21 | Returning the unique index. Indicate that the unused flag will be displayed and return the flag’s index for use ■Checking the values in the used array ensures that the index will not be used again in the application. ■Line 39 of Fig. 17.21 returns the unique random index

49  2009 Pearson Education, Inc. All rights reserved. 49 Displaying a Flag Figure 17.22 | Choosing a random country name. Getting the index of an unused flag ■Procedure DisplayFlag (Fig. 17.22) selects a random country name using procedure GetUniqueRandomNumber and displays that country’s flag. Retrieving the flag’s corresponding country name

50  2009 Pearson Education, Inc. All rights reserved. 50 Displaying a Flag (Cont.) Figure 17.23 | Displaying a flag image. ■In the DisplayFlag procedure, line 51 invokes procedure BuildPathName (Fig. 17.23). ■The procedure then returns the flag image’s path name. ■Line 52 sets flagPicture ’s Image property to the Image object returned by method Image. FromFile. Getting the path name of the flag and displaying the flag image

51  2009 Pearson Education, Inc. All rights reserved. 51 Displaying a Flag (Cont.) Figure 17.24 | Displaying a flag when the Form is loaded. ■The Form ’s Load event handler (Fig. 17.24) should invoke procedure DisplayFlag. Displaying a flag when application is first run

52  2009 Pearson Education, Inc. All rights reserved. 52 Processing a User’s Answer Figure 17.25 | Submit Button Click event handler. ■Double click the Submit Button to generate the Click event handler (Fig. 17.25). ■The user’s answer is retrieved using the Combo­Box ’s Text property. Determining whether the user’s answer is correct Retrieving the user’s answer

53  2009 Pearson Education, Inc. All rights reserved. 53 Processing a User’s Answer (Cont.) Figure 17.26 | Testing whether the quiz is finished. ■If five flags have been displayed, the quiz is over. ■The nextButton and the countriesCombo­Box are disabled (Fig. 17.26). Determining if the quiz is over

54  2009 Pearson Education, Inc. All rights reserved. 54 Displaying the Next Flag Figure 17.27 | Next Flag Button Click event handler. ■Double click the Next Flag Button to generate the Click event handler (Fig. 17.27). ■Line 91 sets property SelectedIndex of countries­ ComboBox to 0, which selects and displays the first item. Displaying the next flag for the user to identify

55  2009 Pearson Education, Inc. All rights reserved. 55 ■Sorting data refers to arranging the data into some particular order, such as ascending or descending order. –For example, a bank sorts checks by account number. –Telephone companies sort account information by last name, to make it easy to find phone numbers. ■Users are able to find a country name in the ComboBox faster if the country names are alphabetized. 17.5 Sorting Arrays

56  2009 Pearson Education, Inc. All rights reserved. 56 ■Method Array.Sort (Fig. 17.28) sorts the values in the array into ascending alphabetical order. –Note that this line is placed prior to assigning array countries to the ComboBox ’ s DataSource property. Sorting an Array Figure 17.28 | Sorting the array of country names. Alphabetizing country names in the array

57  2009 Pearson Education, Inc. All rights reserved. 57 ■Figure 17.29 presents the source code for the Flag Quiz application. Outline (1 of 7 ) Declaring and initializing an array in one statement Declaring and initializing an array with an empty initializer list

58  2009 Pearson Education, Inc. All rights reserved. 58 Outline (2 of 7 ) Sorting an array Displaying array elements in a ComboBox Replacing all spaces with the empty String

59  2009 Pearson Education, Inc. All rights reserved. 59 Outline (3 of 7 ) Retrieving a value from an array Assigning a value to an array element

60  2009 Pearson Education, Inc. All rights reserved. 60 Outline (4 of 7 ) Retrieving a value from an array

61  2009 Pearson Education, Inc. All rights reserved. 61 Outline (5 of 7 ) Obtaining the selected item from the ComboBox

62  2009 Pearson Education, Inc. All rights reserved. 62 Outline (6 of 7 )

63  2009 Pearson Education, Inc. All rights reserved. 63 Outline (7 of 7 ) Setting the selected ComboBox item


Download ppt "T U T O R I A L  2009 Pearson Education, Inc. All rights reserved. 1 17 Flag Quiz Application Introducing One-Dimensional Arrays and ComboBox es."

Similar presentations


Ads by Google