0Pricing
Electron Desktop App Development · Pelajaran

Arsitektur Banyak Jendela

Rancang dan terapkan aplikasi Electron kompleks dengan banyak jendela, serta kelola komunikasi antarjendela dan status secara efektif.

Arsitektur Banyak Jendela adalah pelajaran Electron Desktop App Development gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Electron Desktop App Development, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Electron Desktop App Development mencakup 4 pelajaran total.

Bagian dari pelajaran ini belum diterjemahkan dan ditampilkan dalam bahasa Inggris.

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.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Arsitektur Banyak Jendela” gratis?

Ya — teks lengkap “Arsitektur Banyak Jendela” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Electron Desktop App Development, upgrade ke CoddyKit PRO. Kursus Electron Desktop App Development mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Arsitektur Banyak Jendela”?

Rancang dan terapkan aplikasi Electron kompleks dengan banyak jendela, serta kelola komunikasi antarjendela dan status secara efektif. Kamu berlatih Electron Desktop App Development dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Electron Desktop App Development?

Tidak diperlukan pengalaman sebelumnya. Electron Desktop App Development di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.

Berapa lama pelajaran “Arsitektur Banyak Jendela” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Electron Desktop App Development ini?

Ya. Setiap pelajaran Electron Desktop App Development menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

  1. Arsitektur Banyak Jendela
  2. Proses Latar Belakang dan Pekerja
  3. Mengintegrasikan Layanan Awan
  4. Memperbarui Aplikasi Electron Secara Otomatis
← Kembali ke Electron Desktop App Development