Electron 03. Sådan får du lavet en menu (applikationsmenu)

Ved at gøre brug af Menu.setApplicationMenu(menu) kan vi hurtigt få lavet en applikationsmenu. Altså menuen i toppen hvor du bl.a. finder Filer (Files), Redigér (Edit) og Hjælp (Help). Standard menuen er ganske fin men det er nu lidt sjovere hvis vi tilpasser den lidt.

Husk del 01 kan findes her:

Electron 01. Sådan kommer du i gang med Electron Fiddle

Lad os starte ud med at skrive, at hvordan du bedst skal få begyndt på Electron er svær og dette er bare mit bud på, hvordan du kommer i gang. Evner eller ej... men vi skal starte et sted og Electron Fiddle er et fint start-sted. Bemærk at det er

BrevstgaardRon Brevstgaard

Del 02 er at finde her:

Electron 02. Sådan bruger du Github sammen med Electron Fiddle

Først.. at “linke” Github sammen med Electron Fiddle er IKKE en SKAL-ting men det giver dig adgang til nogle funktioner som er nice-to-have. Bl.a. at skubbe din Fiddle-gist ud på Github (hvilket som standard, sker som “Private”, som du dog let kan ændre til “Public”) med få klik og

BrevstgaardRon Brevstgaard

01. Det første vi skal er, at starte Electron Fiddle:

02. Udskift nu main.js med denne "kodestump":

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

app.on('ready', () => {
  const mainWindow = new BrowserWindow({ height: 800, width: 800 })
  mainWindow.loadURL('https://brevstgaard.blog/')
});

const template = [
   {
      label: 'Funktioner', role: 'functions',
      submenu: [
         { label: 'Kopier', role: 'copy',  },
         { label: 'Indsæt', role: 'paste' },
         { label: 'Luk', accelerator: 'Shift+Esc', role: 'quit' },
      ]
   },
   
   {
      label: 'Vindue', role: 'window',
      submenu: [
         { label: 'Minimer', role: 'minimize',  },
         { label: 'Luk', role: 'close',  },
      ]
   },
   
   {
      label: 'Hjælp', role: 'help',
      submenu: [
         {
                label:'menutest by RON (IT)',
                click() { 
                    shell.openExternal('https://brevstgaard.blog')
                } 
            },
      ]
   }
]

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

app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})

03. Vi har ikke noget at bruge index.html til i det her eksempel, så lad os fjerne den. Det gør vi ved at højreklikke på index.html efterfulgt af klik på Delete.

04. Klik nu på Run og lad os se, om vores fiddle starter korrekt op og menuen er blevet anderledes end standard menuen.

05. Sådan det virker jo faktisk at få en menu vi selv har indsat men det har du jo ikke lært meget af... Så... Lad os få lukket for vores fiddle igen ved at klikke på "X" som med ethvert andet program.

06. Lad os nu kigge lidt nærmere på vores menu og hvad der faktisk er at se/forstå. --Nu bliver det lidt rodet, beklager--. I mit eksempel finder vi menu-elementet Funktioner som er den første ud af tre.

Dette menu-element bliver indsat mellem "{" og "}," som kan ses i første museklik herunder. Dvs hvert menu-element skal startes med et "{" og afsluttes med et "},".

Undermenuen under Funktioner skabes ved at tilføje submenu: [kodestump her til bl.a. 'kopier'].

07. Fjerner vi eksempelvis submenu: [kodestump] (Prøv at gør som i denne GIF herunder):

08. Så har vi fjernet vores undermenu (submenu) fra menu-elementet "Funktioner" hvilket vi kan bekræfte ved at kør´ (Run) vores Fiddle.

09. Lad os nu prøve at gå ind på dette link: https://www.electronjs.org/docs/latest/api/menu og indsætte lidt herfra. F.eks. noget fra deres eksempel som set her: *Bemærk at isMac endnu ikke er noget vi har brug for at tænke på, i dette eksemple. Det kommer vi nemlig ind på senere hen i et andet indlæg, når du har fået mere styr på Electron Fiddle (Electron Framework da du sagtens kan bruge al´denne viden uden for Fiddle også).

10. Det giver os denne menu:

11. Nu kan vi f.eks. prøve at klikke på About vora..  (dit tilfældige Fiddle-app-navn.) - Her får vi at vide, at vi benytter Electron.exe version 17.0.0 hvilket sker i et popup-vindue.

12. Det er alt sammen fint-fint, så kan menuen da lidt. Lad os nu holde fast i vores "leg" med about. Lad os prøve at tilføje:

, accelerator: 'Shift+A',

Efter { role: 'about' ... Altså således:

13. Lad os så kør´ (Run) vores fiddle prøv nu at trykke på Shift + A -tasten, på samme tid... Smart ikke. Nu har du lavet en genvejstast til about...

Så er vi klar til at gå videre med næste skridt... Nu har du nemlig nok viden til at kunne lege rundt med menuen en smule. Er du ekstra flittig kan du med fordel allerede nu begynde at lege lidt med "isMac" og se hvordan du kan tilpasse menuen ud fra styresystemet.