Creating Menus
One of the features of our SDK is its capability to incorporate custom natives menus.
Equo offers several possibilities to add new menus to your applications:
-
Using the
EquoApplicationBuilder
, that will build a static menu.
@Override
public EquoApplicationBuilder buildApp(EquoApplicationBuilder appBuilder) {
return appBuilder.withUI("index.html")
.withMainMenu("Equo")
.addMenuItem("Static Menu")
.onClick(new Runnable() {
@Override
public void run() {
try {
MessageDialog.openInformation(null, "info dialog", "Clicked button!");
} catch (Exception e) {
e.printStackTrace();
}
}
})
.start();
}
...
-
Creating an EquoMenu and adding it dynamically.
...
final Menu model1 = Menu.create();
model1.withMainMenu("Equo").addMenuItem("Dynamic menu")
.onClick(new Runnable() {
@Override
public void run() {
System.out.println("Clicked button!");
}
});
return appBuilder.withUI("index.html").withMainMenu("Menu Test").addMenuItem("Change menu").onClick(new Runnable() {
@Override
public void run() {
model1.setApplicationMenu();
}
}).start();
-
Using the JavaScript API menu to create it, which allows for runtime modifications. Learn more about how to use JavaScript APIs.
import { Menu } from "@equo/equo-application-menu";
...
Menu.create()
.withMainMenu("Equo")
.addMenuItem("Dynamic menu")
.onClick(() => { console.log("Your Equo app is awesome!") })
.setApplicationMenu();
...
All of the above options for adding new menus to your applications offer the same methods to build a menu. You can read about EquoMenu
on its Java Documentation and JavaScript API Documentation
Menu Variants
Within the menus there are three types of variants:
-
Main menu: a top-level menu. This are the ones visible in the top application bar (1). They are created with the method
withMainMenu
. -
Menu: a common menu inside another menu (2). They are created with the method
addMenu
. -
Menu item: the menu elements that have defined actions to be executed when clicked on (3). They are created with the method
addMenuItem
.
Creating a Menu
Here we will show how to create a new menu using just some of the available methods. As we have said before, all the options presented for the construction of menus for Equo applications share the same name in their methods, so this example will always be functional.
-
Simple menu
...
withMainMenu("Equo")
.addMenuItem("Dynamic menu")
.onClick(() => { console.log("Your Equo app is awesome!") })
.withShortcut("M1+Q")
.withIcon("/PATH/TO/YOURIMAGE")
.setApplicationMenu()
-
Complex menu
...
withMainMenu("Equo")
.addMenuItem("Dynamic menu")
.onClick(() => { console.log("Your Equo app is awesome!") })
.withShortcut("M1+Q")
.withIcon("/PATH/TO/YOURIMAGE")
.addMenu("Group menu")
.addMenuItem("Other dynamic menu")
.onClick(() => { console.log("Your Equo app is awesome from other menu") })
.withShortcut("M1+T")
.withIcon("/PATH/TO/YOURIMAGE")
.setApplicationMenu()
For more information about how to use shortcuts and icons read Key sequences for shortcuts and Menu icons.
Key Sequences for Menu shortcuts
In an Equo application, shortcuts are defined by key sequences. A key sequence consist of one or more key strokes. Key strokes consist of one or more keys held down at the same time. There should be zero or more modifier keys, and one other key. The keys are separated by the + character.
Equo recognizes the modifiers M1, M2, M3, and M4. The "M" modifier key is a platform-independent way of representing keys. Review the table below to understand what the "M" modifier represents in each platform:
Modifier Key | macOS | Other platforms |
---|---|---|
M1 |
COMMAND |
CTRL |
M2 |
SHIFT |
SHIFT |
M3 |
OPTION |
ALT |
M4 |
CTRL |
Undefined |
The actual key is generally specified simply in uppercase. For example F or J, are examples of such keys.
Using Menu Icons
To use icons in your menus you will need to take these aspects into account:
-
Add your images to resource folder and use the relative path to your image.
-
Use .png, .jpg, .bmp or .gif extensions.
-
Use an image size of 15px*15px.
For example, we will use the redo and undo images to better explain the following code.
. ├── pom.xml └── src ├── main │ ├── resources ... | └── icons ... ├── redo.png └── undo.png
Example code.
...
withMainMenu("Edit")
.addMenuItem("Undo").withIcon("icons/undo.png")
.addMenuItem("Redo").withIcon("icons/redo.png")
...