Electron অ্যাপ্লিকেশন তৈরি করতে গেলে অনেক সময় একাধিক উইন্ডো ব্যবহার করা হয়, যেখানে একটি উইন্ডো Parent Window এবং অন্যটি Child Window হিসেবে কাজ করে। Parent এবং Child Window-এর মধ্যে সম্পর্ক এবং তাদের ব্যবহারের পদ্ধতি অনেক গুরুত্বপূর্ণ, বিশেষ করে যখন আপনি একাধিক উইন্ডো তৈরি এবং পরিচালনা করতে চান।
Parent Window এবং Child Window কি?
- Parent Window: এটি মূল বা পিতামাতার উইন্ডো, যা অ্যাপ্লিকেশনের প্রধান উইন্ডো হিসেবে কাজ করে। সাধারণত, এটি অ্যাপ্লিকেশনের UI-র মূল অংশ এবং অন্যান্য উইন্ডো বা ডায়ালগ বক্স এর জন্য রেফারেন্স হিসেবে কাজ করে।
- Child Window: এটি একটি সন্তান উইন্ডো, যা Parent Window থেকে তৈরি হয় এবং সাধারণত Parent Window এর উপর নির্ভরশীল থাকে। Child Window সাধারণত ডায়ালগ, পপআপ, বা অতিরিক্ত তথ্য প্রদর্শনের জন্য ব্যবহার করা হয়।
Parent এবং Child Window সম্পর্কের বৈশিষ্ট্য
- উইন্ডো সম্পর্ক: Parent Window এবং Child Window একে অপরের সাথে যোগাযোগ করতে পারে। Child Window মূলত Parent Window থেকে ট্রিগার করা হয় এবং Parent Window-এ কোন কার্যক্রম পরিবর্তিত হলে Child Window আপডেট হতে পারে।
- UI যোগাযোগ: Parent Window থেকে Child Window এর মাধ্যমে বিভিন্ন তথ্য বা ডেটা প্রদর্শন করা যেতে পারে, যেমন কোনো নির্দিষ্ট ফর্ম পূরণের পর বা কোনো কনফিগারেশন সেটিংসে পরিবর্তন হলে।
- তালিকা বা নির্দিষ্ট বিষয়াবলী: Child Window সাধারণত Parent Window এর সাথে যোগাযোগ করতে থাকে, যেমন কোনো ইভেন্টের সময় Parent Window থেকে কিছু ডেটা নিয়ে Child Window তে প্রদর্শন করা।
- অবস্থান এবং সাইজ: Child Window-এ সাধারণত Parent Window এর তুলনায় ছোট সাইজ, বিভিন্ন শৈলী বা পপআপ হতে পারে, এবং Parent Window এর উপর বা পাশে অবস্থান করতে পারে।
Parent এবং Child Window তৈরি করা
এখানে দেখানো হচ্ছে কিভাবে একটি Parent Window থেকে একটি Child Window তৈরি করা হয়।
উদাহরণ: Parent Window থেকে Child Window তৈরি করা
const { app, BrowserWindow } = require('electron');
let mainWindow;
let childWindow;
function createMainWindow() {
mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
},
});
mainWindow.loadFile('index.html');
}
function createChildWindow() {
childWindow = new BrowserWindow({
width: 400,
height: 300,
parent: mainWindow, // Parent Window এর রেফারেন্স
modal: true, // Modal উইন্ডো তৈরি
show: false, // প্রথমে Child Window না দেখানো
webPreferences: {
nodeIntegration: true,
},
});
childWindow.loadFile('child.html');
childWindow.once('ready-to-show', () => {
childWindow.show(); // Child Window যখন প্রস্তুত তখন এটি প্রদর্শন করা হবে
});
}
app.whenReady().then(() => {
createMainWindow();
// Parent Window থেকে Child Window তৈরি করার জন্য একটি ইভেন্ট
mainWindow.webContents.once('did-finish-load', () => {
createChildWindow();
});
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createMainWindow();
}
});
});
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
ব্যাখ্যা:
- Parent Window (
mainWindow) এবং Child Window (childWindow) তৈরি করা হয়েছে। - Parent Window থেকে Child Window তৈরি করার সময়
parent: mainWindowব্যবহার করা হয়েছে, যা Child Window কে Parent Window এর উপর নির্ভরশীল করে তোলে। - modal প্যারামিটার ব্যবহার করা হয়েছে, যার ফলে Child Window শুধুমাত্র Parent Window এর মাধ্যমে অ্যাক্সেস করা যাবে এবং এটি অ্যাপের অন্যান্য অংশ থেকে আলাদা হয়ে যাবে।
Parent এবং Child Window এর মধ্যে যোগাযোগ (IPC)
Parent Window এবং Child Window এর মধ্যে তথ্য আদান-প্রদান করার জন্য IPC (Inter-Process Communication) ব্যবহার করা হয়। এটি main process-এর মধ্যে যোগাযোগের জন্য ব্যবহৃত হয়।
উদাহরণ: Parent Window থেকে Child Window এ ডেটা পাঠানো
Parent Window (mainWindow) থেকে Child Window (childWindow) এ তথ্য পাঠানো এবং তা রিসিভ করা।
১. Main Process (main.js)
const { ipcMain } = require('electron');
// Child Window থেকে তথ্য গ্রহণ
ipcMain.on('data-from-child', (event, data) => {
console.log('Child Window থেকে ডেটা:', data);
});
২. Child Window (child.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Child Window</title>
</head>
<body>
<h1>Child Window</h1>
<button id="sendDataBtn">Parent Window এ ডেটা পাঠাও</button>
<script>
const { ipcRenderer } = require('electron');
document.getElementById('sendDataBtn').addEventListener('click', () => {
// Parent Window এ ডেটা পাঠানো
ipcRenderer.send('data-from-child', 'এই ডেটা Child Window থেকে এসেছে!');
});
</script>
</body>
</html>
- ipcRenderer.send() ব্যবহার করে Child Window থেকে Parent Window-এ ডেটা পাঠানো হয়েছে।
- ipcMain.on() ব্যবহার করে Parent Window সেই ডেটা গ্রহণ করছে।
Parent এবং Child Window সম্পর্কের উপকারিতা
- ডায়ালগ এবং পপআপ: Parent Window থেকে Child Window তৈরি করে ডায়ালগ বক্স বা পপআপ হিসেবে অতিরিক্ত কার্যকলাপ পরিচালনা করা যেতে পারে।
- মডাল উইন্ডো: Child Window কে modal উইন্ডো হিসেবে তৈরি করা হলে, এটি Parent Window এর উপর নিষিদ্ধভাবে অবস্থান করবে।
- তথ্য ভাগাভাগি: Parent এবং Child Window একে অপরের সাথে ডেটা শেয়ার করতে পারে, যা ইউজার ইন্টারঅ্যাকশন এবং ফাংশনালিটি বাড়ায়।
সারাংশ
Parent এবং Child Window সম্পর্ক ব্যবহারে একটি অ্যাপ্লিকেশনকে আরও কার্যকরী এবং ইন্টারেক্টিভ করা যায়। Parent Window সাধারণত মূল অ্যাপ্লিকেশন উইন্ডো হিসেবে কাজ করে, যেখানে Child Window ব্যবহারকারীর জন্য অতিরিক্ত ইনফরমেশন বা কার্যক্রম প্রদান করে। Parent এবং Child Window এর মধ্যে IPC ব্যবহারের মাধ্যমে তথ্য আদান-প্রদান করা সম্ভব, যা অ্যাপ্লিকেশন ডেভেলপমেন্টকে আরও নমনীয় এবং শক্তিশালী করে তোলে।
Content added By
Read more
