إدارة نوافذ متعددة
تعلّم إنشاء مثيلات BrowserWindow المتعددة وتنسيقها والتواصل بينها، وهي مهارة أساسية تعتمد مباشرةً على أساسيات العملية الرئيسية وIPC.
إدارة نوافذ متعددة درس مجاني في Electron Desktop App Development على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Electron Desktop App Development، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Electron Desktop App Development 4 دروس في المجموع.
بعض أجزاء هذا الدرس لم تُترجم بعد وتظهر باللغة الإنجليزية.
Beyond a Single Window
Real desktop apps often need multiple windows: a main editor, a settings panel, a preview. The main process owns and tracks all of them.
Creating a Window
Each window is a BrowserWindow instance created in the main process.
const { BrowserWindow } = require('electron');
function createWindow() {
const win = new BrowserWindow({ width: 600, height: 400 });
win.loadFile('index.html');
return win;
}Keeping References
If you do not keep a reference, the window can be garbage collected. Store windows in a variable or array.
let windows = [];
function track(win) {
windows.push(win);
win.on('closed', () => {
windows = windows.filter(w => w !== win);
});
}Parent and Child Windows
You can make one window the parent of another. Child windows move with the parent and can be modal.
new BrowserWindow({
parent: mainWindow,
modal: true,
width: 300,
height: 200
});Window-to-Window Messaging
Windows do not share memory. They communicate through the main process using IPC as a relay.
ipcMain.on('to-other', (e, msg) => {
otherWindow.webContents.send('from-main', msg);
});Identifying Windows
Each window has a unique id. Use it to target a specific window when relaying messages.
function findWindow(id, list) {
return list.find(w => w.id === id);
}
console.log(findWindow(2, [{ id: 1 }, { id: 2 }]));Showing Windows Gracefully
Avoid a white flash by creating windows hidden and showing them once ready.
const win = new BrowserWindow({ show: false });
win.once('ready-to-show', () => win.show());Managing Focus
Use focus() and the blur event to know which window the user is interacting with, useful for save prompts.
Closing and Cleanup
Listen for close to prompt for unsaved changes, and closed to release references.
win.on('close', (e) => {
if (hasUnsaved) {
e.preventDefault();
}
});Single Instance Lock
Use app.requestSingleInstanceLock() to focus the existing window instead of opening duplicates.
Coordinating State
Centralize shared state in the main process so every window reads from one source of truth, avoiding drift.
Quick Check
Test your window management knowledge.
Recap
You learned to create and track multiple BrowserWindow instances, manage parent/child relationships, relay messages via the main process, and clean up references properly.
الأسئلة الشائعة
هل درس «إدارة نوافذ متعددة» مجاني؟
نعم — نص درس «إدارة نوافذ متعددة» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Electron Desktop App Development، انتقل إلى CoddyKit PRO. تتضمن دورة Electron Desktop App Development 4 دروس في المجموع.
ماذا ستتعلم في «إدارة نوافذ متعددة»؟
تعلّم إنشاء مثيلات BrowserWindow المتعددة وتنسيقها والتواصل بينها، وهي مهارة أساسية تعتمد مباشرةً على أساسيات العملية الرئيسية وIPC. تتمرن على Electron Desktop App Development مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Electron Desktop App Development؟
لا تُشترط خبرة سابقة. Electron Desktop App Development على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.
كم من الوقت يستغرق درس «إدارة نوافذ متعددة»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Electron Desktop App Development هذا؟
نعم. كل درس في Electron Desktop App Development يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.