Menu bars in Xojo applications

Menu bars appear near the top of most applications. They consist of menus (e.g., File, Edit, Help,…), each containing several action options (e.g., Load, Save, Quit,...) that appear when you click the menu. Oddly, I found it difficult to locate guidelines for implementing this basic feature in either the Xojo documentation, examples supplied with the package or Internet forums. I found many discussions of advanced features but nothing on how to make a simple setup. I solved it eventually, but there were several features that were non-intuitive. For my own information and to save others needless effort, I’ll document the operations in this article.

I’ll limit this discussion to building menu bars and assigning properties in the App design phase (that is, static menus). I won’t cover dynamic menus (i.e., those that depend on the current state of the user’s computer) and contextual menus (i.e., right-click). These are covered fairly well in the Xojo Language Reference entries for MenuBar and MenuItem.

Step 1. In your project, add a menu bar. Click Insert and choose Menu Bar. You can add and customize multiple bars. Each bar can be used in one or more windows. For a simple app with one window, the single bar is typically called MainMenuBar.

Step 2. If you have multiple windows with multiple menu bars, you can set which window uses which bar (or whether a window has no menu bar). Highlight the window and view the properties with Inspector (Figure 1). The option to choose a menu bar appears at the bottom.

Connect a menu bar with a window

Figure 1. Connect a menu bar with a window.

Step 3. Important definitions. A Menu contains one or more MenuItems. Actions are associated with MenuItems. One or more Menus appear across the menu bar. Clicking on a Menu displays its set of Menu Items in a dropdown. A Menu Item may be converted to a Menu to display a SubMenu of MenuItems (generally, off to the side).

Step 4. When you highlight a menu bar, the central section if the IDE changes to a menu bar editor, as shown in Figure 2. Menu bars are created with two default menus: File and Edit with a set of default selections. To remove them, highlight them and press the Delete key. Note that you need to click twice to highlight a menu — the first click highlights the Menu Name.

Menu bar editor

Figure 2. Menu bar editor.

Step 5. Build the menu using the tools above the display area. The tools (left to right) have the following functions.

a) Create a new Menu in the MenuBar.
b) Create a new MenuItem in the highlighted Menu.
c) Add a separator line to the Menu.
d) Create a new SubMenu in the Menu.
e) Convert an existing MenuItem to a Menu to support a new SubMenu.

Within a Menu, you can change the order of MenuItems by dragging them.

Step 6. Highlight a Menu Item to display its properties in Inspector.

a) The Name is important because it will be used to connect with the associated menu action.
b) You can liven the appearance by displaying on icon on the command line.
c) You can add a keyboard shortcut. For example, to invoke the menu command with Control-G, activate MenuModifier and enter the letter G.
d) There is also a button the convert the MenuItem to a Menu (the same function as Tool e).

Step 7. If you run the program at this point, all the menu entries are inactive. They will become active only when they are connected with actions. The actions may apply in all windows that use the Menu Bar, or you may set things up so that different actions occur in different windows. To set up global actions, highlight the App, click Insert and choose Menu Handler. An entry called Menu Handlers will be added as a category of App contents (joining such categories as Constants, Event Handlers,…). To set window specific actions, highlight the target window and add a Menu Handler. Here is the non-evident part. To add a Menu Item, highlight Menu Handlers and again insert a Menu Handler. The IDE actually creates a MenuItem. Highlight it. In the Inspector on the right hand side, supply the Menu Item Name to correspond to the name of one of the Menu Items in the Menu Bar. You can then type in the action in the central edit area. When you click the MenuItem in the Menu Bar, the action is executed.

Here’s a link to a simple sample project: Xojo Menu Test Project.

Footnotes

[1] Find out more about KBD-Infinity: Home page.

[2] If you have comments or questions, please contact us at info@kbd-infinity.com.

1 comment to Menu bars in Xojo applications

  • Rodrick Bodak

    My partner and I absolutely love your blog and find the majority of your post’s to be exactly I’m looking for. I wouldn’t mind publishing a post or elaborating on a few of the subjects you write with regards to here. Again, awesome site!