منو ها (Menus) در الکترون – آموزش Electron

پنجشنبه ۱۸ بهمن ۱۳۹۷
بازدید ۱,۶۷۳ نفر
AmRo
(20 امتیاز از 4 رای)
Loading...

تصویر electron-menus_5817 منو ها (Menus) در الکترون - آموزش Electron

منو ها (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)

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

1	$ electron ./main.js

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

تصویر electron-menus_5817_1 منو ها (Menus) در الکترون - آموزش Electron

منوی فوق در فرآیند اصلی ایجاد شد. در ادامه یک منو برای راست کلیک را در فایل 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>

<!DOCTYPE html>

<html>

<head>

<title>Menus</title>

</head>

<body>

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 وارد کرده ایم. سپس یک منو ایجاد کرده و آیتم ها مورد نظر را به آن اضافه کرده ایم. علاوه بر این، از عملکر پیشفرض برای رویداد کلیک راست نیز جلوگیری شده است. خروجی برنامه را در تصویر زیر مشاهده می کنید:

تصویر electron-menus_5817_2 منو ها (Menus) در الکترون - آموزش Electron