Electron এ কাস্টম Menu তৈরি

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 অ্যাপ্লিকেশন আরও ইন্টারঅ্যাকটিভ এবং ব্যবহারকারী-বান্ধব হতে পারে।