The main menu that appears at the top of most windows that form designers can customize by choosing various menu items.
To see the Menu Editor, right-click on the Main Menu icon on your form.
It is common practice to name menus starting with mnu or menu and the name of the menu. Submenus continue this by prefixing with the menu they are within, e.g. the 'Cut' submenu in the Edit top-level menu is usually named mnuEditCut or menuEditCut. This is a mnemonic and makes it easier to remember, six months from now when you need to make changes, how to put them in. Note that this is a convention, it isn't mandatory, but if you do it this way it will probably make it easier to make changes later, or to understand what the code is doing when you haven't been looking at it for a while, or to allow someone else who has to do maintenance on the program you're writing to be able to fix it later.
Let's get started.
- Select TMainMenu from the component bar and place a component on your form by clicking on the TMainMenu component, then click on the form but do not let go of the mouse button, and while holding the mouse button down, draw a box and let go of the button. The component will appear on your form. This will be a square with a representation of a drop-down menu and the component's name, which will default to MainMenu1.
- If you don't like the name MainMenu1, go to the Object Inspector window and change the Name property to something you like better. Let's say we change it to XMenu. Type in XMenu in the box to the left of the Name property, and push enter. The name on the component changes.
- Right-click on XMenu, and a pop-up menu will appear. For right now, what we want is the first selection, Menu Editor. Click on it.
- The Menu Editor window will open with a menu item already created with a caption of "New Item1". This will be the top-level menu, similar to the "File Edit View Help" menus you've seen before. You probably want to change this, so click on it, then go to the Object Inspector.
- In object inspector, change the Name property from MenuItem1 to something more appropriate. Let's say this is the File menu, so let's change Name by typing in mnuFile and press enter.
- We want a better caption than New Item1, so go to the Caption property and type in &File and press enter. The Ampersand & in front of the name is an accelerator, that's what allows you to open a menu by pressing the Alt key and the underlined letter. The caption for the menu changes to File.
It is at this point that you create additional top-level menus.
- Go back to the Menu Editor window. Click on File, then right-click on it. A pop-up menu will appear. Click on Insert New Item After, and a new menu, called New Item2 will appear. As explained in the last two items, let's change its name to mnuHelp and the caption to &Help in the Object Inspector.
- Let's make a menu item under File. Right-click on it, then click on Create Submenu. The file menu now has an arrow on it, and a submenu called New Item2 appears.
- Change this to something related to what it is to do, let's say "Open". Go to the Object inspector, change the Name property to mnuFileOpen, then change the caption to &Open.
- We need another top-level menu item between File and Help. You can either right-click on File and click on Insert New Item (after) or right-click on Help and click on Insert New Item (before)
- Change this item's name property in the Object Inspector to mnuEdit and its caption property to &Edit.
- Continue the above accordingly for each menu and submenu you need.
Now, all this will get you is a menu that displays at run time and will allow the user to click on the menus. It won't actually do anything. To have the menu items do something, you have to add events for each menu or submenu that is to react to being clicked upon. Usually, top-level menus don't react, the submenus do. You have two choices on how to have the menu react; you can insert the events into the menu, or you can use a TActionList component. The main reason for using a TActionList is if you plan to have an icon toolbar, say that you have a set of menus with "File" then New, Open, Save, Save As, Quit, etc. as submenus, and you're going to have a toolbar with New, Open, Save and Save As as buttons as well. Rather than writing two routines to handle the New and Open functions, you use a TActionList for both the Menu and the toolbar. How to do that using a TActionList will be explained there. For the mean time, I'll explain how to handle a menu click using an event in the Object Explorer.
- Go back to the Menu Editor window, click on the Open submenu under File. Go to the Object Inspector window, click on the Events tab. The only event you really want to change is OnClick, which is blank. If you had an existing event handler, you could use it, but since you don't, you can get Lazarus to create it for you. On the right is a button with 3 dots. Click on it, and a new procedure is created in your code, and the view switches to the code window. It will look similar to this.
- procedure TfrmMain.mnuFileOpenClick(Sender: TObject);
- between tbe begin and end statements you would write the code for handling the Open action on the menu. This might include placing a TOpenDialog control from the Dialogs Tab on your form, and manipulating that dialog to create the standard 'Open' dialog. Same thing applies if you have a Save or Save as submenu.
- You repeat the above at the point where I mentioned how to start creating additional menus and submenus, and for each one that the user can click upon, you would create handlers for each menu option as needed.
Now, maybe you just want a check-box menu, where when the user clicks on it, it turns a check mark on this box on or off. Let's discuss how to do that.
- Go to the Menu Editor window Click on Edit
- Let's make a menu item under Edit. Right-click on it, then click on Create Submenu. go to the Object Inspector window, click on the Properties tab if it's not already selected. Give this submenu the name mnuEditPreserve and the caption P&reserve case (Since Copy and Paste usually use ALT+P and ALT+C we'll use ALT+R for this submenu which is why the ampersand is before the letter r.
- The default value under checked will be False. If the default state of this menu is checked, double click on the value to flip it from False to True.
- Select the Events tab, choose the Click property and click on the ... button.
- Lazarus will switch to the code window, and create the Click event for this submenu.
- within the begin and end boxes, all you need is one line, similar to the following:
- mnuEditPreserve.checked := not mnuEditPreserve.checked ;
- This will flip the value from checked to unchecked. To be able to use this checked menu in your code, just reference
mnuEditPreserve.checked(or whatever the name of the menu is, with the property checked). It's used just as any other Boolean value.
Sometimes you want a menu that has a line separating entries. For example, an Edit menu might have submenus for Cut, Copy and Paste, then have a separator line before the next submenu. To create a separator line, just make another submenu, and make the caption consist of a single dash (-).
If you want, you can assign a menu a specific key combination, proceed as follows:
- Select the menu in the menu editor, which should get assigned a keyboard shortcut.
- In the Object Inspector, go to the property ShortCut and click on the button [...].
- It will appear a window where you can select the desired ShortCut for your menu.
- At run time the event handler of your menu is called with this ShortCut, like you would have clicked on this menu.
If you want to make your menu more visually appealing or establish an optical mapping of the menu entries to a possible toolbar, you can show images in front of the menus. The following steps are necessary:
- Add a TImageList to your form. This is found on the component palette Common Controls. Choose that component TImageList and click on your Form. Now the ImageList named ImageList1 on the form was created. These ImageList will contain all symbols or images to be displayed before the menus.
- Right click now on the ImageList1 and open you the ImageList Editor.
- Add all the images, one after the other, you need for your menus, to the ImageList. Simply click the button Add and select as usual an appropriate image.
- When you have added all of the required images in the ImageList, you confirm your selection with [OK] button and the ImageList Editor is closed.
- Now, you have to select your MainMenu, and set the property Images in the Object Inspector to your ImageList. Simply select your ImageList ImageList1 in the adjacent combobox.
- Now open the menu editor of your menu again and select the menu that you want to get a image.
- Go in the Object Inspector to the property ImageIndex from your menu and select the image to display in the adjacent combobox.
- In the Menu Editor, select the next menu and choose the corresponding image for it. And so on.