อิเล็กตรอน - เมนู
แอพเดสก์ท็อปมาพร้อมกับเมนูสองประเภท - ไฟล์ application menu(ที่แถบด้านบน) และก context menu(คลิกขวาที่เมนู) เราจะเรียนรู้วิธีสร้างทั้งสองอย่างนี้ในบทนี้
เราจะใช้สองโมดูล - เมนูและโมดูลMenuItem โปรดทราบว่าเมนูและโมดูลMenuItemจะพร้อมใช้งานในกระบวนการหลักเท่านั้น สำหรับการใช้โมดูลเหล่านี้ในกระบวนการแสดงผลคุณต้องใช้โมดูลระยะไกล เราจะเจอสิ่งนี้เมื่อเราสร้างเมนูบริบท
ตอนนี้ให้เราสร้างไฟล์ 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 ให้กับฟังก์ชันและจะดูแลส่วนที่เหลือ ตอนนี้เราต้องตั้งค่าเมนูนี้เป็นเมนูแอปพลิเคชัน
ตอนนี้สร้างไฟล์ HTML ว่างชื่อ index.html และเรียกใช้แอปพลิเคชันนี้โดยใช้ -
$ electron ./main.js
ในตำแหน่งปกติของเมนูแอปพลิเคชันคุณจะเห็นเมนูตามเทมเพลตด้านบน
เราสร้างเมนูนี้ขึ้นจากกระบวนการหลัก ตอนนี้ให้เราสร้างเมนูบริบทสำหรับแอปของเรา เราจะทำสิ่งนี้ในไฟล์ 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 โดยใช้โมดูลระยะไกล จากนั้นเราสร้างเมนูและต่อท้ายเมนูของเราทีละรายการ นอกจากนี้เรายังป้องกันการทำงานเริ่มต้นของการคลิกขวาในโครเมียมและแทนที่ด้วยเมนูของเรา
การสร้างเมนูใน Electron เป็นงานที่ง่ายมาก ตอนนี้คุณสามารถแนบตัวจัดการเหตุการณ์ของคุณกับรายการเหล่านี้และจัดการเหตุการณ์ตามความต้องการของคุณ