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