# 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 Frame1 tab in the Editor to ensure that we are editing the Frame.
- Start the Designer, by clicking the designer button from the Editor toolbar.

- The Designer will add in the Editor window two additional panes, they are the 'Data' and 'Sizer' view. On the Palette select the tab called 'Utilities (Data)'. The dropdown menu (wx.Menu) is one of the components listed on that tab.

- Move the mouse over the buttons. Help tips show that one of these buttons represents the wx.Menu control. This is the control we want. Click on 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 wx.Menu.

- <>Now click the left mouse button either in the Editor's Data View or in the Designer, in which case you have to be carefull to ensure that you click on 'Frame1' area and not on the 'statusbar'.
- <>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 wx.Menus 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 wx.Menu to call it menuFile. Call the second wx.Menu menuHelp. Set the titles to File and Help respectively.

- Double click the menuHelp entry in the Data View. 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 'Items0' to 'About' and I would also recommend to set the ItemId from 'ITEMS0' to 'ABOUT'.
- Edit the field 'Help String' 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 menu item, 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' menu item). You should now have a new handler called OnMenuHelpAboutMenu. 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 'About' sub-component of the 'menuHelp' 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, double click on the 'menuFile' item to open the Collection Editor.
- <>Add five new items.
- Select each menu item in turn, and label them 'Open', 'Save', 'Save As', 'Close' and 'Exit', and again I would recommend to also change the ItemId. Enter some help text for each menu item. Press the Collection Editor refresh button to display the new labels.
- Select each menu item in turn. For each item select the Events pane in the Inspector, and 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 'Utilites (Data)' 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.
- Double click on the menuBar1 item to open it's Collection Editor (as you can see on the image below you can keep multiple of these open).

- Add two items to the menubar using the collection Editor. Select Menus0, in the Inspector Constructor Pane, edit the 'Menu' field. This is a pop-up menu, with three items, the wx.Menu() constructor, and our two dropdown menus, select the self.menuFile item and set the title to 'File'. This makes the menu 'menuFile' the first dropdown menu on the menubar.
- In the Collection Editor select the second item. Repeat the process to link Menus1 to the Help dropdown menu, with the label 'Help'.
- Select the main Frame, Frame1 on the Designer. The frame should now be the current control in the Inspector.
- Select the Properties pane ('Props') in the Inspector. Edit the field 'MenuBar'. This is a pop-up menu. Select your new menubar self.menuBar1. This property defines which menuBar to associate with the frame.

- <>Save the changes using either Post button to close the Designer and let Boa generate the source code.
- <>Save the source code for your generated source file Frame1.py
- Run the program.

- You should now see the menus and the status bar.
- When you select a menu option, the help text should appear in the status bar.