মেনুতে Submenu যোগ করা

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 যোগ করা যায় বিভিন্ন কাস্টম ফাংশনালিটি তৈরি করার জন্য।
• মেনু এবং সাবমেনু ডাইনামিকভাবে তৈরি করা সম্ভব, যা আপনার অ্যাপের প্রয়োজন অনুযায়ী পরিবর্তিত হতে পারে।

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