Electron অ্যাপ্লিকেশনগুলিতে কাস্টম মেনু তৈরি করতে এবং এতে কাস্টম ইভেন্ট হ্যান্ডলার যুক্ত করতে Menu এবং MenuItem ক্লাস ব্যবহার করা হয়। এই কাস্টম মেনু আইটেমগুলোর মাধ্যমে আপনি ইভেন্টগুলোকে হ্যান্ডল করতে পারেন, যেমন কোনো কাস্টম ফাংশন বা অ্যাকশন সম্পাদন করা।
নিচে কাস্টম মেনু তৈরি করার প্রক্রিয়া এবং কাস্টম ইভেন্ট হ্যান্ডলার যুক্ত করার পদ্ধতি দেখানো হয়েছে।
১. কাস্টম মেনু তৈরি করা
Electron অ্যাপ্লিকেশনে কাস্টম মেনু তৈরি করতে প্রথমে Menu এবং MenuItem ক্লাস ব্যবহার করতে হয়। এগুলো ব্যবহার করে অ্যাপের মেনু বারে নতুন মেনু আইটেম তৈরি করা হয়।
উদাহরণ: মেনুতে কাস্টম ইভেন্ট হ্যান্ডলার যুক্ত করা
main.js (Main Process)
const { app, BrowserWindow, Menu } = require('electron');
let mainWindow;
app.on('ready', () => {
mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
});
mainWindow.loadFile('index.html');
// মেনু তৈরি
const menuTemplate = [
{
label: 'File',
submenu: [
{
label: 'New Window',
accelerator: 'CmdOrCtrl+N', // কিবোর্ড শর্টকাট
click() {
// এখানে নতুন উইন্ডো তৈরি করার কাস্টম ফাংশন
console.log('New Window ক্লিক হয়েছে!');
mainWindow.webContents.send('menu-action', 'New Window Action');
}
},
{
label: 'Open File',
click() {
console.log('Open File ক্লিক হয়েছে!');
mainWindow.webContents.send('menu-action', 'Open File Action');
}
},
{
label: 'Exit',
accelerator: 'CmdOrCtrl+Q', // কিবোর্ড শর্টকাট
click() {
app.quit();
}
}
]
},
{
label: 'Help',
submenu: [
{
label: 'About',
click() {
console.log('About ক্লিক হয়েছে!');
mainWindow.webContents.send('menu-action', 'About Action');
}
}
]
}
];
// মেনু সেট করা
const menu = Menu.buildFromTemplate(menuTemplate);
Menu.setApplicationMenu(menu); // মেনু অ্যাপ্লিকেশন বারে সেট করা
});
মেনু কোডের ব্যাখ্যা:
Menu.buildFromTemplate(): এটি একটি মেনু তৈরি করে যার মধ্যে কাস্টম মেনু আইটেম থাকে।label: মেনু আইটেমের টেক্সট।accelerator: শর্টকাট কীবোর্ডের মাধ্যমে সেই মেনু আইটেম চালানোর জন্য।click(): কাস্টম ইভেন্ট হ্যান্ডলার যেখানে আপনি মেনু আইটেমে ক্লিক করার পর যে কাজ করতে চান তা নির্ধারণ করবেন।
২. Renderer Process-এ কাস্টম ইভেন্ট হ্যান্ডলার গ্রহণ করা
Renderer Process-এ মেনু থেকে আসা কাস্টম ইভেন্ট হ্যান্ডলার গ্রহণ করতে IPC (Inter-Process Communication) ব্যবহার করা হয়।
উদাহরণ: Renderer Process (index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Menu Example</title>
</head>
<body>
<h1>Electron কাস্টম মেনু উদাহরণ</h1>
<p id="menu-action">এখানে মেনু অ্যাকশন দেখানো হবে।</p>
<script>
const { ipcRenderer } = require('electron');
// Main Process থেকে মেনু অ্যাকশন গ্রহণ
ipcRenderer.on('menu-action', (event, action) => {
document.getElementById('menu-action').textContent = 'মেনু অ্যাকশন: ' + action;
});
</script>
</body>
</html>
কোডের ব্যাখ্যা:
ipcRenderer.on('menu-action', callback): এই ইভেন্ট হ্যান্ডলারটি Main Process থেকে আসা কাস্টম মেনু অ্যাকশনের সাথে যুক্ত এবং তা Renderer Process-এ গ্রহণ করে।menu-actionইভেন্টটি Main Process থেকে Renderer Process-এ পাঠানো হয় এবং সেখানে সেটির মান প্রদর্শন করা হয়।
৩. কাস্টম মেনু ফিচারের কিছু অতিরিক্ত উদাহরণ
এখানে কিছু অতিরিক্ত কাস্টম মেনু ফিচারের উদাহরণ দেওয়া হল:
- কাস্টম মেনু আইটেমের জন্য চেকবক্স:
{
label: 'Enable Feature',
type: 'checkbox',
checked: true, // ডিফল্ট চেকড
click(item) {
console.log(item.checked ? 'Feature Enabled' : 'Feature Disabled');
}
}
- কাস্টম সেপারেটর:
{
type: 'separator'
}
- কাস্টম সাবমেনু:
{
label: 'View',
submenu: [
{
label: 'Zoom In',
click() {
console.log('Zoom In action!');
}
},
{
label: 'Zoom Out',
click() {
console.log('Zoom Out action!');
}
}
]
}
সারাংশ
- Electron অ্যাপ্লিকেশনগুলিতে
MenuএবংMenuItemব্যবহার করে কাস্টম মেনু তৈরি করা যায়। ipcMainএবংipcRendererব্যবহারের মাধ্যমে Main Process এবং Renderer Process এর মধ্যে মেনু ইভেন্ট হ্যান্ডলিং করা যায়।- কাস্টম মেনু আইটেম তৈরি করে আপনি অ্যাপ্লিকেশনে বিভিন্ন কার্যক্রম যোগ করতে পারেন যেমন নতুন উইন্ডো তৈরি, ফাইল ওপেন বা অন্যান্য কাস্টম ফাংশন চালানো।
এভাবে, Electron এর মেনু এবং কাস্টম ইভেন্ট হ্যান্ডলার ব্যবহার করে আপনি আপনার অ্যাপ্লিকেশনে ইন্টারঅ্যাকটিভ এবং কার্যকর মেনু ব্যবস্থা তৈরি করতে পারবেন।
