{"id":515,"date":"2025-06-23T11:55:22","date_gmt":"2025-06-23T11:55:22","guid":{"rendered":"https:\/\/xojo.itbib4you.be\/?page_id=515"},"modified":"2025-06-23T12:17:33","modified_gmt":"2025-06-23T12:17:33","slug":"xojo-menus","status":"publish","type":"page","link":"https:\/\/xojo.itbib4you.be\/index.php\/xojo-menus\/","title":{"rendered":"Xojo Menus"},"content":{"rendered":"\n
\n
Overview<\/a><\/div>\n<\/div>\n\n\n\n

Introduction<\/h2>\n\n\n\n

Apps use menus to give users access to the available actions offered by the application. In Xojo, you can use three different types of menus: MenuBar menus<\/mark>, Toolbar menus<\/mark> and Contextual menus<\/mark>. This lesson discusses the use of these three types applied to our Account example.<\/p>\n\n\n\n

MenuBar menu<\/h2>\n\n\n\n

Create a menu with the Menu Editor<\/h3>\n\n\n
\n
\"MainMenuBar\"<\/figure>\n<\/div>\n\n\n

The Menubar menu<\/mark> is the standard main menu that appears almost always at the top of the screen. When creating a new desktop project, Xojo will always add a minimal menu (MainMenuBar<\/mark>) to the application.<\/p>\n\n\n\n

All items of MainMenuBar <\/mark>are globally available from all methods in the App.<\/p>\n\n\n\n

The Xojo Menu Editor is a very convenient and easy tool to edit the MainMenuBar<\/mark>. You can open the Menu Editor by selecting MainMenuBar<\/mark> in the project browser (see previous screenshot).<\/p>\n\n\n

\n
\"Menu
Menu Editor<\/figcaption><\/figure>\n<\/div>\n\n\n
\n
\n
Icon<\/th>Description<\/th><\/tr><\/thead>
\"Add<\/td>create a new item on the first level of the menu<\/td><\/tr>
\"add<\/td>create a new item in the selected first level menu<\/td><\/tr>
\"Add<\/td>add a separator line on this menu<\/td><\/tr>
\"add<\/td>create a submenu on the selected menu item<\/td><\/tr>
\"convert<\/td>create a new menu from the selected menu item<\/td><\/tr><\/tbody><\/table>
Menu Editor: icons<\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n

File, Edit and Help are first level menu items available in the standard menu. The first level menu item Accounts<\/mark> have been added to this menu (with the first icon in the list).<\/p>\n\n\n

\n
\"Menu<\/figure>\n<\/div>\n\n\n

The menu items SavingsAccount<\/mark>, CheckingAccount<\/mark> and RetirementAccount<\/mark> have been added to the first level Accounts<\/mark> menu item (with the second icon in the list).<\/p>\n\n\n

\n
\"Menu<\/figure>\n<\/div>\n\n\n

In the inspector, you need to define the Name<\/mark>of the control (e.g. SavingsAccountItem<\/mark>) and the Text<\/mark>that will be displayed (e.g.SavingsAccount<\/mark>). An Icon<\/mark> and a Shortcut<\/mark> can also be added.<\/p>\n\n\n\n

<\/div>\n\n\n\n

How to set actions on a menu item?<\/h3>\n\n\n\n

To illustrate the use of menus, I have removed the DesktopPopupMenu<\/mark> (AccountPopup<\/mark>) from the previous lesson and will use the selected menu item to run the program. This is the new design:<\/p>\n\n\n\n

\"Illustration<\/figure>\n\n\n\n

Now the menu is available, but no actions are defined yet when selecting any of the new menu items. An action can be defined via a Menu Handler<\/mark>.<\/p>\n\n\n

\n
\"inspector<\/figure>\n<\/div>\n\n\n

A Menu Handler<\/mark> can be added via the Insert<\/mark> button \"insert\" on top of the Xojo screen. In the Inspector<\/mark>, select the menu item from the drop-down list for which you want to define an action (e.g. CheckingAccountItem<\/mark>).<\/p>\n\n\n\n

In the coding pane, you can then define the action associated with the selected menu item.<\/p>\n\n\n\n

\/\/Menu Handler for CheckingAccountItem<\/mark>
SelectedMenuItem = CheckingAccountItem.Text
ProcessSelection
Return True<\/mark><\/pre>\n\n\n\n
SelectedMenuItem<\/mark> is a new private String Property belonging to AccountWindow<\/mark>. The Text<\/mark>property of the CheckingAccountItem<\/mark>menu item is a String containing the text displayed in the menu. In the above code, the SelectedMenuItem<\/mark> Property will contain the String “CheckingAccount”.<\/p>\n\n\n\n
Identical menu handlers should be added for the SavingsAccountItem<\/mark> and the RetirementAccountItem<\/mark>.<\/p>\n\n\n\n
The new method named ProcessSelection<\/mark> uses the private property named SelectedMenuItem<\/mark> to determine which data should be retrieved from the database and shown in TransactionList<\/mark>.<\/p>\n\n\n\n
\/\/ProcessSelection<\/mark>
ChangeActiveAccount

Var<\/mark> rs As<\/mark> RowSet = ReadDBData
PopulateListBox(rs) 

Var<\/mark> balance As Currency<\/mark> = CalculateBalance 
ActiveAccount.UpdateBalance(balance)
ShowBalance<\/pre>\n\n\n\n
Also, the ReadDBData<\/mark> method, the ShowBalance<\/mark> method and the ChangeActiveAccount<\/mark> method now use the value stored in the property SelectedMenuItem<\/mark>.<\/p>\n\n\n\n
\/\/ReadDBData<\/mark>
Var<\/mark> rs As<\/mark> RowSet
Var<\/mark> sql As<\/mark> String = \"SELECT AccountName, AccountDeposit, AccountWithdraw  FROM Accounts WHERE AccountName =  ?;\" 
Try<\/mark>
  rs = App.db.SelectSQL(sql, selectedMenuItem<\/mark>)
Catch<\/mark> error As<\/mark> DatabaseException
  Messagebox(\"DB Select error \"+error.Message)
  Quit
End Try<\/mark>
Return<\/mark> rs<\/pre>\n\n\n\n
\/\/ShowBalance<\/mark>
BalanceLabel.Text = \"The balance of the \" + selectedMenuItem<\/mark> + \" is: \" + _ 
ActiveAccount.GetBalance.ToString(Locale.Current)
<\/pre>\n\n\n\n
\/\/ChangeActiveAccount<\/mark>
Select Case<\/mark> SelectedMenuItem<\/mark>
Case<\/mark> \"CheckingAccount\"
  ActiveAccount = CheckingAccount
Case<\/mark> \"SavingsAccount\"
  ActiveAccount = SavingsAccount
Case<\/mark> \"RetirementAccount\"
  ActiveAccount = RetirementAccount
End<\/mark> <\/pre>\n\n\n\n
Toolbar menu<\/h2>\n\n\n\n
How to create a Toolbar menu?<\/h3>\n\n\n
\n
\"Toolbar<\/figure>\n<\/div>\n\n
\n
\"AccountWindow\"<\/figure>\n<\/div>\n\n\n
Xojo also offers the ability to add a toolbar to any window in the application. A toolbar can be added by selecting the Toolbar<\/mark> control in the library and adding it to your project. A Toolbar<\/mark> object (e.g. Toolbar1<\/mark>) can then be dragged into a window. The name of the Toolbar<\/mark> object in AccountWindow<\/mark> was then changed to AccountToolbar<\/mark>.<\/p>\n\n\n\n
AccountToolbar<\/mark> can be edited afterwards with the Menu Editor<\/mark> to add buttons and menu items to the toolbar. However, it is also possible to construct a menu using code. This will be illustrated in this part of the lesson.<\/p>\n\n\n\n
The following code is available in the Opening<\/mark> event of AccountToolbar<\/mark>:<\/p>\n\n\n\n
\/\/AccountToolbar Opening event<\/mark>
Var<\/mark> accountsButton As New<\/mark> DesktopToolbarButton
accountsButton.Caption = \"Accounts\"
accountsButton.Icon = image1
accountsButton.ButtonStyle = DesktopToolbarButton.ButtonStyles.DropDownMenu

Var<\/mark> accountsMenu As New<\/mark> DesktopMenuItem
accountsMenu.AddMenu(New<\/mark> DesktopMenuItem(\"CheckingAccount\"))
accountsMenu.AddMenu(New<\/mark> DesktopMenuItem(\"RetirementAccount\"))
accountsMenu.AddMenu(New<\/mark> DesktopMenuItem(\"SavingsAccount\"))

accountsButton.Menu = accountsMenu

Me<\/mark>.AddButton(accountsButton)
<\/pre>\n\n\n\n
A toolbar consists of a series of buttons. A toolbar button can support one action or can support multiple actions through an underlying menu structure. In our example, we have one button that refers to the three types of accounts.<\/p>\n\n\n\n
In the first part of the code above, we create a toolbar button named accountsButton<\/mark> with the Caption<\/mark> Accounts<\/mark> and with image1<\/mark> as the Icon<\/mark>. Image1<\/mark> is an image added to the project. The ButtonStyle<\/mark> is a DropDownMenu<\/mark>. Other button styles are PushButton<\/mark>, ToggleButton<\/mark>, Space<\/mark>, Flexible Space<\/mark> and so on.<\/p>\n\n\n\n
In the second part of the code, we create the underlying menu structure accountsMenu<\/mark> consisting of three menu items: CheckingAccount<\/mark>, RetirementAccount<\/mark> and SavingsAccount<\/mark>. Menu items are always objects of the class DesktopMenuItem<\/mark>.<\/p>\n\n\n\n
The AddMenu<\/mark> method adds a DesktopMenuItem to a DesktopMenuItem menu.<\/pre>\n\n\n\n
In the third part of the code, we define the menu (accountsMenu<\/mark>) as a dropdown menu of accountsButton<\/mark>.<\/p>\n\n\n\n
The Menu<\/mark> property of a DesktopToolbarButton<\/mark> is used to assign a dropdown menu.<\/pre>\n\n\n\n
In the fourth part of the code, we add the button (accountsButton<\/mark>) to the AccountToolbar<\/mark> (Me<\/mark> refers to the object to which the Opening event applies).<\/p>\n\n\n\n
The AddButton<\/mark> method is used to add a DesktopToolbarButton<\/mark>to a toolbar.<\/pre>\n\n\n\n
How to handle a selection?<\/h3>\n\n\n\n
The MenuItemSelected<\/mark> event of AccountToolbar<\/mark> is available to handle a selection of a dropdown menu item. The local variable selectedItem<\/mark> (parameter of the event named MenuItemSelected<\/mark>) refers to the selected item. The Text<\/mark> property of selectedItem<\/mark> contains the text shown in the menu. This is the code used:<\/p>\n\n\n\n
\/\/MenuItemSelected(item As DesktopToolbarItem, selectedItem As DesktopMenuItem)<\/mark>
SelectedMenuItem = selectedItem.Text
ProcessSelection<\/pre>\n\n\n\n
The property selectedMenuItem<\/mark> receives the text of the item that was selected in the menu. As you may recall from the discussion of the MenuBar menu, further processing is done by the method called ProcessSelection<\/mark>. Our program still works fully, but now with the Toolbar menu.<\/p>\n\n\n\n
Contextual Menu<\/h2>\n\n\n\n
\"contextual<\/figure>\n\n\n\n
A Contextual menu<\/mark> appears when a user right-clicks<\/mark> on a control. In the screenshot above, the user has called up a contextual menu related to the DesktopListBox control. <\/p>\n\n\n\n
How to create a Contextual menu?<\/h3>\n\n\n
\n
\"TransactionList\"<\/figure>\n<\/div>\n\n\n
A contextual menu can be created via an event<\/mark> called ConstructContextualMenu<\/mark>. This event can be selected via our DesktopListBox named TransactionList<\/mark> .<\/p>\n\n\n\n
<\/div>\n\n\n\n
The following piece of code was added to the event ConstructContextualMenu<\/mark>:<\/p>\n\n\n\n
\/<\/mark>\/ConstructContextualMenu(base As DesktopMenuItem, x As Integer, y As Integer) As Boolean<\/mark>
base.AddMenu(New<\/mark> DesktopMenuItem(\"Sort Deposit column\"))
base.AddMenu(New<\/mark> DesktopMenuItem(\"Sort Withdraw column\"))
Return True<\/mark><\/pre>\n\n\n\n
In the code above, DesktopMenuItems<\/mark> are added with the AddMenu<\/mark> method to the DesktopMenuItem<\/mark> parameter base<\/mark>. base<\/mark> is a parameter of the event ConstructContextualMenu<\/mark> and is the initial menu object. All items added to base<\/mark> will be displayed.<\/p>\n\n\n\n
How to handle a selection?<\/h3>\n\n\n\n
The event ContextualMenuItemSelected<\/mark> will be triggered by the selection of an item in a contextual menu. The Text<\/mark> property of selectedItem<\/mark> (parameter of the ContextualMenuItemSelected<\/mark> event) contains the text displayed in the selected item.<\/p>\n\n\n\n
\/\/ContextualMenuItemSelected(selectedItem As DesktopMenuItem) As Boolean<\/mark>
Select Case<\/mark> selectedItem.Text
Case<\/mark> \"Sort Deposit column\"
  Me<\/mark>.ColumnSortDirectionAt(1) = DesktopListBox.SortDirections.Descending
  Me<\/mark>.SortingColumn = 1
  Me<\/mark>.Sort
Case<\/mark> \"Sort Withdraw column\"
  Me<\/mark>.ColumnSortDirectionAt(2) = DesktopListBox.SortDirections.Descending
  Me<\/mark>.SortingColumn = 2
  Me<\/mark>.Sort
End Select<\/mark>
Return True<\/mark><\/pre>\n\n\n\n
To sort a column in a Listbox, the column number must be defined via the SortingColumn<\/mark> property and the sorting order (Descending<\/mark> or Ascending<\/mark>) via the ColumnSortDirectionAt<\/mark> method. The sorting itself is done by the method Sort<\/mark> .<\/p>\n\n\n\n
Property<\/th>Type<\/th>Description<\/th><\/tr><\/thead>
SortingColumn<\/td>Integer<\/td>The column of the ListBox to be sorted<\/td><\/tr><\/tbody><\/table>
DesktopListBox properties<\/figcaption><\/figure>\n\n\n\n
Method<\/th>Type<\/th>Description<\/th><\/tr><\/thead>
ColumnSortDirectionAt<\/td>Integer<\/td>Assigns a sort direction to the specified column (ascending\/descending)<\/td><\/tr>
Sort<\/td><\/td>Sorts the ListBox based on the values assigned to ColumnSortDirectionAt and SortingColumn<\/td><\/tr><\/tbody><\/table>
DesktopListBox methods<\/figcaption><\/figure>\n\n\n\n
Column numbers of a DesktopListBox begin at zero (0<\/mark>).<\/pre>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
Introduction Apps use menus to give users access to the available actions offered by the application. In Xojo, you can use three different types of menus: MenuBar menus, Toolbar menus and Contextual menus. This lesson discusses the use of these three types applied to our Account example. MenuBar menu Create a menu with the Menu … Continue reading “Xojo Menus”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-515","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/xojo.itbib4you.be\/index.php\/wp-json\/wp\/v2\/pages\/515","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/xojo.itbib4you.be\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/xojo.itbib4you.be\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/xojo.itbib4you.be\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/xojo.itbib4you.be\/index.php\/wp-json\/wp\/v2\/comments?post=515"}],"version-history":[{"count":68,"href":"https:\/\/xojo.itbib4you.be\/index.php\/wp-json\/wp\/v2\/pages\/515\/revisions"}],"predecessor-version":[{"id":614,"href":"https:\/\/xojo.itbib4you.be\/index.php\/wp-json\/wp\/v2\/pages\/515\/revisions\/614"}],"wp:attachment":[{"href":"https:\/\/xojo.itbib4you.be\/index.php\/wp-json\/wp\/v2\/media?parent=515"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}