Beginning Visual C++ 2005 (2006) [eng]-1

Applications Using Windows Forms

events for this menu item so you can change the default name property to something shorter, such as upperMenuItem. You can also add a shortcut key for the item by clicking the down arrow in the value column for the ShortcutKeys property to display the list shown in Figure 21-6.

Figure 21-6

Select the modifier of modifiers by clicking the checkboxes and select the key from the drop-down list. I chose Ctrl+Alt+U as the shortcut for this menu item, as you can see. Figure 21-6 also shows that I have set the value for the ToolTipText property as “Set upper limit for values.” Hovering the mouse cursor over the menu item results in the tooltip being displayed after a brief delay. Setting the AutoToolTip property that is towards the beginning of the list to True makes the tooltip the same as the text on the menu item. Leaving the property value as False causes the ToolTipText property value to be chosen for the tooltip text. You can also control whether or not the shortcut key combination is displayed alongside the menu item text by setting the ShowShortcutKeys property value.

Clicking the Lower menu item causes its properties to be displayed in the Properties window. You can then change the (Name) property value to lowerMenuItem, the ShortcutKeys property value to Ctrl+ Alt+L, and the ToolTipText property values to “Set lower limit for values.” In the same way you can change the (Name) property for the Reset menu item to resetMenuItem, set the ShortCutKeys property value to Ctrl+Alt+R, and make the tooltip text “Reset limits to original values.”

1039

Chapter 21

You can also change the (Name) property value for the About menu item to aboutMenuItem and add tooltip text for that, too; an About menu item doesn’t usually have a shortcut key combination defined. The Play menu item creates a complete new set of values for a lottery entry, so you could add tooltip text to indicate that, if you want.

Adding a Tab Control

A TabControl control provides multiple tabs that can each contain their own set of controls. You can use a tab control to provide for entries to more than one lottery in the application window client area. Display the Toolbox window (Ctrl+Alt+X) and select TabControl from the list — it’s in the Containers group. Click in the client area of the form to add the tab control and then display its properties — press F4 to do this. All the controls listed under the Containers heading can contain other controls so they all provide a means of collecting together a set of controls into a group. Obviously with the tab control each tab can contain its own set of controls, and you can have as many tabs in the control as you want.

You want the tab control to always fill the client area of the window, and this is determined by the value of the Dock property that is in the Layout group of properties for the TabControl control. Figure 21-7 shows the Properties window for the tab control with the value cell for the Dock property expanded.

Figure 21-7

1040

Applications Using Windows Forms

Figure 21-8

The tab control has two tabs, but you can add another by clicking the arrow on the top edge of the control towards the right. Just click on Add Tab from the pop-up (see Figure 21-8). You’ll need to change the text on each of the tabs to something more meaningful and change the (Name) property values too. Go to the Properties window for the TabControl control — pressing F4 with the control selected displays the window if it is not already visible; then select the value field for the TabPage property and click the ellipsis that appears. The Tab Page Collection Editor dialog box shown in Figure 21-9 displays.

Figure 21-9

1041

Chapter 21

The text on the tab should reflect the lottery name to which the controls on this tab relate, so I changed the (Name) property value to lottoTab and the Text property value to Lotto, as shown in Figure 21-9. The (Name) property value is the name used in the Form1 class for the variable that references this tab, and the Text property value is the text on the tab. You can choose you own values.

The tab labelled tabPage2 is for an entry to a second lottery, which in my case is called Euromillions. Again, you can choose whatever lottery you prefer. Click tabPage2 in the left pane to display the properties for it in the right pane; after you select the new tab you should see that the name in the left pane for tabPage1 has been altered to lottoTab and the text on the first tab in the form has been updated. I set the Text property value for tabPage2 as Euromillions and the (Name) property value as euroTab. You’ll use the third tab to display a Web page for entering a lottery so change the Text property value for tabPage3 to Web Page and the name property value to webTab. When you have completed that, you can click the OK button to close the dialog box.

Using GroupBox Controls

You can use a GroupBox control to collect other controls together in a group. A GroupBox control also delineates the group with a line boundary and allows you to label the group if you want. A Lotto lottery entry consists of six different numbers that are from 1 to 49. Add a GroupBox control to the Lotto tab by clicking the control in the Toolbox window and then clicking in the Lotto tab. You can then modify the Text, (Name), and Dock property values for the GroupBox to the values shown in Figure 21-10.

Figure 21-10

1042

Applications Using Windows Forms

The Text property value indicates the range of possible values for the lottery entry that is displayed on this tab. The value for the Dock property makes the GroupBox control fill its container, which is the Lotto tab on the Tab control. The (Name) property value determines the name of the variable in the Form1 class that identifies this control.

The lottery entry on the Euromillions tab involves two groups of values, one group of five different values from 1 to 50 and a second group of two different “star” values each from 1 to 9. Numbers in the first group can be the same as the two “star” values. Use yet another container in the Euromillions tab, so click on SplitContainer in the Containers group in the Toolbox window and click in the Euromillions tab to place it there. To select a tab, first click the tab label at the top of the tab control — this selects the tab control with the tab label you highlighted; you then click within the display area of the tab to select the highlighted tab within the control. The Dock property value for the SplitContainer control is Fill by default so the control should fill the tab. The control has two panes that can each contain further controls. You can drag the divider between the panes to adjust the relative sizes of the panes.

Display the Properties for the control and set the Orientation and (Name) properties as shown in Figure 21-11.

Figure 21-11

1043

Chapter 21

The panes should now be separated by a horizontal divider, so drag this so that the lower pane is about half the height of the upper pane. Then set the IsSplitterFixed property for the control to have the value True, as shown in Figure 21-11. This fixes the divider at the position you have set. If you leave the IsSplitterFixed property value as False, you allow the divider to be dragged to any position by the user when the application is executing.

You can group the contents of each pane in the SplitContainer control using a GroupBox control, so add a GroupBox control to each of the panes. Set the Text, (Name), and Dock properties for the GroupBox control in the upper pane to have the values “Values 1 to 50,” euroValues, and Fill, respectively, and set the Text, (Name), and Dock properties for the GroupBox control in the lower pane to have the values “Values 1 to 9,” euroStars, and Fill, respectively. The Editor window should look like Figure 21-12.

Figure 21-12

You have quite a hierarchy of controls now. The client area of the form contains a tab control and the Euromillions tab on the tab control contains a SplitContainer control and each of the panes in the SplitContainer control contains a GroupBox control. The next step is to add buttons to each of the GroupBox controls in the panes.

Using Button Controls

Button controls in the Common Controls group are regular buttons that typically appear in a dialog window. You’ll use a button control to house each value in a lottery entry. For the Euromillions lottery you’ll need seven buttons, five in the group box in the top pane with values from 1 to 50 and two in the group box in the bottom pane with values from 1 to 9.

1044

Applications Using Windows Forms

Place five buttons in the group box in the upper pane and add two more in the group box in the lower pane below to make an elegant arrangement. You can reposition any of the buttons by dragging it with the mouse whereupon you should see vertical and/or horizontal alignment guides displayed to help you align the control to the others. You can also use the Format > Horizontal Spacing > Make Equal menu item to make the spacing in a horizontal sequence of controls uniform. The other menu items in the Format menu are worth exploring; they provide for setting the vertical spacing, for aligning controls, for centering a selected group of controls in a form, and for adjusting the height and width of the controls. You can select any number of controls by clicking them while holding the Ctrl key down.

Figure 21-13 shows my arrangement for the buttons on the Euromillions tab, and also shows the alignment guides that appear when positioning button7.

Figure 21-13

You’ll be generating values to display as the text on these buttons, so you need to change the properties for each of them. I suggest you make the values for the Text property on the upper five buttons the values 1, 2, 3, 4, and 5, and the values for the Text property on the two buttons in the lower pane 1 and 2.

You can change the (Name) property for each button too. The buttons in the upper pane can have names euroValue1, euroValue2, through to euroValue5, and the two on the lower pane euroStar1 and euroStar1. While you’re at it, you might like to change the BackColor property for each button that determines the background color. I chose the color Silver for the top five buttons and Gold for the bottom two — where both colors are from the Web palette. When you have completed that, the application window with the Euromillions tab selected should look as shown in Figure 21-14.

Now you can return to the Lotto tab by clicking it in the Editor window. You can then add buttons to that. The Lotto lottery is very simple: you just have to choose six different values from 1 to 49 for an entry. You therefore need to add six Button controls to the GroupBox that is already on the Lotto tab. After you have arranged the buttons to your satisfaction, change the text on the buttons so they show the default values 1 to 6 and change the (Name) property for the buttons to lottoValue1, lottoValue2,

1045

Chapter 21

through to lottoValue6. You can also set the BackColor property value for the buttons to a color of your choice — I chose the SkyBlue from the Web color palette. If you compile and execute the application, it should look as shown in Figure 21-15.

Figure 21-14

Figure 21-15

You can add a control to the Web Page tab next.

1046

Applications Using Windows Forms

Using the WebBrowser Control

Displaying a Web page in the application is going to be much easier than you might have imagined because the WebBrowser control in the Common Controls group does all of the work. Click the Web Page tab in the form the Editor window; then click on WebBrowser in the Toolbox window, and click in the tab to place it there. You can display its properties by pressing F4. The Properties window for the control is shown in Figure 21-16.

Figure 21-16

Figure 21-16 shows the properties after I have amended the (Name) property value to webBrowser, and set a value for the Url property as the URL for the Web page that the control should display; you can enter the URL for your local lottery organization here. If you verify that the Dock property value is Fill, that’s all that’s required to get the Web page displayed on the tab. Of course, the page displays only if your computer has an active Internet connection when you execute the program. If you recompile the program an execute it once more, the Web Page tab should look more or less like Figure 21-17.

If the Web page doesn’t appear, it may be that your Internet connection is not active. Note how you get scrollbars by default in the WebBrowser control when they are necessary. You can also navigate by selecting active links in the Web page.

1047

Chapter 21

Figure 21-17

You have almost — but not quite — finished the GUI for the application. It’s time to review how the application is going to work in detail.

Operation of the Winning Application

Clicking the Play menu item displays a complete entry on the tab that is currently visible in the application window; thus you can apply the Play item to the Lotto tab or the Euromillions tab. The values for a lottery entry are displayed in ascending sequence. Switching to the Web Page tab displays the Web page where you can enter a lottery.

After an entry has been created, you might want to be able to change a particular value — because you have an irrational aversion to particular numbers, for instance, or because you don’t believe numbers over 30 are for you. Clicking a button could cause a new number to be generated to replace the number on the button you clicked. Of course, the new number would have to be different from all the numbers in the current entry.

Another possibility is that you might want to choose a specific number that you regard to be lucky — a birthday or a birth month, for example, or the number of peas you left on your plate at lunch today.

You could arrange for this possibility by adding a context menu that displays when you right-click on a particular button. A Choose menu item on the context menu could accommodate this. Dealing with the event arising from clicking the context menu item needs a little work because you’ll have to provide for the entry of the data. The number that is entered also needs to be validated; the value must be within the permitted range, and it must not duplicate an existing value in the current group of buttons.

1048