Application Menu in Electron

sanalrakam (50)in #utopian-io • 7 years ago (edited)

What I will learn?

You will learn what is the menu module in electron
You will learn differences between application menu and context menu
You will learn how to create template for menu
You will learn how to create sub menu
You will learn what kind of menu role in electron

Requirements

Atom Editor:https://atom.io/
Electron: https://electronjs.org/
Npm: https://www.npmjs.com/

Difficulty

Intermediate

Description

There are two kinds of menus in electron
First menu is the application menu and is located on the bar above the application
The second menu is the context menu right click on Mouse to open this menu
In this tutorial will tell the application menu. How to create and use an application menu
To create an application menu, you first need a menu module we define this module from electron
Secondly we need a template to define menus and submenus. Template structure must be in json structure
Finally we need to make this template menu and define it in he menu
Let me demonstrate what I’m saying with an example
Wwe define the app and browser window modules to create an electron application and let define the menu module side them

const {app,BrowserWindow,Menu}=require('electron')

Define url and path variables

const url=require('url')
 const path=require('path')

Create a function to create window

let win;
function crtWindow(){
win=new BrowserWindow({
width:800,
height:600
1)
win.loadURL(url.format({
pathname:path.join( dirname,'index.htm11),
protocol:'file:',
slashes:true
} ) )
}

We can adjust window sizes with BrowserWindow
We define the window page to be displayed with the loadURL method
Finally we define this function in the on methods of the app module

app.on('ready',crtWindow)

Our electron application is ready
Opens by default with electron appliation menus
When we create a custom menu we overwrite these created menus
Let’s create a template for menu

const template=[
{
label:'sanalrakam',

I have identified the top menu here label property string gets a value
Sub menu property used to create sub menu

Allows the execution of the value that comes againist the role property
Role property can only take roles from the electron
The window will be minimized if you click the minimize menu
Set role property minimize and let’s see how
Template is ready. Let’s do this template menu and set menus fort he application

const menu=Menu.buildFromTemplate(template)
 Menu. setApplicationMenu(menu)

Continue to create sub menus

role: 'redo'
type: ' separator '
role: ' cut '
role: 'copy'
role: ' paste

I wrote a new menu type is type and set it as a separator so that I can separate the upper and lower menus
Ihave set the submenus of an upper menu in order to set a new upper menu

role:'help',
submenu:[
{
label:'for

You can create your own application menus using these examples

index.html

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "UTF-8">
      <title>Menus</title>
   </head>

   <body>

   </body>
</html>

main.js

const {app,BrowserWindow,Menu}=require('electron')
const url=require('url')
const path=require('path')

let win;

function crtWindow(){

  win=new BrowserWindow({
    width:800,
    height:600
  })

  win.loadURL(url.format({
    pathname:path.join(__dirname,'index.html'),
    protocol:'file:',
    slashes:true
  }))
}

const template=[
  {
    label:'sanalrakam',
    submenu:[
      {
        role:'minimize'
      },
      {
        role:'redo'
      },
      {
        type:'separator'
      },
      {
        role:'cut'
      },
      {
        role:'copy'
      },
      {
        role:'paste'
      }
    ]
  },
  {
    role:'help',
    submenu:[
      {
        label:'for help'
      }
    ]
  }
]

const menu=Menu.buildFromTemplate(template)
Menu.setApplicationMenu(menu)



app.on('ready',crtWindow)

package.json

{
  "name": "Menus",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

Video Tutorial

Curriculum

Show Open Dialog in Electron
IPC in Electron Tutorial
The Remaining Character Calculation Application in the electron

electron logo link

#videotutorial #technology #coding #electron

7 years ago in #utopian-io by sanalrakam (50)

Sort:

mcfarhat (70) 7 years ago

Thank you for your contribution.
Below are few suggestions for you to improve your future contributions:

Work on improving your English language and text. You have a lot of typos, incomprehensible sentences. This reflects badly on your reader.
Explain in greater details the content of your work, as well as the code. Use comments wherever applies to make the user's experience easier.
Create something more unique and useful for your user. A simple menu might be too simplistic, whereas a more thorough and useful outcome would be much more helpful.
You do not need to include both the code and the exact screenshot of the code, this doesn't have any useful outcome.
Include screenshots on the other hand of your output, how the tutorial's results are.
Finally, use the proper tags for the next time, if you want this as a tutorial, use the "tutorials" tag, if a video tutorial, use the "video-tutorials" tag.

Need help? Write a ticket on https://support.utopian.io/.
Chat with us on Discord.
[utopian-moderator]

$0.00

STEEM 0.24

TRX 0.25

JST 0.040

BTC 94242.56

ETH 3408.52

USDT 1.00

SBD 3.35