Electron এ নোটিফিকেশন এবং ডায়লগ বক্স

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

১. নোটিফিকেশন (Notification)

Electron অ্যাপ্লিকেশনে সিস্টেমের মাধ্যমে নোটিফিকেশন পাঠানোর জন্য Notification API ব্যবহার করা হয়। এই API অ্যাপ্লিকেশনের জন্য নোটিফিকেশন তৈরি এবং প্রদর্শন করতে সক্ষম।

উদাহরণ: নোটিফিকেশন তৈরি করা

Main Process (main.js)

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

let mainWindow;

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

  mainWindow.loadFile('index.html');

  // সিস্টেম নোটিফিকেশন পাঠানো
  const notification = new Notification({
    title: 'নতুন নোটিফিকেশন',
    body: 'এটি একটি সিস্টেম নোটিফিকেশন।'
  });

  notification.show();
});

নোটিফিকেশন সম্পর্কিত কিছু গুরুত্বপূর্ণ বিষয়:

• title: নোটিফিকেশনের শিরোনাম।
• body: নোটিফিকেশনের বর্ণনা বা মেসেজ।
• show(): নোটিফিকেশন দেখানোর জন্য এটি ব্যবহার করা হয়।

এই নোটিফিকেশনটি তখন সিস্টেমের নোটিফিকেশন ট্রেতে প্রদর্শিত হবে।

২. ডায়লগ বক্স (Dialog Box)

Electron-এ বিভিন্ন ধরনের ডায়লগ বক্স তৈরি করার জন্য dialog মডিউল ব্যবহৃত হয়। এর মাধ্যমে ফাইল সিলেক্ট, কনফার্মেশন এবং তথ্য প্রদর্শন করার জন্য ডায়লগ বক্স ব্যবহার করা যায়।

উদাহরণ: ফাইল ওপেন ডায়লগ বক্স

ফাইল সিলেক্ট করার জন্য dialog.showOpenDialog() ব্যবহার করা হয়।

Main Process (main.js)

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: ['openFile'] // শুধুমাত্র ফাইল সিলেক্ট করার অনুমতি
  }).then(result => {
    if (!result.canceled) {
      console.log('সিলেক্ট করা ফাইল:', result.filePaths);
    }
  }).catch(err => {
    console.log('এrror:', err);
  });
});

Dialog API এর মধ্যে অন্যান্য ফিচার রয়েছে:

• showSaveDialog(): ফাইল সেভ করার ডায়লগ বক্স।
• showMessageBox(): সাধারণ কনফার্মেশন বা মেসেজ বক্স।

৩. ফাইল সেভ ডায়লগ বক্স

ফাইল সেভ করার জন্য dialog.showSaveDialog() ব্যবহার করা হয়। এটি ব্যবহারকারীকে একটি ফাইল সেভ করতে সক্ষম করে।

উদাহরণ: ফাইল সেভ ডায়লগ বক্স

Main Process (main.js)

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: 'document.txt',  // ডিফল্ট ফাইল নাম
    filters: [
      { name: 'Text Files', extensions: ['txt'] },
      { name: 'All Files', extensions: ['*'] }
    ]
  }).then(result => {
    if (!result.canceled) {
      console.log('ফাইল সেভ হয়েছে:', result.filePath);
    }
  }).catch(err => {
    console.log('এrror:', err);
  });
});

৪. কনফার্মেশন ডায়লগ বক্স

কনফার্মেশন ডায়লগ বক্স ব্যবহার করে ব্যবহারকারী থেকে একটি হ্যাঁ বা না উত্তর গ্রহণ করা যায়।

উদাহরণ: কনফার্মেশন ডায়লগ বক্স

Main Process (main.js)

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

let mainWindow;

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

  mainWindow.loadFile('index.html');

  // কনফার্মেশন ডায়লগ বক্স
  dialog.showMessageBox(mainWindow, {
    type: 'question',
    buttons: ['হ্যাঁ', 'না'],
    title: 'কনফার্মেশন',
    message: 'আপনি কি অ্যাপ বন্ধ করতে চান?'
  }).then(result => {
    if (result.response === 0) {
      console.log('ব্যবহারকারী "হ্যাঁ" নির্বাচন করেছেন');
    } else {
      console.log('ব্যবহারকারী "না" নির্বাচন করেছেন');
    }
  }).catch(err => {
    console.log('এrror:', err);
  });
});

সারাংশ

• নোটিফিকেশন: Electron অ্যাপ্লিকেশন থেকে সিস্টেম নোটিফিকেশন প্রদর্শন করতে Notification API ব্যবহার করা হয়।
• ডায়লগ বক্স: ফাইল সিলেকশন, সেভ এবং কনফার্মেশন ডায়লগ বক্স তৈরি করতে dialog মডিউল ব্যবহার করা হয়।
• ফাইল সিলেক্ট: showOpenDialog() ব্যবহার করে ব্যবহারকারীকে ফাইল সিলেক্ট করতে বলা হয়।
• ফাইল সেভ: showSaveDialog() ব্যবহার করে ব্যবহারকারীকে ফাইল সেভ করার জন্য ডায়লগ বক্স প্রদর্শন করা হয়।
• কনফার্মেশন ডায়লগ: showMessageBox() ব্যবহার করে কনফার্মেশন বক্স তৈরি করা হয়।

এই ফিচারগুলি Electron অ্যাপ্লিকেশনকে আরো ইন্টারঅ্যাকটিভ এবং ব্যবহারকারীর জন্য সুবিধাজনক করে তোলে।

Electron অ্যাপ্লিকেশন তৈরি করার সময় আপনি Notification API ব্যবহার করে ডেস্কটপ নোটিফিকেশন পাঠাতে পারেন। এই API ব্রাউজার ভিত্তিক অ্যাপ্লিকেশনগুলোতে কিভাবে নোটিফিকেশন প্রদর্শন করা হয় ঠিক তেমনই ডেস্কটপ অ্যাপ্লিকেশনেও এটি কাজ করে। এটি ব্যবহারকারীকে বার্তা বা তথ্য জানাতে সহায়ক।

১. Notification API কনফিগারেশন

Electron এ Notification API ব্যবহারের জন্য new Notification() ব্যবহার করা হয়। title এবং body সহ একটি নোটিফিকেশন তৈরি করা হয়, যা ব্যবহারকারীর স্ক্রীনে প্রদর্শিত হবে।

নোটিফিকেশন তৈরি করার জন্য যে ফিচারগুলো দরকার:

• title: নোটিফিকেশনের শিরোনাম।
• body: নোটিফিকেশনের বর্ণনা বা বার্তা।
• icon: নোটিফিকেশনের আইকন (যদি প্রয়োজন হয়)।

২. Electron এ Notification API ব্যবহার করা

উদাহরণ: Main Process - main.js

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

let mainWindow;

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

  mainWindow.loadFile('index.html');

  // নোটিফিকেশন তৈরি করা
  new Notification({
    title: 'Welcome to Electron!',
    body: 'This is a simple desktop notification.',
    icon: 'icon.png' // এটি একটি আইকন ফাইল হতে পারে
  }).show(); // নোটিফিকেশনটি প্রদর্শন করবে
});

এই উদাহরণে, new Notification() দিয়ে একটি নতুন নোটিফিকেশন তৈরি করা হচ্ছে, যার মধ্যে শিরোনাম, বডি এবং একটি আইকন নির্ধারণ করা হয়েছে। এরপর show() ফাংশনটি ব্যবহার করে নোটিফিকেশনটি প্রদর্শন করা হচ্ছে।

৩. Renderer Process থেকে নোটিফিকেশন পাঠানো

এছাড়া, Renderer Process থেকে Main Process এ IPC (Inter-Process Communication) ব্যবহার করে নোটিফিকেশন পাঠানো যায়।

উদাহরণ: Main Process - main.js (IPC ব্যবহারের মাধ্যমে)

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

let mainWindow;

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

  mainWindow.loadFile('index.html');

  // Renderer থেকে নোটিফিকেশন বার্তা গ্রহণ
  ipcMain.on('send-notification', (event, data) => {
    new Notification({
      title: data.title,
      body: data.body,
      icon: data.icon
    }).show();
  });
});

Renderer Process - index.html (IPC এর মাধ্যমে নোটিফিকেশন পাঠানো)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Electron Notification</title>
</head>
<body>
  <h1>Electron Notification Example</h1>
  <button id="notifyBtn">Show Notification</button>

  <script>
    const { ipcRenderer } = require('electron');

    document.getElementById('notifyBtn').addEventListener('click', () => {
      // Main Process-এ নোটিফিকেশন পাঠানো
      ipcRenderer.send('send-notification', {
        title: 'Hello from Renderer!',
        body: 'This notification was triggered from the Renderer process.',
        icon: 'icon.png'
      });
    });
  </script>
</body>
</html>

এখানে, Renderer Process থেকে একটি বাটনে ক্লিক করলে Main Process-এ নোটিফিকেশন পাঠানো হচ্ছে IPC ব্যবহার করে।

৪. নোটিফিকেশন ক্লিক ইভেন্ট

আপনি Notification অবজেক্টে ক্লিক ইভেন্টও যোগ করতে পারেন, যাতে ব্যবহারকারী নোটিফিকেশনটি ক্লিক করলে কিছু নির্দিষ্ট কাজ সম্পন্ন হয়।

উদাহরণ: নোটিফিকেশন ক্লিক ইভেন্ট

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

let mainWindow;

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

  mainWindow.loadFile('index.html');

  // নোটিফিকেশন তৈরি
  const notification = new Notification({
    title: 'New Message',
    body: 'You have a new message!',
    icon: 'icon.png'
  });

  notification.show();

  // নোটিফিকেশন ক্লিক ইভেন্ট
  notification.onclick = () => {
    console.log('Notification clicked!');
    mainWindow.focus();  // উইন্ডো ফোকাস করা
  };
});

এই উদাহরণে, যখন ব্যবহারকারী নোটিফিকেশনটিতে ক্লিক করবেন, তখন onclick ইভেন্ট ট্রিগার হবে এবং উইন্ডোটি ফোকাস হবে।

৫. নোটিফিকেশন কাস্টমাইজেশন

নোটিফিকেশনটির অন্যান্য কাস্টমাইজেশন যেমন বাটন এবং এনিমেশন যোগ করার জন্য Electron-এর Notification API-তে সীমাবদ্ধতা রয়েছে। তবে, আপনি নিজে কাস্টম UI তৈরি করতে পারেন, যেখানে একটি custom window ব্যবহার করে সম্পূর্ণ কাস্টম স্টাইল দেওয়া যেতে পারে।

সারাংশ

• Electron এর Notification API ব্যবহার করে ডেস্কটপ নোটিফিকেশন তৈরি করা যায়।
• নোটিফিকেশন তৈরির জন্য new Notification() ব্যবহার করা হয়, যেখানে শিরোনাম, বডি এবং আইকন নির্ধারণ করা হয়।
• Renderer Process থেকে Main Process-এ নোটিফিকেশন পাঠানোর জন্য IPC ব্যবহৃত হয়।
• নোটিফিকেশন ক্লিক ইভেন্টের মাধ্যমে আপনি ব্যবহারকারীর অ্যাকশনের উপর ভিত্তি করে অ্যাপ্লিকেশনে কিছু কাজ করতে পারেন।

এভাবে, আপনি আপনার Electron অ্যাপ্লিকেশন থেকে ব্যবহারকারীকে সক্রিয়ভাবে নোটিফিকেশন পাঠাতে পারবেন, যা তাদের জন্য একটি উন্নত ব্যবহারকারীর অভিজ্ঞতা প্রদান করবে।

Electron অ্যাপ্লিকেশনগুলোতে MessageBox এবং OpenDialog ব্যবহার করে ইউজারের সাথে ইন্টারঅ্যাকশন করা যায়। এই দুটি বৈশিষ্ট্য ব্যবহার করে আপনি ব্যবহারকারীর কাছে সতর্কতা, তথ্য, ফাইল নির্বাচন এবং অন্যান্য ইন্টারঅ্যাকটিভ ডায়ালগ শো করতে পারেন।

১. MessageBox

MessageBox সাধারণত উইন্ডোতে একটি পপ-আপ ডায়ালগ শো করতে ব্যবহৃত হয়, যা ব্যবহারকারীকে একটি বার্তা দেখায় এবং ব্যবহারকারীকে কোন সিদ্ধান্ত নিতে বলে, যেমন "OK" বা "Cancel"।

MessageBox ব্যবহার করার উপায়

MessageBox মূলত dialog মডিউল দ্বারা পরিচালিত হয়, যা Main Process-এ ব্যবহৃত হয়।

উদাহরণ: MessageBox ব্যবহার করে একটি বার্তা প্রদর্শন করা

Main Process (main.js):

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

let mainWindow;

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

  mainWindow.loadFile('index.html');

  // MessageBox এর মাধ্যমে একটি সতর্কবার্তা দেখানো
  dialog.showMessageBox(mainWindow, {
    type: 'warning',    // বার্তার ধরন (warning, error, info, etc.)
    buttons: ['OK', 'Cancel'], // বার্তার জন্য বাটন
    title: 'Warning',  // বার্তার শিরোনাম
    message: 'Are you sure you want to exit?', // বার্তা
  }).then(result => {
    if (result.response === 0) {  // যদি 'OK' বাটন ক্লিক করা হয়
      app.quit();  // অ্যাপ বন্ধ হবে
    } else {
      console.log('User canceled the action');
    }
  });
});

এই কোডে, dialog.showMessageBox() ব্যবহার করে MessageBox তৈরি করা হচ্ছে, যা একটি সতর্কতা বার্তা দেখাবে এবং ব্যবহারকারী যদি OK ক্লিক করে, অ্যাপটি বন্ধ হয়ে যাবে।

২. OpenDialog

OpenDialog ব্যবহার করে আপনি ব্যবহারকারীকে ফাইল নির্বাচন করার জন্য একটি ডায়ালগ খুলতে পারেন। এটি ব্যবহারকারীদের ফাইল সিস্টেম থেকে ফাইল নির্বাচন করতে সাহায্য করে।

OpenDialog ব্যবহার করার উপায়

OpenDialog সাধারণত dialog.showOpenDialog() ফাংশন দ্বারা ব্যবহৃত হয়, যা ব্যবহারকারীর কাছে ফাইল নির্বাচন ডায়ালগ শো করে।

উদাহরণ: OpenDialog ব্যবহার করে ফাইল নির্বাচন করা

Main Process (main.js):

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

let mainWindow;

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

  mainWindow.loadFile('index.html');

  // OpenDialog এর মাধ্যমে ফাইল নির্বাচন করা
  dialog.showOpenDialog(mainWindow, {
    title: 'Select a File',    // ডায়ালগের শিরোনাম
    defaultPath: '/home/user', // ডিফল্ট পাথ
    filters: [                // ফাইল টাইপ ফিল্টার
      { name: 'Text Files', extensions: ['txt'] },
      { name: 'All Files', extensions: ['*'] }
    ],
    properties: ['openFile']  // ফাইল নির্বাচনের জন্য
  }).then(result => {
    if (!result.canceled) {
      console.log('Selected file:', result.filePaths[0]); // নির্বাচিত ফাইলের পাথ দেখানো
    } else {
      console.log('User canceled the file selection');
    }
  });
});

এখানে, dialog.showOpenDialog() ব্যবহার করে একটি ফাইল নির্বাচন ডায়ালগ শো করা হয়েছে। ব্যবহারকারী যখন একটি ফাইল নির্বাচন করবে, তার পাথ result.filePaths[0] দ্বারা পাওয়া যাবে। এছাড়া, ব্যবহারকারী যদি ডায়ালগ বন্ধ করে দেয়, তবে canceled ফ্ল্যাগটি true হবে।

৩. MessageBox এবং OpenDialog এর মধ্যে পার্থক্য

৪. অন্য Dialog ফিচার

ইলেকট্রন dialog মডিউলে আরো কিছু উপকারি ফাংশন রয়েছে, যেমন:

• SaveDialog: ব্যবহারকারীকে ফাইল সংরক্ষণের জন্য ডায়ালগ শো করে।

SaveDialog উদাহরণ:

dialog.showSaveDialog(mainWindow, {
  title: 'Save File',
  defaultPath: '/home/user/untitled.txt',
}).then(result => {
  if (!result.canceled) {
    console.log('Saved file path:', result.filePath);
  }
});

• MessageBox এর অন্যান্য ধরনের বার্তা:
  • info: সাধারণ তথ্য বার্তা।
  • error: ত্রুটি বার্তা।
  • question: প্রশ্ন সাপেক্ষ বার্তা।

MessageBox এর অন্যান্য ধরনের উদাহরণ:

dialog.showMessageBox(mainWindow, {
  type: 'info',   // তথ্য বার্তা
  message: 'This is an info message'
});

সারাংশ

• MessageBox এবং OpenDialog ইলেকট্রনে ইউজার ইন্টারঅ্যাকশন তৈরি করার শক্তিশালী টুল।
• MessageBox ব্যবহার করে আপনি পপ-আপ বার্তা বা সতর্কতামূলক ডায়ালগ তৈরি করতে পারেন।
• OpenDialog ব্যবহার করে আপনি ফাইল নির্বাচন করার জন্য ডায়ালগ শো করতে পারেন।
• আপনি SaveDialog, MessageBox এর বিভিন্ন ধরনের, এবং OpenDialog এর অন্যান্য প্যারামিটারগুলো ব্যবহার করে আরও উন্নত ইন্টারঅ্যাকশন তৈরি করতে পারবেন।

Electron অ্যাপ্লিকেশনে নোটিফিকেশন এবং ডায়লগ কাস্টমাইজ করা খুবই সহজ, এবং এটি ব্যবহারকারীর অভিজ্ঞতাকে উন্নত করতে সহায়ক। Electron Main Process-এ নোটিফিকেশন এবং ডায়লগ তৈরি এবং কাস্টমাইজ করার জন্য প্রয়োজনীয় মডিউল প্রদান করে।

এই টিউটোরিয়ালে নোটিফিকেশন এবং ডায়লগ কাস্টমাইজেশন সম্পর্কিত বিভিন্ন বৈশিষ্ট্য এবং কোড উদাহরণ দেওয়া হয়েছে।

১. নোটিফিকেশন

Electron এর Notification API ব্যবহার করে Desktop Notification তৈরি করা যায়, যা ব্যবহারকারীর ডেস্কটপে বার্তা প্রদর্শন করে।

উদাহরণ: নোটিফিকেশন তৈরি করা

Main Process (main.js)

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

let mainWindow;

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

  mainWindow.loadFile('index.html');

  // নোটিফিকেশন তৈরি করা
  const notification = new Notification({
    title: 'Electron Notification',
    body: 'This is a simple notification!',
  });

  notification.show(); // নোটিফিকেশন প্রদর্শন
});

এখানে, Notification কনস্ট্রাকটরের মাধ্যমে একটি নোটিফিকেশন তৈরি করা হচ্ছে। title এবং body কনফিগারেশনে নোটিফিকেশনের শিরোনাম এবং বার্তা সেট করা হয়। notification.show() দ্বারা নোটিফিকেশনটি ব্যবহারকারীর স্ক্রীনে প্রদর্শিত হবে।

নোটিফিকেশন কাস্টমাইজেশন

আপনি নোটিফিকেশনকে আরো কাস্টমাইজ করতে পারেন যেমন, নোটিফিকেশনের আইকন, অ্যাকশন বাটন ইত্যাদি যোগ করতে পারেন।

উদাহরণ: নোটিফিকেশন কাস্টমাইজেশন

const notification = new Notification({
  title: 'Custom Notification',
  body: 'Click here to open the app!',
  icon: 'path/to/icon.png', // নোটিফিকেশনের জন্য কাস্টম আইকন
  actions: [
    {
      type: 'button',
      text: 'Open App',
    },
  ],
});

notification.show();

// অ্যাকশন বাটনের ক্লিক ইভেন্ট
notification.on('action', () => {
  console.log('User clicked the notification action');
  mainWindow.show(); // অ্যাপ্লিকেশন উইন্ডো দেখানো
});

• icon: নোটিফিকেশনের আইকন কাস্টমাইজ করা হয়েছে।
• actions: নোটিফিকেশনের জন্য অ্যাকশন বাটন যোগ করা হয়েছে।
• on('action'): ব্যবহারকারী যদি অ্যাকশন বাটনে ক্লিক করেন, তাহলে একটি ইভেন্ট ট্রিগার হবে।

২. ডায়লগ কাস্টমাইজেশন

Electron অ্যাপ্লিকেশনে ডায়লগ dialog API ব্যবহার করে বিভিন্ন ধরনের ডায়লগ তৈরি করা যায়, যেমন File Dialog, Message Dialog, এবং Error Dialog। আপনি ডায়লগের মাধ্যমে ব্যবহারকারীর কাছ থেকে ইনপুট বা পছন্দ গ্রহণ করতে পারেন।

উদাহরণ: ডায়লগ তৈরি করা

Main Process (main.js)

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

let mainWindow;

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

  mainWindow.loadFile('index.html');

  // মেসেজ ডায়লগ
  dialog.showMessageBox(mainWindow, {
    type: 'info',
    buttons: ['OK'],
    title: 'Information',
    message: 'This is an info message!',
  }).then(result => {
    console.log(result.response); // বাটন ক্লিকের ফলাফল
  });
});

এই উদাহরণে, dialog.showMessageBox() মেথড ব্যবহার করে একটি সিম্পল মেসেজ ডায়লগ তৈরি করা হয়েছে। এতে type, buttons, title, এবং message কনফিগারেশন ব্যবহার করা হয়েছে।

ফাইল সিলেকশন ডায়লগ

File Dialog ব্যবহার করে আপনি ব্যবহারকারীকে ফাইল নির্বাচন করতে বলতে পারেন।

dialog.showOpenDialog(mainWindow, {
  title: 'Select a File',
  properties: ['openFile', 'multiSelections'], // একাধিক ফাইল সিলেকশনের অনুমতি
}).then(result => {
  if (!result.canceled) {
    console.log('Selected files:', result.filePaths);
  }
});

• properties: ['openFile', 'multiSelections']: একাধিক ফাইল সিলেকশনের অনুমতি দেয়।
• result.filePaths: সিলেক্ট করা ফাইলের পাথ ফেরত দেয়।

ফোল্ডার সিলেকশন ডায়লগ

Folder Dialog ব্যবহার করে আপনি একটি ফোল্ডার নির্বাচন করতে পারেন।

dialog.showOpenDialog(mainWindow, {
  title: 'Select a Folder',
  properties: ['openDirectory'],
}).then(result => {
  if (!result.canceled) {
    console.log('Selected folder:', result.filePaths);
  }
});

• properties: ['openDirectory']: ফোল্ডার সিলেকশন অনুমতি দেয়।

৩. নোটিফিকেশন এবং ডায়লগের মধ্যে পার্থক্য

সারাংশ

• নোটিফিকেশন: Electron এ Notification API ব্যবহার করে সহজে ডেস্কটপ নোটিফিকেশন তৈরি করা যায়। এটি ব্যবহারকারীকে তথ্য প্রদান করতে সাহায্য করে এবং কাস্টম অ্যাকশন যোগ করা যায়।
• ডায়লগ কাস্টমাইজেশন: dialog API ব্যবহার করে মেসেজ ডায়লগ, ফাইল সিলেকশন ডায়লগ, এবং ফোল্ডার সিলেকশন ডায়লগ তৈরি করা যায়।
• নোটিফিকেশন এবং ডায়লগের মধ্যে মূল পার্থক্য হলো নোটিফিকেশন ব্যবহারকারীর কাছ থেকে কোনো ইনপুট না নিয়ে শুধুমাত্র তথ্য প্রদান করে, যখন ডায়লগ ব্যবহারকারীর কাছ থেকে ইনপুট বা পছন্দ গ্রহণ করে।

এভাবে, Electron অ্যাপ্লিকেশনগুলিতে নোটিফিকেশন এবং ডায়লগ কাস্টমাইজেশন ব্যবহার করে একটি ইন্টারঅ্যাকটিভ এবং ব্যবহারকারী-বান্ধব অভিজ্ঞতা তৈরি করা সম্ভব।

ইলেকট্রন (Electron) অ্যাপ্লিকেশনে ফাইল সিলেকশন এবং কনফার্মেশন ডায়লগ তৈরি করার জন্য dialog মডিউল ব্যবহৃত হয়। এটি Main Process থেকে ব্যবহার করা যায় এবং Renderer Process থেকে IPC (Inter-Process Communication) এর মাধ্যমে এটির সাথে যোগাযোগ করা হয়।

এখানে, ফাইল সিলেক্টর এবং কনফার্মেশন ডায়লগ তৈরি করার প্রক্রিয়া এবং উদাহরণ দেওয়া হলো।

১. ফাইল সিলেক্টর ডায়লগ তৈরি করা

Electron এ dialog.showOpenDialog() মেথড ব্যবহার করে ফাইল সিলেক্টর ডায়লগ তৈরি করা যায়, যা ব্যবহারকারীকে ফাইল বা ফোল্ডার সিলেক্ট করার সুযোগ দেয়।

উদাহরণ: Main Process - main.js

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

let mainWindow;

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

  mainWindow.loadFile('index.html');

  // ফাইল সিলেক্টর ডায়লগ শো করা
  ipcMain.on('open-file-dialog', (event) => {
    dialog.showOpenDialog(mainWindow, {
      properties: ['openFile']  // শুধু ফাইল সিলেক্ট করার অপশন
    }).then(result => {
      if (!result.canceled) {
        // ফাইলের পাথ পাঠানো
        event.reply('selected-file', result.filePaths[0]);
      }
    }).catch(err => {
      console.log('Error:', err);
    });
  });
});

উদাহরণ: 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>File Selector</title>
</head>
<body>
  <h1>ফাইল সিলেক্টর ডায়লগ</h1>
  <button id="selectFileBtn">ফাইল সিলেক্ট করুন</button>
  <p id="selectedFile">নির্বাচিত ফাইল: </p>

  <script>
    const { ipcRenderer } = require('electron');

    document.getElementById('selectFileBtn').addEventListener('click', () => {
      // Main Process এ ফাইল সিলেক্টর ডায়লগ শো করার অনুরোধ পাঠানো
      ipcRenderer.send('open-file-dialog');
    });

    // ফাইল পাথ গ্রহণ করা এবং UI-তে দেখানো
    ipcRenderer.on('selected-file', (event, filePath) => {
      document.getElementById('selectedFile').textContent = 'নির্বাচিত ফাইল: ' + filePath;
    });
  </script>
</body>
</html>

এখানে:

• dialog.showOpenDialog() ব্যবহার করে ফাইল সিলেক্টর ডায়লগ প্রদর্শন করা হয়।
• ব্যবহারকারী একটি ফাইল সিলেক্ট করলে, result.filePaths[0] দ্বারা সিলেক্ট করা ফাইলের পাথ গ্রহণ করা হয় এবং তা Renderer Process-এ পাঠানো হয়।

২. কনফার্মেশন ডায়লগ তৈরি করা

Electron এ dialog.showMessageBox() মেথড ব্যবহার করে কনফার্মেশন ডায়লগ তৈরি করা যায়, যার মাধ্যমে ব্যবহারকারীকে একটি বার্তা দেখানো হয় এবং "Yes"/"No" বা "OK"/"Cancel" বাটন দেয়া হয়।

উদাহরণ: Main Process - main.js

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

let mainWindow;

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

  mainWindow.loadFile('index.html');

  // কনফার্মেশন ডায়লগ শো করা
  ipcMain.on('show-confirm-dialog', (event) => {
    dialog.showMessageBox(mainWindow, {
      type: 'question',
      buttons: ['Yes', 'No'],
      title: 'Confirm',
      message: 'আপনি কি এই কাজটি করতে চান?'
    }).then(result => {
      if (result.response === 0) {
        // Yes বাটন প্রেস হলে
        event.reply('dialog-result', 'আপনি Yes বাটন চাপলেন');
      } else {
        // No বাটন প্রেস হলে
        event.reply('dialog-result', 'আপনি No বাটন চাপলেন');
      }
    }).catch(err => {
      console.log('Error:', err);
    });
  });
});

উদাহরণ: 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>Confirmation Dialog</title>
</head>
<body>
  <h1>কনফার্মেশন ডায়লগ</h1>
  <button id="showDialogBtn">কনফার্মেশন ডায়লগ শো করুন</button>
  <p id="dialogResult">কনফার্মেশন রেজাল্ট: </p>

  <script>
    const { ipcRenderer } = require('electron');

    document.getElementById('showDialogBtn').addEventListener('click', () => {
      // Main Process এ কনফার্মেশন ডায়লগ শো করার অনুরোধ পাঠানো
      ipcRenderer.send('show-confirm-dialog');
    });

    // কনফার্মেশন ডায়লগের ফলাফল গ্রহণ করা এবং UI-তে দেখানো
    ipcRenderer.on('dialog-result', (event, result) => {
      document.getElementById('dialogResult').textContent = 'কনফার্মেশন রেজাল্ট: ' + result;
    });
  </script>
</body>
</html>

এখানে:

• dialog.showMessageBox() ব্যবহার করে কনফার্মেশন ডায়লগ দেখানো হয়।
• ব্যবহারকারী "Yes" বা "No" বাটনে ক্লিক করলে, result.response ব্যবহার করে ফলাফল চেক করা হয় এবং Renderer Process-এ পাঠানো হয়।

৩. অন্যান্য dialog ফিচার

Electron এর dialog মডিউল আরও কিছু দরকারী ফিচার প্রদান করে, যেমন:

• showSaveDialog(): ব্যবহারকারীকে ফাইল সেভ করার ডায়লগ দেখায়।
• showOpenDialog(): ব্যবহারকারীকে ফাইল সিলেক্ট করার ডায়লগ দেখায়।
• showMessageBox(): মেসেজ বক্স বা কনফার্মেশন ডায়লগ দেখায়।

উদাহরণ: ফাইল সেভ ডায়লগ

dialog.showSaveDialog(mainWindow, {
  defaultPath: 'example.txt'
}).then(result => {
  if (!result.canceled) {
    console.log('ফাইল সেভ করা হয়েছে:', result.filePath);
  }
}).catch(err => {
  console.log('Error:', err);
});

সারাংশ

• ফাইল সিলেক্টর ডায়লগ তৈরি করতে dialog.showOpenDialog() ব্যবহার করা হয়।
• কনফার্মেশন ডায়লগ তৈরি করতে dialog.showMessageBox() ব্যবহার করা হয়।
• Electron এর dialog মডিউল ব্যবহার করে ফাইল সিলেকশন, সেভ, এবং কনফার্মেশন ডায়লগ তৈরি করা সহজ।
• IPC (Inter-Process Communication) ব্যবহারের মাধ্যমে Renderer Process থেকে Main Process-এ ডায়লগ শো করার অনুরোধ পাঠানো হয়।

এই বৈশিষ্ট্যগুলো দিয়ে আপনি আপনার Electron অ্যাপ্লিকেশনকে আরো ব্যবহারকারী বান্ধব এবং ইন্টারঅ্যাকটিভ করতে পারেন।