Application Menu in Electron

in #utopian-io6 years ago (edited)

electronn.png

Github repository

https://github.com/electron/electron

My Github Adress

https://github.com/sanalrakam

Project Github Adress

https://github.com/sanalrakam/Application-Menu-in-Electron

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')

r1.jpg
Define url and path variables

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

r2.jpg
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
} ) )
}

rr3.jpg
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)

rr4.jpg
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',

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

rr6.jpg
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)

rr7.jpg
Continue to create sub menus

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

rr8.jpg
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 

rr9.jpg
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

Sort:  

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]

Coin Marketplace

STEEM 0.36
TRX 0.12
JST 0.040
BTC 70744.80
ETH 3561.94
USDT 1.00
SBD 4.80