Electron - System Tray
La barra delle applicazioni è un menu al di fuori della finestra dell'applicazione. Su MacOS e Ubuntu, si trova nell'angolo in alto a destra dello schermo. Su Windows è nell'angolo in basso a destra. Possiamo creare menu per la nostra applicazione nei vassoi di sistema utilizzando Electron.
Creane uno nuovo main.jsfile e aggiungi il codice seguente. Avere un file png pronto per l'uso per l'icona sulla barra delle applicazioni.
const {app, BrowserWindow} = require('electron')
const url = require('url')
const path = require('path')
let win
function createWindow() {
win = new BrowserWindow({width: 800, height: 600})
win.loadURL(url.format ({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true
}))
}
app.on('ready', createWindow)Dopo aver impostato una finestra del browser di base, creeremo un nuovo file index.html file con il seguente contenuto -
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>Menus</title>
</head>
<body>
<script type = "text/javascript">
const {remote} = require('electron')
const {Tray, Menu} = remote
const path = require('path')
let trayIcon = new Tray(path.join('','/home/ayushgp/Desktop/images.png'))
const trayMenuTemplate = [
{
label: 'Empty Application',
enabled: false
},
{
label: 'Settings',
click: function () {
console.log("Clicked on settings")
}
},
{
label: 'Help',
click: function () {
console.log("Clicked on Help")
}
}
]
let trayMenu = Menu.buildFromTemplate(trayMenuTemplate)
trayIcon.setContextMenu(trayMenu)
</script>
</body>
</html>Abbiamo creato il vassoio utilizzando il sottomodulo Tray. Abbiamo quindi creato un menu utilizzando un modello e successivamente collegato il menu al nostro oggetto vassoio.
Eseguire l'applicazione utilizzando il seguente comando:
$ electron ./main.jsQuando esegui il comando precedente, controlla la barra delle applicazioni per l'icona che hai utilizzato. Ho usato una faccina sorridente per la mia domanda. Il comando precedente genererà il seguente output:
