Dialog মডিউল এবং Dialog বক্স তৈরি

Electron অ্যাপ্লিকেশনগুলিতে ব্যবহারকারীকে বার্তা বা তথ্য প্রদর্শন করতে Dialog মডিউল ব্যবহার করা হয়। Dialog মডিউল এর মাধ্যমে আপনি সহজে ফাইল সিলেক্টর, ইনপুট বক্স, বার্তা বক্স, এবং অন্যান্য ডায়ালগ বক্স তৈরি করতে পারেন।

Dialog মডিউল

Electron এর Dialog মডিউল ব্যবহার করে আপনি বিভিন্ন ধরনের ডায়ালগ বক্স তৈরি করতে পারবেন, যেমন:

• আলার্ট বক্স (Alert Box)
• ইনপুট বক্স (Input Box)
• ফাইল সিলেক্টর বক্স (File Selector Box)
• সেভ ডায়ালগ বক্স (Save Dialog Box)

Dialog মডিউল Main Process এর অংশ হিসেবে কাজ করে এবং এটি dialog নামক মডিউল থেকে আসে, যা Electron এর একটি ইন-বিল্ট মডিউল।

Dialog মডিউল ইনপোর্ট করা

Main Process এর মধ্যে Dialog মডিউল ব্যবহার করা হয় এবং এটি ইনপোর্ট করতে হয়।

const { dialog } = require('electron');

১. অ্যালার্ট বক্স (Alert Box)

একটি সাধারণ বার্তা প্রদর্শনের জন্য dialog.showMessageBox() ব্যবহার করা হয়। এটি একটি সংক্ষিপ্ত বার্তা দেখায় এবং ব্যবহারকারীকে একটি "OK" বাটনে ক্লিক করতে বলে।

উদাহরণ: অ্যালার্ট বক্স তৈরি

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

let mainWindow;

app.on('ready', () => {
  mainWindow = new BrowserWindow({ width: 800, height: 600 });
  mainWindow.loadFile('index.html');

  // অ্যালার্ট বক্স
  dialog.showMessageBox({
    type: 'info',  // বার্তার ধরন: info, error, question ইত্যাদি
    buttons: ['OK'],
    title: 'অ্যালার্ট',
    message: 'এটি একটি সাধারণ বার্তা!'
  });
});

• type: বার্তার ধরনের ইনপুট। যেমন: info, error, warning, question।
• buttons: ডায়ালগে প্রদর্শিত বাটনগুলির তালিকা।
• message: বার্তা বা টেক্সট যা ব্যবহারকারীর কাছে প্রদর্শিত হবে।

২. ফাইল সিলেক্টর বক্স (File Selector Box)

ফাইল সিলেক্টর বক্স ব্যবহার করে ব্যবহারকারীরা তাদের সিস্টেম থেকে একটি ফাইল নির্বাচন করতে পারেন।

উদাহরণ: ফাইল সিলেক্টর বক্স তৈরি

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

let mainWindow;

app.on('ready', () => {
  mainWindow = new BrowserWindow({ width: 800, height: 600 });
  mainWindow.loadFile('index.html');

  // ফাইল সিলেক্টর
  dialog.showOpenDialog(mainWindow, {
    title: 'ফাইল নির্বাচন করুন',
    defaultPath: '/Users/yourname/Documents', // ডিফল্ট লোকেশন
    filters: [
      { name: 'Text Files', extensions: ['txt', 'md'] },
      { name: 'Images', extensions: ['jpg', 'png'] }
    ],
    properties: ['openFile']  // 'openDirectory' বা 'multiSelections' এর সাথে যুক্ত করা যেতে পারে
  }).then(result => {
    console.log(result.filePaths); // নির্বাচিত ফাইলের পথ
  }).catch(err => {
    console.log(err);
  });
});

• filters: ফাইল টাইপ ফিল্টার করে, যেমন শুধুমাত্র txt বা jpg ফাইল সিলেকশন।
• properties: বিভিন্ন অপশন, যেমন openFile, openDirectory, multiSelections (একাধিক ফাইল সিলেক্ট করতে)।

৩. ফোল্ডার সিলেক্টর বক্স (Folder Selector Box)

ব্যবহারকারীরা একটি ফোল্ডার নির্বাচন করতে চাইলে dialog.showOpenDialog এর properties এ openDirectory ব্যবহার করা হয়।

উদাহরণ: ফোল্ডার সিলেক্টর বক্স তৈরি

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

let mainWindow;

app.on('ready', () => {
  mainWindow = new BrowserWindow({ width: 800, height: 600 });
  mainWindow.loadFile('index.html');

  // ফোল্ডার সিলেক্টর
  dialog.showOpenDialog(mainWindow, {
    title: 'ফোল্ডার নির্বাচন করুন',
    properties: ['openDirectory']
  }).then(result => {
    console.log(result.filePaths); // নির্বাচিত ফোল্ডারের পথ
  }).catch(err => {
    console.log(err);
  });
});

৪. সেভ ডায়ালগ বক্স (Save Dialog Box)

ব্যবহারকারীর কাছ থেকে ফাইল সেভ করার জন্য dialog.showSaveDialog() ব্যবহার করা হয়। এটি ফাইলের নাম এবং লোকেশন চায়।

উদাহরণ: সেভ ডায়ালগ বক্স তৈরি

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

let mainWindow;

app.on('ready', () => {
  mainWindow = new BrowserWindow({ width: 800, height: 600 });
  mainWindow.loadFile('index.html');

  // সেভ ডায়ালগ
  dialog.showSaveDialog(mainWindow, {
    title: 'ফাইল সেভ করুন',
    defaultPath: '/Users/yourname/Documents/sample.txt',
    filters: [
      { name: 'Text Files', extensions: ['txt'] },
      { name: 'All Files', extensions: ['*'] }
    ]
  }).then(result => {
    if (!result.canceled) {
      console.log(result.filePath); // সেভ করার ফাইলের পথ
    }
  }).catch(err => {
    console.log(err);
  });
});

• defaultPath: ফাইল সেভ করার জন্য ডিফল্ট অবস্থান।
• filters: ফাইল টাইপ ফিল্টার করে।

৫. ইনপুট বক্স (Input Box)

ব্যবহারকারীর কাছ থেকে ইনপুট নেওয়ার জন্য dialog.showInputDialog() এর মত কাস্টম ডায়ালগ তৈরি করা যেতে পারে, যদিও Electron এর ডিফল্ট মডিউল input dialog সরাসরি সরবরাহ করে না। তবে, আপনি কাস্টম HTML ফর্ম তৈরি করে ইনপুট বক্স তৈরি করতে পারেন।

সারাংশ

• Electron Dialog মডিউল আপনাকে বিভিন্ন ধরনের ডায়ালগ বক্স তৈরি করতে সাহায্য করে যেমন অ্যালার্ট বক্স, ফাইল সিলেক্টর, সেভ ডায়ালগ, এবং ফোল্ডার সিলেক্টর।
• এটি ব্যবহার করে আপনি ব্যবহারকারীর সাথে ইন্টারঅ্যাকশন সহজভাবে করতে পারেন।
• dialog.showMessageBox(), dialog.showOpenDialog(), dialog.showSaveDialog() ইত্যাদি মেথডগুলি বিভিন্ন ডায়ালগ তৈরি করতে ব্যবহৃত হয়।
• Main Process থেকে Dialog মডিউল ব্যবহার করা হয়, যা Electron অ্যাপ্লিকেশনটির ব্যাকএন্ড কাজগুলি সম্পাদন করে।