1.3. Creating the Customer Detail Page

Once the program is fully functional, the Find button will examine the contents of the text boxes and seek to find all the customers that match the text provided. If a single match is found, a form will open with details about that customer.

For now, we'll bypass the issue of what happens when multiple matches are found, and we'll even bypass the database search, and just build the form that will be filled in with the customer's details.

To get started, you need to create a second form, frmCustomerDetails. Right-click on the solution and choose Add Class. From within the dialog, choose Windows Form as the type of item you wish to add, and name the form frmCustomerDetails.vb, as shown in Figure 1-16. Click Add to add the new form.

Resize your form to 600,300. Click on your form and change the caption (using the Text property) to Customer Details.

Our task for this form is to add a menu, tab controls, and the controls necessary to display and edit the Customer information. The specifications call for this form to open in Read Only mode; the user must explicitly choose the menu item Edit to make the fields editable, and then Save to save the changes made in Edit mode (which returns the user to Read Mode).

Figure 1-16. Add second form

1.3.1. Adding a Menu

You'll begin by adding a menu to the form. To do so, first drag a menu strip onto the form. Two things will happen: your menu will be represented by a MenuStrip instance in the "tray" at the bottom of the form, and the menu itself will be docked to the top of the form. Notice that the menu has an area that says Type Here. Enter the text for the top-level menu, Customer, and notice that when you hit enter, two more Type Here boxes appear, one for a second top-level menu item (we won't need this for now) and one for a sub-menu. In that sub-menu enter the word Edit. As you do, another box will open below it. Enter the three remaining choices (Save, Cancel, Close) one by one.

Right-click on a menu item to see some of the common actions you might want to take. This allows you to edit the text or change the behavior of the menu items. For now, you won't need any of these options.

1.3.2. Hooking Up the Second Form to the First

We're going to hardwire this form (for now) to the Find Customer button in the Welcome page. Return to the Welcome page and double-click on the All Customers button in the Customer group box. In the Event handler, enter this one line of code:

 frmCustomerDetails.Show(  ) 

This opens the new dialog, but passes in no information about the customer's name. We'll fix that later when we are ready to search for a customer in the database.

1.3.3. Adding Tab Controls

The Customer Details page has four tabs. Drag a TabControl onto the form, and size it to fill most of the form, as shown in Figure 1-17.

Figure 1-17. New tab control on form

Notice that the TabControl starts with two tabs, labeled TabPage1 and TabPage2. Click on the TabControl itself, then click on the first tab (TabPage1). Look in the Properties window. It should say:

 TabControl1 System.Windows.Forms.TabControl. 

Change its Name property to tclCustomerDetails. The Properties window should now say:

 tclCustomerDetails System.Windows.Forms.TabControl. 

1.3.4. Adding Tabs to the TabControl

Click within the first tab and the Properties window should show you that you are in TabPage1. Use the name property to change the name of the tab to tabCustomerInfo and the Text field to change the text that appears on the tab to Customer.Info.

To get to the second tab, you'll need to click on TabPage2 twice. The first click will choose the TabControl, and the second click will bring TabPage2 forward. You'll then need to click in the page itself to get to TabPage2. Rename it tabCustomerDemographics and change its Text to Demographics.

You are now ready to add a third tab. Click on the TabControl itself, and in the Properties window scroll down to TabPages. Click the Ellipsis button to open the TabPage Collection Editor. Click Add to add a new page, and use the properties to set both the name and the text, as shown in Figure 1-18.

Namespaces, Classes, and Instances

The Properties window is reflecting that tclCustomerDetails is the name for an instance of an object of type System.Windows.Forms.TabControl.

You read this name back to front. TabControl is the class type. System.Windows.Forms is the namespace within which TabControl is defined. Namespaces are used to avoid name collisions, and to divide up class libraries to make it easier to find the classes you need. The namespaces can be thought of as concentric circles. The outermost circle is System, which contains nearly all the namespaces used in the framework class library. The Windows namespace (which is within the System namespace) contains all the namespaces used by Windows applications (as opposed to Web applications) and the Forms namespace contains all the classes used by Forms (and itself is contained in the Windows namespace, and thus by extension, within the System namespace).

When referring to a class you must fully qualify the name (provide its full namespace identification), or you can use shorthand by adding an Imports statement at the top of your code file. Thus, if you want to create a form in your code, you can either write:

 Dim myForm As New System.Windows.Forms.Form(  ) 

or you can add an Imports statement to the top of your code file:

 Imports System.Windows.Forms 

in which case, you can write:

 Dim myForm As New Form(  ) 

In either case, myForm will be considered to be an instance of the class System.Windows.Forms.Form and thus will have all the methods, properties, and events of that class.

Visual Studio automatically adds Import statements when you create a project, appropriate to the kind of project you are creating. For example, Windows Forms project automatically Imports System.Windows.Forms.

Figure 1-18. TabPage Collection Editor

You now have a details page with three tabs. You are ready to populate these tabs with controls that will reflect the data held in the Customer Database (and that will build on the structure provided by Microsoft).

You can also add and remove tabs using the TabControl's smart tag, as shown in Figure 1-19.

Figure 1-19. The TabControl smart tag

The first tab will be used to display (and update) the information contained in the Customers Table, whose design is shown in Figure 1-20.

Figure 1-20. Northwind Customer Table

Each of these items can be displayed with a simple combination of labels and text boxes, as shown in Figure 1-21. The label that reads "Company Name Here" should have a font size of 20, with the font's Bold attribute set to true. Also, the field's ForeColor should be Blue. Accept the default field names that Visual Basic assigns. You'll give them more precise names in Chapter 2.