Menus and Toolbars
A menu is one of the most visible parts of the GUI application. It is a group of commands located in various menus. While in console applications you had to remember all those arcane commands, here we have most of the commands grouped into logical parts. There are accepted standards that further reduce the amount of time spending to learn a new application. To implement a menu in xtd we need to have two classes: a xtd::forms::main_menu, and a xtd::forms::menu_item.
In This Section
Simple menu example
Creating a menu in xtd is very simple.
#include <xtd/xtd>
using namespace xtd;
using namespace xtd::forms;
class form1 final : public form {
public:
form1() {
center_to_screen();
menu(main_menu1);
size({200, 180});
text("Simple menu");
}
private:
auto on_exit(object& sender, const event_args& e) noexcept -> void {
close();
}
menu_item file_exit_menu_item {"&Quit", {*this, &form1::on_exit}, shortcut::ctrl_q};
menu_item file_menu_item {"&File", {file_exit_menu_item}};
main_menu main_menu1 {{file_menu_item}};
};
auto main() -> int {
application::run(form1 {});
}
menu_item file_exit_menu_item {"&Quit", {*this, &form1::on_exit}, shortcut::ctrl_q};
We create an exit menu item with the menu item text as the first parameter.
The second parameter is the event handler associated with the menu item.
The third parameter is the shortcut key for calling the menu item from the keyboard.
The & character creates an accelerator key. The character that follows the & is underlined.
menu_item file_menu_item {"&File", {file_exit_menu_item}};
We create the submenu item in the file with the menu item text as the first parameter.
The second parameter is a vector of menu items. In this case, it contains only the exit menu item.
main_menu main_menu1 {file_menu_item};
Finally, we create the main menu, which will be placed in the form's menu bar.
It contains the list of submenus, in this case the file submenu.
Figure: Simple menu example
Submenus
Each menu can also have a submenu. This way we can group similar commands into groups. For example we can place commands that hide or show various toolbars like personal bar, address bar, status bar, or navigation bar into a submenu called toolbars. Within a menu, we can separate commands with a separator. It is a simple line. It is common practice to separate commands like new, open, save from commands like print, print preview with a single separator. In our example we see, how we can create submenus and menu separators.
#include <xtd/xtd>
using namespace xtd;
using namespace xtd::forms;
class form1 final : public form {
public:
form1() {
center_to_screen();
menu(main_menu1);
size({200, 180});
text("Submenu");
}
private:
auto on_exit(object& sender, const event_args& e) noexcept -> void {
close();
}
menu_item file_new_menu_item {"&New"};
menu_item file_open_menu_item {"Open"};
menu_item file_save_menu_item {"&Save"};
menu_item file_separator1_menu_item {"-"};
menu_item file_import_newsfeed_menu_item {"Import newsfeed list..."};
menu_item file_import_bookmarks_menu_item {"Import bookmarks..."};
menu_item file_import_mails_menu_item {"Import mails..."};
menu_item file_import_menu_item {"Import", {file_import_newsfeed_menu_item, file_import_bookmarks_menu_item, file_import_mails_menu_item}};
menu_item file_separator2_menu_item {"-"};
menu_item file_exit_menu_item {"&Quit", {*this, &form1::on_exit}, shortcut::ctrl_q};
menu_item file_menu_item {"&File", {file_new_menu_item, file_open_menu_item, file_save_menu_item, file_separator1_menu_item, file_import_menu_item, file_separator2_menu_item, file_exit_menu_item}};
main_menu main_menu1 {{file_menu_item}};
};
auto main() -> int {
application::run(form1 {});
}
We created one submenu in a file menu. It is an import submenu, which can be seen in Opera web browser.
menu_item file_separator1_menu_item {"-"};
A menu separator line is created calling it with "-" as text.
menu_item file_import_newsfeed_menu_item {"Import newsfeed list..."};
menu_item file_import_bookmarks_menu_item {"Import bookmarks..."};
menu_item file_import_mails_menu_item {"Import mails..."};
menu_item file_import_menu_item {"Import", {file_import_newsfeed_menu_item, file_import_bookmarks_menu_item, file_import_mails_menu_item}};
A submenu is created in the same way as a normal menu. Items are added as a second parameter as a menu_item vector.
Figure: Submenu
Toolbars
Menus group all commands that we can use in an application. Toolbars provide a quick access to the most frequently used commands.
xtd::forms::tool_bar xtd::forms::tool_bar::create(...);
To create a system toolbar, we call the xtd::forms::form::tool_bar method of the xtd::forms::form control.
A simple toolbar
Our first example will create a simple toolbar.
#include <xtd/xtd>
using namespace xtd;
using namespace xtd::forms;
class form1 final : public form {
public:
form1() {
center_to_screen();
text("Toolbar");
tool_bar(tool_bar1);
tool_bar1.button_click += {*this, &form1::on_tool_bar_button_click};
}
private:
auto on_tool_bar_button_click(object& sender, const tool_bar_button_click_event_args& e) noexcept -> void {
if (e.button() == exit_tool_bar_button) close();
}
tool_bar_button exit_tool_bar_button = tool_bar_button::create_push_button(0);
forms::tool_bar tool_bar1 = forms::tool_bar::create(*this, {tool_bar_images::file_exit()}, {exit_tool_bar_button});
};
auto main() -> int {
application::run(form1 {});
}
In our example, we create a toolbar and one tool button. Clicking on the toolbar button will terminate the application.
tool_bar_button exit_tool_bar_button = tool_bar_button::create_push_button(0);
We create a toolbar button.
forms::tool_bar tool_bar1 = forms::tool_bar::create(*this, {tool_bar_images::file_exit()}, {exit_tool_bar_button});
We create a toolbar and adding exit toolbar button.
tool_bar(tool_bar1);
We add the toolbar we've created as the form's system toolbar.
Figure: Toolbar
Toolbars
If we want to have more than one toolbar, only one of the toolbars can be associated as the form's system toolbar. The other toolbars will be secondary toolbars that can be placed at the top, bottom, left or right of the form using the xtd::forms::tool_bar::dock property.
#include <xtd/xtd>
using namespace xtd;
using namespace xtd::forms;
class form1 final : public form {
public:
form1() {
center_to_screen();
text("Toolbar");
tool_bar(tool_bar1);
tool_bar1.button_click += {*this, &form1::on_tool_bar_button_click};
tool_bar2.button_click += {*this, &form1::on_tool_bar_button_click};
}
private:
auto on_tool_bar_button_click(object& sender, const tool_bar_button_click_event_args& e) noexcept -> void {
if (e.button() == exit_tool_bar_button) close();
}
tool_bar_button exit_tool_bar_button = tool_bar_button::create_push_button(0);
forms::tool_bar tool_bar1 = forms::tool_bar::create(*this, {tool_bar_images::file_exit()}, {exit_tool_bar_button});
tool_bar_button new_tool_bar_button = tool_bar_button::create_push_button(0);
tool_bar_button open_tool_bar_button = tool_bar_button::create_push_button(1);
tool_bar_button save_tool_bar_button = tool_bar_button::create_push_button(2);
forms::tool_bar tool_bar2 = forms::tool_bar::create(*this, {tool_bar_images::file_new(), tool_bar_images::file_open(), tool_bar_images::file_save()}, {new_tool_bar_button, open_tool_bar_button, save_tool_bar_button});
};
auto main() -> int {
application::run(form1 {});
}
Figure: Toolbars
Toolbar at bottom
A toolbar can be placed on any border of the form or at any coordinate. Simply use the dock property of the toolbar.
#include <xtd/xtd>
using namespace xtd;
using namespace xtd::forms;
class form1 final : public form {
public:
form1() {
center_to_screen();
text("Toolbar on bottom");
tool_bar(tool_bar1);
tool_bar1.button_click += {*this, &form1::on_tool_bar_button_click};
tool_bar2.button_click += {*this, &form1::on_tool_bar_button_click};
tool_bar2.dock(dock_style::bottom);
}
private:
auto on_tool_bar_button_click(object& sender, const tool_bar_button_click_event_args& e) noexcept -> void {
if (e.button() == exit_tool_bar_button) close();
}
tool_bar_button exit_tool_bar_button = tool_bar_button::create_push_button(0);
forms::tool_bar tool_bar1 = forms::tool_bar::create(*this, {tool_bar_images::file_exit()}, {exit_tool_bar_button});
tool_bar_button new_tool_bar_button = tool_bar_button::create_push_button(0);
tool_bar_button open_tool_bar_button = tool_bar_button::create_push_button(1);
tool_bar_button save_tool_bar_button = tool_bar_button::create_push_button(2);
forms::tool_bar tool_bar2 = forms::tool_bar::create(*this, {tool_bar_images::file_new(), tool_bar_images::file_open(), tool_bar_images::file_save()}, {new_tool_bar_button, open_tool_bar_button, save_tool_bar_button});
};
auto main() -> int {
application::run(form1 {});
}
In this example, the toolbar is placed at the bottom of the form.
tool_bar2.dock(dock_style::bottom);
We set the dock property to xtd::formq::dock_style::button.
Figure: Toolbar at bottom
Toolbar anywhere
To place the toolbar anywhere on the form, simply change the dock property to xtd::formq::dock_style::none and modify the toolbar location. The toolbar behaves exactly like any other control, except that it can be a system toolbar.
#include <xtd/xtd>
using namespace xtd;
using namespace xtd::forms;
class form1 final : public form {
public:
form1() {
center_to_screen();
text("Toolbar anywhere");
tool_bar(tool_bar1);
tool_bar1.button_click += {*this, &form1::on_tool_bar_button_click};
tool_bar2.button_click += {*this, &form1::on_tool_bar_button_click};
tool_bar2.dock(dock_style::none);
tool_bar2.location({80, 100});
}
private:
auto on_tool_bar_button_click(object& sender, const tool_bar_button_click_event_args& e) noexcept -> void {
if (e.button() == exit_tool_bar_button) close();
}
tool_bar_button exit_tool_bar_button = tool_bar_button::create_push_button(0);
forms::tool_bar tool_bar1 = forms::tool_bar::create(*this, {tool_bar_images::file_exit()}, {exit_tool_bar_button});
tool_bar_button new_tool_bar_button = tool_bar_button::create_push_button(0);
tool_bar_button open_tool_bar_button = tool_bar_button::create_push_button(1);
tool_bar_button save_tool_bar_button = tool_bar_button::create_push_button(2);
forms::tool_bar tool_bar2 = forms::tool_bar::create(*this, {tool_bar_images::file_new(), tool_bar_images::file_open(), tool_bar_images::file_save()}, {new_tool_bar_button, open_tool_bar_button, save_tool_bar_button});
};
auto main() -> int {
application::run(form1 {});
}
tool_bar2.dock(dock_style::none);
tool_bar2.location({80, 100});
We set the dock property to none and set the location to 80 pixels to the left and 100 pixels to the top.
Figure: Toolbar anywhere
In this part of the xtd tutorial, we have covered menus and toolbars.