ইলেকট্রন অ্যাপ্লিকেশনগুলিতে একাধিক উইন্ডো তৈরি এবং পরিচালনা করা সহজ। এটি একটি সাধারণ প্রক্রিয়া যেখানে BrowserWindow ব্যবহার করে নতুন উইন্ডো তৈরি করা হয় এবং সেই উইন্ডোগুলোর মধ্যে ইন্টারঅ্যাকশন পরিচালনা করা হয়।
একাধিক উইন্ডো তৈরি করার সময়, আপনি Main Process থেকে Renderer Process এর উইন্ডো পরিচালনা করতে পারবেন এবং প্রয়োজনীয় যোগাযোগ বা ডেটা আদান-প্রদানও করতে পারবেন।
১. একাধিক উইন্ডো তৈরি
এটি করার জন্য, BrowserWindow ব্যবহার করতে হবে যা একটি নতুন উইন্ডো তৈরি করে এবং loadFile() বা loadURL() মেথডের মাধ্যমে নির্দিষ্ট HTML ফাইল লোড করা হয়।
উদাহরণ: একাধিক উইন্ডো তৈরি
const { app, BrowserWindow } = require('electron');
let mainWindow;
let secondWindow;
app.on('ready', () => {
// প্রথম উইন্ডো তৈরি
mainWindow = new BrowserWindow({
width: 800,
height: 600,
title: 'Main Window',
});
mainWindow.loadFile('index.html');
// দ্বিতীয় উইন্ডো তৈরি
secondWindow = new BrowserWindow({
width: 600,
height: 400,
title: 'Second Window',
parent: mainWindow, // প্রথম উইন্ডোর উপর ভিত্তি করে দ্বিতীয় উইন্ডো তৈরি
});
secondWindow.loadFile('second.html');
});
parent: দ্বিতীয় উইন্ডোকে প্রথম উইন্ডোর উপর ভিত্তি করে তৈরি করার জন্যparentপ্যারামিটার ব্যবহার করা হয়। এটি পপ-আপ উইন্ডো বা ডায়ালগ উইন্ডো তৈরি করতে সহায়ক।
২. উইন্ডো বন্ধ করা
যখন আপনি একাধিক উইন্ডো তৈরি করেন, তখন নিশ্চিত করতে হবে যে যখন উইন্ডো বন্ধ হয়, তখন অ্যাপটি সঠিকভাবে কাজ করবে।
উদাহরণ: উইন্ডো বন্ধের ইভেন্ট
const { app, BrowserWindow } = require('electron');
let mainWindow;
let secondWindow;
app.on('ready', () => {
// প্রথম উইন্ডো তৈরি
mainWindow = new BrowserWindow({
width: 800,
height: 600,
title: 'Main Window',
});
mainWindow.loadFile('index.html');
// দ্বিতীয় উইন্ডো তৈরি
secondWindow = new BrowserWindow({
width: 600,
height: 400,
title: 'Second Window',
parent: mainWindow,
});
secondWindow.loadFile('second.html');
// উইন্ডো বন্ধ হলে অ্যাপ বন্ধ করা
mainWindow.on('closed', () => {
mainWindow = null;
});
secondWindow.on('closed', () => {
secondWindow = null;
});
});
// অ্যাপ্লিকেশন বন্ধ হলে
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
on('closed'): যখন একটি উইন্ডো বন্ধ হয়, তখন উইন্ডোটির রেফারেন্সটি মুছে ফেলা হয় যাতে মেমোরি লিক না হয়।
৩. উইন্ডো মধ্যে তথ্য আদান-প্রদান
একাধিক উইন্ডো তৈরি করার সময়, আপনি IPC (Inter-Process Communication) ব্যবহার করে উইন্ডোগুলির মধ্যে তথ্য আদান-প্রদান করতে পারেন।
উদাহরণ: উইন্ডো মধ্যে তথ্য পাঠানো
Main Process (main.js):
const { app, BrowserWindow, ipcMain } = require('electron');
let mainWindow;
let secondWindow;
app.on('ready', () => {
// প্রথম উইন্ডো তৈরি
mainWindow = new BrowserWindow({
width: 800,
height: 600,
title: 'Main Window',
});
mainWindow.loadFile('index.html');
// দ্বিতীয় উইন্ডো তৈরি
secondWindow = new BrowserWindow({
width: 600,
height: 400,
title: 'Second Window',
parent: mainWindow,
});
secondWindow.loadFile('second.html');
// উইন্ডো ২ থেকে প্রথম উইন্ডোতে মেসেজ পাঠানো
ipcMain.on('message-to-main', (event, message) => {
console.log('Message from second window:', message);
mainWindow.webContents.send('message-from-main', 'Hello from main window!');
});
});
// উইন্ডো বন্ধ হলে
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
Renderer Process (second.html):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Second Window</title>
</head>
<body>
<h1>Second Window</h1>
<button id="sendMessage">Send Message to Main Window</button>
<script>
const { ipcRenderer } = require('electron');
// Main Process-এ মেসেজ পাঠানো
document.getElementById('sendMessage').addEventListener('click', () => {
ipcRenderer.send('message-to-main', 'Hi from second window!');
});
// Main Window থেকে সাড়া গ্রহণ
ipcRenderer.on('message-from-main', (event, message) => {
alert(message);
});
</script>
</body>
</html>
ipcRenderer.send(): Renderer Process থেকে Main Process এ মেসেজ পাঠানো।ipcMain.on(): Main Process থেকে মেসেজ গ্রহণ এবং প্রয়োজনীয় কার্যক্রম সম্পাদন করা।webContents.send(): Main Process থেকে Renderer Process এ মেসেজ পাঠানো।
৪. ডাইনামিক উইন্ডো সাইজ এবং বৈশিষ্ট্য
আপনি উইন্ডোর সাইজ, অবস্থান এবং অন্যান্য বৈশিষ্ট্যগুলি ডাইনামিকভাবে পরিবর্তন করতে পারেন।
উদাহরণ: উইন্ডো সাইজ পরিবর্তন
let dynamicWindow = new BrowserWindow({
width: 500,
height: 400,
minWidth: 300,
minHeight: 300,
title: 'Dynamic Window'
});
dynamicWindow.loadFile('dynamic.html');
// উইন্ডো সাইজ পরিবর্তন
dynamicWindow.setSize(800, 600);
dynamicWindow.setBounds({ x: 200, y: 100, width: 1024, height: 768 });
setSize(): উইন্ডোর সাইজ পরিবর্তন করা।setBounds(): উইন্ডোর অবস্থান এবং সাইজ পরিবর্তন করা।
সারাংশ
একাধিক উইন্ডো তৈরি এবং পরিচালনা ইলেকট্রনে একটি সাধারণ এবং শক্তিশালী ফিচার। এটি BrowserWindow ব্যবহার করে উইন্ডো তৈরি এবং নিয়ন্ত্রণ করা সম্ভব করে। আপনি Main Process থেকে একাধিক উইন্ডো তৈরি করতে পারেন এবং সেই উইন্ডোগুলির মধ্যে IPC ব্যবহার করে তথ্য আদান-প্রদান করতে পারেন। এটি আপনাকে একটি অ্যাপ্লিকেশন তৈরি করতে সাহায্য করে যেখানে একাধিক উইন্ডো বা পপ-আপ উইন্ডো থাকে, যেমন মডাল ডায়ালগ উইন্ডো, সেটিংস প্যানেল ইত্যাদি।
Read more
