البرمجة

تخصيص نافذة Electron بدون حاشية في Windows

عندما نتحدث عن تطوير تطبيقات سطح المكتب باستخدام Electron، يأتي الأمر بتحدياته واحتياجاته الفريدة، ومن بين هذه التحديات هي إمكانية إنشاء نافذة بدون حاشية (Frameless Window) في نظام التشغيل Windows وفي الوقت نفسه الاحتفاظ بإمكانية السيطرة عليها بواسطة الأزرار القياسية للنوافذ.

مقالات ذات صلة

في الأصل، يمكنك تحقيق هذا الهدف في نظام التشغيل macOS باستخدام خاصية titleBarStyle وتعيينها إلى hidden-inset. ومع ذلك، هذه الخاصية غير متاحة على نظام التشغيل Windows. لكن هناك طرق أخرى لتحقيق هذا الهدف.

أحد الطرق الممكنة هي استخدام وحدة “custom-electron-titlebar” التي توفر واجهة برمجية لإنشاء شريط عنوان خاص يمكن التحكم فيه بشكل كامل. يمكنك دمج هذه الوحدة في مشروعك وتخصيصها وفقًا لاحتياجات التصميم الخاصة بك.

للقيام بذلك، يمكنك اتباع الخطوات التالية:

  1. قم بتثبيت وحدة custom-electron-titlebar باستخدام الأمر التالي:

    vbnet
    npm install custom-electron-titlebar

  2. في ملف الـ HTML الخاص بتطبيقك، يمكنك استيراد الوحدة واستخدامها كما يلي:

    html
    html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Your Electron Apptitle>
head>
<body>
    <script>
        const customTitlebar = require('custom-electron-titlebar');
        const titlebar = new customTitlebar.Titlebar({
            backgroundColor: customTitlebar.Color.fromHex('#444')
        });
    script>
    
body>
html>

  3. قم بتخصيص الوحدة وفقًا لاحتياجات تصميم التطبيق الخاص بك.

هذا يوفر لك التحكم الكامل في مظهر النافذة والشريط العنواني، بحيث يمكنك إضافة الأزرار وتنسيقها بالطريقة التي تناسب تصميم التطبيق الخاص بك. بالتالي، يمكنك الاستفادة من هذه الوحدة لتحقيق النافذة بدون حاشية مع الحفاظ على إمكانية التحكم فيها باستخدام الأزرار القياسية في نظام التشغيل Windows.

المزيد من المعلومات

بالطبع، دعنا نوسع على المعلومات حول كيفية تحقيق نافذة بدون حاشية (Frameless Window) مع إمكانية التحكم فيها في تطبيق Electron على نظام التشغيل Windows.

بمجرد أن تقوم بتضمين وحدة “custom-electron-titlebar” كما ذكرت في الرد السابق، يمكنك بسهولة تخصيص الشريط العنواني حسب احتياجات تصميم تطبيقك. إليك بعض الخطوات الإضافية التي يمكنك اتخاذها:

1. تحكم في الأزرار:

يمكنك إضافة أزرار إضافية إلى الشريط العنواني بشكل مخصص. على سبيل المثال، إضافة زر للإغلاق وآخر للحد الأدنى، وتنفيذ الإجراءات المناسبة عند النقر على هذه الأزرار.

javascript
const customTitlebar = require('custom-electron-titlebar');
const { remote } = require('electron');

const titlebar = new customTitlebar.Titlebar({
    backgroundColor: customTitlebar.Color.fromHex('#444'),
});

// إضافة زر للإغلاق
const closeButton = new customTitlebar.TitleBarButton({
    icon: customTitlebar.ButtonIcon.CLOSE,
    click: () => {
        remote.getCurrentWindow().close();
    },
});
titlebar.updateTitlebar({
    items: [closeButton],
});

// إضافة زر للحد الأدنى
const minimizeButton = new customTitlebar.TitleBarButton({
    icon: customTitlebar.ButtonIcon.MINIMIZE,
    click: () => {
        remote.getCurrentWindow().minimize();
    },
});
titlebar.updateTitlebar({
    items: [minimizeButton],
});

2. إضافة سحب النافذة:

ضمن نافذة Electron، يمكنك تمكين إمكانية سحب النافذة بدون وجود حاشية. يمكنك القيام بذلك عبر إضافة السمة frame في ملف main.js:

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

app.whenReady().then(() => {
    const mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        frame: false, // تعطيل الحاشية
        webPreferences: {
            nodeIntegration: true,
        },
    });

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

3. التحكم في الحجم والأيقونات:

يمكنك أيضًا تخصيص حجم النافذة وإضافة أيقونات خاصة بك. استخدم خصائص width و height في BrowserWindow لتحديد حجم النافذة، واستخدم خاصية icon لتحديد الأيقونة:

javascript
const mainWindow = new BrowserWindow({
    width: 1000,
    height: 800,
    frame: false,
    icon: 'path/to/your/icon.png',
    webPreferences: {
        nodeIntegration: true,
    },
});

4. إضافة خلفية مخصصة:

يمكنك تحسين تجربة المستخدم بتخصيص خلفية النافذة. قم بتعيين لون الخلفية أو استخدم صورة خلفية حسب احتياجات تصميم تطبيقك.

javascript
const titlebar = new customTitlebar.Titlebar({
    backgroundColor: customTitlebar.Color.fromHex('#2e2e2e'),
});

من خلال اتباع هذه الخطوات، يمكنك تحقيق نافذة Electron بدون حاشية على نظام التشغيل Windows وتخصيصها بشكل كامل وفقًا لاحتياجات تصميم تطبيقك.

الوسوم
زر الذهاب إلى الأعلى