PricingLoginStart free
Electron Desktop App Development · Ders

Çok Pencereli Mimariler

Karmaşık, çok pencereli Electron uygulamaları tasarlayıp uygulayın; pencereler arası iletişimi ve durumu etkili biçimde yönetin.

1. ders / 411 adım

Çok Pencereli Mimariler, CoddyKit'te ücretsiz bir Electron Desktop App Development dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Electron Desktop App Development öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Electron Desktop App Development kursu toplamda 4 dersten oluşur.

Bu dersin bazı bölümleri henüz çevrilmemiş olup İngilizce olarak gösterilmektedir.

Why Multiple Windows?

Electron applications often benefit from using multiple windows. Think of a chat application: you might have a main contact list and separate windows for each active conversation.

  • Separate Workflows: Isolate tasks into dedicated windows.
  • User Preferences: A settings window distinct from the main application.
  • Auxiliary Tools: Dedicated viewers, inspectors, or side panels.
  • Enhanced User Experience: Provides flexibility and organization for complex apps.

Spawning a New Window

Creating additional windows in Electron is similar to creating your initial main window. You simply instantiate another BrowserWindow in your main process.

Here's how you can create a second window that loads a different HTML file.

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

let mainWindow;
let secondWindow;

function createMainWindow() {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: false,
      contextIsolation: true,
      preload: path.join(__dirname, 'preload.js')
    }
  });
  mainWindow.loadFile('index.html');
}

function createSecondWindow() {
  secondWindow = new BrowserWindow({
    width: 400,
    height: 300,
    parent: mainWindow, // Optional: make it a child window
    modal: false, // Optional: for modal behavior
    show: false, // Don't show immediately
    webPreferences: {
      nodeIntegration: false,
      contextIsolation: true,
      preload: path.join(__dirname, 'preload_second.js')
    }
  });
  secondWindow.loadFile('second.html');
  secondWindow.once('ready-to-show', () => {
    secondWindow.show();
  });
}

app.whenReady().then(() => {
  createMainWindow();
  createSecondWindow();

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createMainWindow();
    }
  });
});

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

Content for Multiple Windows

Each BrowserWindow instance loads its own content, typically an HTML file. This allows you to design completely independent user interfaces for different parts of your application.

For the previous example, you would need:

  • index.html: The main window's interface.
  • second.html: The second window's distinct interface.
  • Corresponding renderer and preload scripts for each, if needed.

Managing Window References

When working with multiple windows, it's crucial to keep track of their references. You can store them in an array or a map, allowing you to interact with specific windows later.

This helps in sending targeted messages, closing specific windows, or managing their states.

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

let allWindows = []; // Array to hold references to all windows

function createNewWindow(htmlFile, width, height) {
  let newWindow = new BrowserWindow({
    width: width,
    height: height,
    webPreferences: {
      nodeIntegration: false,
      contextIsolation: true,
      preload: path.join(__dirname, 'preload.js') // Can be different per window
    }
  });
  newWindow.loadFile(htmlFile);
  allWindows.push(newWindow); // Add to our list

  // Remove from list when closed
  newWindow.on('closed', () => {
    allWindows = allWindows.filter(win => win !== newWindow);
  });

  return newWindow;
}

app.whenReady().then(() => {
  createNewWindow('index.html', 800, 600); // Create main window
  createNewWindow('second.html', 400, 300); // Create a second window

  // Example: Accessing windows later
  // allWindows[0].setTitle('Main App');
});

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

Main to Specific Renderer IPC

The main process can send messages to a specific renderer process using the webContents.send() method of that window instance.

This is essential for updating UI elements, pushing data, or triggering actions in a particular window.

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

let mainWindow;
let settingsWindow;

function createWindows() {
  mainWindow = new BrowserWindow({
    width: 800, height: 600,
    webPreferences: { preload: path.join(__dirname, 'preload.js'), contextIsolation: true }
  });
  mainWindow.loadFile('index.html');

  settingsWindow = new BrowserWindow({
    width: 400, height: 300, show: false,
    webPreferences: { preload: path.join(__dirname, 'preload_settings.js'), contextIsolation: true }
  });
  settingsWindow.loadFile('settings.html');
}

app.whenReady().then(createWindows);

// Main process sends message to settings window
ipcMain.on('open-settings', () => {
  if (settingsWindow) {
    settingsWindow.show();
    settingsWindow.webContents.send('settings-opened', 'Welcome to settings!');
  }
});

// --- Renderer (preload_settings.js) for settings.html ---
// const { ipcRenderer, contextBridge } = require('electron');
// contextBridge.exposeInMainWorld('electronAPI', {
//   onSettingsOpened: (callback) => ipcRenderer.on('settings-opened', (event, message) => callback(message))
// });

// --- Renderer (settings.html script) ---
// window.electronAPI.onSettingsOpened((msg) => {
//   document.getElementById('message').innerText = msg;
// });

Renderer to Main (Identifying Sender)

When a renderer process sends a message to the main process via ipcRenderer.send(), the main process receives an event object.

This event object contains information about the sender, including event.senderFrame or event.sender (which is the WebContents object of the sending window). This allows the main process to identify which window sent the message.

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

let windows = {}; // Store windows by an ID or name

function createWindows() {
  const mainWin = new BrowserWindow({
    width: 800, height: 600, title: 'Main',
    webPreferences: { preload: path.join(__dirname, 'preload_main.js'), contextIsolation: true }
  });
  mainWin.loadFile('main.html');
  windows['main'] = mainWin;

  const toolWin = new BrowserWindow({
    width: 400, height: 300, title: 'Tool',
    webPreferences: { preload: path.join(__dirname, 'preload_tool.js'), contextIsolation: true }
  });
  toolWin.loadFile('tool.html');
  windows['tool'] = toolWin;
}

app.whenReady().then(createWindows);

ipcMain.on('renderer-message', (event, data) => {
  const senderWindow = BrowserWindow.fromWebContents(event.sender);
  const senderId = Object.keys(windows).find(key => windows[key] === senderWindow);
  console.log(`Message from ${senderId || 'Unknown'}: ${data}`);
  senderWindow.webContents.send('main-reply', `Received from ${senderId}!`);
});

// --- preload_main.js / preload_tool.js (simplified) ---
// const { ipcRenderer, contextBridge } = require('electron');
// contextBridge.exposeInMainWorld('electronAPI', {
//   sendMessage: (data) => ipcRenderer.send('renderer-message', data),
//   onMainReply: (callback) => ipcRenderer.on('main-reply', (event, msg) => callback(msg))
// });

// --- main.html / tool.html script ---
// window.electronAPI.sendMessage('Hello from my window!');

Renderer to Renderer Communication

Renderer processes cannot directly communicate with each other. All inter-process communication (IPC) must be mediated by the main process.

This means a message from one renderer will go to the main process, which then relays it to the target renderer process. This centralizes communication and enhances security.

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

let windowA, windowB;

function createWindows() {
  windowA = new BrowserWindow({
    width: 600, height: 400, title: 'Window A',
    webPreferences: { preload: path.join(__dirname, 'preload_a.js'), contextIsolation: true }
  });
  windowA.loadFile('window_a.html');

  windowB = new BrowserWindow({
    width: 600, height: 400, title: 'Window B',
    webPreferences: { preload: path.join(__dirname, 'preload_b.js'), contextIsolation: true }
  });
  windowB.loadFile('window_b.html');
}

app.whenReady().then(createWindows);

// Renderer A sends to Main, Main relays to Renderer B
ipcMain.on('message-from-a', (event, message) => {
  console.log('Main received from A:', message);
  if (windowB) {
    windowB.webContents.send('message-to-b', `Relayed from A: ${message}`);
  }
});

// Renderer B sends to Main, Main relays to Renderer A
ipcMain.on('message-from-b', (event, message) => {
  console.log('Main received from B:', message);
  if (windowA) {
    windowA.webContents.send('message-to-a', `Relayed from B: ${message}`);
  }
});

// --- preload_a.js (example) ---
// const { ipcRenderer, contextBridge } = require('electron');
// contextBridge.exposeInMainWorld('electronAPI', {
//   sendToB: (msg) => ipcRenderer.send('message-from-a', msg),
//   onMessageFromB: (callback) => ipcRenderer.on('message-to-a', (event, msg) => callback(msg))
// });

// --- window_a.html script ---
// window.electronAPI.sendToB('Hello from Window A!');

Managing Shared State

When you have multiple windows, they often need to access or share the same data. Here are common strategies:

  • Main Process as Source of Truth: Store shared data in the main process and use IPC to request/update it from renderers.
  • Electron Store: A simple, cross-platform solution for persisting user settings and application state.
  • IPC for Data Sync: Renderers notify the main process of changes, and the main process broadcasts updates to other affected renderers.
  • Global Object (Careful!): In some simple cases, a global JavaScript object in the main process can hold shared state, but this can get messy in complex apps.

Multi-Window Best Practices

Designing multi-window applications requires thoughtful consideration:

  • Memory Usage: Each BrowserWindow is a separate Chromium instance, consuming memory. Minimize unnecessary windows.
  • Lifecycle Management: Decide if closing a child window should affect its parent or the main application.
  • User Experience: Provide clear navigation between windows. Consider window positioning and remember user preferences.
  • Error Handling: Implement robust error handling for IPC and window events to prevent crashes.
  • Context Isolation: Always enable contextIsolation and use preload scripts for secure API exposure, especially with multiple windows.

Multi-Window IPC Check

You have two renderer processes, Renderer A and Renderer B. Renderer A needs to send a message to Renderer B. How should this communication be structured in Electron?

İnteraktif derste cevapla

Recap: Multi-Window Architectures

Congratulations! You've learned how to design and implement multi-window Electron applications.

We covered creating multiple BrowserWindow instances, managing their references, and implementing secure inter-window communication via the main process. You also explored strategies for shared state and best practices for building complex, multi-window desktop experiences.

Başlamak ücretsiz

Yapay zeka eğitmeniyle JavaScript öğren — ücretsiz

Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.

Kurslar
12
Dersler
47
Ücretsiz öğrenmeye başlaTüm kursu görüntüle

Sıkça Sorulan Sorular

“Çok Pencereli Mimariler” dersi ücretsiz mi?

Evet — “Çok Pencereli Mimariler” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Electron Desktop App Development kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Electron Desktop App Development kursu toplamda 4 dersten oluşur.

“Çok Pencereli Mimariler” dersinde ne öğreneceğim?

Karmaşık, çok pencereli Electron uygulamaları tasarlayıp uygulayın; pencereler arası iletişimi ve durumu etkili biçimde yönetin. Electron Desktop App Development ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Electron Desktop App Development öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Electron Desktop App Development, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.

“Çok Pencereli Mimariler” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Electron Desktop App Development dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Electron Desktop App Development dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

  1. Çok Pencereli Mimariler
  2. Arka Plan Süreçleri ve Çalışanlar
  3. Bulut Hizmetleriyle Entegrasyon
  4. Electron Uygulamanızı Otomatik Güncelleme
← Electron Desktop App Development Sayfasına Dön