Por defecto, nuestro Proceso Principal crea un menú básico como el que se recoge en la siguiente imagen:

En este apartado veremos cómo crear un Menú personalizado. En el apartado de Comunicación entre procesos veremos cómo crear Menús de Contexto para cada uno de nuestros procesos de Randerizado

Para la creación de Menús personalizados ElectronJs provee una funcionalidad definida en la clase Menu Módulo Menu

Con el método Menu.buildFromTemplate(template) podremos crear nuestro menú personalizado.

Para poder usarlo hay que integrarlo en aquel proceso en el que lo estemos usando

        const {remote} = require('electron')

        const {Menu, MenuItem} = remote

        /* otra alternativa para invocarlo desde un Proceso de Renderizado
        const { Menu, MenuItem } = require('electron').remote
        */
                

Para usarlo en el proceso principal

        const electron=require ('electron')

        //Cargamos los módulos necesarios de la Api de electron, app, BrowserWindow y Menu
        /*
        const app=electron.app
        const BrowserWindow=electron.BrowserWindow
        const Menu=electron.Menu
        const shell =require('electron').shell

        */

        const { app, BrowserWindow, Menu ,menuItem, shell, dialog, ipcMain} = electron
                  

En primer lugar tenemos que crear nuestra plantilla que incluirá los distintos elementos del menú:

        const template=[
          {
            label:'Menu',
            submenu:[
              {label:'Usuarios',
                click(){
                  openWindowUsers()
                },
                accelerator: 'CmdOrCtrl+Shift+U'

              },

              {type:'separator'},
              {label:'Exit',
                click(){
                  app.quit();
                },
                accelerator: 'CmdOrCtrl+Shift+C'
              }
            ]
          },
          {
            label:'info',
            submenu:[
              {label:'Autores'}
            ]
          }
        ]


              

En la plantilla definimos los siguientes elementos:

label: nombre del elemento del menú. Observamos que a cada elemento del menú podemos asignarle una funcionalidad. En nuestro caso a Exit, le hemos añadido la función de salir:

        {label:'Exit',
          click(){
            app.quit();
          },
          accelerator: 'CmdOrCtrl+Shift+C'

                

submenu: Para cada elemento del menú podemos indexar otro menú.
accelerator: Para añadir teclas de acceso rápido.
type: Para añadir elementos especiales, como separadores de elementos.

Seguidamente, instanciamos nuestro objeto Menu

y concluimos, indicándole a nuestra Proceso Principal que cargue nuestro menú con el método setApplicationMenu

En nuestro main.js hemos incluido este código en cuando cargamos la ventana una vez se ha iniciado la Aplicación. El código quedaría de la siguiente manera:

          app.on('ready', function(){
            createWindow()

              const template=[
                {
                  label:'Menu',
                  submenu:[
                    {label:'Usuarios',
                      click(){
                        openWindowUsers()
                      },
                      accelerator: 'CmdOrCtrl+Shift+U'
                    },
                    {type:'separator'},
                    {label:'Exit',
                      click(){
                        app.quit();
                      },
                      accelerator: 'CmdOrCtrl+Shift+C'
                    }
                  ]
                },
                //Añadimos un nuevo item con un submenú
                {
                  label:'info',
                  submenu:[
                    {label:'Autores'}
                  ]
                }

              ]

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

          })


                

Con todo ello, hemos sido capaces de crear un Menú personalizado para nuestra la Aplicición de escritorio ElectronJs.

Ejercicio

En el siguiente ejercicio te proponemos crear tu propio menú personalizado con al menos 3 elementos principales y que alguno de ellos tenga un submenú. También queremos que en uno de los elementos llame a una paǵina web externa.

Nota: investiga acerca del módulo shell

La solución en nuestro en Github Tutorial Electron