মডাল উইন্ডো হল এমন একটি উইন্ডো যা ব্যবহারকারীর প্রধান ইন্টারফেসের ওপর একটি ছোট অতিরিক্ত উইন্ডো হিসেবে প্রদর্শিত হয়। মডাল উইন্ডো সাধারণত অ্যাপ্লিকেশনের গুরুত্বপূর্ণ তথ্য প্রদর্শনের জন্য ব্যবহৃত হয়, যেমন সতর্কতা বার্তা, নিশ্চিতকরণ পপ-আপ ইত্যাদি।
ইলেকট্রনে মডাল উইন্ডো তৈরি করা সহজ এবং এটি BrowserWindow অবজেক্টের মাধ্যমে করা যায়। এখানে মডাল উইন্ডো তৈরি করার জন্য modal প্রপার্টি এবং অন্যান্য কনফিগারেশন ব্যবহার করা হয়।
মডাল উইন্ডো তৈরি করার উদাহরণ
১. Main Process (main.js)
এই উদাহরণে, আমরা একটি মূল উইন্ডো তৈরি করব এবং তারপরে একটি মডাল উইন্ডো তৈরি করব যা মূল উইন্ডোর ওপরে প্রদর্শিত হবে।
const { app, BrowserWindow, ipcMain } = require('electron');
let mainWindow;
let modalWindow;
app.on('ready', () => {
// প্রধান উইন্ডো তৈরি
mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
});
mainWindow.loadFile('index.html');
// মডাল উইন্ডো তৈরি
ipcMain.on('open-modal', () => {
modalWindow = new BrowserWindow({
parent: mainWindow, // মডাল উইন্ডোটি মূল উইন্ডোর ওপর প্রদর্শিত হবে
modal: true, // উইন্ডোটিকে মডাল হিসেবে চিহ্নিত করা
show: false, // উইন্ডো তৈরি হওয়ার পর তা প্রদর্শিত হবে না
width: 400,
height: 200,
resizable: false,
webPreferences: {
nodeIntegration: true
}
});
modalWindow.loadFile('modal.html');
// উইন্ডো লোড হওয়া পর প্রদর্শন করা
modalWindow.once('ready-to-show', () => {
modalWindow.show();
});
// মডাল উইন্ডো বন্ধ হলে
modalWindow.on('closed', () => {
modalWindow = null;
});
});
});
২. Main HTML (index.html)
এখানে, একটি বাটন দেওয়া আছে যা ক্লিক করলে মডাল উইন্ডোটি খোলা হবে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Electron Main Window</title>
</head>
<body>
<h1>এটি প্রধান উইন্ডো</h1>
<button id="openModalBtn">মডাল উইন্ডো খুলুন</button>
<script>
const { ipcRenderer } = require('electron');
document.getElementById('openModalBtn').addEventListener('click', () => {
// মডাল উইন্ডো খোলার জন্য Main Process এ মেসেজ পাঠানো
ipcRenderer.send('open-modal');
});
</script>
</body>
</html>
৩. Modal HTML (modal.html)
এটি মডাল উইন্ডোর কনটেন্ট। মডাল উইন্ডোতে একটি বার্তা এবং একটি ক্লোজ বাটন থাকবে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modal Window</title>
</head>
<body>
<h1>এটি একটি মডাল উইন্ডো!</h1>
<button id="closeModalBtn">বন্ধ করুন</button>
<script>
const { remote } = require('electron');
document.getElementById('closeModalBtn').addEventListener('click', () => {
// মডাল উইন্ডো বন্ধ করা
remote.getCurrentWindow().close();
});
</script>
</body>
</html>
গুরুত্বপূর্ণ কনফিগারেশন পয়েন্ট
parent: মডাল উইন্ডোটি যেটি মূল উইন্ডোর উপর প্রদর্শিত হবে, সেটিparentপ্রপার্টি দিয়ে উল্লেখ করতে হয়।modal: true: এই প্রপার্টিটি উইন্ডোকে মডাল হিসেবে চিহ্নিত করে, যা মূল উইন্ডো বন্ধ না হওয়া পর্যন্ত ব্যবহারকারীর অন্য কোনো উইন্ডোতে প্রবেশ করতে দেয় না।show: false: উইন্ডো তৈরি হওয়া পর তা স্বয়ংক্রিয়ভাবে প্রদর্শিত হবে না।ready-to-showইভেন্ট ব্যবহার করে উইন্ডোটি প্রদর্শিত হবে।resizable: false: মডাল উইন্ডোকে রিসাইজ করা যাবে না এমন কনফিগারেশন।
মডাল উইন্ডো বন্ধ করা
মডাল উইন্ডো বন্ধ করার জন্য, আপনি close() মেথড ব্যবহার করতে পারেন। আপনি remote মডিউল ব্যবহার করে মডাল উইন্ডোটি বন্ধ করতে পারেন।
document.getElementById('closeModalBtn').addEventListener('click', () => {
remote.getCurrentWindow().close();
});
সারাংশ
Electron অ্যাপ্লিকেশনে মডাল উইন্ডো তৈরি করা সহজ এবং এটি BrowserWindow অবজেক্টের মাধ্যমে করা হয়। মডাল উইন্ডো তৈরি করতে modal: true কনফিগারেশন ব্যবহার করা হয়, যা উইন্ডোটি মূল উইন্ডোর ওপর প্রদর্শিত হবে এবং ব্যবহারকারীর অন্য উইন্ডোতে প্রবেশ করতে বাধা দিবে। এই উইন্ডো সাধারণত সতর্কতা বার্তা বা গুরুত্বপূর্ণ তথ্য প্রদর্শনের জন্য ব্যবহার করা হয়।
Read more
