Kapitel 5: Electron-Fensteroperationen

In diesem Kapitel lernen Sie alles über Fensteroperationen in Electron - ein Kernfeature jeder Desktop-Anwendung.

5.1 Fenstererstellung und -konfiguration

BrowserWindow-Parameter im Detail

Grundlegende Parameter

const { BrowserWindow } = require('electron');

const win = new BrowserWindow({
  // Größe und Position
  width: 1200,          // Fensterbreite
  height: 800,           // Fensterhöhe
  x: 100,               // X-Position (vom linken Rand)
  y: 100,               // Y-Position (vom oberen Rand)
  minWidth: 800,         // Minimale Breite
  minHeight: 600,        // Minimale Höhe
  maxWidth: 1920,       // Maximale Breite
  maxHeight: 1080,      // Maximale Höhe
  
  // Titel und Icon
  title: 'Meine App',   // Fenstertitel
  icon: 'icon.png',      // Fenstericon
});

Fensterstile

const win = new BrowserWindow({
  // Fensterrahmen
  frame: true,           // Fensterrahmen anzeigen (true = Standard)
  titleBarStyle: 'default', // 'default', 'hidden', 'hiddenInset'
  
  // Größenänderung
  resizable: true,       // Größe änderbar
  movable: true,         // Verschiebbar
  minimizable: true,     // Minimierbar
  maximizable: true,     // Maximierbar
  closable: true,        // Schließbar
  
  // Darstellung
  show: true,            // Fenster sofort anzeigen
  center: true,          // Fenster zentrieren
  alwaysOnTop: false,    // Immer im Vordergrund
  skipTaskbar: false,    // In Taskleiste anzeigen
  fullscreen: false,     // Vollbildmodus
  fullscreenable: true,  // Vollbildmodus erlauben
  transparent: false,    // Transparenter Hintergrund
  backgroundColor: '#ffffff', // Hintergrundfarbe
});

Fensterstile im Vergleich

Stil	Beschreibung	Code
Standard	Mit Rahmen und Titelzeile	frame: true
Rahmenlos	Kein Rahmen	frame: false
Transparent	Transparenter Hintergrund	transparent: true
Immer oben	Immer im Vordergrund	alwaysOnTop: true
Vollbild	Vollbildmodus	fullscreen: true

titleBarStyle-Optionen

// Verschiedene Titelzeilen-Stile
const win1 = new BrowserWindow({
  titleBarStyle: 'default'  // Standard (Windows/Linux)
});

const win2 = new BrowserWindow({
  titleBarStyle: 'hidden'   // Titelzeile versteckt, aber Steuerungsbuttons sichtbar
});

const win3 = new BrowserWindow({
  titleBarStyle: 'hiddenInset' // Wie 'hidden', aber mit Einzug (macOS)
});

5.2 Häufige Fensteroperationen (Hauptprozess-Steuerung)

Grundlegende Fenstersteuerung

// main.js
const { BrowserWindow } = require('electron');

// Fenster erstellen
let win = new BrowserWindow({ width: 800, height: 600 });

// Minimieren
win.minimize();

// Maximieren
win.maximize();

// Wiederherstellen (aus maximiertem Zustand)
win.restore();

// Schließen
win.close();  // Sendet close-Event (kann abgebrochen werden)
win.destroy(); // Schließt sofort ohne Event

// Verstecken (in Taskleiste/ Dock)
win.hide();

// Anzeigen
win.show();

// Prüfen, ob Fenster sichtbar ist
console.log(win.isVisible());  // true/false

// Prüfen, ob Fenster minimiert ist
console.log(win.isMinimized()); // true/false

// Prüfen, ob Fenster maximiert ist
console.log(win.isMaximized()); // true/false

Fenstergröße und -position anpassen

// Größe ändern
win.setSize(1200, 800);           // Breite, Höhe
win.setMinimumSize(800, 600);     // Minimale Größe
win.setMaximumSize(1920, 1080);  // Maximale Größe

// Position ändern
win.setPosition(100, 100);        // X, Y
win.center();                      // Zentrieren

// Größe und Position gleichzeitig
win.setBounds({
  x: 100,
  y: 100,
  width: 1200,
  height: 800
});

// Aktuelle Größe/Petition abfragen
console.log(win.getSize());    // [width, height]
console.log(win.getPosition()); // [x, y]
console.log(win.getBounds());  // { x, y, width, height }

Mehrere Fenster erstellen und verwalten

// Mehrere Fenster verwalten
const windows = new Set();

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600
  });
  
  win.loadFile('index.html');
  
  // Fenster zur Liste hinzufügen
  windows.add(win);
  
  // Fenster entfernen, wenn geschlossen
  win.on('closed', () => {
    windows.delete(win);
  });
  
  return win;
}

// Neues Fenster öffnen
ipcMain.on('open-new-window', (event, url) => {
  const newWin = new BrowserWindow({
    width: 800,
    height: 600,
    parent: BrowserWindow.getFocusedWindow(), // Übergeordnetes Fenster
    modal: false  // false = nicht-modal, true = modal
  });
  
  newWin.loadFile(url);
  windows.add(newWin);
});

// Alle Fenster schließen
function closeAllWindows() {
  for (const win of windows) {
    win.close();
  }
  windows.clear();
}

Modale Fenster

// Modales Fenster (blockiert Interaktion mit übergeordnetem Fenster)
const parentWin = BrowserWindow.getFocusedWindow();

const modalWin = new BrowserWindow({
  width: 400,
  height: 300,
  parent: parentWin,   // Übergeordnetes Fenster
  modal: true,          // Modal
  show: false,
  frame: false,         // Rahmenlos für besseres Design
  resizable: false
});

modalWin.loadFile('modal.html');

modalWin.once('ready-to-show', () => {
  modalWin.show();
});

// Modal schließen
ipcMain.on('close-modal', () => {
  modalWin.close();
});

5.3 Fensterereignisse (Fensterstatus überwachen)

Wichtige Fensterereignisse

const win = new BrowserWindow({ /* ... */ });

// Fenster wird geschlossen (kann abgebrochen werden)
win.on('close', (event) => {
  console.log('Fenster wird geschlossen');
  // event.preventDefault(); // Schließen abbrechen
});

// Fenster wurde geschlossen
win.on('closed', () => {
  console.log('Fenster wurde geschlossen');
  win = null;
});

// Fenster wird minimiert
win.on('minimize', () => {
  console.log('Fenster minimiert');
});

// Fenster wird wiederhergestellt
win.on('restore', () => {
  console.log('Fenster wiederhergestellt');
});

// Fenster wird maximiert
win.on('maximize', () => {
  console.log('Fenster maximiert');
});

// Fenster wird entmaximiert
win.on('unmaximize', () => {
  console.log('Fenster entmaximiert');
});

// Fenstergröße ändert sich
win.on('resize', () => {
  const [width, height] = win.getSize();
  console.log(`Neue Größe: ${width}x${height}`);
});

// Fensterposition ändert sich
win.on('move', () => {
  const [x, y] = win.getPosition();
  console.log(`Neue Position: x=${x}, y=${y}`);
});

// Fenster wird angezeigt
win.on('show', () => {
  console.log('Fenster angezeigt');
});

// Fenster wird versteckt
win.on('hide', () => {
  console.log('Fenster versteckt');
});

// Inhalt bereit zum Anzeigen
win.once('ready-to-show', () => {
  win.show();
});

App-Lebenszyklus-Ereignisse (.window-all-closed)

const { app } = require('electron');

// Alle Fenster geschlossen
app.on('window-all-closed', () => {
  console.log('Alle Fenster geschlossen');
  
  // Unter macOS bleibt App oft aktiv (Dock-Symbol)
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

// App wird aktiviert (macOS: Dock-Symbol geklickt)
app.on('activate', () => {
  console.log('App aktiviert');
  
  // Wenn keine Fenster offen sind, neues erstellen
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow();
  }
});

5.4 Praxisbeispiel: Multi-Fenster-App mit Umschaltung

Projekt: Fensterverwaltungs-App

main.js (Hauptprozess)

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

let mainWin;
let secondWin;
let settingsWin;

// Hauptfenster erstellen
function createMainWindow() {
  mainWin = new BrowserWindow({
    width: 1000,
    height: 700,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  });

  mainWin.loadFile('index.html');
  mainWin.webContents.openDevTools();
}

// Zweites Fenster erstellen
function createSecondWindow() {
  if (secondWin) {
    secondWin.focus();
    return;
  }

  secondWin = new BrowserWindow({
    width: 800,
    height: 600,
    parent: mainWin,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  });

  secondWin.loadFile('second.html');

  secondWin.on('closed', () => {
    secondWin = null;
  });
}

// Einstellungsfenster (modal)
function createSettingsWindow() {
  settingsWin = new BrowserWindow({
    width: 500,
    height: 400,
    parent: mainWin,
    modal: true,
    show: false,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  });

  settingsWin.loadFile('settings.html');

  settingsWin.once('ready-to-show', () => {
    settingsWin.show();
  });

  settingsWin.on('closed', () => {
    settingsWin = null;
  });
}

// IPC-Handler
ipcMain.on('open-second-window', () => {
  createSecondWindow();
});

ipcMain.on('open-settings-window', () => {
  createSettingsWindow();
});

ipcMain.on('close-all-windows', () => {
  if (secondWin) secondWin.close();
  if (settingsWin) settingsWin.close();
  if (mainWin) mainWin.close();
});

ipcMain.on('minimize-window', (event) => {
  const win = BrowserWindow.fromWebContents(event.sender);
  win.minimize();
});

ipcMain.on('maximize-window', (event) => {
  const win = BrowserWindow.fromWebContents(event.sender);
  if (win.isMaximized()) {
    win.restore();
  } else {
    win.maximize();
  }
});

// App starten
app.whenReady().then(() => {
  createMainWindow();

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

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

preload.js (IPC-Brücke)

const { contextBridge, ipcRenderer } = require('electron');

contextBridge.exposeInMainWorld('windowAPI', {
  openSecond: () => ipcRenderer.send('open-second-window'),
  openSettings: () => ipcRenderer.send('open-settings-window'),
  closeAll: () => ipcRenderer.send('close-all-windows'),
  minimize: () => ipcRenderer.send('minimize-window'),
  maximize: () => ipcRenderer.send('maximize-window'),
  
  // Fensterinformationen abfragen
  getWindowInfo: () => ipcRenderer.invoke('get-window-info')
});

index.html (Hauptfenster-UI)

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Hauptfenster</title>
  <style>
    body { font-family: Arial; padding: 20px; }
    button { padding: 10px 20px; margin: 5px; cursor: pointer; }
    .toolbar { background: #f0f0f0; padding: 10px; margin-bottom: 20px; }
  </style>
</head>
<body>
  <div class="toolbar">
    <button onclick="window.windowAPI.minimize()">−</button>
    <button onclick="window.windowAPI.maximize()">□</button>
    <button onclick="window.windowAPI.closeAll()">×</button>
  </div>

  <h1>Hauptfenster</h1>
  <p>Willkommen in der Multi-Fenster-App!</p>

  <button onclick="window.windowAPI.openSecond()">Zweites Fenster öffnen</button>
  <button onclick="window.windowAPI.openSettings()">Einstellungen öffnen</button>
</body>
</html>

Zusammenfassung

In diesem Kapitel haben Sie gelernt:

• Fenster mit BrowserWindow zu erstellen und zu konfigurieren
• Fenstereigenschaften (Größe, Position, Stil) anzupassen
• Fensteroperationen (minimieren, maximieren, schließen) durchzuführen
• Mehrere Fenster zu verwalten
• Fensterereignisse zu überwachen
• Eine Multi-Fenster-App zu erstellen

Im nächsten Kapitel werden wir die IPC-Kommunikation im Detail behandeln.