# 2.4 Add a Menu Bar

The next component we are going to add to the application is a menubar. A menubar is a common component on windows programs. Our menu bar will contain two entries, File and Help. Selecting one of these will display a dropdown menu. The user can select an option from the drop down menu.

- Select the wxFrame1 tab in the Editor to ensure that we are editing the Frame.
- Start the Designer, by selecting the designer button from the Editor toolbar.
- The Designer option shows two windows. The Designer window which is used for Layout is displayed. The Editor window will create and switch to the Data View.
- On the Palette select the tab called 'Utilities'. This tab contains entries for invisible components. The dropdown menu (wxMenu) is listed in these components.
- Move the mouse over the buttons. Help tips should show that one of these buttons represents the wxMenu control. This is the control we want. Press this button.
- The button should change shading to indicate that it is pressed. The Palette contains a checkbox to show the currently selected component type. This should say wxMenu.

- Now Editor's Data View. Left on the Data View to create a dropdown menu for the frame. The menu will not be visible on the frame. However, there will now be an entry on the Data View.
- Repeat the procedure. You should now have two wxMenus in the Data View, called menu1 and menu2. Select menu1 using the mouse. The Inspector will now display the Name and Title for menu1.

- Edit the name of the first wxMenu to call it mnuFile. Call the second wxMenu mnuHelp. Set the titles to File and Help respectively.
- Select the menu, mnuHelp. Select the Properties pane in the Inspector. Click to edit the value of 'Items'. The field will show a button with 3 dots. Click the button. This opens the 'Collection Editor'. The Collection Editor is used to add items to our menus.
- Press the 'New' button on the Collection Editor. This creates a new menu item within the dropdown menu. This becomes the current item in the Inspector.
- Edit the field 'Label'. Set the name from 'item0' to 'About'.
- Edit the field 'Help String'. Set the value from 'item0' to 'Display general information about Notebook'.
- The Collection Editor toolbar contains a 'Refresh' button. Press this button to see the Inspector change in the Collection Editor window.

- In the Inspector, select the Events Pane. This is the pane used to configure events. We need to configure the action which occurs when the 'About' menu item is selected. When the 'About' menu item is selected, and event called 'EVT_MENU' is generated and sent to our program. We must add a method to our class to handle this event.
- The left hand side of the events pane shows the groups of events which are available. For the menuitem, there is only 'MenuEvent' group. Select this group using the mouse.
- The right hand side of the events pane now shows the events in the selected group. For the menuitem, there is only one event EVT_MENU in the 'MenuEvent' group. Doubleclick on this Event using the mouse.
- The bottom of the Events pane shows the event handlers in your application for the current component (the 'About' menuitem). You should now have a new handler called OnMnuhelpitems0Menu. This is the name of the method which will be invoked when the 'About' option is selected from the Help menu.
- Notice the naming of the event handler. Boa Constructor generates the names in this manner. The event is the last part (Menu). The component is the middle part and here it is the items0 sub-component of the mnuHelp component. Finally, Boa Constructor follows the convention of prefixing all event handlers with the word 'On'.
- Close the collection Editor.

Now we must repeat the process to add options to the file menu.

- From the Data View in the Editor, select the second menu, 'mnuFile'.
- In the Inspector select the Properties Pane. Click to edit the menu items. Click on the '...' button to bring up a Collection Editor for the 'menuitems'.
- Use the Collection Editor New button to create five menu items.
- Select each menu item in turn, and label them 'Open', 'Save', 'Save As', 'Close' and 'Exit'. Enter some help text for each menu item. Press the Collection Editor Update button to display the new labels.
- Select each menu item in turn. For each item select the Events pane in the Inspector. Add an event handler for EVT_MENU to each item.
- Close the collection Editor.

Now we are going to create the menubar

- On the Palette window, select the 'Frame bars' pane. On this pane select the menubar component.
- Move the cursor over the Editor Data View. Click the left mouse button on this pane to add a menubar called 'menuBar1' to the application. Select the new menubar.
- Select the Properties pane in the Inspector. From the Properties pane select to edit the field 'Menus'. This will open a Collection Editor.
- Add two Menus to the menubar using the collection Editor. Select menu0. In the Inspector Constructor Pane, edit the 'Menu' field. This is a pop-up menu, with three items, the wxMenu() constructor, and our two dropdown menus. Set the value to File. Set the title to 'File'. This makes the mnuFile menu the first dropdown menu on the menubar.
- In the Collection Editor select the second menu. Repeat the process to link menu1 to the Help dropdown menu, with the label 'Help'.
- Close the collection Editor.
- Select the main Frame, wxFrame1 on the Designer. The frame should now be the current control in the Inspector.
- Select the Properties pane in the Inspector. Edit the field 'MenuBar'. This is a pop-up menu. Select your new menubar self.menuBar1. This property chooses which menuBar to associate with the frame.

- Save the changes using the Post button on the Editor. The Designer should close.
- Save the source code for your generated source file wxFrame1.py
- Run the program. You should now see that the menus and the status bar. When you move the mouse over a menu option, the help text should appear in the status bar.