Electron এ Window Management

Electron অ্যাপ্লিকেশনে Window Management গুরুত্বপূর্ণ একটি বিষয়, যেহেতু এটি অ্যাপ্লিকেশন উইন্ডোগুলোর তৈরি, নিয়ন্ত্রণ এবং ব্যবস্থাপনা সংক্রান্ত সকল কাজ করে। Main Process-এর মাধ্যমে Electron অ্যাপ্লিকেশনে BrowserWindow তৈরি, ম্যানেজ এবং কনফিগার করা হয়।

এখানে আমরা দেখবো কিভাবে Electron-এ উইন্ডো তৈরি, উইন্ডো নিয়ন্ত্রণ, উইন্ডো অবস্থান এবং আকার সেট করা হয়।

১. BrowserWindow তৈরি করা

Electron অ্যাপ্লিকেশন উইন্ডো তৈরি করতে BrowserWindow কনস্ট্রাক্টর ব্যবহার করা হয়। এটি একটি নতুন উইন্ডো তৈরি করে, যা Renderer Process (HTML, CSS, JavaScript) রেন্ডার করে।

উদাহরণ: একটি সাধারন উইন্ডো তৈরি করা

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

let mainWindow;

app.on('ready', () => {
  mainWindow = new BrowserWindow({
    width: 800,  // উইন্ডোর প্রস্থ
    height: 600, // উইন্ডোর উচ্চতা
    webPreferences: {
      nodeIntegration: true,  // Node.js ইন্টিগ্রেশন সক্ষম করা
    },
  });

  // index.html ফাইল লোড করা
  mainWindow.loadFile('index.html');
});

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

এই কোডের মাধ্যমে একটি 800x600 আকারের উইন্ডো তৈরি করা হচ্ছে, এবং এতে Node.js integration সক্রিয় করা হয়েছে।

২. উইন্ডোর আকার এবং অবস্থান পরিবর্তন করা

BrowserWindow এর মাধ্যমে উইন্ডোর আকার এবং অবস্থান কনফিগার করা যায়। আপনি চাইলে উইন্ডোর আকার এবং অবস্থান প্রোগ্রামmatically পরিবর্তন করতে পারেন।

উদাহরণ: উইন্ডোর আকার এবং অবস্থান পরিবর্তন

mainWindow.setSize(1024, 768); // উইন্ডোর আকার 1024x768
mainWindow.setPosition(200, 100); // উইন্ডোর অবস্থান (X: 200, Y: 100)

এছাড়া, আপনি উইন্ডোকে সর্বাধিক (maximize), সঙ্কুচিত (minimize), বা পুনরায় অবস্থানে আনা (restore) করতে পারেন:

উদাহরণ: উইন্ডো নিয়ন্ত্রণ

mainWindow.maximize();  // উইন্ডো সর্বাধিক করা
mainWindow.minimize();  // উইন্ডো সঙ্কুচিত করা
mainWindow.restore();   // উইন্ডো পুনরায় পূর্বাবস্থায় আনা

৩. ফুলস্ক্রীন মোড এবং শীর্ষবার (Title Bar) নিয়ন্ত্রণ

আপনি চাইলে Electron অ্যাপ্লিকেশনটি ফুলস্ক্রীন মোডে রাখতে পারেন অথবা উইন্ডোর শীর্ষবার নিয়ন্ত্রণ করতে পারেন।

উদাহরণ: উইন্ডোকে ফুলস্ক্রীনে রাখা

mainWindow.setFullScreen(true); // উইন্ডোকে ফুলস্ক্রীন মোডে নিয়ে যাওয়া

উদাহরণ: শীর্ষবার (Title Bar) বন্ধ করা

mainWindow.setMenuBarVisibility(false);  // শীর্ষবার লুকানো

৪. ডায়ালগ এবং পপ-আপ উইন্ডো তৈরি

Electron অ্যাপ্লিকেশনে ডায়ালগ বক্স এবং পপ-আপ উইন্ডো তৈরি করা সহজ। Dialog মডিউল ব্যবহার করে আপনি Open File, Save File, Message Box ইত্যাদি তৈরি করতে পারেন।

উদাহরণ: একটি Message Box তৈরি করা

const { dialog } = require('electron');

dialog.showMessageBox(mainWindow, {
  type: 'info',
  title: 'Message Box',
  message: 'This is a message box!',
  buttons: ['OK']
});

এটি একটি সাধারণ message box তৈরি করবে যা OK বাটনসহ একটি তথ্য মেসেজ দেখাবে।

৫. উইন্ডো ফোকাস এবং ব্লুর নিয়ন্ত্রণ

Electron অ্যাপ্লিকেশন উইন্ডোকে focus এবং blur করা যায়, যেমন একটি অ্যাপ্লিকেশন চলাকালীন আপনি অন্যান্য উইন্ডোতে চলে গেলে, মূল উইন্ডোটি আবার focus করতে পারেন।

উদাহরণ: উইন্ডোকে focus বা blur করা

mainWindow.focus(); // উইন্ডোতে focus করা
mainWindow.blur();  // উইন্ডো থেকে focus সরিয়ে নেয়া

৬. Multiple Windows (একাধিক উইন্ডো)

Electron অ্যাপ্লিকেশনে একাধিক উইন্ডো তৈরি করা সম্ভব। আপনি চাইলে একাধিক BrowserWindow তৈরি করতে পারেন, এবং তাদের মধ্যে আলাদা কাজ পরিচালনা করতে পারেন।

উদাহরণ: একাধিক উইন্ডো তৈরি করা

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

let mainWindow;
let secondWindow;

app.on('ready', () => {
  // প্রথম উইন্ডো
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
  });
  mainWindow.loadFile('index.html');

  // দ্বিতীয় উইন্ডো
  secondWindow = new BrowserWindow({
    width: 400,
    height: 300,
  });
  secondWindow.loadFile('second.html');
});

এই কোডের মাধ্যমে একটি প্রধান উইন্ডো এবং একটি দ্বিতীয় উইন্ডো তৈরি করা হচ্ছে।

৭. Event Listeners for Window

আপনি উইন্ডোর বিভিন্ন event যেমন resize, move, close ইত্যাদি ট্র্যাক করতে পারেন।

উদাহরণ: উইন্ডো resize এবং move ইভেন্ট ট্র্যাক করা

mainWindow.on('resize', () => {
  const [width, height] = mainWindow.getSize();
  console.log(`New size: ${width}x${height}`);
});

mainWindow.on('move', () => {
  const [x, y] = mainWindow.getPosition();
  console.log(`New position: ${x}, ${y}`);
});

সারাংশ

• BrowserWindow ব্যবহার করে Electron অ্যাপ্লিকেশনে উইন্ডো তৈরি করা হয়।
• উইন্ডোর আকার, অবস্থান, ফুলস্ক্রীন মোড এবং শীর্ষবার নিয়ন্ত্রণের জন্য বিভিন্ন ফাংশন রয়েছে।
• একাধিক উইন্ডো তৈরি এবং তাদের মধ্যে যোগাযোগ পরিচালনার জন্য BrowserWindow এর প্রতিটি উদাহরণ আলাদা প্রক্রিয়া হিসেবে কাজ করে।
• Dialog মডিউল ব্যবহার করে ডায়ালগ বক্স এবং পপ-আপ উইন্ডো তৈরি করা যায়।
• উইন্ডো ইভেন্ট যেমন resize, move, focus এবং blur ট্র্যাক করা সম্ভব।

এভাবে Electron অ্যাপ্লিকেশনে উইন্ডো ম্যানেজমেন্ট সহজে করা যায় এবং ইউজারের অভিজ্ঞতা উন্নত করা সম্ভব।

ইলেকট্রন অ্যাপ্লিকেশনগুলিতে একাধিক উইন্ডো তৈরি এবং পরিচালনা করা সহজ। এটি একটি সাধারণ প্রক্রিয়া যেখানে 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 ব্যবহার করে তথ্য আদান-প্রদান করতে পারেন। এটি আপনাকে একটি অ্যাপ্লিকেশন তৈরি করতে সাহায্য করে যেখানে একাধিক উইন্ডো বা পপ-আপ উইন্ডো থাকে, যেমন মডাল ডায়ালগ উইন্ডো, সেটিংস প্যানেল ইত্যাদি।

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 সম্পর্কের বৈশিষ্ট্য

1. উইন্ডো সম্পর্ক: Parent Window এবং Child Window একে অপরের সাথে যোগাযোগ করতে পারে। Child Window মূলত Parent Window থেকে ট্রিগার করা হয় এবং Parent Window-এ কোন কার্যক্রম পরিবর্তিত হলে Child Window আপডেট হতে পারে।
2. UI যোগাযোগ: Parent Window থেকে Child Window এর মাধ্যমে বিভিন্ন তথ্য বা ডেটা প্রদর্শন করা যেতে পারে, যেমন কোনো নির্দিষ্ট ফর্ম পূরণের পর বা কোনো কনফিগারেশন সেটিংসে পরিবর্তন হলে।
3. তালিকা বা নির্দিষ্ট বিষয়াবলী: Child Window সাধারণত Parent Window এর সাথে যোগাযোগ করতে থাকে, যেমন কোনো ইভেন্টের সময় Parent Window থেকে কিছু ডেটা নিয়ে Child Window তে প্রদর্শন করা।
4. অবস্থান এবং সাইজ: 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 সম্পর্কের উপকারিতা

1. ডায়ালগ এবং পপআপ: Parent Window থেকে Child Window তৈরি করে ডায়ালগ বক্স বা পপআপ হিসেবে অতিরিক্ত কার্যকলাপ পরিচালনা করা যেতে পারে।
2. মডাল উইন্ডো: Child Window কে modal উইন্ডো হিসেবে তৈরি করা হলে, এটি Parent Window এর উপর নিষিদ্ধভাবে অবস্থান করবে।
3. তথ্য ভাগাভাগি: Parent এবং Child Window একে অপরের সাথে ডেটা শেয়ার করতে পারে, যা ইউজার ইন্টারঅ্যাকশন এবং ফাংশনালিটি বাড়ায়।

সারাংশ

Parent এবং Child Window সম্পর্ক ব্যবহারে একটি অ্যাপ্লিকেশনকে আরও কার্যকরী এবং ইন্টারেক্টিভ করা যায়। Parent Window সাধারণত মূল অ্যাপ্লিকেশন উইন্ডো হিসেবে কাজ করে, যেখানে Child Window ব্যবহারকারীর জন্য অতিরিক্ত ইনফরমেশন বা কার্যক্রম প্রদান করে। Parent এবং Child Window এর মধ্যে IPC ব্যবহারের মাধ্যমে তথ্য আদান-প্রদান করা সম্ভব, যা অ্যাপ্লিকেশন ডেভেলপমেন্টকে আরও নমনীয় এবং শক্তিশালী করে তোলে।

মডাল উইন্ডো হল এমন একটি উইন্ডো যা ব্যবহারকারীর প্রধান ইন্টারফেসের ওপর একটি ছোট অতিরিক্ত উইন্ডো হিসেবে প্রদর্শিত হয়। মডাল উইন্ডো সাধারণত অ্যাপ্লিকেশনের গুরুত্বপূর্ণ তথ্য প্রদর্শনের জন্য ব্যবহৃত হয়, যেমন সতর্কতা বার্তা, নিশ্চিতকরণ পপ-আপ ইত্যাদি।

ইলেকট্রনে মডাল উইন্ডো তৈরি করা সহজ এবং এটি 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>

গুরুত্বপূর্ণ কনফিগারেশন পয়েন্ট

1. parent: মডাল উইন্ডোটি যেটি মূল উইন্ডোর উপর প্রদর্শিত হবে, সেটি parent প্রপার্টি দিয়ে উল্লেখ করতে হয়।
2. modal: true: এই প্রপার্টিটি উইন্ডোকে মডাল হিসেবে চিহ্নিত করে, যা মূল উইন্ডো বন্ধ না হওয়া পর্যন্ত ব্যবহারকারীর অন্য কোনো উইন্ডোতে প্রবেশ করতে দেয় না।
3. show: false: উইন্ডো তৈরি হওয়া পর তা স্বয়ংক্রিয়ভাবে প্রদর্শিত হবে না। ready-to-show ইভেন্ট ব্যবহার করে উইন্ডোটি প্রদর্শিত হবে।
4. resizable: false: মডাল উইন্ডোকে রিসাইজ করা যাবে না এমন কনফিগারেশন।

মডাল উইন্ডো বন্ধ করা

মডাল উইন্ডো বন্ধ করার জন্য, আপনি close() মেথড ব্যবহার করতে পারেন। আপনি remote মডিউল ব্যবহার করে মডাল উইন্ডোটি বন্ধ করতে পারেন।

document.getElementById('closeModalBtn').addEventListener('click', () => {
  remote.getCurrentWindow().close();
});

সারাংশ

Electron অ্যাপ্লিকেশনে মডাল উইন্ডো তৈরি করা সহজ এবং এটি BrowserWindow অবজেক্টের মাধ্যমে করা হয়। মডাল উইন্ডো তৈরি করতে modal: true কনফিগারেশন ব্যবহার করা হয়, যা উইন্ডোটি মূল উইন্ডোর ওপর প্রদর্শিত হবে এবং ব্যবহারকারীর অন্য উইন্ডোতে প্রবেশ করতে বাধা দিবে। এই উইন্ডো সাধারণত সতর্কতা বার্তা বা গুরুত্বপূর্ণ তথ্য প্রদর্শনের জন্য ব্যবহার করা হয়।

Electron অ্যাপ্লিকেশনে উইন্ডোর আকার এবং কাস্টম স্টাইল কনফিগারেশন ব্যবহার করে অ্যাপ্লিকেশনটির ইন্টারফেস সম্পূর্ণ কাস্টমাইজ করা যায়। এটি Main Process-এ BrowserWindow তৈরি করার সময় কাস্টম আকার, স্টাইল এবং অন্যান্য বৈশিষ্ট্য নির্ধারণ করে।

নিচে, Electron-এ উইন্ডোর কাস্টম স্টাইল এবং আকার কনফিগারেশন সম্পর্কে বিস্তারিত আলোচনা করা হয়েছে।

১. BrowserWindow কনফিগারেশন

BrowserWindow হলো Electron-এ অ্যাপ্লিকেশনের উইন্ডো তৈরি করার জন্য ব্যবহৃত একটি ক্লাস। এই উইন্ডোর আকার, স্টাইল এবং অন্যান্য বৈশিষ্ট্য BrowserWindow কনফিগারেশনে নির্ধারণ করা হয়।

কাস্টম উইন্ডো আকার সেট করা

কাস্টম উইন্ডো আকার সেট করতে width এবং height কনফিগারেশন ব্যবহার করা হয়।

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

let mainWindow;

app.on('ready', () => {
  mainWindow = new BrowserWindow({
    width: 1024,       // উইন্ডোর প্রস্থ
    height: 768,      // উইন্ডোর উচ্চতা
    webPreferences: {
      nodeIntegration: true,
    },
  });

  mainWindow.loadFile('index.html');
});

এই উদাহরণে, অ্যাপটি একটি উইন্ডো তৈরি করবে যার প্রস্থ 1024 পিক্সেল এবং উচ্চতা 768 পিক্সেল।

২. উইন্ডোর কাস্টম স্টাইল

Electron উইন্ডোতে কাস্টম স্টাইল প্রয়োগ করার জন্য, transparent এবং frame কনফিগারেশন ব্যবহার করা হয়। এর মাধ্যমে আপনি BrowserWindow এর স্বাভাবিক স্টাইল পরিবর্তন করতে পারেন।

কাস্টম আকারের উইন্ডো তৈরি (ট্রান্সপারেন্ট উইন্ডো)

আপনি উইন্ডোকে ট্রান্সপারেন্ট করতে পারেন, যাতে উইন্ডোর ব্যাকগ্রাউন্ড স্বচ্ছ হয়ে যায় এবং কাস্টম UI বা ডিজাইন তৈরি করা যায়।

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

let mainWindow;

app.on('ready', () => {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    transparent: true,  // উইন্ডোতে ট্রান্সপারেন্সি প্রয়োগ করা
    frame: false,       // উইন্ডোর ডিফল্ট ফ্রেম বন্ধ করা
    webPreferences: {
      nodeIntegration: true,
    },
  });

  mainWindow.loadFile('index.html');
});

• transparent: true: উইন্ডোটির ব্যাকগ্রাউন্ড স্বচ্ছ করতে এটি ব্যবহার করা হয়।
• frame: false: উইন্ডোর ডিফল্ট শিরোনাম (title bar) এবং ফ্রেম সরিয়ে দেওয়া হয়, যাতে আপনি কাস্টম শিরোনাম বার বা অন্যান্য কাস্টম স্টাইল ব্যবহার করতে পারেন।

৩. কাস্টম উইন্ডো স্টাইলের জন্য HTML এবং CSS

উইন্ডোর কাস্টম স্টাইল করতে আপনি HTML এবং CSS ব্যবহার করতে পারেন। যখন frame: false ব্যবহার করা হয়, তখন আপনাকে কাস্টম শিরোনাম এবং উইন্ডো কন্ট্রোলগুলি তৈরি করতে হবে।

কাস্টম শিরোনাম তৈরি

এখানে একটি কাস্টম শিরোনাম এবং উইন্ডো মুভমেন্টের জন্য উদাহরণ দেওয়া হলো:

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Custom Window</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      height: 100%;
      background-color: #f0f0f0;
    }

    #title-bar {
      height: 40px;
      background-color: #2c3e50;
      color: white;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 20px;
      cursor: move; /* Move the window */
    }

    #content {
      height: calc(100% - 40px);
      background-color: white;
      padding: 20px;
    }

    button {
      background-color: transparent;
      border: none;
      color: white;
      cursor: pointer;
    }

    button:hover {
      color: #3498db;
    }
  </style>
</head>
<body>
  <div id="title-bar">
    <span>My Custom Window</span>
    <button id="close-btn">X</button>
  </div>
  <div id="content">
    <h1>Welcome to My Custom Electron App</h1>
    <p>This is a custom window with no frame and transparent background.</p>
  </div>

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

    // Close window functionality
    document.getElementById('close-btn').addEventListener('click', () => {
      remote.getCurrentWindow().close();
    });
  </script>
</body>
</html>

Main Process (main.js)

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

let mainWindow;

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

  mainWindow.loadFile('index.html');
});

এখানে, #title-bar একটি কাস্টম শিরোনাম বার যা CSS দিয়ে ডিজাইন করা হয়েছে। আপনি cursor: move; ব্যবহার করে শিরোনাম বারটিকে উইন্ডো মুভমেন্টের জন্য সক্ষম করেছেন। এছাড়া, close button তৈরি করা হয়েছে যা উইন্ডো বন্ধ করতে সাহায্য করবে।

৪. অন্য উইন্ডো কনফিগারেশন

ইলেকট্রন অ্যাপ্লিকেশন উইন্ডোর আরো বিভিন্ন কনফিগারেশন করা যায় যেমন:

• minimizable: উইন্ডো মিনিমাইজ করার ক্ষমতা।
• maximizable: উইন্ডো ম্যাক্সিমাইজ করার ক্ষমতা।
• resizable: উইন্ডো আকার পরিবর্তন করা যাবে কিনা।
• fullscreen: অ্যাপের উইন্ডো পুরোপুরি পূর্ণস্ক্রীনে প্রদর্শন।

উদাহরণ:

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

let mainWindow;

app.on('ready', () => {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    minWidth: 400, // মিনিমাম প্রস্থ
    maxWidth: 1200, // ম্যাক্সিমাম প্রস্থ
    minimizable: true, // মিনিমাইজযোগ্য
    maximizable: true, // ম্যাক্সিমাইজযোগ্য
    resizable: true, // আকার পরিবর্তনযোগ্য
    fullscreenable: true, // ফুলস্ক্রীনে চলবে
    frame: true, // ডিফল্ট উইন্ডো ফ্রেম
  });

  mainWindow.loadFile('index.html');
});

সারাংশ

• BrowserWindow এর মাধ্যমে উইন্ডো কাস্টমাইজ করা হয়।
• width এবং height দিয়ে উইন্ডোর আকার নির্ধারণ করা যায়।
• transparent: true এবং frame: false দিয়ে কাস্টম উইন্ডো স্টাইল তৈরি করা যায়, যা আপনাকে কাস্টম শিরোনাম এবং ফ্রেম ছাড়া উইন্ডো তৈরি করতে সাহায্য করে।
• minimizable, maximizable, fullscreenable ইত্যাদি উইন্ডো কনফিগারেশনগুলি অ্যাপ্লিকেশনের উইন্ডো নিয়ন্ত্রণে সহায়তা করে।

এভাবে আপনি Electron অ্যাপ্লিকেশনের উইন্ডো কাস্টমাইজ করে একটি ইউনিক এবং ইন্টারেকটিভ UI তৈরি করতে পারেন।