Menu মডিউল এবং কাস্টম মেনু তৈরি

Electron অ্যাপ্লিকেশনে Menu মডিউল ব্যবহার করে কাস্টম মেনু তৈরি করা যায়, যা অ্যাপের ইউজার ইন্টারফেসে বিভিন্ন অপশন বা ফাংশনালিটি প্রদান করে। এটি সাধারণত অ্যাপ্লিকেশনের মেনু বার (যেমন File, Edit, View) এবং কনটেক্সট মেনু (যেমন রাইট-ক্লিক মেনু) তৈরি করতে ব্যবহৃত হয়।

এখানে আমরা দেখব কিভাবে Menu মডিউল ব্যবহার করে কাস্টম মেনু তৈরি করা যায়।

১. Menu মডিউল ব্যবহার করা

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

২. Menu এবং MenuItem তৈরি

Menu তৈরি করার জন্য প্রথমে Menu.buildFromTemplate() মেথড ব্যবহার করা হয়। এই মেথডে মেনুর প্রতিটি আইটেমকে MenuItem হিসেবে তৈরি করা হয়। মেনুর আইটেমগুলোতে বিভিন্ন ইভেন্ট হ্যান্ডলার অ্যাসাইন করা যায়।

উদাহরণ: কাস্টম মেনু তৈরি

১. Main Process (main.js)

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',
          click: () => {
            console.log('New File clicked!');
          },
        },
        {
          label: 'Open File',
          click: () => {
            console.log('Open File clicked!');
          },
        },
        {
          type: 'separator', // সেপারেটর (লাইনে বিভাজন)
        },
        {
          label: 'Exit',
          click: () => {
            app.quit(); // অ্যাপ বন্ধ করা
          },
        },
      ],
    },
    {
      label: 'Edit',
      submenu: [
        {
          label: 'Undo',
          role: 'undo',  // এক্ষেত্রে Electron predefined role ব্যবহার করা হয়েছে
        },
        {
          label: 'Redo',
          role: 'redo',  // Electron predefined role
        },
        {
          type: 'separator',
        },
        {
          label: 'Copy',
          role: 'copy',  // predefined role
        },
        {
          label: 'Paste',
          role: 'paste', // predefined role
        },
      ],
    },
  ];

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

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

৩. MenuItem এ বিভিন্ন বৈশিষ্ট্য যুক্ত করা

MenuItem তৈরি করার সময় আপনি এটি কাস্টমাইজ করতে পারেন, যেমন:

• label: মেনু আইটেমের টেক্সট।
• click: মেনু আইটেমে ক্লিক করার পর যেই কার্যক্রমটি চালু হবে।
• type: সেপারেটর, চেকবক্স বা রেডিও আইটেম তৈরি করতে ব্যবহৃত হয়।
• role: Electron-এর predefined রোলস, যেমন undo, redo, copy, paste ইত্যাদি।

এছাড়াও আপনি accelerator ব্যবহার করে কীবোর্ড শর্টকাটও অ্যাসাইন করতে পারেন।

উদাহরণ: কীবোর্ড শর্টকাট সহ মেনু আইটেম

{
  label: 'Save',
  accelerator: 'CmdOrCtrl+S',  // কীবোর্ড শর্টকাট
  click: () => {
    console.log('Save clicked!');
  }
}

৪. কনটেক্সট মেনু (Right-click Menu)

আপনি right-click মেনু বা কনটেক্সট মেনু তৈরি করতে পারেন যা একটি নির্দিষ্ট উপাদান বা পুরো উইন্ডোতে রাইট-ক্লিক করার সময় প্রদর্শিত হয়।

উদাহরণ: কনটেক্সট মেনু তৈরি

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

const contextMenu = new Menu();
contextMenu.append(new MenuItem({
  label: 'Cut',
  role: 'cut',
}));
contextMenu.append(new MenuItem({
  label: 'Copy',
  role: 'copy',
}));
contextMenu.append(new MenuItem({
  label: 'Paste',
  role: 'paste',
}));

// রাইট-ক্লিক ইভেন্ট হ্যান্ডলিং
mainWindow.webContents.on('context-menu', (event, params) => {
  contextMenu.popup({ window: mainWindow });
});

এটি কনটেক্সট মেনু তৈরি করে এবং right-click এ সেটি প্রদর্শন করে।

৫. মেনু স্টাইল কাস্টমাইজেশন

যদিও Electron এর মেনু কাস্টমাইজেশনের জন্য নির্দিষ্ট কোনো CSS স্টাইলিং সরাসরি দেওয়া যায় না, তবে আপনি HTML এবং CSS ব্যবহার করে কাস্টম মেনু তৈরি করতে পারেন। উদাহরণস্বরূপ, আপনি একটি ড্রপডাউন মেনু বা কাস্টম স্টাইল করা মেনু তৈরি করতে পারেন যা Electron উইন্ডোতে প্রদর্শিত হবে, কিন্তু তা কিছুটা ভিন্নভাবে কাজ করবে।

সারাংশ

• Menu মডিউল ব্যবহার করে আপনি Electron অ্যাপ্লিকেশনে কাস্টম মেনু তৈরি করতে পারেন।
• মেনু আইটেমে MenuItem ব্যবহার করা হয়, এবং এর মাধ্যমে আপনি মেনুর অপশন কাস্টমাইজ করতে পারেন।
• আপনি role এর মাধ্যমে predefined ফাংশনালিটি যোগ করতে পারেন, যেমন copy, paste, undo ইত্যাদি।
• context menu তৈরি করার জন্য right-click ব্যবহার করা হয়, যা কনটেক্সট বা রাইট-ক্লিক মেনু প্রদর্শন করে।

এভাবে আপনি আপনার Electron অ্যাপে কাস্টম মেনু তৈরি করে আরও উন্নত ফাংশনালিটি যোগ করতে পারবেন।