Electron Desktop App Development · Pelajaran

Mengelola Banyak Jendela

Pelajari cara membuat, mengoordinasikan, dan berkomunikasi antarbeberapa instans BrowserWindow, keterampilan inti yang langsung dibangun di atas dasar-dasar proses utama dan IPC.

Mengelola Banyak Jendela adalah pelajaran Electron Desktop App Development gratis di CoddyKit. Ini adalah pelajaran 4 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.

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.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Mengelola Banyak Jendela” gratis?

Ya — teks lengkap “Mengelola 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 “Mengelola Banyak Jendela”?

Pelajari cara membuat, mengoordinasikan, dan berkomunikasi antarbeberapa instans BrowserWindow, keterampilan inti yang langsung dibangun di atas dasar-dasar proses utama dan IPC. 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 4 dari 4.

Berapa lama pelajaran “Mengelola 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

← Kembali ke Electron Desktop App Development