Menu এবং Context Menu তৈরি

Electron এ Menu এবং Context Menu তৈরি করা খুবই সহজ। আপনি Main Process-এ Menu এবং MenuItem মডিউল ব্যবহার করে অ্যাপ্লিকেশনে কাস্টম মেনু তৈরি করতে পারবেন। এখানে, আমরা দুটি ধরনের মেনু তৈরি করার উদাহরণ দেখব:

1. Menu (অ্যাপ্লিকেশনের প্রধান মেনু)
2. Context Menu (রাইট-ক্লিক মেনু)

১. Menu তৈরি (Main Menu)

Menu হল অ্যাপ্লিকেশনের প্রধান মেনু, যা উইন্ডোর শীর্ষে সাধারণত থাকে। এটি অ্যাপ্লিকেশনের বিভিন্ন অপশনের জন্য ব্যবহারকারীর কাছে অ্যাক্সেস প্রদান করে।

উদাহরণ: Main Menu তৈরি

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 menu = Menu.buildFromTemplate([
    {
      label: 'File',
      submenu: [
        {
          label: 'New File',
          accelerator: 'CmdOrCtrl+N', // কী শটকাট নির্ধারণ
          click: () => {
            console.log('New File clicked');
          },
        },
        {
          label: 'Open File',
          accelerator: 'CmdOrCtrl+O',
          click: () => {
            console.log('Open File clicked');
          },
        },
        {
          label: 'Quit',
          accelerator: 'CmdOrCtrl+Q',
          click: () => {
            app.quit();
          },
        },
      ],
    },
    {
      label: 'Edit',
      submenu: [
        {
          label: 'Undo',
          accelerator: 'CmdOrCtrl+Z',
          click: () => {
            console.log('Undo clicked');
          },
        },
        {
          label: 'Redo',
          accelerator: 'CmdOrCtrl+Y',
          click: () => {
            console.log('Redo clicked');
          },
        },
      ],
    },
  ]);

  // মেনু সেট করা
  Menu.setApplicationMenu(menu);
});

মেনুর বর্ণনা:

• Menu.buildFromTemplate(): মেনু তৈরির জন্য এটি ব্যবহৃত হয়। এখানে একটি অ্যারে প্রদান করা হয়, যার মধ্যে প্রতিটি মেনু আইটেমের জন্য label, accelerator (শটকাট) এবং click ইভেন্টের জন্য ফাংশন প্রদান করা হয়।
• Menu.setApplicationMenu(menu): এটি অ্যাপ্লিকেশনের জন্য তৈরি করা মেনু সেট করে।

২. Context Menu তৈরি

Context Menu হলো রাইট-ক্লিক মেনু, যা সাধারণত ব্যবহারকারীর পছন্দ অনুযায়ী কাস্টম মেনু হিসেবে প্রদর্শিত হয়। এটি Menu মডিউল ব্যবহার করে তৈরি করা যায় এবং BrowserWindow বা HTML এলিমেন্টে রাইট-ক্লিক করার সময় দেখানো হয়।

উদাহরণ: Context Menu তৈরি

const { app, BrowserWindow, Menu, ipcMain } = require('electron');

let mainWindow;

app.on('ready', () => {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
    },
  });

  mainWindow.loadFile('index.html');

  // কাস্টম Context Menu তৈরি করা
  const contextMenu = Menu.buildFromTemplate([
    {
      label: 'Cut',
      accelerator: 'CmdOrCtrl+X',
      click: () => {
        console.log('Cut clicked');
      },
    },
    {
      label: 'Copy',
      accelerator: 'CmdOrCtrl+C',
      click: () => {
        console.log('Copy clicked');
      },
    },
    {
      label: 'Paste',
      accelerator: 'CmdOrCtrl+V',
      click: () => {
        console.log('Paste clicked');
      },
    },
  ]);

  // Right-click এ Context Menu দেখানো
  mainWindow.webContents.on('context-menu', (event, params) => {
    contextMenu.popup(mainWindow, params.x, params.y);
  });
});

Context Menu বর্ণনা:

• Menu.buildFromTemplate(): এটি Context Menu তৈরি করতে ব্যবহৃত হয়, যেখানে প্রতিটি মেনু আইটেমের জন্য label, accelerator, এবং click ইভেন্টের জন্য ফাংশন প্রদান করা হয়।
• webContents.on('context-menu'): যখন ব্যবহারকারী রাইট-ক্লিক করে, তখন এটি একটি কাস্টম কনটেক্সট মেনু দেখায়। এখানে, popup() ফাংশনটি মেনু প্রদর্শন করতে ব্যবহৃত হয়।

৩. Menu এবং Context Menu এর মধ্যে পার্থক্য

৪. কাস্টম মেনুর জন্য স্টাইলিং

কাস্টম মেনু এবং কনটেক্সট মেনুতে CSS স্টাইল প্রয়োগ করা যায় যদি আপনি HTML এবং CSS দিয়ে কাস্টম UI তৈরি করেন। তবে Electron এর native menu-এ CSS প্রয়োগ করা যায় না। আপনাকে যদি CSS দিয়ে কাস্টম মেনু তৈরি করতে চান, তবে আপনাকে HTML মেনু তৈরি করতে হবে এবং সেই মেনুতে কাস্টম স্টাইল ব্যবহার করতে হবে।

সারাংশ

• Menu: অ্যাপ্লিকেশনের প্রধান মেনু তৈরি করতে Menu মডিউল ব্যবহার করা হয়। এটি সাধারণত উইন্ডোর শীর্ষে প্রদর্শিত হয় এবং অ্যাপ্লিকেশন ফিচারগুলোতে অ্যাক্সেস দেয়।
• Context Menu: রাইট-ক্লিক মেনু তৈরি করতে Menu মডিউল ব্যবহার করা হয়। এটি নির্দিষ্ট এলিমেন্টে রাইট-ক্লিক করার সময় দেখানো হয়।
• IPC (Inter-Process Communication) ব্যবহার করে আপনি মেনু আইটেমগুলির কার্যক্রম পরিচালনা করতে পারেন।

Electron এ আপনি কাস্টম মেনু তৈরি করতে পারেন যা ব্যবহারকারীর ইন্টারফেসের অংশ হিসেবে কাজ করবে। কাস্টম মেনু তৈরি করতে Menu এবং MenuItem ক্লাস ব্যবহার করা হয়। এগুলি Electron এর Main Process-এ ব্যবহার করা হয় এবং এটি ডেস্কটপ অ্যাপ্লিকেশনগুলোর জন্য কাস্টম মেনু বার তৈরি করতে সাহায্য করে।

নিচে একটি কাস্টম মেনু তৈরি করার উদাহরণ দেওয়া হয়েছে।

১. কাস্টম মেনু তৈরি করা

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 File',
          accelerator: 'CmdOrCtrl+N', // শর্টকাট
          click() {
            console.log('New File clicked');
          },
        },
        {
          label: 'Open File',
          accelerator: 'CmdOrCtrl+O',
          click() {
            console.log('Open File clicked');
          },
        },
        {
          type: 'separator', // আলাদা লাইন
        },
        {
          label: 'Quit',
          accelerator: 'CmdOrCtrl+Q',
          click() {
            app.quit();
          },
        },
      ],
    },
    {
      label: 'Edit',
      submenu: [
        {
          label: 'Cut',
          accelerator: 'CmdOrCtrl+X',
          role: 'cut',
        },
        {
          label: 'Copy',
          accelerator: 'CmdOrCtrl+C',
          role: 'copy',
        },
        {
          label: 'Paste',
          accelerator: 'CmdOrCtrl+V',
          role: 'paste',
        },
      ],
    },
    {
      label: 'Help',
      submenu: [
        {
          label: 'About',
          click() {
            console.log('About clicked');
          },
        },
      ],
    },
  ];

  // মেনু তৈরি করা
  const appMenu = Menu.buildFromTemplate(menuTemplate);
  Menu.setApplicationMenu(appMenu); // মেনুটি অ্যাপ্লিকেশনে সেট করা
});

এখানে, menuTemplate একটি অ্যারে যার মধ্যে বিভিন্ন মেনু আইটেম রয়েছে। প্রতিটি মেনু আইটেমের মধ্যে label, accelerator, এবং click ইভেন্ট থাকে। accelerator হল শর্টকাট কীবোর্ড কমান্ড এবং click হল মেনু আইটেমের উপর ক্লিক করার পর কী করতে হবে তার ফাংশন।

২. MenuItem ব্যবহার করে কাস্টম মেনু তৈরি

MenuItem ব্যবহার করে আপনি কাস্টম মেনু আইটেম তৈরি করতে পারেন। এটি মেনু আইটেমের কাস্টম বৈশিষ্ট্য যোগ করার জন্য উপকারী।

উদাহরণ: MenuItem দিয়ে কাস্টম মেনু আইটেম তৈরি

const { Menu, MenuItem } = require('electron');

const menu = new Menu();
menu.append(new MenuItem({
  label: 'Custom Item',
  click: () => {
    console.log('Custom Item clicked');
  },
}));

Menu.setApplicationMenu(menu);

এখানে, MenuItem ব্যবহার করে একটি কাস্টম মেনু আইটেম তৈরি করা হয়েছে। আপনি এভাবে নিজের মেনু আইটেম যোগ করতে পারেন এবং তার সাথে কাস্টম ফাংশনালিটি সংযুক্ত করতে পারেন।

৩. ডাইনামিক মেনু তৈরি

মেনু আইটেমগুলি ডাইনামিকভাবে তৈরি করাও সম্ভব। আপনি যেমন চান তেমন কাস্টম মেনু আইটেম তৈরি করতে পারেন যা চলমান অ্যাপ্লিকেশনের অবস্থার উপর নির্ভর করবে।

উদাহরণ: ডাইনামিক মেনু

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 dynamicMenu = new Menu();
  dynamicMenu.append(new MenuItem({
    label: 'Open Dynamic File',
    click() {
      console.log('Dynamic File clicked');
    },
  }));

  // মেনু সেট করা
  mainWindow.webContents.on('context-menu', (event, params) => {
    dynamicMenu.popup({ window: mainWindow });
  });
});

এখানে context-menu ইভেন্ট ব্যবহার করা হয়েছে যা ডান-ক্লিক মেনু হিসাবে কাজ করে। আপনি মেনু আইটেমটি ডাইনামিকভাবে তৈরি করছেন এবং সেটি ব্যবহারকারীর ডান-ক্লিকের সময় প্রদর্শিত হয়।

৪. শর্টকাট কীগুলোর ব্যবহার

Electron এর MenuItem এ শর্টকাট কীগুলো ব্যবহার করা যায় যা ব্যবহারকারীদের জন্য আরও সুবিধাজনক।

উদাহরণ: শর্টকাট কীগুলি

const { app, BrowserWindow, Menu, MenuItem } = require('electron');

let mainWindow;

app.on('ready', () => {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
    },
  });

  mainWindow.loadFile('index.html');

  // কাস্টম মেনু তৈরি
  const customMenu = new Menu();
  customMenu.append(new MenuItem({
    label: 'Save',
    accelerator: 'CmdOrCtrl+S',
    click() {
      console.log('Save clicked');
    },
  }));

  // মেনু সেট করা
  Menu.setApplicationMenu(customMenu);
});

এখানে accelerator ব্যবহার করা হয়েছে যা একটি শর্টকাট কীবোর্ড কমান্ড তৈরি করবে। CmdOrCtrl+S শর্টকাট ব্যবহারকারীকে "Save" অপশনটি দ্রুত ব্যবহারের সুযোগ দেবে।

সারাংশ

• Electron অ্যাপ্লিকেশনগুলোতে Menu এবং MenuItem ব্যবহার করে কাস্টম মেনু তৈরি করা যায়।
• মেনু আইটেমের জন্য label, accelerator, click ফাংশনালিটি ব্যবহার করা হয়।
• MenuItem এর মাধ্যমে কাস্টম মেনু আইটেম তৈরি করা যায়, যেখানে আপনি মেনু আইটেমের ফাংশনালিটি সহজে কাস্টমাইজ করতে পারেন।
• শর্টকাট কীগুলি accelerator ব্যবহার করে তৈরি করা যায় যা ব্যবহারকারীর অভিজ্ঞতাকে আরও উন্নত করে।

এই কাস্টম মেনু ব্যবহার করে আপনার Electron অ্যাপ্লিকেশন আরও ইন্টারঅ্যাকটিভ এবং ব্যবহারকারী-বান্ধব হতে পারে।

Context Menu হলো একটি ইন্টারঅ্যাকটিভ মেনু যা সাধারণত একটি রাইট-ক্লিক (right-click) ইভেন্টে প্রদর্শিত হয় এবং এটি ব্যবহারকারীদের বিভিন্ন বিকল্প সরবরাহ করে। Electron-এ Context Menu তৈরি এবং কনফিগার করা অত্যন্ত সহজ, যেহেতু Electron এর মধ্যে Menu এবং MenuItem ক্লাস সরাসরি ব্যবহার করা যায়।

এই গাইডে, আমরা দেখব কিভাবে Electron অ্যাপ্লিকেশনে Context Menu তৈরি এবং কনফিগার করা যায়।

১. Context Menu তৈরি করা

Electron এ Menu এবং MenuItem ব্যবহার করে Context Menu তৈরি করা হয়। আপনি রাইট-ক্লিকের মাধ্যমে Context Menu শো করতে পারেন এবং কাস্টম অপশনগুলো অন্তর্ভুক্ত করতে পারেন।

উদাহরণ: Context Menu তৈরি এবং কনফিগার করা

Main Process (main.js):

const { app, BrowserWindow, Menu, ipcMain } = require('electron');

let mainWindow;

app.on('ready', () => {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
    },
  });

  mainWindow.loadFile('index.html');

  // Context Menu তৈরি করা
  const contextMenu = Menu.buildFromTemplate([
    {
      label: 'কপি',
      click: () => {
        console.log('কপি ক্লিক করা হয়েছে');
      },
    },
    {
      label: 'কাট',
      click: () => {
        console.log('কাট ক্লিক করা হয়েছে');
      },
    },
    {
      label: 'পেস্ট',
      click: () => {
        console.log('পেস্ট ক্লিক করা হয়েছে');
      },
    },
    {
      type: 'separator',  // সেপারেটর যুক্ত করা
    },
    {
      label: 'নতুন উইন্ডো',
      click: () => {
        createNewWindow();
      },
    },
  ]);

  // রাইট-ক্লিক করলে Context Menu প্রদর্শন
  mainWindow.webContents.on('context-menu', (event, params) => {
    contextMenu.popup({ window: mainWindow });
  });
});

// নতুন উইন্ডো তৈরি করার ফাংশন
function createNewWindow() {
  let newWindow = new BrowserWindow({
    width: 400,
    height: 300,
  });

  newWindow.loadURL('https://www.electronjs.org');
}

এখানে, আমরা একটি কাস্টম Context Menu তৈরি করেছি, যার মধ্যে কয়েকটি অপশন যেমন কপি, কাট, পেস্ট, এবং একটি separator (ভাগ করার জন্য) রাখা হয়েছে। এছাড়া, "নতুন উইন্ডো" অপশনটি নতুন একটি উইন্ডো খুলবে, যখন ব্যবহারকারী ক্লিক করবেন।

২. Context Menu কাস্টমাইজ করা

Electron-এ Context Menu আরও কাস্টমাইজ করা যেতে পারে যেমন:

• প্রতিটি MenuItem এর জন্য শর্টকাট (Keyboard shortcut) যোগ করা।
• উইন্ডোর মধ্যে বিশেষ রাইট-ক্লিকের জন্য Context Menu তৈরি করা।
• ব্যবহারকারীর রাইট-ক্লিকের উপর নির্ভরশীল কনটেক্সট মেনু পরিবর্তন করা।

উদাহরণ: Context Menu তে শর্টকাট যোগ করা

const contextMenu = Menu.buildFromTemplate([
  {
    label: 'কপি',
    accelerator: 'CmdOrCtrl+C',  // শর্টকাট কিপ্যাড
    click: () => {
      console.log('কপি ক্লিক করা হয়েছে');
    },
  },
  {
    label: 'কাট',
    accelerator: 'CmdOrCtrl+X',
    click: () => {
      console.log('কাট ক্লিক করা হয়েছে');
    },
  },
  {
    label: 'পেস্ট',
    accelerator: 'CmdOrCtrl+V',
    click: () => {
      console.log('পেস্ট ক্লিক করা হয়েছে');
    },
  },
]);

এখানে, accelerator প্রোপার্টি ব্যবহার করে কপি, কাট এবং পেস্ট অপশনের জন্য শর্টকাট যোগ করা হয়েছে।

৩. Context Menu ব্যবহারকারীর রাইট-ক্লিকের উপর ভিত্তি করে পরিবর্তন

কখনও কখনও, আপনি চাইবেন যে কনটেক্সট মেনু ব্যবহারকারীর রাইট-ক্লিকের উপর ভিত্তি করে পরিবর্তিত হোক। উদাহরণস্বরূপ, আপনি যদি কোনও নির্দিষ্ট উপাদান বা টেক্সট বাছাই করতে চান, তবে কনটেক্সট মেনুতে সেগুলি পরিবর্তিত করতে পারেন।

উদাহরণ: Context Menu ডাইনামিক পরিবর্তন

mainWindow.webContents.on('context-menu', (event, params) => {
  const contextMenu = Menu.buildFromTemplate([
    {
      label: 'কপি',
      enabled: params.selectionText.length > 0, // যদি কিছু নির্বাচিত থাকে তবে কপি অপশন সক্রিয় হবে
      click: () => {
        console.log('কপি ক্লিক করা হয়েছে');
      },
    },
    {
      label: 'কাট',
      enabled: params.selectionText.length > 0, // যদি কিছু নির্বাচিত থাকে তবে কাট অপশন সক্রিয় হবে
      click: () => {
        console.log('কাট ক্লিক করা হয়েছে');
      },
    },
    {
      label: 'পেস্ট',
      click: () => {
        console.log('পেস্ট ক্লিক করা হয়েছে');
      },
    },
  ]);
  
  contextMenu.popup({ window: mainWindow });
});

এখানে, আমরা params.selectionText.length > 0 চেক করে নিশ্চিত করেছি যে, কেবলমাত্র যখন কিছু টেক্সট নির্বাচন করা হবে, তখন কপি এবং কাট অপশন সক্রিয় হবে।

৪. ডিফল্ট Context Menu বন্ধ করা

যদি আপনি ডিফল্ট ব্রাউজারের কনটেক্সট মেনু বন্ধ করতে চান, তাহলে আপনি webContents এর context-menu ইভেন্টে preventDefault() ব্যবহার করতে পারেন।

উদাহরণ: ডিফল্ট Context Menu বন্ধ করা

mainWindow.webContents.on('context-menu', (event) => {
  event.preventDefault();  // ডিফল্ট Context Menu বন্ধ করা
  contextMenu.popup({ window: mainWindow });
});

এখানে event.preventDefault() ব্যবহার করে ডিফল্ট রাইট-ক্লিক মেনু বন্ধ করা হয়েছে এবং আমাদের কাস্টম মেনু contextMenu.popup() প্রদর্শিত হবে।

সারাংশ

• Context Menu তৈরি এবং কনফিগার করার জন্য Menu এবং MenuItem মডিউল ব্যবহৃত হয়।
• Menu.buildFromTemplate() ব্যবহার করে কাস্টম মেনু তৈরি করা হয়, যেখানে বিভিন্ন MenuItem যোগ করা হয়।
• accelerator ব্যবহার করে শর্টকাট কিপ্যাড সেট করা যায় এবং enabled প্রোপার্টি ব্যবহার করে কনটেক্সট মেনুর অপশনগুলি ডাইনামিকভাবে পরিবর্তিত করা সম্ভব।
• preventDefault() ব্যবহার করে ডিফল্ট কনটেক্সট মেনু বন্ধ করা যায়।

এভাবে আপনি Electron-এ আপনার অ্যাপের জন্য কাস্টম Context Menu তৈরি এবং কনফিগার করতে পারবেন, যা ব্যবহারকারীদের একটি ইন্টারঅ্যাকটিভ অভিজ্ঞতা প্রদান করবে।

Electron অ্যাপ্লিকেশনে মেনু (menu) এবং সাবমেনু (submenu) তৈরি করতে Menu এবং MenuItem ক্লাস ব্যবহার করা হয়। মেনু তৈরির মাধ্যমে অ্যাপের ইউজার ইন্টারফেসে বিভিন্ন অপশন যোগ করা যায়, যেমন ফাইল অপশন, এডিট অপশন, এবং অন্যান্য কাস্টম ফাংশন।

নিচে দেখানো হলো কীভাবে Electron অ্যাপ্লিকেশনে মেনুতে submenus (সাবমেনু) যোগ করা যায়।

১. Electron অ্যাপে মেনু তৈরি করা

Menu ক্লাস এবং MenuItem ক্লাস ব্যবহার করে মেনু তৈরি করা যায়। এর মধ্যে, submenus তৈরি করতে submenu প্রপার্টি ব্যবহার করা হয়।

উদাহরণ: মেনু এবং সাবমেনু যোগ করা

const { app, BrowserWindow, Menu, MenuItem } = require('electron');

let mainWindow;

app.on('ready', () => {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  });

  mainWindow.loadFile('index.html');

  // মেনু তৈরি করা
  const menu = new Menu();

  // প্রথম মেনু আইটেম (File)
  const fileMenu = new MenuItem({
    label: 'File',
    submenu: [
      {
        label: 'Open',
        click: () => {
          console.log('Open clicked');
        }
      },
      {
        label: 'Save',
        click: () => {
          console.log('Save clicked');
        }
      },
      { type: 'separator' },
      {
        label: 'Exit',
        click: () => {
          app.quit();
        }
      }
    ]
  });

  // দ্বিতীয় মেনু আইটেম (Edit)
  const editMenu = new MenuItem({
    label: 'Edit',
    submenu: [
      {
        label: 'Undo',
        click: () => {
          console.log('Undo clicked');
        }
      },
      {
        label: 'Redo',
        click: () => {
          console.log('Redo clicked');
        }
      },
      { type: 'separator' },
      {
        label: 'Cut',
        click: () => {
          console.log('Cut clicked');
        }
      },
      {
        label: 'Copy',
        click: () => {
          console.log('Copy clicked');
        }
      },
      {
        label: 'Paste',
        click: () => {
          console.log('Paste clicked');
        }
      }
    ]
  });

  // মেনুতে আইটেম যোগ করা
  menu.append(fileMenu);
  menu.append(editMenu);

  // অ্যাপের মেনু সেট করা
  Menu.setApplicationMenu(menu);
});

ব্যাখ্যা:

• Menu: এটি একটি মেনু তৈরি করার জন্য ব্যবহৃত হয়।
• MenuItem: এটি একটি মেনু আইটেম তৈরি করে।
• submenu: একটি মেনু আইটেমের অন্তর্গত সাবমেনু (sub-menu) তৈরির জন্য ব্যবহার করা হয়।
• type: 'separator': একটি সেপারেটর (divider) তৈরি করার জন্য ব্যবহার করা হয়, যা মেনু আইটেমের মধ্যে পার্থক্য নির্দেশ করে।

২. অতিরিক্ত কাস্টম ফাংশন যোগ করা

উপরের উদাহরণে বিভিন্ন ফাংশন যেমন "Open", "Save", "Exit", "Undo", "Redo", "Cut", "Copy", এবং "Paste" যুক্ত করা হয়েছে। আপনি আরও কাস্টম ফাংশন যোগ করতে পারেন, যেমন Settings, Preferences, Help ইত্যাদি। নিচে একটি অতিরিক্ত Help মেনু উদাহরণ দেয়া হল।

উদাহরণ: Help মেনু এবং সাবমেনু যোগ করা

const helpMenu = new MenuItem({
  label: 'Help',
  submenu: [
    {
      label: 'Documentation',
      click: () => {
        console.log('Open Documentation');
      }
    },
    {
      label: 'About',
      click: () => {
        console.log('About clicked');
      }
    }
  ]
});

menu.append(helpMenu);

এটি Help মেনুর মধ্যে Documentation এবং About অপশন যুক্ত করবে।

৩. ডাইনামিক মেনু তৈরি করা

আপনি মেনু এবং সাবমেনু ডাইনামিকভাবে তৈরি করতে পারেন, যেখানে বিভিন্ন কন্ডিশন বা ইভেন্টের উপর ভিত্তি করে মেনু আইটেমগুলি পরিবর্তিত হবে।

উদাহরণ: ডাইনামিক মেনু আইটেম

const dynamicMenu = new MenuItem({
  label: 'Dynamic Option',
  enabled: false,  // ডিফল্টভাবে আইটেম নিষ্ক্রিয়
  click: () => {
    console.log('Dynamic option clicked');
  }
});

// কিছু শর্তে মেনু আইটেম সক্রিয় করা
setTimeout(() => {
  dynamicMenu.enabled = true;
}, 3000);

menu.append(dynamicMenu);

এই উদাহরণে, Dynamic Option মেনু আইটেমটি প্রথমে নিষ্ক্রিয় থাকবে এবং 3 সেকেন্ড পর এটি সক্রিয় হবে।

৪. মেনুতে চেকবক্স বা রেডিও বাটন যুক্ত করা

মেনু আইটেমগুলিতে চেকবক্স বা রেডিও বাটন যুক্ত করা যায়, যা ব্যবহারকারীর অপশন নির্বাচন করার জন্য ব্যবহৃত হয়।

উদাহরণ: চেকবক্স মেনু আইটেম

const checkboxMenuItem = new MenuItem({
  label: 'Enable Feature',
  type: 'checkbox',
  checked: true, // ডিফল্টভাবে চেকবক্স নির্বাচিত
  click: (menuItem) => {
    console.log('Checkbox checked:', menuItem.checked);
  }
});

menu.append(checkboxMenuItem);

এটি একটি চেকবক্স মেনু আইটেম তৈরি করবে, যা ব্যবহারকারীকে একটি বৈশিষ্ট্য সক্ষম/অক্ষম করার অনুমতি দেবে।

উদাহরণ: রেডিও বাটন মেনু আইটেম

const radioMenuItem = new MenuItem({
  label: 'Option 1',
  type: 'radio',
  checked: true,  // ডিফল্টভাবে নির্বাচিত
});

const radioMenuItem2 = new MenuItem({
  label: 'Option 2',
  type: 'radio',
});

menu.append(radioMenuItem);
menu.append(radioMenuItem2);

এটি দুটি রেডিও বাটন তৈরি করবে, যেখানে একাধিক বিকল্প থেকে একটি নির্বাচন করা যাবে।

সারাংশ

• Menu এবং MenuItem ব্যবহার করে Electron অ্যাপ্লিকেশনে মেনু এবং সাবমেনু তৈরি করা যায়।
• submenu প্রপার্টি দিয়ে মেনু আইটেমের ভিতরে সাবমেনু যোগ করা যায়।
• মেনুতে checkbox, radio button, এবং separator যোগ করা যায় বিভিন্ন কাস্টম ফাংশনালিটি তৈরি করার জন্য।
• মেনু এবং সাবমেনু ডাইনামিকভাবে তৈরি করা সম্ভব, যা আপনার অ্যাপের প্রয়োজন অনুযায়ী পরিবর্তিত হতে পারে।

এই ভাবে, আপনি ইলেকট্রন অ্যাপ্লিকেশনে কাস্টম মেনু এবং সাবমেনু তৈরি করতে পারেন এবং ব্যবহারকারীর জন্য একটি উন্নত ইউজার ইন্টারফেস প্রদান করতে পারেন।

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 এর মেনু এবং কাস্টম ইভেন্ট হ্যান্ডলার ব্যবহার করে আপনি আপনার অ্যাপ্লিকেশনে ইন্টারঅ্যাকটিভ এবং কার্যকর মেনু ব্যবস্থা তৈরি করতে পারবেন।