Dans ce troisième article nous allons voir comment gérer les fenêtres avec électron en jouant sur les nombreuses propriétés disponibles. Nous verrons ainsi comment on peut les rendre fixes, transparentes, sans bordure…

La chargement de la fenêtre

Dans le code de l’application de démarrage on a vu que la fenêtre est créée avec cette ligne de code dans main.js (main process) :

mainWindow = new BrowserWindow({width: 800, height: 600})

On utilise la classe BrowserWindow de l’API d’Electron. C’est une bonne habitude de consulter la documentation de l’API. On nous dit que cette classe sert à créer et contrôler les fenêtres navigateur.

La fenêtre est effectivement chargée et affichée ensuite avec ce code :

mainWindow.loadURL(url.format({
  pathname: path.join(__dirname, 'index.html'),
  protocol: 'file:',
  slashes: true
}))

Le souci c’est que l’utilisateur risque de la voir apparaître la fenêtre progressivement et de façon peut-être pas trop esthétique. Pour éviter ça on conseille dans la documentation de n’afficher la fenêtre qu’une fois qu’elle est chargée grâce à l’événement ready-to-show.

On commence par dire de ne pas afficher tout de suite la fenêtre en ajoutant la propriété show avec la valeur false :

mainWindow = new BrowserWindow({width: 800, height: 600, show: false})

Et ensuite on place le code pour l’événement :

mainWindow.loadURL(url.format({
  ...
}))

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

Maintenant la fenêtre ne sera affichée qu’une fois qu’elle est totalement chargée !

Mais comme rien n’est jamais parfait le temps d’attente pourrait devenir gênant si la fenêtre est vraiment très chargée… dans ce cas-là il est conseillé plutôt que d’attendre de placer un fond coloré dans les tons du fond de l’écran. Là je ne suis pas convaincu de l’effet obtenu… A vous de voir…

Les options

On a vu que le constructeur de la classe BrowserWindow accepte des options :

mainWindow = new BrowserWindow({width: 800, height: 600, show: false})

Ici on se contente de fixer la largeur, la hauteur et l’affichage. Mais si vous consultez la documentation vous allez trouver de très nombreuses options. Vous allez d’ailleurs voir que les valeurs par défaut pour la largeur et la hauteur sont justement 800 et 600 donc il ne sert à rien de les préciser dans notre code.

Par défaut on a donc cet aspect (sous Windows) :

C’est une fenêtre classique déplaçable, réglable, qu’on peut réduire ou mettre en plein écran.

On a par défaut ces principales propriétés :

• width : 800
• height : 600
• center : true
• resizable : true
• movable : true
• minimizable : true
• maximizable : true
• closable : true
• focusable : true
• fullscreenable : true
• show : true
• backgroundColor : #FFF (blanc)
• titleBarStyle : default

Les noms des propriétés sont suffisamment explicites pour comprendre leur effet.

Une fenêtre rigide

Avec toutes ces options on peut donc par exemple rendre une fenêtre fixe aussi bien en positon qu’en dimensions :

mainWindow = new BrowserWindow({
  resizable: false,
  movable: false
})

Avec ce code impossible de bouger la fenêtre ou de changer sa largeur ou sa hauteur, elle est figée…

Une fenêtre limitée

On peut aussi limiter la plage de changement en largeur et en hauteur :

mainWindow = new BrowserWindow({
  minWidth: 800, 
  maxWidth: 1000,
  minHeight: 600,
  maxHeight: 800
})

La largeur reste dans la plage 800-1000 et la hauteur dans la plage 600-800. Impossible d’aller au-delà.

Je n’insiste pas avec les autres propriétés, c’est le même principe.

Le titre de la fenêtre

La fenêtre s’appelle « Hello World! » mais d’où vient ce titre ? Logiquement de la balise title du fichier index.html :

<title>Hello World!</title>

On peut le changer :

<title>Bonjour le monde !</title>

Mais on va supprimer cette balise pour voir le résultat :

On se retrouve maintenant avec le nom renseigné dans package.json.

Maintenant on va changer le titre avec une propriété :

mainWindow = new BrowserWindow({
  title: 'Nouveau titre'
})

Si maintenant vous remettez la balise title c’est elle qui a la préséance.

On voit qu’on peut avoir une action dynamique sur le titre en agissant sur une propriété (avec setTitle), ce qui peut être intéressant.

Fenêtres spéciales

Fenêtre sans cadre (frameless)

Une fenêtre frameless n’a ni bordure ni titre, ni icône, ni barre de menu. C’est facile à réaliser :

mainWindow = new BrowserWindow({
  frame: false
})

Fenêtre transparente

Voilà encore une fenêtre originale : transparente. Enfin quand même pas totalement transparente sinon on ne verrait rien !  C’est aussi facile à réaliser :

mainWindow = new BrowserWindow({
  transparent: true,
  frame: false
})

On n’a plus que le Html sur le fond de l’écran…

Compléments

Je vous rappelle que vous pouvez télécharger sur le site d’Electron une application de démonstration :

Vous trouverez dans l’application des explications et démonstrations concernant les fenêtres :

Dans le prochain article on verra la création de menus pour compléter les fenêtres.