BrowserWindow তৈরি এবং কনফিগার করা

BrowserWindow হলো Electron অ্যাপ্লিকেশনের মূল উপাদান যা একটি ডেস্কটপ উইন্ডো তৈরি এবং প্রদর্শন করতে ব্যবহৃত হয়। এটি ব্যবহারকারীর ইন্টারফেস রেন্ডার করে এবং Renderer Process এর মাধ্যমে ইউজার ইন্টারঅ্যাকশন পরিচালনা করে। BrowserWindow তৈরি করার সময় এর কনফিগারেশন অনেক গুরুত্বপূর্ণ কারণ এটি অ্যাপ্লিকেশনের কার্যকারিতা, পারফরম্যান্স এবং ইউজার এক্সপেরিয়েন্সে প্রভাব ফেলে।

BrowserWindow তৈরি

BrowserWindow তৈরি করতে Main Process-এ BrowserWindow কনস্ট্রাক্টর ব্যবহার করা হয়।

উদাহরণ:

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

let mainWindow;

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

  // অ্যাপের মূল HTML ফাইল লোড করা
  mainWindow.loadFile('index.html');
});

এখানে:

• width এবং height: উইন্ডোর আকার নির্ধারণ করে।
• webPreferences.nodeIntegration: Renderer Process এ Node.js ব্যবহারের সক্ষমতা নিয়ন্ত্রণ করে।

BrowserWindow কনফিগারেশন অপশনসমূহ

BrowserWindow এর বিভিন্ন কনফিগারেশন অপশন ব্যবহার করে আপনি উইন্ডোর উপস্থিতি এবং কার্যকলাপ কাস্টমাইজ করতে পারেন।

সাধারণ কনফিগারেশন অপশনসমূহ

1. width এবং height:
   • উইন্ডোর আকার নির্ধারণ করে।
2. minWidth এবং minHeight:
   • উইন্ডো মিনিমাম আকার নির্ধারণ করে।
3. maxWidth এবং maxHeight:
   • উইন্ডোর সর্বাধিক আকার নির্ধারণ করে।
4. frame:
   • উইন্ডোতে সিস্টেম ডিফল্ট ফ্রেম (বর্ডার এবং শিরোনাম বার) দেখাবে কিনা সেটি নিয়ন্ত্রণ করে। ডিফল্ট হল true (অর্থাৎ ফ্রেম থাকবে)। যদি false দেওয়া হয়, তবে কাস্টম ফ্রেম থাকবে।
5. title:
   • উইন্ডোর শিরোনাম নির্ধারণ করে।
6. icon:
   • উইন্ডোর আইকন নির্ধারণ করে।
7. resizable:
   • উইন্ডোটি রিসাইজ করা যাবে কিনা তা নির্ধারণ করে।
8. alwaysOnTop:
   • উইন্ডোটি সর্বদা অন্য উইন্ডোগুলোর উপরে থাকবে কি না তা নির্ধারণ করে।
9. fullscreen:
   • উইন্ডোটি পূর্ণ পর্দায় খুলবে কি না তা নিয়ন্ত্রণ করে।
10. show:
    • উইন্ডোটি লোড হওয়ার পর স্বয়ংক্রিয়ভাবে দেখানোর জন্য।

উদাহরণ: বিস্তারিত কনফিগারেশন

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

let mainWindow;

app.on('ready', () => {
  mainWindow = new BrowserWindow({
    width: 1024,
    height: 768,
    minWidth: 800,  // মিনিমাম প্রস্থ
    minHeight: 600, // মিনিমাম উচ্চতা
    maxWidth: 1280, // সর্বাধিক প্রস্থ
    maxHeight: 1024, // সর্বাধিক উচ্চতা
    frame: false,  // কাস্টম ফ্রেম
    title: 'My Electron App', // উইন্ডোর শিরোনাম
    icon: 'path/to/icon.png', // উইন্ডোর আইকন
    resizable: true, // উইন্ডো রিসাইজযোগ্য
    alwaysOnTop: true, // সর্বদা উপরে থাকবে
    fullscreen: false, // পূর্ণ পর্দায় নয়
    show: false, // উইন্ডো লোড হওয়ার পর স্বয়ংক্রিয়ভাবে দেখানো হবে না
  });

  // উইন্ডো লোড হওয়ার পর শো হবে
  mainWindow.once('ready-to-show', () => {
    mainWindow.show();
  });

  // অ্যাপের মূল HTML ফাইল লোড করা
  mainWindow.loadFile('index.html');
});

BrowserWindow কনফিগারেশন অপশনগুলির বিস্তারিত ব্যাখ্যা

• width এবং height: উইন্ডোটির প্রাথমিক আকার নির্ধারণ করে।
• minWidth এবং minHeight: উইন্ডোটি রিসাইজ করার সময় এর কমপক্ষে এই আকারে থাকতে হবে।
• maxWidth এবং maxHeight: উইন্ডোটি রিসাইজ করার সময় এর বেশিও আকার নেয়া যাবে না।
• frame: false দিলে উইন্ডোতে কোন সিস্টেম বর্ডার বা শিরোনাম বার থাকবে না, এবং কাস্টম UI ব্যবহার করতে পারবেন।
• title: উইন্ডোর শিরোনাম বার এ প্রদর্শিত হবে।
• icon: উইন্ডোর আইকন সেট করতে ব্যবহৃত হয়।
• resizable: উইন্ডোটি রিসাইজ করা যাবে কিনা তা নির্ধারণ করে। যদি false দেওয়া হয়, উইন্ডোটি রিসাইজ করা যাবে না।
• alwaysOnTop: উইন্ডোটি অন্য যেকোনো উইন্ডোর উপরে থাকবে।
• fullscreen: উইন্ডোটি অ্যাপ চালু হলে পূর্ণ পর্দায় খুলবে না কি না, তা নির্ধারণ করে।
• show: উইন্ডোটি তৈরি হলেও সেটি তৎক্ষণাৎ প্রদর্শিত হবে না। যখন ready-to-show ইভেন্ট ট্রিগার হবে, তখন উইন্ডোটি দেখা যাবে।

উইন্ডোতে কাস্টম UI এবং WebContents পরিচালনা

WebContents হলো ব্রাউজারের কন্টেন্ট এবং UI এর প্রতিনিধিত্বকারী একটি অবজেক্ট, যা HTML, CSS, এবং JavaScript নিয়ে কাজ করে। এটি Renderer Process এর সাথে সংযুক্ত থাকে এবং ব্যবহারকারীর UI রেন্ডারিং করে।

উদাহরণ:

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

let mainWindow;

app.on('ready', () => {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true, // Renderer Process এ Node.js সমর্থন
    }
  });

  mainWindow.loadURL('https://www.example.com'); // ওয়েব পেজ লোড করা

  // WebContents এর মাধ্যমে ইভেন্ট শোনা
  mainWindow.webContents.on('did-finish-load', () => {
    console.log('Web page loaded!');
  });
});

BrowserWindow সম্পর্কিত ইভেন্টসমূহ

1. did-finish-load: ওয়েব পেজ সম্পূর্ণ লোড হলে এই ইভেন্ট ট্রিগার হয়।
2. close: উইন্ডো বন্ধ হলে এই ইভেন্ট ট্রিগার হয়।
3. resize: উইন্ডো রিসাইজ হলে এই ইভেন্ট ট্রিগার হয়।

সারাংশ

BrowserWindow হলো Electron অ্যাপ্লিকেশনের মূল উপাদান, যা ডেস্কটপ উইন্ডো তৈরি করে এবং রেন্ডারিং পরিচালনা করে। এর মাধ্যমে উইন্ডোর আকার, অবস্থান, এবং অন্যান্য বৈশিষ্ট্য কনফিগার করা সম্ভব। BrowserWindow এর বিভিন্ন কনফিগারেশন অপশন ব্যবহার করে অ্যাপ্লিকেশনকে কাস্টমাইজ করা যায় এবং ব্যবহারকারীর অভিজ্ঞতা উন্নত করা যায়।