WEEK 1 DAY 3 Creating Simple Forms Today’s lesson focuses on various aspects of creating forms. Button bars or toolbars are essential for most applications designed for Windows these days. Included with these controls are menus that you can add and manipulate within your application. After you learn how to use these to features to your benefit, you’ll learn NEW TERM how to use forms that you’ve already created as templates for future forms. With this technique, known as inheritance, a new form is created by inheriting the attributes of an existing form. Working with Toolbars Unless you’ve been in a closet for the last several years, you should know that almost every Windows application available has one—if not more—toolbar to enhance the user interface. Toolbars enable users to quickly get at an applica- tion’s commonly used functions. Depending on the application, one or more toolbars could help with specific tasks, such as the Editor Toolbar in the Visual Basic IDE. Because toolbars are so widely used, most users now expect any desktop application they use to have them. 78 Day 3 Adding toolbars to your application has become fairly easy with the Toolbar control sup- plied with Visual Basic. Creating a simple or complicated toolbar requires that you add the following controls to the form: • The Toolbar control sets up the buttons of the actual toolbar displayed to users and handles user requests. • The ImageList control contains the bitmaps used on the toolbar buttons. To see how these controls interact to form an application toolbar, start a new project and name it Toolbar. Adding a Toolbar Here you see how to use the Toolbar control with the ImageList control. Adding a tool- bar is as easy as adding the controls to the form and setting some of their properties. Of course, you still need to add the code to make anything actually happen in the applica- tion. The next few sections will discuss the process of creating a toolbar on the form. Selecting the Images for the Buttons To create a toolbar, place an ImageList control on your form. To begin the process, add the images you want to use on the toolbar by using the Image Collection Editor (see Figure 3.1). You can display this by clicking the Images button in the ImageList proper- ties list. FIGURE 3.1 Using the Image Collection Editor to add images to the ImageList control. To add an image to the Image collection for the ImageList control, click the Add button. In the Open dialog box that appears, select the image you want to add. When you select the image and click Open, the image is added to the Members list as shown in Figure 3.2. Find the New and Open bitmaps in /Program Files/ Microsoft Visual Studio.NET/Common7/Graphics/Bitmaps/TLBR_W95 directory and add them to the Image collection. When you’re finished, click OK to close the Image Collection Editor. Creating Simple Forms 79 FIGURE 3.2 Displaying the images already included in the Image collection. 3 Visual Basic installs many different types of graphics files you can use in your Tip applications. You can find any of these files in the /Program Files/Microsoft Visual Studio.NET/Common7/Graphics directory. To add the toolbar to your project, follow these steps: 1. Place a Toolbar control on the form. It doesn’t really matter where you put it; the default Dock property places it at the top of the form. 2. Set the ImageList property to the ImageList control you’ve just added. This prop- erty identifies which ImageList control (if you have more than one on the form) the Toolbar control will use to provide the images for the buttons. (Now you can see why you had to set up the ImageList control first.) Adding the Buttons The real action starts when you create the buttons for the toolbar. You’ll actually add the buttons by using the ToolBarButton Collection Editor (see Figure 3.3). To add a button to the toolbar, perform the following steps; then if you want to reposition the button, use the up and down arrows to move it to the correct position on the toolbar. 1. Click the collection button for the Toolbar’s Buttons property. 2. In the ToolBarButton Collection Editor, click Add to add a new button to the toolbar. 3. Select the image you want on the button by setting the ImageIndex property, using its associated drop-down list (see Figure 3.4). 80 Day 3 FIGURE 3.3 The ToolBarButton Collection Editor allows you to add and modify the buttons and images that you add to the toolbar. FIGURE 3.4 Selecting the image to use for a toolbar button. For each button you add, you will need to specify the following properties: • The ItemData property specifies a string that you can use to identify the button in your code. The value of this property must be unique for each button. You should assign a string that’s meaningful to you so you can easily remember it when you’re writing your code. • The ImageIndex property specifies the index of the image you want to appear on the button face. The index corresponds to the index of the picture in the ImageList control. A value of zero for the ImageIndex property will give you a button without an image. • The Style property determines the type of button you’re creating. The button type also determines how the button will behave in the toolbar. Table 3.1 lists the differ- ent Style property settings. Creating Simple Forms 81 TABLE 3.1 Setting Button Behavior with the Style Property Setting Description PushButton (default) Creates a standard push button Togglebutton Indicates that an option is on or off Separator Provides a space between other buttons DropDownButton Displays a drop-down menu list when the button is clicked Also, you can set several optional properties for each button: • Text displays text beneath the image on a button. • ToolTipText appears when the mouse is placed on the button. (This text appears only if the ShowTips property of the toolbar is set to True.) 3 • Pushed sets or returns the current state of the button. • If you set a button style property to DropDownButton, you must set the DropDownMenu property for that button in the ToolBarButton Collection Editor (see Figure 3.5). FIGURE 3.5 Setting a menu list on the ToolBarButton Collection Editor. To have a menu to add to the toolbar button, first you must add a Note ContextMenu control to the form and then set up its menu options. This will be discussed in the next section. This DropDownMenu feature of the Toolbar offers the functionality included in Visual Basic (see Figure 3.6) and many other Windows-based products. 82 Day 3 FIGURE 3.6 Using drop-down menus from a toolbar. After you add the buttons to your toolbar, click OK to close the Collection Editor and save the changes. Your form should look like the one in Figure 3.7. FIGURE 3.7 The final project form with the Toolbar and ImageList controls set. Writing the Button Code You now have a toolbar on your form. If you execute the application, you can click the buttons and see them respond. However, until you add code to the toolbar’s events, the buttons won’t perform any functions because they don’t have any events of their own. ButtonClick is the toolbar event in which you’ll place your button code. This event passes a set of event arguments in an object to the event procedure called e, which allows you to access all the button’s properties. In your code, use the value of the ItemData Creating Simple Forms 83 property to determine which button was actually clicked. The following source code is typical for taking actions based on buttons clicked: Private Sub ToolBar1_ButtonClick(ByVal sender As System.Object, ByVal e As System.Windows.Forms.ToolBarButtonClickEventArgs) Handles ToolBar1.ButtonClick Select Case e.Button.ItemData Case “New” ‘ToDo: Add ‘New’ button code. MsgBox(“Add ‘New’ button code.”) Case “Open” ‘ToDo: Add ‘Open’ button code. MsgBox(“Add ‘Open’ button code.”) End Select End Sub 3 In an actual application, these Case statements should call the same code Tip routine as the related menu options. This allows you to program the action once and then call it from both the menu and the toolbar. Doing this makes it easier to maintain your code because then any changes or corrections have to be made only once. Notice that each Case statement in the Select statement will execute based on the clicked button. Now your toolbar is ready to have the remaining sections of your applica- tion code added. Other Toolbar Features One of the newest features to be added to Visual Basic is the ToolTip textbox feature. Almost every object and control in Visual Basic can display ToolTips. Using the toolbar, if you set the ShowTips property to True you can specify unique text for each toolbar button. Text placed in the ToolTipText property for a button is displayed during runtime when the mouse pointer remains on a button for a short period of time (see Figure 3.8). FIGURE 3.8 Use ToolTips to inform users what function each button performs. 84 Day 3 You’re now halfway through the process of creating an easy-to-use form for the applica- tion. Save this project—you’ll be using it to add the menu in the next section.