Nell’articolo che mostrava la struttura tipo di una app con Electron abbiamo visto oltre al richiamo di app, anche di BrowserWindow. Si tratta di una API piuttosto importante, anch’essa facente parte del Main Process, poiché essa determina la creazione della finestra che, come abbiamo detto è una finestra di un browser dedicato, e dove essa riproduce il contenuto che desideriamo portare.
La finestra può essere più di una quindi ci possono essere più istanze. Una cosa interessante che differisce dall’analogia di utilizzo di un browser è che possiamo decidere una sorta di parentela, ovvero possiamo creare delle finestre figlia-padre. Ad esempio quando la finestra padre viene chiusa, la finestra figlia che ne dipende in modo diretto subisce lo stesso comando per effetto indotto.
const {BrowserWindow} = require('electron')
let top = new BrowserWindow()
let child = new BrowserWindow({parent: top})
child.show()
top.show()In questo caso come si vede abbiamo creato due nuove variabili a cui abbiamo assegnato due istanze di BrowserWindow, una di esse è stata assegnata all’altra attraverso l’opzione parent.
L’esempio precedente però permette di utilizzare entrambe le finestre, cioè possiamo passare da una all’altra utilizzandone i contenuti. In talune circostanze, ad esempio la creazione di un processo tipo Wizard (obbligato) potremo volere che la finestra figlia, fintantoché è attiva, renda impossibile utilizzare la finestra padre. Per questo ci viene in aiuto l’opzione modal:
const {BrowserWindow} = require('electron')
let top = new BrowserWindow()
let child = new BrowserWindow({parent: top, modal: true, show: false})
child.show()
top.show()
In questo caso abbiamo aggiunto le opzioni modal e show. Con “show: false” si indica che la finestra debba essere inizialmente visibile, questo per evitare o essere certi che non finisca dietro alla finestra padre.
Un’altra opzione-evento interessante è ready-to-show. La finestra che appare è un browser, cioè ne deriva che il contenuto sia HTML e CSS come minimo, tuttavia un contenuto più complicato può produrre in talune situazioni, con computer sotto stress o meno potenti, una ritardo nella visualizzazione. Un esempio tipico è il colore di sfondo, quello di default del browser è bianco, mentre magari la nostra applicazione ha il nero. In fase di avvio vedremo per un attimo una finestra bianca che poi diventa di colore nero, generando un antiestetico effetto flash. Per ovviare a questo problema Electron permette il caricamento dell’intera pagina per mostrarla solo quando essa è realmente pronta.
const {BrowserWindow} = require('electron')
let win = new BrowserWindow({show: false})
win.once('ready-to-show', () => {
win.show()
})con l’opzione once ovviamente si indica che questo tipo di evento si verifica una sola volta.
Nell’articolo sulla comprensione di una app abbiamo visto che BrowserWindow aveva due opzioni, width e height con due valori espressi in pixel. Implicitamente è chiaro che essi sono il dimensionamento della finestra che il processo Main andrà a creare. Non sono però gli unici. Infatti la finestra creata può essere allargata o ristretta a piacere. E’ assolutamente d’obbligo utilizzare la modalità Responsive quando si crea una app Electron, nel caso di un allargamento solitamente non è un problema gestirlo, ma nel caso contrario è meglio fissare una dimensione minima oltre il quale non andare. Electron fornisce delle opzioni per entrambe le casistiche che sono minWidth , maxWidth e minHeight , maxHeight. Personalmente consiglio di utilizzare almeno le funzionalità “min” per non fornire uno stato applicativo che si sfasci se troppo compresso. Volendo è possibile anche fornire un applicativo che non permetta proprio il ridimensionamento, in questo caso l’opzione resizable: false ci viene in aiuto. Può essere utile ad esempio in applicativi particolari come un mini-player musicale o situazioni simili.
Un altro modo di mostrare le finestre può essere quello di levare i bordi, in questo caso avremo una finestra con il solo contenuto, senza i vari bordi e la barra del titolo:
const {BrowserWindow} = require('electron')
let win = new BrowserWindow({width: 800, height: 600, frame: false})
win.show()Solo per macOS esistono alcune funzioni in più, come ad esempio mantenere i bordi ed eliminare il bordo che contiene il titolo. A questa funzione può essere aggiunta la funzione “transparent: true” oppure “opacity: 0.0” . Nel caso di opacity (solo macOS e Windows) possiamo scegliere valori tra 0.0 a 1.0, dove 0.0 è totalmente trasparente e 1.0 è completamente opaco. In sostanza possiamo giocare con sfondi particolari e creare una finestra che dia l’impressione avere dei bordi totalmente irregolari rispetto al solito rettangolo. Nel caso di transparent invece si sceglie solo la trasparenza, ma questa ha delle regole. Se impostata a true non può essere ridimensionata e non si può cliccare il contenuto, questo per chiari motivi di sicurezza. Quindi il suo utilizzo è delimitato all’esecuzione di alcuni eventi che possano cambiare tale stato e di conseguenza accedere al contenuto.
Anche per questa API la lista di eventi è lunghissima e merita di essere letta per sapere che esistono talune opzioni.