Electron Build Desktop Apps HTML\CSS\JS | Custom App Menu & Context Menu 04

Video Tutorial

Overview

Any Desktop Application need a Menu Bar to enhance the user experience by packing the functionalities, windows management and about your app section all in one interactive bar, electron covers that under a very easy to use API, a couple of methods to setup and your menu ready to go, also you may need to include a context menu (Right Click Menu), we will walk through the process of customizing the Main and the context menus, if you need more detailed instruction, please consider watching the Video Above.

Electron ships with a default menu that include the main functionalities you may need for your development, but not ready yet for deployment so you need to make some changes before saying that your app is ready.

There are two main built-in Modules that we will need for this process the Menu and MenuItem under the main process (main.js) import the modules and create a function for setting up the Menu on Startup

for the structure of the main, we need to define a template which is an array of objects each object represents a MenuItem and each one has it’s own properties

let Menu = electron.Menu;
let MenuItem = electron.MenuItem;

function setupMainMenu() {

   //First it needs a template 
    template = [{
        label: "File",
        submenu: [{ label: "New Project", role: "New" },
            { role: "Save" }
        ]
    }, {
        label: "Edit",
        submenu: [{ role: "undo" }, { role: "redo" }, ///< There is predefined roles
            { type: "separator" }, { role: "cut" }, { role: "copy" }, { role: "past" },
            { role: "reload" }
        ]
    }, { label: "View", submenu: [{ role: "toggledevtools" }] }];
   //This template should give us three menu items (File, Edit and View)

   //Build the Template
   let menu = Menu.buildFromTemplate(template);
   //Set Application's Default Menu
   Menu.setApplicationMenu(menu);
}

We call the function under the createWindow, so whenever the window is being initialized we build and set the custom menu.

The template has role attributes where there are predefined ones built in electron, so just the right role and the functionality is going to be set automatically you can check the DOCS for more info.

for example, we set the submenu of the view to (role:toggledevtools) so when we click on the toggledevtools, electron gonna give us the devtools, without implementing it by our selfs, cool isn’t it.

feel free to add more items to the menu however you like, and for adding a custom function to your MenuItem just define the click function handler

//let's say this is another template 
let template = [
  {label: 'Hello World', click() { console.log('Hello World!') } }
];
//Setting the click function will call a custom function on the click
//Please Make sure to use this on the render process, for allowing console.log to work

Context Menu (Right Click)

We are going to use the same modules, but with different methods this time, also we need to check the right click or the contextmenu built-in event in order to know when to show the menu

//We need to use this under the Render Process renderer.js
//Don't forget about import Menu and MenuItem modules on the rendering process 
//Initialize a new Menu
const menu = new Menu();

//and Add Menu Items to the Main Menu (the same as defining a Template)
menu.append(new MenuItem({ label: "Check Me!", type: "checkbox", checked: true });
menu.append(new MenuItem({ label: 'Item1', click()  { console.log('This is item 1') } }));

//and Check the Right Click Event 
//You can use the window object for adding the event listener instead of document
document.addEventListener(
    "contextmenu",
    e => {
        e.preventDefault(); ///< Prevent any default Behavior (ex: Form Submit)
        menu.popup(remote.getCurrentWindow()); ///< We Show the Menu on the Current Window
    },
    false
);

And that should give us the menu on right click, it is very simple using electron

What’s Next

So there should one more video on the Series, covering how to build, package and make your app ready for the Cross-Platform Deployment.

We will cover that in the Next One.

No Comments Yet