منو ها (Menus) در الکترون

برنامه های دسکتاپ دارای دو نوع منو هستند، منوی برنامه (نوار بالای برنامه) و منوی کلیک راست. در این بخش به بررسی منو ها (Menus) در الکترون می پردازیم. ما از دو ماژول Menu و MenuItem برای ایجاد منو ها استفاده خواهیم کرد. توجه داشته باشید که این دو ماژول فقط در فرآیند اصلی (Main Process) در دسترس هستند. به منظور استفاده از این ماژول ها در فرآیند های رندر کننده باید از ماژول remote استفاده کنیم که در این بخش از آموزش الکترون آن را نیز بررسی می کنیم.

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

const {app, BrowserWindow, Menu, MenuItem} = 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
   }))
}
const template = [
   {
      label: 'Edit',
      submenu: [
         {
            role: 'undo'
         },
         {
            role: 'redo'
         },
         {
            type: 'separator'
         },
         {
            role: 'cut'
         },
         {
            role: 'copy'
         },
         {
            role: 'paste'
         }
      ]
   },
   {
      label: 'View',
      submenu: [
         {
            role: 'reload'
         },
         {
            role: 'toggledevtools'
         },
         {
            type: 'separator'
         },
         {
            role: 'resetzoom'
         },
         {
            role: 'zoomin'
         },
         {
            role: 'zoomout'
         },
         {
            type: 'separator'
         },
         {
            role: 'togglefullscreen'
         }
      ]
   },
   {
      role: 'window',
      submenu: [
         {
            role: 'minimize'
         },
         {
            role: 'close'
         }
      ]
   },
   {
      role: 'help',
      submenu: [
         {
            label: 'Learn More'
         }
      ]
   }
]
const menu = Menu.buildFromTemplate(template)
Menu.setApplicationMenu(menu)
app.on('ready', createWindow)

در کد فوق ما با استفاده از JSON یک قالب برای منو ایجاد کرده و سپس آن را به عنوان منوی برنامه تنظیم کرده ایم.

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

$ electron ./main.js

خروجی برنامه را در تصویر زیر مشاهده می کنید:

منوی فوق در فرآیند اصلی ایجاد شد. در ادامه یک منو برای راست کلیک را در فایل HTML ایجاد خواهیم کرد.

محتوای فایل HTML:

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "UTF-8">
      <title>Menus</title>
   </head>
   <body>
      <script type = "text/javascript">
         const {remote} = require('electron')
         const {Menu, MenuItem} = remote
         const menu = new Menu()
         // Build menu one item at a time, unlike
         menu.append(new MenuItem ({
            label: 'MenuItem1',
            click() {
               console.log('item 1 clicked')
            }
         }))
         menu.append(new MenuItem({type: 'separator'}))
         menu.append(new MenuItem({label: 'MenuItem2', type: 'checkbox', checked: true}))
         menu.append(new MenuItem ({
            label: 'MenuItem3',
            click() {
               console.log('item 3 clicked')
            }
         }))
         // Prevent default action of right click in chromium. Replace with our menu.
         window.addEventListener('contextmenu', (e) => {
            e.preventDefault()
            menu.popup(remote.getCurrentWindow())
         }, false)
      </script>
   </body>
</html>

اگر به کد فوق توجه کنید، ما دو ماژول Menu و MenuItem را از ماژول remote وارد کرده ایم. سپس یک منو ایجاد کرده و آیتم ها مورد نظر را به آن اضافه کرده ایم. علاوه بر این، از عملکر پیشفرض برای رویداد کلیک راست نیز جلوگیری شده است. خروجی برنامه را در تصویر زیر مشاهده می کنید: