Our editor is almost complete-only two additions remain. The first addition is a toolbar to provide quick access to the menu item commands. The second addition is the context menu, the type of menu that pops up when the user clicks the right mouse button. This kind of menu is called a context menu because you can assign a different menu to different controls in the form. The Forms Designer can handle both of these additions almost completely.

Toolbar

There are several steps involved in creating a toolbar. Let's take each of these in turn.

Creating toolbar images

The first step in creating a toolbar is to create a set of images to be displayed on the toolbar buttons. There are several ways to go about this. One approach is to draw your own bitmap image using a paint program. Another approach is to use one of the built-in images that comes with Visual J Plus Plus. To have these available, you specify that you want to install BITMAPS during Visual J Plus Plus installation.

If the bitmap you want is not present in the Visual J Plus Plus image library, you can copy one from your favorite app. Simply open the app that has the button image you want to use. Now press the Print Screen key to copy the current screen to the Clipboard. Run the Paint app that comes with Microsoft Windows. Now paste the image into Paint by choosing Paste from the Edit menu. Enlarge the image, and then place a selection box around the button image as shown in Figure 7-8.

Copy the button image to its own file by selecting Copy To from the Edit menu. In the Copy To dialog box, select the name and location for the image file and choose Save. (You could Copy and then Paste the image into a new file, but Copy To ensures the size of the image will be the size of your selection, with no extra white space around the edges and no need for resizing.) When you save the image, select a name indicative of its contents. I used the same naming convention for buttons that I used for the menu items. Thus, I named the image I cut out for the New toolbar button newFile.bmp.

Screenshot-8. Button images can be copied easily by enlarging the image first.

You'll repeat this process for each toolbar button you plan to create. For Editor2, I created images for New, Open, Save, Cut, Copy, Paste, and Font toolbar buttons.

Whether you create your own images or use one of those offered by the Visual J Plus Plus bitmap library, you'll need to copy the images to an images subdirectory of the Editor2 project folder.

Creating a toolbar

Creating the ToolBar object is simply a matter of dragging a ToolBar control from the Toolbox to the form. Position the ToolBar control immediately under the menu bar. You might need to resize the RichEdit control to leave room for the toolbar.

Associating the images with the toolbar

Before you can use the images you've just created in your form design, you must create an ImageList object and associate this ImageList object with the toolbar. Select the ImageList control from the Toolbox, and drop it onto the form. Much like the file dialog boxes and the main menu, it doesn't much matter where on the form you place the ImageList control. The Forms Designer assigns the default name of imageList1, which is good enough for me.

Now select the Properties window and click the ImageList control to edit its properties. Double-click the images property to open the Image Editor. From here, you can add each of the bitmapped images you created to the ImageList by using the Add button. Figure 7-9 shows the Image Editor after I had added each of the seven images to the ImageList control.

Screenshot

Screenshot-9. Use the Image Editor to add .BMP files to the ImageList control.

To add the ImageList control to the toolbar, click the imageList toolbar property. Click the arrow in the property value box to drop-down a menu listing the only ImageList control in the app, imageList1, as a possible candidate. Select imageList1.

Creating the toolbar buttons

You are now ready to create the toolbar buttons. Double-click the buttons property of the ToolBar in the Properties window to reveal the ToolBarButton Editor. Use the Add button to add buttons to your toolbar. I added seven buttons.

Once the buttons have been added, you can change their properties using the Properties window. At a minimum, you will want to change their labels by editing the text property. I also renamed the buttons to indicate their function. For example, I applied the name openFileTBB for the Open toolbar button. You can also edit the toolTipText property from here. (The ToolTip is the string that appears when you point at the button with the mouse pointer.)

You will also need to update the imageIndex property to select the appropriate image from the image list. For example, I assigned image 0 to the fileNewTBB button.

The completed toolbar's Properties window is shown in Figure 7-10.

Screenshot

Screenshot-10. Each toolbar button must be edited to have the proper label, name, ToolTip, and image.

Fixing property problems

A bug in early releases of Visual J Plus Plus kept the programmer from setting the imageIndex property from the Properties window. These types of problems are not always fatal. For example, to avoid this problem I simply set the imageIndex property manually by adding the following code to the constructor: 

 public Form1(String[] args)
 {
 // …same as before…
 // set the image index for each toolbar button
 newFileTBB.setImageIndex(0);
 openFileTBB.setImageIndex(1);
 saveFileTBB.setImageIndex(2);
 copyEditTBB.setImageIndex(3);
 cutEditTBB.setImageIndex(4);
 pasteEditTBB.setImageIndex(5);
 fontFormatTBB.setImageIndex(6);
 }

Similar problems can be fixed in the constructor if the initForm() code generated by the Properties window doesn't appear to be correct.

Associating an action to each button

Unfortunately, toolbar buttons have no active properties in the Properties window, but the toolbar does. So you must create a toolBar1_buttonClick() function (double-click the toolbar to create the function skeleton) to handle each of the buttons, as follows: 

 private void toolBar1_buttonClick(Object source,
 ToolbarButtonClickEvent e)
 {
 // handle each button in turn
 if (e.button == newFileTBB)
 {
 newFileMI_click(source, e);
 }
 if (e.button == openFileTBB)
 {
 openFileMI_click(source, e);
 }
 if (e.button == saveFileTBB)
 {
 saveFileMI_click(source, e);
 }
 if (e.button == copyEditTBB)
 {
 copyEditMI_click(source, e);
 }
 if (e.button == cutEditTBB)
 {
 cutEditMI_click(source, e);
 }
 if (e.button == pasteEditTBB)
 {
 pasteEditMI_click(source, e);
 }
 if (e.button == fontFormatTBB)
 {
 fontFormatMI_click(source, e);
 }
 }

The ToolbarButtonClickEvent parameter contains a reference to the toolbar button that was just clicked. By comparing the reference to the buttons by name, the program can determine which button was selected. Once toolBar1_buttonClick() has determined which button was selected, it simply calls the associated menu item click method to perform the actual function.

Context Menu

To add a context menu to the Editor2 app, first select the ContextMenu control from the Toolbox and drag it to the RichEdit control in the Forms Designer. Double-click the ContextMenu object in the Forms Designer to begin adding menu items. The context menu editor works the same as the main menu editor. Figure 7-11 shows the context menu with my menu choices added.

Screenshot

Screenshot-11. Adding menu items to a context menu is similar to adding items to a regular menu.

Before the context menu can become functional event handlers must be associated with each menu item. Fortunately, the context menu items are the same as those we created to service the main menu. With the Properties window visible, click the Open File context menu item. From the active properties, edit the click property. From the available event handlers, select openFileMI_click(). This process is shown in Figure 7-12. Repeat this process for each context menu item.

Finally, edit the contextMenu property of the form to associate the context menu with the app. Save the file, and rebuild the project to complete the process.

NOTE
Apparently the rich edit control and the toolbar control use the right mouse click for their own purposes and do not propagate it up to the form. In the resulting Editor2 app, clicking the right mouse button pops up the context menu everywhere except the rich edit control and the toolbar control.

Screenshot-12. Edit the click property to associate an action with each context menu item.