Le Framework Electron

Electron est un Framework connu pour faire des applications de bureaux grâce à des langages Web tel que le Javascript, l’HTML et le CSS. Ce Framework est donc tout à fait adapté pour les personnes ayant seulement les bases de la programmation Web.

 

Installation d’Electron

Pour commencer à utiliser Electron, voici la commande que vous devez utiliser dans le terminal afin de l’installer.

Le package est donc après cette exécution, prêt à l’emploi.

 Création de notre première application

Voici les fichiers dont nous aurons besoin à la base :

  • Le manifeste de l’application
  • Le script qui lance des fenêtres
  • La page HTML que nous allons afficher

Création du manifest

Un fichier manifest fournit les informations d’une application. Celui d’une application Electron est écrit dans un fichier package.json et il contient les même clés que n’importe quel site Node.js.

Voici les trois clés minimums que nous devons posséder :

  • Name, qui contiendra le nom de notre application
  • Version, qui contiendra la version de celle-ci
  • Main, affichera le chemin vers le script principal

Notre manifest va ici être généré grâce à la commande « npm init ».

Après avoir rempli les champs comme vous le souhaitez, voici à peu près à quoi devraient ressembler le récapitulatif de votre manifest :

Vous pouvez de même exécuter cette commande dans le répertoire de votre projet. Cela vous permettra de rajouter la dépendance à Electron.

Création du script principal

 

Notre script principal est un fichier Javascript qui va créer les différentes fenêtres de l’application mais aussi accéder à certaines API. Vous pouvez utiliser n’importe quel éditeur de texte pour programmer ce fichier.

Commençons par importer le module electron :

En plus des commentaires voici le détail de ce que contient le code :

La variable globale, mainWindow contient notre fenêtre principale. À la suite de cela nous utilisons la fonction createWindow qui initialise cette fenêtre. Ensuite vient la création d’une nouvelle instance de classe BrowserWindow. Elle s’affiche automatiquement. Enfin vient le chargement de notre page HTML qui est stockée dans index.html, puis lorsque la fenêtre est fermée on l’a défini à null et on utilise l’évènement closed de notre fenêtre principale.

Maintenant, il faut appeler la méthode que nous venons de créer lorsque l’application démarre. Pour cela, il faut la lier avec l’évènement ready de notre constante app. Ainsi on est sûr qu’Electron a bien fini de s’initialiser et qu’on peut utiliser sans problèmes ses APIs.

Les objets Electrons ont une méthode on qui permet d’écouter leurs évènements. Comme nous pouvons le voir sur le bout de code ci-dessus.

Même après avoir fermer notre fenêtre le script principal continuera tout de même à tourner, pour éviter cela nous allons utiliser l’évènement window-all-closed , auquel on fait appel lorsque toutes les fenêtres sont fermées. Et vient ensuite l’utiisation de la méthode app.quit qui va nous permettre de quitter l’application.

Dans cette partie du code, j’utilise la condition if(process.platform !== ‘darwin’) qui vérifie que l’application n’est pas sous Mac OS X, car les applications sous cette plateforme continuent de tourner en arrière-plan sans se fermer.

Cependant nous risquons de rencontrer un problème. Si un utilisateur qui a un Mac lance l’application pour la première fois en cliquant sur l’icône dans le Dock, il verra bien notre fenêtre s’afficher. Mais s’il la ferme, l’application ne s’arrêtera pas. Et lorsqu’il va de nouveau cliquer sur l’icône, il ne verra rien, car l’évènement ready d’app ne sera pas enclanché, du fait qu’il ne l’est qu’une fois, au démarrage de notre application.

Voici une alternative qui permettra de résoudre ce problème :

Nous utiliserons l’évènement activate qui est déclenché lorsqu’on clique sur l’icône, ensuite on vérifie que la fenêtre n’existe pas encore, si c’est le cas on la crée.

Voici à quoi ressemble notre fichier pour l’instant :

 

Nous allons maintenant passer à la création de la page HTML.

Création de notre page HTML

Lors de la création de notre script principal, nous chargeons une page appelée index.html, c’est donc dans ce fichier que nous allons écrire notre code HTML.

Je vous laisse champ libre pour créer votre page, que ce soit un simple Hello World, ou une page designé avec du CSS.

 

Notre interface créée, il ne nous reste plus qu’à lancer notre application grâce à la commande : « electron . »

Electron va lire notre manifeste afin de trouver le chemin du script et de l’éxècuter. N’oubliez donc pas de renommer notre fichier JavaScript comme il est nommé dans notre manifeste. De même pour le fichier HTML.

Voici donc une vue sur notre première application :

Les fenêtres

Ouvrir des fenêtres

Nous avons pu créer une fenêtre dans l’application précédente grâce à la classe BrowserWindow.  Nous l’avons défini avec deux paramètres de taille. Voici les autres nombreuses possibilités que nous avons :

  • width et height indiquent respectivement la largeur et la hauteur de la fenêtre, en pixels.
  • x et y, servent à définir la position d’origine de la fenêtre. Si vous voulez la centrer, vous pouvez aussi définir l’argument center à true.
  • fullscreen, un booléen qui indique si la fenêtre est en plein écran ou non.
  • title, concerne le titre de notre fenêtre Si vous utiliser la balise title en HTML cela fonctionne aussi.
  • icon, le chemin vers l’image qui doit servir d’icône à cette fenêtre.
  • closable, un booléen indiquant si on peut fermer la fenêtre
  • movable, un autre booléen qui indique si notre fenêtre peut être déplacée ou non.

Voici comment vous pouvez déclarer les paramètres dans le fichier Javascript.

Dans notre exemple ici, on précise que la fenêtre est de 1800x1200px et que l’icône est dans le fichier test.png.

Fenêtre enfants

Les fenêtres enfants sont des fenêtres qui héritent d’une autre fenêtre. Elle s’affichera toujours par-dessus son parent et se fermera si la fenêtre parente se ferme.

Pour la créer, on définit le paramètre parent en mettant pour valeur la fenêtre parent.

Le paramètre modal qui est un booléen, vous laissera a possibilité de ne plus utiliser la fenêtre parente tant que celle-ci est ouverte.

 

Manipulation des fenêtres

Nombreuses sont les méthodes qui permettent de gérer une fenêtre, en voici quelques exemples :

  • Close, qui permet de fermer la fenêtre
  • Maximize, qui permet de l’agrandir
  • Minimize, la réduire
  • getPropriete, nous permettra de jouer avec les propriétés d’une fenêtre.
  • isPropriete et setPropriete qui permettront de définir une nouvelle valeur en argument.
  • SetFullScreen, va par exemple modifier les propriétés de plein écran
  • LoadUrl, va charger une page HTML
  • SetProgressBar définira une barre de progression (cette méthode prend un nombre entre 0 et 1)

Fenêtre sans bordure

Il nous est possible avec Electron de créer des fenêtres sans bordures, pour les créés il faudra utiliser le paramètre frame du constructeur de BrowserWindow. Un booléen qui supprimera les bordures lorsque le paramètre est à false.

En utilisant ces propriétés, voici le résultat obtenu :

 

Communication entre processus

Avec Electron, on peut rencontrer deux types de script :

  • Le script principal
  • Les scripts rendus

Les scripts dit rendus sont ceux qui sont inclus dans les pages HTML. Les deux types de script peuvent accéder aux modules Node.js mais certains modules d’Electron ne sont accessible que par le script principal, l’affichage des boîtes de dialogues en fait partie.

 

L’IPC

IPC va être un moyen d’envoyer des messages entre différents processus de l’application vus précédemment.

Si nous prenons l’exemple d’un message d’erreur dans le terminal. Depuis notre script principal, il va être possible d’utiliser la méthode console.log. Par contre si on l’appelle dans notre fenêtre le message sera afficher dans l’outil développeur de votre navigateur.

C’est là que l’utilisation d’IPC intervient afin de préciser à notre script principal qu’il faut nous afficher un message. On peut pour cela utiliser la méthode ipc.send(‘le message’).

Ce code en prend l’exemple :

A mettre bien sur dans un fichier externe, ici je l’ai mis dans un fichier ipc.js.

Un bouton est à rajouter dans votre code HTML, comme ceci :

Ainsi que l’inclusion du script à mettre à la fin du code HTML afin d’éviter l’attente du chargement du DOM.

On importe l’object ipcRenderer du module electron. C’est lui qui va nous servir à utiliser IPC dans notre script de rendu. Lors du clic sur le bouton, on enverra un signal au script principal via IPC pour lui dire d’écrire un message dans le terminal, grâce à la méthode ipc.send. Pour communiquer avec IPC, on a différents signaux. Ici on utilise donc un signal qui s’appelle log-error.

Maintenant que notre script de rendu envoie un signal, il faut le récupérer. Pour cela, il faut aller dans notre script principal et importer l’objet ipcMain du module Electron. Ensuite, on écoute l’évènement log-error comme n’importe quel autre, avec la méthode on. Et on y met le code qui affiche une erreur dans le terminal.

 

Voici le rendu que nous avons sur notre page HTML :

Ainsi que le message affiché dans le terminal lorsque vous cliquez sur le bouton :

Il est aussi possible avec IMC d’avoir un message d’erreur personnalisé sans créer deux logs IPC différents.

Pour cela il suffit de passer l’objet en argument après la méthode ipc.send.

Et dans le script principal rajouter les arguments arg et event. Arg correspondant à l’argument qu’on a passer dans le script de rendu.

 

Voici ce que donne cette modification :

Les boîtes de dialogue

Maintenant que nous avons vu comment afficher un message d’erreur, nous allons maintenant aborder les boîtes de dialogue.

Afin d’afficher des messages d’erreur dans une boîtes de dialogues nous avons accès à la méthode showErrorBox de l’objet dialog (propre à Electron). Celle-ci prend en argument un titre et un message. Or mis les messages d’erreurs nous pouvons aussi utiliser la méthode dialog.showMessageBox  qui prend comme argument un objet.

Voici un exemple de celles-ci :

  • Type : c’est le type de la boite de dialogue. Elle peut être par exemple : warning, info, error, …
  • Title : correspond au titre de la boite de dialogue.
  • Message : le message qui sera affiché.
  • Buttons : contient les différents boutons accessibles aux utilisateurs.

Après avoir déclaré l’objet Remote :

Les menus

Electron propose une API maison pour les menus, il permet d’afficher des menus contextuels mais aussi un menu pour la fenêtre général.

Le menu contextuel

Le menu contextuel HTML5 étant supporté seulement sur Firefox, avec Electron il existe deux méthodes qui vont nous permettre d’en créer un. La première est basée sur la fonction append de la classe Menu mais celle-ci est beaucoup plus complexe à utiliser que la seconde.

C’est donc pour cela que nous allons aborder dans ce tutoriel, la seconde méthode.

Voici quelques-unes des propriétés disponibles pour un item de menu :

  • label, qui représente le texte affiché ;
  • icon, qui est un chemin vers l’icône du menu ;
  • accelerator, un raccourci clavier pour cette action.
  • type, qui peut être soit 'normal', 'separator', 'submenu', 'checkbox' ou 'radio'.
  • submenu, qui est un tableau contenant les éléments d’un sous-menu ;
  • click, qui est une fonction à appeler lorsqu’on clique sur cet élément.

Vous venez donc de voir un aperçu de ce que peut offrir le Framework Electron.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *