منوی System Tray در الکترون

منوی System Tray یک منو خارج پنجره برنامه است و در سیستم عامل ویندوز در پایین و سمت راست Task Bar قرار دارد. در سیستم عامل های مک و لینوکس در بالا صفحه و گوشه سمت راست قرار دارد. ما استفاده از الکترون می توانیم برای برنامه های خود یک منوی System Tray ایجاد کنیم.

یک فایل جدید با نام main.js ایجاد کرده و محتوای زیر را در آن بنویسید:

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)

حال یک فایل دیگر با نام index.html ایجاد کرده و محتوای زیر را در آن بنویسید:

<!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>

توجه! شما باید یک آیکون برای System Tray مشخص کنید. در مثال فوق ما یک فایل png را به عنوان آیکون مشخص کرده ایم.

در کد فوق ما با استفاده از ماژول Tray یک System Tray ایجاد کرده ایم. سپس یک منو ایجاد کرده و به System Tray متصل کرده ایم.

با استفاده از کد زیر برنامه را اجرا کنید: