0Pricing
Electron Desktop App Development · Lekcja

Architektury wielooknowe

Projektuj i twórz złożone, wielooknowe aplikacje Electron, skutecznie zarządzając komunikacją między oknami i stanem.

Architektury wielooknowe to bezpłatna lekcja Electron Desktop App Development na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Electron Desktop App Development, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Electron Desktop App Development zawiera 4 lekcji w sumie.

Części tej lekcji nie zostały jeszcze przetłumaczone i są wyświetlane po angielsku.

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?

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.

Często zadawane pytania

Czy lekcja „Architektury wielooknowe” jest bezpłatna?

Tak — pełny tekst „Architektury wielooknowe” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Electron Desktop App Development, przejdź na CoddyKit PRO. Kurs Electron Desktop App Development zawiera 4 lekcji w sumie.

Co nauczysz się w „Architektury wielooknowe”?

Projektuj i twórz złożone, wielooknowe aplikacje Electron, skutecznie zarządzając komunikacją między oknami i stanem. Ćwiczysz Electron Desktop App Development z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Electron Desktop App Development?

Nie wymagamy żadnego doświadczenia. Electron Desktop App Development w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.

Ile czasu zajmuje lekcja „Architektury wielooknowe”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Electron Desktop App Development?

Tak. Każda lekcja Electron Desktop App Development zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Architektury wielooknowe
  2. Procesy działające w tle i workery
  3. Integracja z usługami chmurowymi
  4. Automatyczne aktualizowanie aplikacji Electron
← Powrót do Electron Desktop App Development