Creare e Gestire Finestre

BrowserWindow è la classe principale di Electron per creare e gestire le finestre dell’applicazione. Ogni finestra carica un contenuto web (HTML) e dispone del proprio Renderer Process.

Creare una Finestra Base

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

function createWindow() {
  const win = new BrowserWindow({
    width: 1200,
    height: 800,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
    },
  });

  // Caricare un file HTML locale
  win.loadFile('index.html');

  // Oppure caricare un URL
  // win.loadURL('https://example.com');

  return win;
}

app.whenReady().then(createWindow);

Opzioni di Configurazione

Dimensioni e Posizione

const win = new BrowserWindow({
  width: 1200,              // Larghezza in pixel
  height: 800,              // Altezza in pixel
  minWidth: 600,            // Larghezza minima
  minHeight: 400,           // Altezza minima
  maxWidth: 1920,           // Larghezza massima
  maxHeight: 1080,          // Altezza massima
  x: 100,                   // Posizione X
  y: 100,                   // Posizione Y
  center: true,             // Centra la finestra sullo schermo
  resizable: true,          // Può essere ridimensionata
  movable: true,            // Può essere spostata
});

Aspetto

const win = new BrowserWindow({
  title: 'La Mia App',                    // Titolo della finestra
  icon: path.join(__dirname, 'icon.png'),  // Icona
  backgroundColor: '#1e1e2e',              // Colore di sfondo
  show: false,                             // Non mostrare subito
  titleBarStyle: 'default',               // Stile della barra del titolo
  // 'default', 'hidden', 'hiddenInset', 'customButtonsOnHover'
});

// Mostra quando il contenuto è pronto (evita flash bianco)
win.once('ready-to-show', () => {
  win.show();
});

WebPreferences

const win = new BrowserWindow({
  webPreferences: {
    preload: path.join(__dirname, 'preload.js'),
    nodeIntegration: false,        // MAI abilitare
    contextIsolation: true,        // Sempre abilitare
    sandbox: true,                 // Sandbox del renderer
    webSecurity: true,             // Politiche di sicurezza web
    devTools: true,                // Abilita DevTools
    spellcheck: true,              // Controllo ortografico
    defaultEncoding: 'utf-8',      // Encoding predefinito
  },
});

Gestione degli Eventi della Finestra

const win = new BrowserWindow({ width: 800, height: 600 });

// La finestra è pronta per essere mostrata
win.once('ready-to-show', () => {
  win.show();
});

// La finestra è stata ridimensionata
win.on('resize', () => {
  const [width, height] = win.getSize();
  console.log(`Dimensioni: ${width}x${height}`);
});

// La finestra è stata spostata
win.on('move', () => {
  const [x, y] = win.getPosition();
  console.log(`Posizione: ${x}, ${y}`);
});

// La finestra ha ottenuto il focus
win.on('focus', () => {
  console.log('Finestra in primo piano');
});

// La finestra ha perso il focus
win.on('blur', () => {
  console.log('Finestra in background');
});

// La finestra è stata massimizzata
win.on('maximize', () => console.log('Massimizzata'));
win.on('unmaximize', () => console.log('Ripristinata'));

// La finestra è stata minimizzata
win.on('minimize', () => console.log('Minimizzata'));
win.on('restore', () => console.log('Ripristinata da minimizzazione'));

// L'utente tenta di chiudere la finestra
win.on('close', (event) => {
  // Puoi impedire la chiusura
  // event.preventDefault();
});

// La finestra è stata chiusa e distrutta
win.on('closed', () => {
  console.log('Finestra distrutta');
});

Controllare la Finestra

// Dimensioni
win.setSize(1024, 768);
win.setMinimumSize(400, 300);
const [width, height] = win.getSize();

// Posizione
win.setPosition(200, 100);
win.center();
const [x, y] = win.getPosition();

// Stato
win.minimize();
win.maximize();
win.unmaximize();
win.restore();
win.setFullScreen(true);

// Visibilità
win.show();
win.hide();
win.focus();

// Proprietà
win.setTitle('Nuovo Titolo');
win.setOpacity(0.9);             // Trasparenza (0.0 - 1.0)
win.setAlwaysOnTop(true);        // Sempre in primo piano
win.setResizable(false);         // Blocca ridimensionamento

// Stato della finestra
console.log(win.isMaximized());
console.log(win.isMinimized());
console.log(win.isFullScreen());
console.log(win.isVisible());
console.log(win.isFocused());

Salvare e Ripristinare Posizione

Per ricordare la posizione e le dimensioni della finestra tra le sessioni:

const Store = require('electron-store');
const store = new Store();

function createWindow() {
  const bounds = store.get('windowBounds', {
    width: 1200,
    height: 800,
  });

  const win = new BrowserWindow({
    ...bounds,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
    },
  });

  // Salva le dimensioni quando cambiano
  win.on('resized', () => {
    store.set('windowBounds', win.getBounds());
  });

  win.on('moved', () => {
    store.set('windowBounds', win.getBounds());
  });

  win.loadFile('index.html');
  return win;
}

Caricare Contenuti

// File locale
win.loadFile('index.html');
win.loadFile(path.join(__dirname, 'pages', 'settings.html'));

// URL remoto
win.loadURL('https://example.com');

// URL con hash
win.loadFile('index.html', { hash: 'settings' });

// URL con query
win.loadFile('index.html', { query: { page: 'settings' } });

// Contenuto HTML diretto (via data URL)
win.loadURL(`data:text/html,
  <html>
    <body><h1>Hello World</h1></body>
  </html>
`);

Intercettare la Chiusura

Per chiedere conferma prima di chiudere (es. salvare modifiche):

let isQuitting = false;

app.on('before-quit', () => {
  isQuitting = true;
});

win.on('close', (event) => {
  if (!isQuitting) {
    event.preventDefault();
    // Chiedi al renderer se ci sono modifiche non salvate
    win.webContents.send('check-unsaved-changes');
  }
});

// Nel main process, ascolta la risposta
ipcMain.on('can-close', (_event, canClose) => {
  if (canClose) {
    isQuitting = true;
    win.close();
  }
});

Ottenere Tutte le Finestre

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

// Tutte le finestre aperte
const allWindows = BrowserWindow.getAllWindows();

// La finestra con il focus
const focused = BrowserWindow.getFocusedWindow();

// Trovare una finestra per ID
const win = BrowserWindow.fromId(1);

// Trovare la finestra dal webContents (utile negli handler IPC)
ipcMain.on('some-event', (event) => {
  const win = BrowserWindow.fromWebContents(event.sender);
});