Electron API: BrowserWindow position

Nell’articolo precedente di Electron ho volutamente saltato due parametri non proprio secondari tra quelli che ho elencato. Si tratta di X e Y ovvero la posizione della finestra all’interno dello schermo. Prendiamo in esame questo codice un po’ più strutturato:

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

let win = null
function window_open(path){
  const opts = {show: false}
  if (BrowserWindow.getFocusedWindow()) {
    current_win = BrowserWindow.getFocusedWindow()
    const pos = current_win.getPosition()
    Object.assign(opts, {
      x: pos[0] + 22,
      y: pos[1] + 22
    })
  }
  win = new BrowserWindow(opts)
  win.loadURL(path)
  win.once('ready-to-show', () => {win.show()})
}

app.once('ready',event=>{
  window_open(`file://${__dirname}/index.html`)
});

In questa porzione di codice vengono utilizzati dei metodi quali BrowserWindow.getFocusedWindow e win.getPosition che ci permettono di calcolare in modo automatico la posizione della finestra in uso e modificare i parametri di posizione all’interno dello schermo.

Il primo prende in esame la finestra in focus, visto che Electron può essere multi finestra e quindi esserci più istanze render. La seconda ottiene la posizione della finestra all’interno dello schermo, indipendentemente da quanto sia grande quest’ultimo, visto che ovviamente non lo potremo sapere a priori. In questo caso abbiamo applicato un +22 cioè sposteremo rispetto alla posizione 22 pixel rispetto all’asse orizzontale e quello verticale. Tutto ciò è racchiuso in una funzione, che potremo agevolmente richiamare quando la App di electron è pronta (cioè ha caricato quanto gli necessitava). Lo scopo di questo codice è quello di mostrare le varie finestre che si proporranno a video scalate un po’ più in basso e a destra della finestra precedente. Ad esempio un programma multi funzione come potrebbe essere un file manager o un download manager. Ogni nuova finestra non andrà a sovrapporsi a quella che la precedeva, ma spostandosi un po’ più a destra mostrerà la presenza di quelle sottostanti.

Con questo piccolo esempio abbiamo visto come sia possibile maneggiare la finestra. Ad esempio è possibile forzarla ad essere visualizzata in partenza su un determinato punto dello schermo. Un caso tipico è quello di un applicativo che viene mostrato vicino ad una icona della traybar, come ad esempio un player musicale o qualcosa di simile. In quel caso si vuole dare un feedback veloce, quindi l’applicativo dovrà mostrarsi una volta premuta l’icona, mostrando il contenuto vicino ad essa.

Nel caso di utilizzo classico da desktop però si pone una piccola problematica, ovvero ogni volta che il programma viene chiuso riparte la volta successiva dalle coordinate di default che abbiamo impostato. Nel caso di un programma tipico questo potrebbe essere seccante per i vostri utenti. Infatti quello che va bene a noi non è detto che vada bene a qualcun altro. Una delle particolarità di Electronjs e Nodejs è quella di sfruttare gli NPM, in questo electron-window-state fa al caso nostro. Avremo certamente potuto risolvere la cosa da noi, ma perché reinventare la ruota?

L’installazione avviene come al solito via linea di comando utilizzando appunto NPM:

npm install --save electron-window-state

Una volta che abbiamo questo nuovo codice disponibile lo potremo utilizzare. Copio brutalmente l’esempio dalla pagina Github:

const windowStateKeeper = require('electron-window-state');
let win;

app.on('ready', function () {
  // Load the previous state with fallback to defaults
  let mainWindowState = windowStateKeeper({
    defaultWidth: 1000,
    defaultHeight: 800
  });

  // Create the window using the state information
  win = new BrowserWindow({
    'x': mainWindowState.x,
    'y': mainWindowState.y,
    'width': mainWindowState.width,
    'height': mainWindowState.height
  });

  // Let us register listeners on the window, so we can update the state
  // automatically (the listeners will be removed when the window is closed)
  // and restore the maximized or full screen state
  mainWindowState.manage(win);
});

Come vediamo inizialmente sulla app.on Ready andiamo a creare una nuova variabile windowsStateKeeper (che altro non è che electron-window-state) dove andremo a definire le dimensioni della finestra di default. La posizione non è definita perché essa partirà al centro dello schermo, è una caratteristica di default di Electron, ci va bene e quindi non è necessario scriverla.

Successivamente nell’istruzione dove creiamo materialmente la browserWindow riutilizzeremo la nostra variabile come jolly per memorizzare i comportamenti dell’utente. Ovvero tenere traccia della dimensione della finestra (nel caso l’abbia ridimensionata) e della sua posizione all’interno dello schermo. Tale registrazione avviene nella riga finale ed è memorizzata nel momento in cui l’applicativo ottiene il segnale di chiusura.

Conclusioni

Probabilmente se avete letto gli articoli precedenti solo con questo avrete cominciato a rendervi conto di quanto sia facile “scavallare” con semplicità problemi che in altri sistemi richiedono di metterci del proprio e perdere tempo (a mio avviso inutile) per risolvere questioni tecnicamente banali.