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 তৈরি করতে পারেন।
