DÉVELOPPEMENT CROSS-

PLATEFORME D’
APPLICATION DESKTOP

ENSEIGNANTE : RABIAA ZITOUNI

 CHAPITRE 1
INTRODUCTION AU
DÉVELOPPEMENT
CROSS PLATEFORM
 QU'EST-CE QUE UNE APPLICATION
DESKTOP ?
Une application DESKTOP est un programme qui peut être exécuté sur un
ordinateur autonome pour effectuer une tâche spécifique par un utilisateur final.

Les applications DESKTOP sont des logiciels qui interagissent avec le système

d'exploitation au lieu d'applications Web ou mobiles.

Ces applications représentent n'importe quel programme tant qu'il s'exécute sur un
ordinateur et fournit une interface utilisateur pour les entrées et les sorties.

 Ces applications sont généralement stockées dans un seul endroit, mais peuvent
avoir une icône qui reste visible à l'écran.

3
 QU'EST-CE QUE UNE APPLICATION
DESKTOP ?
Certaines applications telles que Microsoft Word (le traitement de texte) et les lecteurs
multimédias (lecture son) permettent d'effectuer différentes tâches, tandis que d'autres, telles
que les applications de jeu, sont développées pour le divertissement.
Voici quelques exemples d'applications de desktop :
•Photoshop
•Skype
•Navigateurs comme Chrome, edge et Firefox
•Word press
•Microsoft Word, Excel

4
 AVANTAGES DE L'APPLICATION
DESKTOP 
1. LA FLEXIBILITÉ : Il est très facile d'écrire des applications de bureau qui tirent
parti du matériel de l'utilisateur (tels que : scanners, caméras, WiFi, ports série, ports
réseau, etc.)
2. PORTABILITÉ : Les applications desktop peuvent être portables, mais certaines
entre eux ne sont pas portables et nécessitent une installation manuelle de la part de
l'utilisateur.
3. MAINTENANCE: Les applications de bureau peuvent généralement être mises à
jour manuellement (installation des mises à jour).

4. PERFORMANCE : Comme il n'est pas nécessaire de se connecter à Internet, les

applications de bureau nous permettent de bénéficier des performances plus rapides
(s'exécute plus rapidement que les applications Web).
5
 AVANTAGES DE L'APPLICATION DE
DESKTOP 
5. SÉCURITÉ: Avec le niveau de partage de données qui se produit
quotidiennement sur Internet, il existe des risques de menaces de sécurité.
Personne n'aime compromettre sa vie privée.
6. RENFORCER LA COLLABORATION ENTRE LES ÉQUIPES : Étant
donné que l'utilisateur conserve ses données sur son propre système
informatique (le programme s'exécute sur le bureau de l'utilisateur), il est plus
difficile pour les pirates d'accéder aux données des personnes.

6
 DÉVELOPPEMENT NATIF VS
DEVELOPPEMENT  CROSS-PLATFORM
 Le développement informatique consiste à concevoir et maintenir le
fonctionnement des logiciels informatiques.

 Le développement informatique concerne tout ce qui touche à l’étude, à la

conception, à la construction, à la mise au point, à la maintenance et à
l’amélioration des logiciels et des sites web.

 Parmi les grandes familles technologiques de développement, on peut citer

le développement natif et le développement cross-platform

7
8
 DÉVELOPPEMENT NATIF

L’application native  fait référence à un logiciel conçu et développé avec le

langage de programmation natif propre au système d'exploitation et utilise des
API système qui utilise maximum des ressources de la plateforme. Ce type
d’application sera plus rapide et fluide 

Le développement d’une application dite native est spécifique au système

d’exploitation souhaité : Elle est écrite dans un ou plusieurs langages de
programmation conçue spécifiquement pour la plate-forme choisie.

9
 AVANTAGES DU DÉVELOPPEMENT NATIF

Meilleure expérience utilisateur: fiabilité et dotée d’une meilleure

réactivité ainsi qu’une résolution supérieure ce qui assure une meilleure 
expérience utilisateur.
Meilleure résolution, performance et qualité pour une meilleure
interactivité: elle permet un accès plus facile à toutes les fonctionnalités
Les notifications sont uniquement disponibles sur les applications
natives. Ces notifications vous permettent d’alerter vos utilisateurs et
d’attirer leur attention chaque fois que vous le souhaitez, que ce soit pour
du nouveau contenu ou une offre promotionnelle.

10
 AVANTAGES DU DÉVELOPPEMENT NATIF

Accès direct en hors connexion Internet à votre application (Accessibilité hors

connexion) .
Il permet d'utiliser des fonctionnalités avancées, telles que l'entrée USB, des
mises en réseau, gestion de la mémoire, etc.
Il y a une meilleure vitesse, stabilité et plus de fonctionnalités à la disposition
du développeur : les applications natives sont plus rapides puisqu'elles
s’appuient sur un langage compilé

11
 INCONVÉNIENT DU DÉVELOPPEMENT
NATIF
 Pas la même application sur les différentes plateformes : Si le développeur cible

plusieurs plates-formes, deux applications distinctes ou plus devra être développé.

Le coût du développement de ces applications est élevé: aucun code ne peut être

partagé entre des applications distinctes.

 Problème de compatibilité après les mises à jour.

La structure d’une application native est complexe.

12
INCONVÉNIENT DU DÉVELOPPEMENT
NATIF

Le développement et la maintenance des interfaces sont délicats.

Le temps de développement peut être lent lors de la création de plusieurs
applications.
Le temps de test est affecté, car deux ou plusieurs bases de code complètement
séparé ont besoin d'être testé.

13
 DEVELOPPEMENT  CROSS-PLATFORM

Le cross-platform, apparu au début des années 2010, a aujourd’hui un succès

qu’on ne peut pas nier.
Le cross-platform se concentre sur la fourniture d'une expérience en créant une
base de code pour une variété des plates-formes.
Cette approche réduit considérablement le temps et les coûts de
développement. Pourtant, il y a des inconvénients importants qui peuvent
contaminer l'expérience de l'utilisateur et rendre l'application inutilisable ou
indésirable pour le consommateur.

14
 AVANTAGES DE DEVELOPEMENT D’ UNE
APPLICATION CROSS PLATEFORME
Les applications cross-platforme produisent un même code source compilé, qui
produit deux applications natives. Cela induit une meilleure performance et une
expérience utilisateur plus proche du natif.

Le code peut être partagé entre différentes versions des applications à travers des
périphériques ou systèmes d'exploitation.: Permet de développer sur deux
plateformes avec un seul code

Le processus de développement nécessite moins de ressources et peut nécessiter

moins des ingénieurs.

15
 AVANTAGES DE DEVELOPEMENT D’ UNE
APPLICATION CROSS PLATEFORME

Temps de développement plus court et plus grand nombre d'utilisateurs.

 La prise en charge des applications futures est plus facile, car les mises à jour
peuvent être poussées simultanément pour toutes les plateformes.

L'idée d’une application cross plateforme semble très

attirante au premier regard. Néanmoins, il présente des
inconvénients considérables qu'il ne faut pas sous-estimer.

16
LES TECHNOLOGIES POUR LE DÉVELOPPEMENT
DESKTOP CROSS-PLATEFORME

17
CHAPITRE 1I

LES BASES
D’ELECTRON
 QU'EST-UN ELECTRON?

 Electron est une librairie open source développée par GitHub et permet de réaliser
très rapidement des applications

 Electron est un framework permettant de construire des applications multi-

plateformes (Windows/MacOS/Linux) avec des technologies web ( HTML, CSS et
Javascript ).

 La construction des applications est faites en empaquetant des fichiers de code

prévus pour un site web et en les transformant en un fichier exécutable comme un

programme Desktop classique.

19
 QU'EST-UN ELECTRON?

Schéma du processus d’empaquetage

20
 QU'EST-UN ELECTRON?

• Electron est désormais très largement exploité, voici quelques

applications:
• les apps des blogs : WordPress
• les éditeurs de code : Visual Studio Code
• les apps de Lecture multimédia : WebTorrent
• les apps de messagerie instantanée :Slack
• GUI mongoDB: Mongomix

21
 LA STRUCTURE D’UNE APPLICATION
ELECTRON
• Electron embarque trois piliers principaux
1.Chromium : c’est le navigateur open source qui sert de base au célèbre Chrome
de Google. Il va assurer le rendu visuel de l’application( la partie front-end)

2.NodeJS : c’est un environnement d’exécution de code JavaScript. Il permet

l’accès au système de fichier de l’ordinateur, ainsi que le réseau(la partie back-
end).
3.APIs personnalisé : permet l’accès aux fonctions natives, propres à chacun des
OS.

22
 LE PROCESSUS PRINCIPAL ET LE
PROCESSUS DE RENDU
 Processus principal (Main process):

C’est le processus principal qui va contrôler l'état de l'application. Vous aurez tout les
accès depuis ce processus, via les API native ou de NodeJS. Il peut aussi créer de nouveau
processus de rendu, ainsi que de démarrer et de quitter l’application. Ce processus est
unique
 Processus de rendu(Render process)

Il va être responsable de la vue de votre application, par le biais d’affichage de vos
pages HTML/CSS(contrôle l'interface utilisateur) . Vous aurez accès au javascript pour gérer
les contrôleurs et interactions. Mais attention, pas d’accès direct au système.
Chacun des processus de rendu sont indépendant les uns des autres. Si un crash, il
n’affecte pas ses voisins. Il peut être caché, permettant d’exécuter du code en arrière plan.
Ce processus peut être multiple.
•   23
 COMMUNICATION ENTRE LE PROCESSUS
PRINCIPAL ET LE PROCESSUS DE RENDU

 La communication entre le processus principal et le processus

de rendu est faites à travers un module mit en place par
Electron appelé IPC(Inter-Process Communication)
 Ce module est appelable depuis chacun des processus:
ipcMain et ipcRender.
 Cette communication fonctionne sous forme de canaux, et
l’échange est bi-latéral. Celle-ci s’apparente à des stockets.

24
25
 COMMUNICATION ENTRE LE
PROCESSUS PRINCIPAL ET LE
PROCESSUS DE RENDU
1 2 3
Main RENDER
Main .js PROCESS PROCESS
Package.json Main.js Index.html
4
IPC

 Package.json est le point d’entrée de votre application. Il va

indiquer à Electron ou est le main process,
  Main.js définit votre processus principal. Il va créer la fenêtre
graphique pour y appeler le render process.
  index.html définit votre vue.

26
 CRÉATION D’UNE APPLICATION
ÉLÉMENTAIRE
 Prérequis​:
1) Installation du Node.js (utilisation de la dernière version LTS )

2) Installation de l'environnement de développement Git

3) Créer l’application​
créer un dossier et initialiser un package npm (package.json)

27
 CRÉATION D’UNE APPLICATION
ÉLÉMENTAIRE

 Prérequis​:
installez le package electron dans les devDependencies de votre
application

Exécution de l’application

28
29
Package.json

30
Main.js

31
Index.html
32
Exécution de l’application
33
 DISTRIBUTION DE
L'APPLICATION
 Pour distribuer votre application avec Electron, vous devez
l’empaqueter , vous pouvez utiliser des outils spécialisés ou une
approche manuelle.
1. Les outils spécialisés: Ces outils se chargeront des
différentes opérations nécessaires à l'obtention d'une application
Electron distribuable telles que l'empaquetage, le renommage de
l'exécutable et l'initialisation des icones.

34
 DISTRIBUTION DE L'APPLICATION

Electron-forge:
Un outil complet pour créer, publier et installer des applications Electron. Il fournit
un environnement de développement pratique et tout les configuration nécessaire
pour créer une application pour plusieurs plates-formes.

Electron-builder:
Un outil CLI qui aide à créer des distributions multiplateformes pour les applications
Electron. Il prend en charge les cibles macOS, Windows et Linux prêtes à l'emploi. Il
prend en charge les formats de fichiers multiples pour chacune de ces plates - formes
telles que dmg, pkg, maset, mas-devpour Mac OS.

35
 DISTRIBUTION DE L'APPLICATION

• Electron-packager

Un outil de ligne de commande qui regroupe le code source de l'application

Electron pour avoir des exécutables tels que .app ou .exe avec une copie d'Electron.

36
 DISTRIBUTION DE L'APPLICATION

2. Distribution manuelle​
La distribution manuelle est basée sur le téléchargement des binaires
précompilés d'Electron.

37
 LES BOILERPLATES ET CLIS

• Un "Boilerplate est un dossier (vous pouvez cloner et

personnaliser) et qui présente un point de départ à partir de laquelle
vous construisez votre application.

• Les CLIS (lignes de commandes) sont plus assistants et utiles mais

imposent une ligne de conduite sur la manière dont votre code doit
être structuré et construit. 

38
 SIGNATURE DE CODE

• La signature de code est une technologie de sécurité que

vous utilisez pour certifier qu'une application a bien été
créée par vous.

• Si vous développez une application Electron destinée à être

empaquetée et distribuée, son code devra être signé.

39
 CHAPITRE 1II

BROWSER WINDOW
 CRÉATION DE BROWSER WINDOW

• Rôle :Créer et contrôler les fenêtres du navigateur.

• Le code ci-dessous permet de créer une fenêtre de navigation
(browser window) afin d’appeler la fonction createWindow()

41
 CRÉATION DE BROWSER WINDOW

• La page html est chargée en utilisant la méthode loadFile() ou

loadURL.
• L'argument requis pour la méthode loadURL :
chemin de l’emplacement de la page html (index.html)
le lien d’une page web

42
Exemple:

43
 LES PROPRIÉTÉS DE BROWSER WINDOW

• Les options de BrowserWindow ne sont pas obligatoires.

• Le BrowserWindow a des valeurs par défaut de sorte que, si vous
n'entrez pas des options comme la largeur et la hauteur dans
l'argument, la fenêtre apparaîtra toujours.

• Une liste de toutes les options disponibles se trouve dans la

documentation Electron
https://runebook.dev/fr/docs/electron/api/browser-window
• La documentation pour le BrowserWindow cite plus de 40 propriétés
facultatives, toutes avec des valeurs par défaut.
44
 LES PROPRIÉTÉS DE BASE ((WIDTH, HEIGHT,

MINWIDTH, MINHEIGHT, MAXWIDTH,

• width (Integer ): la largeur de la fenêtre en pixels. La valeur par défaut est 800.
MAXHEIGHT)
• height (Integer): la hauteur de la fenêtre en pixels. La valeur par défaut est 600.

• minWidth (Integer): la largeur minimale de la fenêtre. La valeur par défaut est 0.

• minHeight (Integer): la hauteur minimale de la fenêtre. La valeur par défaut est 0.

• maxWidth (Integer): la largeur maximale de la fenêtre.

• maxHeight (Integer): la hauteur maximale de la fenêtre.

• resizable(Boolean): définit si la fenêtre peut être redimensionnée ou pas par l’utilisateur

• movable (Boolean): définit si la fenêtre peut être déplacée par l’utilisateur. Cette propriété
n'a aucun effet sous Linux

41
Exemple:

46
 AUTRES PROPRIÉTÉS DE BROWSER

• center (Boolean): afficher la fenêtre dans le centre de l’écran.

• x (Integer): décalage à gauche de la fenêtre par rapport à l'écran. La valeur par défaut

est center.

• y (Integer): décalage à droite de la fenêtre par rapport à l'écran. La valeur par défaut est center.

• title (String): titre de la fenêtre. La valeur par défaut est "Electron". Si la balise <title> est

• définie dans le fichier HTML chargé , cette propriété sera ignorée.

• BackgroundColor (String): couleur d'arrière-plan de la fenêtre en valeur hexadécimale,

• comme #66CD00.

• fullscreen (Boolean): quand explicitement mit à true, le bouton de plein écran sera caché.

41
 AUTRES PROPRIÉTÉS DE BROWSER

• alwaysOnTop(Boolean): la fenêtre doit toujours rester au-dessus des autres fenêtres.

• darkTheme (Boolean): le thème sombre est utilisé pour la fenêtre créée.

• images(Boolean): active la prise en charge des images. La valeur par défaut est true.

• webaudio(Boolean): active la prise en charge de WebAudio. La valeur par défaut est true.

• kiosk (Boolean): le mode kiosque. La valeur par défaut est false.

• skipTaskbar (Boolean): affiche la fenêtre dans la barre des tâches. La valeur par défaut

• est false.

• show (Boolean): indique si la fenêtre doit être affichée lors de sa création.

41
 TYPES DE BROWSER WINDOW
1. Fenêtre sans cadre (Frameless window)
• C’est une fenêtre affichée sans bordures et sans barres d'outils, elle n’affiche
que le contenu HTML fourni.
• Ce type de window peut être créées en utilisant l'option frame et en la
définissant à false.

49
 TYPES DE BROWSER WINDOW
2. Fenêtre transparente
• Pour rendre la fenêtre transparente, il suffit de définir l'option transparente à
true.

50
 TYPES DE BROWSER WINDOW
3. Fenêtre non cliquable
• Pour créer une fenêtre non cliquable, c'est-à-dire la fenêtre ignore tous les
événements de la souris, vous utilisez la méthode
setIgnoreMouseEvents(ignore)

51
 TYPES DE BROWSER WINDOW
4. Fenêtre parent et enfant
• En utilisant l'option parent, vous pouvez créer une fenêtre enfant.
• La fenêtre child sera toujours au-dessus de la fenêtre top.

52
 TYPES DE BROWSER WINDOW

5. Fenêtre modale
• C’est une fenêtre enfant qui désactive la fenêtre parent.

53
 WINDOW STATE

• Electron-window-state est un package qui permet d'enregistrer l'état d'un

BrowserWindow, les dimensions (largeur et hauteur), la position (coordonnées
x et y) et l'état actuel (maximisé ou non). Les données enregistrées peut être
récupérées ultérieurement lors de la création d'une instance BrowserWindow.
• Tout d’abord vous devez installer le package electron-window-state:

npm install --save electron-window-state

• Puis, écrivez le code ci-dessous:

mainWindowState =windowStateKeeper({options});

54
 WINDOW STATE

Les options de windowStateKeeper

1. defaultHeight (Number): la hauteur qui doit être retournée si aucun fichier n’existe encore.
La valeur par défaut est 600.
2. defaultWidth (Number): la largeur qui doit être retournée si aucun fichier n'existe encore. La
valeur par défaut est 800.
3. Ensuite, les options de win obtiendront ses valeurs à partir de l'objet mainWindowState.
Maintenant, Electron sait exactement comment créer la fenêtre win, et où la placer sur l'écran.
4. Lorsque l'utilisateur déplace, redimensionne ou ferme la fenêtre win, le mainWindowState mettra
à jour son état et enregistrera ces données dans la base de données “electron-settings”.

55
 LES OPTIONS WINDOW STATE

 x (Number): x est enregistrée de l’état chargé. indéfini si l'état n'a pas encore été enregistré.
 y (Number): y est enregistrée de l’état chargé. indéfini si l'état n'a pas encore été enregistré.

 width (Number): la largeur enregistrée de l’état chargé. defaultWidth si l'état n'a pas encore
été enregistré.
 height (Number): la hauteur enregistrée de l’état chargé. defaultHeight si l'état n'a pas
encore été enregistré.

56
 LES MÉTHODES DE WINDOW STATE

• manage(window): permet d’enregistrer les informations écoutées (on) de

BrowserWindow pour les évènements liés aux changements de taille ou de
position (redimensionner, déplacer). Il restaurera également l'état agrandi ou plein
écran de la fenêtre. Lorsque la fenêtre est fermée, nous supprimons
automatiquement les écouteurs et enregistrons l'état.y (Number): y est enregistrée
de l’état chargé. indéfini si l'état n'a pas encore été enregistré.
• unmanage (window): permet de supprimer tous les écouteurs de la fenêtre du
navigateur gérée au cas où elle n'aurait plus besoin d'être gérée.
• saveState(window): permet d’enregistrer l'état actuel de la BrowserWindow
donnée, dans la plupart des cas, il est préférable d'utiliser manage().

57
Exemple :

58
 LES MÉTHODES DE BROWSER WINDOW

• Une fois la fenêtre est créée, vous pouvez la redimensionner en utilisant les méthodes de
BrowserWindow comme setBounds (limites) et setSize (width, height) pour changer la taille de votre
fenêtre.

• getBounds() : retourne une fenêtre, les limites de la fenêtre comme Objet. Les limites de la fenêtre {x, y,
width,height}.

• getSize() :retourne un entier qui décrit la largeur et la hauteur de la fenêtre [width, height].

• setMinimumSize (width, height): définir la taille minimale de votre fenêtre

• setMaximumSize(width, height): définir la taille maximale de votre fenêtre.

• getMaximumSize() : retourne un entier qui contient la largeur et la hauteur maximales de la fenêtre.

• getMinimumSize() : retourne un entier qui contient la largeur et la hauteur minimales de la fenêtre.

59
 LES MÉTHODES DE BROWSER
WINDOW
• setBounds (limites) et setSize (width, height) : changer la taille de votre fenêtre.
• getBounds() : retourne une fenêtre, les limites de la fenêtre comme Objet.
• getSize() : retourne un entier qui décrit la largeur et la hauteur de la fenêtre
• setMinimumSize (width, height) : définir la taille minimale de votre fenêtre
• setMaximumSize(width, height) : définir la taille maximale de votre fenêtre
• getMaximumSize() : retourne un entier qui contient la largeur et la hauteur maximales de la
fenêtre.
• getMinimumSize() : retourne un entier qui contient la largeur et la hauteur minimales de la
fenêtre.
 win.close(): fermer la fenêtre. Cela a le même effet qu'un utilisateur cliquant manuellement sur
le bouton de fermeture de la fenêtre.

60
61
 LES MÉTHODES DE BROWSER WINDOW
 win.isDestroyed(): retourne boolean - si la fenêtre est détruite.

 win.show(): afficher la fenêtre et la ramène au premier plan.

 win.isModal(): retourne boolean - si la fenêtre actuelle est une fenêtre modale ou non.

 win.maximize(): agrandir la fenêtre .

 win.isMaximized(): retourne boolean - si la taille de la fenêtre est maximisée ou non.

 win.getAllWindows(): retourne win [] - un tableau de toutes les fenêtres ouvertes.

 win.isMinimized(): retourne boolean - si la taille de la fenêtre est minimisée ou non

 win.isFullScreen(): retourne boolean - si la fenêtre est en plein écr an ou non.

62
 LES MÉTHODES DE BROWSER WINDOW

 win.setBackgroundColor(backgroundColor): modifier la couleur d'arrière-plan de la

fenêtre sous la forme d'une valeur hexadécimale.
 win.isAlwaysOnTop(): retourne boolean - si la fenêtre est toujours au-dessus des
autres fenêtres ou non.
 win.getTitle(): retourne String - le titre de la fenêtre native ( Le titre de la page web
peut être différent du titre de la fenêtre native .)
 win.setTitle(title): remplacer le titre de la fenêtre native par title.
 win.setMenu(menu): définir le menu comme barre de menu de la fenêtre.
 win.removeMenu(): Retirez la barre de menu de la fenêtre.

63
 LES ÉVÈNEMENTS DE BROWSER WINDOW

 'close': émis lorsque la fenêtre est fermée.

 'focus': émis lorsque la fenêtre obtient le focus.
 'show': émis lorsque la fenêtre est affichée.
 'hide': émis lorsque la fenêtre est masquée.
 'maximize': émis lorsque la fenêtre est agrandie.
 'unmaximize': émis lorsque la fenêtre quitte un état maximisé.
 'minimize': émis lorsque la fenêtre est réduite.
 'move': émis lorsque la fenêtre est déplacée vers une nouvelle position.

64
Exemple:

65
CHAPITRE 1V

APP, WEBCONTENTS,
SHELL...
 APP
 Rôle : Contrôler le cycle de vie de votre application
 L’objet “app” émets notamment les évènements qui se déclenchent
au moment de l’ouverture/fermeture de l’application,

 Gérer le lancement de Chromium à l’ouverture de l’application

s’effectue via l’événement “ready” 

 La méthode on qui permet d’écouter les évènements.

67
 APP

 app.whenReady(): remplie quand Electron est initialisé.

 activate: se déclenche quand l’application est activée

68
 APP

 L’évenement window-all-closed est émit quand toutes les fenêtres on

étés fermés.

 La méthode app.quit permet de quitter l’application.

69
70
71
 WEB CONTENTS

 webContents est un EventEmitter. Il est responsable du rendu et du contrôle

d'une page web et une propriété de l'objet BrowserWindow.
 Exemple d'accès à l'objet webContents :

72
 LES MÉTHODES DE WEB
CONTENTS
 Ces méthodes sont accessibles depuis le module webContents :
const{ webContents }=require('electron')console.log(webContents)

 webcontent.getAllWebContents(): retourne WebContents[] - Un tableau de toutes

les instances de WebContents. Celui-ci contiendra le contenu web de toutes les
fenêtres, webviews, devtools ouvertes et pages d'extention d'arrière-plan des
devtools .
 webcontent.getFocusedWebContents(): retourne WebContents - Le contenu web
qui a le focus dans cette application, sinon retourne null.

 webcontent.getTitle(): retourne String - le titre de la page web courante.

73
 LES MÉTHODES DE WEB
CONTENTS
 webcontent.isDestroyed(): retourne Boolean - si la page web est détruite.

 webcontent.getURL(): retourne l'URL de la page web courante.

 webContents.fromId(id):Une instance WebContents avec l'ID donné

 webContents.fromDevToolsTargetId(targetId)​: Une instance

WebContents avec le TargetID donné

 webcontent.stop(): arrête toute navigation en attente.

 webcontent.reload(): recharge la page web courante.

74
 LES MÉTHODES DE WEB
CONTENTS
 webcontent.openDevTools([options]): ouvre les outils de développement qui
font partie de Chromium

 webcontent.clearHistory(): efface l'historique de navigation.

 webcontent.setZoomFactor(factor): modifie le facteur de zoom. il est le

pourcentage de zoom divisé par 100, donc 300% = 3,0.

 webcontent.getZoomFactor(): retourne le facteur de zoom actuel..

75
 LES MÉTHODES DE WEB
CONTENTS

L'isolement du contexte (contextIsolation) est une fonctionnalité

qui garantit l'exécution dans des contextes différents de vos scripts
preload avec la logique interne d'Electron et du site Web que vous
chargez dans un webContents

76
 LES ÉVÈNEMENTS DE WEB CONTENTS
• webContents émet les événements suivants:
• 'did-start-loading': correspond au moment où le loader de l'onglet commence à
tourner.
• 'did-finish-load': émis lorsque la navigation est terminée, c'est-à-dire que
l'événement onload a été émis.
• did-stop-loading: correspond au moment où le loader de l'onglet arrête de
tourner.
• 'did-fail-load': émis lorsque le chargement a échoué. il retourne: event
(évènements), errorCode (Integer), errorDescription (String), validatedURL
(String).

77
 LES ÉVÈNEMENTS DE WEB CONTENTS

• 'dom-ready': émis lorsque le document dans le frame donné est chargé.

• 'new-window': émis lorsque une nouvelle fenêtre est ouverte

78
LES ÉVÈNEMENTS DE WEB CONTENTS

79
 MODULE SHELL
• Le module shell aide les développeurs à trouver des moyens utiles d’interagir
avec l’environnement de bureau, il fournit des fonctions liées à l'intégration
bureau.
• Les méthodes de shell sont conçues comme des raccourcis pour nous aider à
identifier et ouvrir ces fichiers.
• shell permet de gérer des fichiers et URLs à l'aide de leurs applications par
défaut.
• Cette syntaxe, vous donne accès au package shell d'Electron et vous pouvez
maintenant ajouter les méthodes en référençant la variable shell

80
 LES MÉTHODES DE SHELL
• shell.beep : pour lire le son natif du système d’exploitation

• shell.openExternal(URL): ouvrir l’URL externe donnée.

• shell.openPath(path) : Ouvrir le dossier donné

• shell.showItemInFolder(fullPath): afficher le fichier donné dans

un gestionnaire de fichiers

81
CHAPITRE V

LES MENUS
 INTRODUCTION

• Les applications de bureau sont livrées avec deux types de menus -

le menu d’application (dans la barre supérieure) et un menu
contextuel
• le menu de l’application n’est disponible que dans le processus
principal.
• L'une des méthodes du module Menu est la possibilité de créer un
objet de menu à partir d'un modèle. Plutôt que d'ajouter chaque
élément de menu un par un

83
 LA CRÉATION DE MENU

• le menu de l’application n’est disponible que dans le

processus principal.
• L'une des méthodes du module Menu est la possibilité
de créer un objet de menu à partir d'un modèle. Plutôt
que d'ajouter chaque élément de menu un par un. Cette
syntaxe, vous donne accès au package Menu d'Electron

84
 LA CRÉATION DE MENU

• Il existe deux méthodes pour créer des menus dans Electron:

1) Une méthode basée sur la fonction append de la classe Menu
2) Une méthode basée sur des templates, c’est-à-dire un objet,
ou plutôt un tableau d’objets, qui va décrire notre menu.
• vous pouvez maintenant ajouter les méthodes en référençant la
variable Menu:

85
 LE MODÈLE DE MENU (MENU
TEMPLATE)
• Commençons par créer le modèle de menu (template)

86
 LE MODÈLE DE MENU (MENU
TEMPLATE)
• Le constructeur Menu est simple, il prend un objet d'options. Parmi ces options, on peut noter en
particulier:

1.label : représente le texte affiché de l’entrée de menu 

2.type: définit le type d'entrée, qui peut être normal, seperator, submenu,checkbox ou radio
3.icon : l’icône de cette entrée de menu ;
4.enabled : un booléen permettant de désactiver l'entrée de menu, tout en la laissant visible ;
5.visible : un booléen permettant de faire disparaître l'entrée de menu 
6.checked: un booléen permettant d'indiquer si l'entrée de menu (du type checkbox ou radio)
est cochée.
7.Click: est une fonction à appeler lorsqu’on clique sur cet élément.

87
 AUTRES PROPRIÉTÉS DE MENU

• séparateur. Cet élément de menu insérera la ligne horizontale dans le

menu.

• Si vous ne souhaitez pas utiliser l'un des rôles prédéfinis, vous pouvez
définir la propriété click pour appeler une fonction:

88
 AUTRES PROPRIÉTÉS DE MENU
• Souvent, vous voudrez peut-être indiquer que la fonction d'un élément de
menu est active. En règle générale, cela est indiqué en utilisant une coche à
côté du nom du menu.

• Si votre élément de menu fait partie d'une collection d'options, où un

élément doit toujours être sélectionné, vous pouvez utiliser le type d'élément
de menu «radio»

89
 DÉFINITION DES RÔLES DES ÉLÉMENTS
DE MENU
accelerator : Définir les raccourcis clavier.
• Les accélérateurs sont des chaînes qui peuvent contenir plusieurs modificateurs
et un seul code de touche, combinés par le caractère + , et sont utilisés pour
définir des raccourcis clavier dans toute votre application.

90
91
92
 LA CRÉATION DE MENU

• Créer un menu depuis un template.

• Appliquer le menu dans notre application

93
 DÉFINITION DES RÔLES DES
ÉLÉMENTS DE MENU
 minimize: minimise la fenêtre courante.
 close : ferme la fenêtre courante.
 forceReload : recharge la fenêtre courante ignorant le cache.
 toggleDevTools: bascule les outils de développement dans la fenêtre actuelle.
 togglefullscreen: basculer en mode plein écran dans la fenêtre actuelle.
 resetZoom: réinitialise le niveau de zoom de la page ciblée à la taille d'origine.
 zoomIn: zoom sur la page ciblée par 10%.
 zoomOut: zoom arrière de la page ciblée de 10%

94
DÉFINITION DES RÔLES DES ÉLÉMENTS
DE MENU
 fileMenu : menu par défaut "File" (Exit / Quitter)
 editMenu : tout le menu "Edit" par défaut (Annuler, Copier, etc.).
 viewMenu : menu "View" par défaut (Recharger, Activer/désactiver les outils
de développement, etc.)
 windowMenu : menu "<Window" par défaut entier (Minimize, Zoom, etc.).
 si vous ne souhaitez pas utiliser l'un des rôles prédéfinis, vous pouvez définir
la propriété click pour appeler une fonction:

95
 LES MENU CONTEXTUEL
(CONTEXT-MENU)
• Electron peut également créer un menu contextuel, avec le module Menu.
Contrairement au menu de l'application, où un menu par défaut est inclus,
il n'y a pas de menu contextuel par défaut intégré. Cette fonctionnalité
doit être entièrement écrite par nous.
• Vous pouvez personnaliser le menu contextuel lorsque vous êtes dans le
processus principal.

96
LE FONCTIONNEMENT DU MENU
CONTEXTUEL

97
LES MENU CONTEXTUEL
(CONTEXT-MENU)

98
Fin
99
100

• Les principales responsabilités du processus principale:

• ○ Afficher la boîte de dialogue pour accéder au système de fichiers
• ○ Créer et gérer des menus
• ○ Gérer les événements système
• ○ Gérer les processus de rendu
• ○ Démarrer la fenêtre d'application
• ○ Fermer la fenêtre d'application
• ○ Basculer entre plusieurs fenêtres d'application
 LES PROCESSUS D'ELECTRON

• Une application Electron en cours d'exécution gère deux types de processus,

• le processus principal (main process) et un ou plusieurs processus de rendu
• (renderer process).
• ❏ Le processus principal crée les pages web en créant des instances
• BrowserWindow. Chaque instance BrowserWindow exécute la page web
• dans son propre processus de rendu. Lorsqu'une instance BrowserWindow est
• détruite, le processus de rendu correspondant est également terminé.
• ❏ Le processus principal gère toutes les pages web et leurs processus de rendu
• correspondants.

101
DÉFINITION DES RÔLES DES ÉLÉMENTS
DE MENU
• Le modèle de menu est un tableau d'objets. Chaque objet définira un menu
individuel qui sera affiché dans la barre de menus de l’application. Pour
définir le texte qui sera affiché, nous attribuons cette valeur à sa propriété
label.
• Dans l’exemple précédent de code, nous définissons deux menus: Menu 1 et
Menu 2.
• Pour définir les éléments de menu, les éléments qui s'affichent lorsqu'un
utilisateur sélectionne ce menu, nous définissons la propriété submenu sur un
tableau d'objets de menu.

102
 INTRODUCTION

•Les menus sont également quelque chose auquel les applications Web
traditionnelles n'ont jamais eu accès.
• Les menus de l'application ont toujours été ceux des navigateurs. Si
l'utilisateur accède à un menu contextuel sur la page, le menu
contextuel du navigateur par défaut apparaît. Les applications Web
n'avaient pas la possibilité de changer l'un ou l'autre.

103
 WEB CONTENTS

 Quittez lorsque toutes les fenêtres sont fermées.

 app.whenReady(): remplie quand Electron est initialisé.

104
105

• Le processus de rendu gère seulement la page web correspondante. Un

• plantage dans un processus de rendu n'affecte pas les autres processus de
• rendu. Un processus de rendu peut également être interrompu à partir du
• processus principal en détruisant son instance BrowserWindow.
• ❏ Le processus de rendu communique avec le processus principal via IPC
• (Inter-Process Communication) pour effectuer des opérations GUI natives
• (Graphical User Interface) dans une page Web.
• ❏ La communication entre les processus est possible via les modules
• Inter-Process Communication (IPC) : ipcMain et ipcRenderer.
 QU'EST-CE QU’UN ELECTRON?
• Mais comme l'idée derrière Electron c'est de pouvoir développer des applications de bureau
multiplateformes, il estime que les concurrents réels et meilleures alternatives à Electron sont les
frameworks multiplateformes, notamment GTK+, Qt et JavaFX.

GTK+ est un toolkit permettant de créer des interfaces utilisateur graphiques. GTK + est
multiplateforme et dispose d'une API facile à utiliser, ce qui permet d'accélérer le temps de
développement. Il est écrit en C, mais a été conçu de manière à supporter un large éventail de
langages, pas seulement C/C ++.

Qt est un framework de développement d'applications multiplateformes, pour desktop, l'embarqué et

le mobile. Les plateformes prises en charge incluent Linux, OS X, Windows, VxWorks, QNX,
Android, iOS, BlackBerry, Sailfish OS et bien d'autres.

Son choix est toutefois JavaFX qui avec la JVM, selon lui, est parfait pour développer des
applications de bureau rapides et responsives.

106
• Rentabilité accrue sur votre marché
• Des taux d'engagement plus élevés
• Une meilleure visibilité dans les moteurs de recherche, et
• Coûts de construction beaucoup plus bas

• Avec le niveau de partage de données qui se produit quotidiennement sur

Internet, il existe des risques de menaces de sécurité. Personne n'aime
compromettre sa vie privée.

107
108

• Pourquoi devriez-vous développer une application de

bureau plutôt que des applications mobiles ?
 109

Une plateforme est un environnement qui exécute des codes de programmation. En

conséquence, il existe deux principaux types de plates-formes :
Matériel : Ce type de plate-forme dépend de l'architecture matérielle d'un
environnement informatique. Par conséquent, les composants matériels tels que les
fonctionnalités physiques, le processeur, le processeur graphique, etc. l'affectent.
Logiciel : Ce type de plate-forme travaille sur les logiciels et le développement de
logiciels dans une infrastructure informatique. Par conséquent, cela dépend du
système d'exploitation, du navigateur ou des runtimes d'exécution comme Java. Par
conséquent, une plate-forme croisée est un code actionnable qui fonctionne sur
différentes plates-formes sans changements cruciaux
110

• Une application hybride est une application utilisant le 

navigateur web intégré du support (Smartphone ou tablette) et
les technologies Web (HTML, CSS et Javascript) pour
fonctionner sur différents OS (iOS, Android, Windows Phone,
etc.). Une telle application utilise les fonctionnalités natives
des Smartphones et peut être distribuée sur les plateformes
d’applications telles que l'AppStore, le Google Play, etc.
 AVANTAGES DE L'APPLICATION DE
DESKTOP 
• Bien qu'Internet devienne lentement une marchandise omniprésente, tout le monde
n'est pas toujours connecté à Internet. Nous avons besoin d'une application pour
continuer à fonctionner même s'il n'y a pas de connexion Internet.
• Avec le niveau de partage de données qui se produit quotidiennement sur Internet, il
existe des risques de menaces de sécurité. Personne n'aime compromettre sa vie privée.
• Comme il n'est pas nécessaire de se connecter à Internet, les applications de bureau
nous permettent de bénéficier de performances plus rapides.
• Souvent, les clients préfèrent être propriétaire de l'application plutôt que locataire d'une
application tierce. Plus important encore, il devient plus facile d'en créer un.

111
112

• Même si nous n’avons aucune difficulté à utiliser notre

smartphone au quotidien, nous n’en maitrisons pas, pour
autant, le glossaire de la mobilité. Il est vrai que nous
utilisons des applications natives (WhatsApp, Spotify, Waze,
Pinterest…), cross-platform ou hybrides (Facebook,
Instagram, Twitter, Airbnb, Ubereats…) tous les jours, sans
avoir besoin de savoir ce qui se cache derrière ces termes.
• dans tout projet de conception d’application mobile (ou de
refonte), 
 113

• La plate-forme est un environnement qui exécute des codes de programmation. En

conséquence, il existe deux principaux types de plates-formes : Matériel : Ce type
de plate-forme dépend de l'architecture matérielle d'un environnement
informatique. Par conséquent, les composants matériels tels que les fonctionnalités
physiques, le processeur, le processeur graphique, etc. l'affectent. Logiciel : Ce
type de plate-forme travaille sur les logiciels et le développement de logiciels dans
une infrastructure informatique. Par conséquent, cela dépend du système
d'exploitation, du navigateur ou des runtimes d'exécution comme Java. Par
conséquent, une plate-forme croisée est un code actionnable qui fonctionne sur
différentes plates-formes sans changements cruciaux
 IPC

• Gère la communication entre MainProcess et les instances de

• RendererProcess
• ● Basé sur l’IPC de chromium
• ● Pour communiquer entre les instances de RendererProcess, il faut
passer
• par le MainProcess

114
115

• Renderer Process
• ● Gère l’affichage des pages
• ● Gère les interactions utilisateurs
• ● Un renderer process par fenêtre
LES MÉTHODES DE SHELL

116
117

• Main Process
• ● Gère les instances des fenêtres
• ● Accède aux fonctionnalités du système
• ● Réalise les opérations coûteuses
118

• Electron est un framework permettant de développer des

applications bureaux multi plateforme ( Linux, Windows,
MacOS ) avec des technologies web ( HTML, CSS et
Typescript/Javascript ). Il est open source et permet de réaliser très
rapidement des applications. Vous pensez que cela n’est pas
possible ? Et pourtant vous en utilisez surement sans même le
savoir ; Atom, Visual studio, Slack pour n’en citer que les plus
gros.
 APP

 Lorsque la fenêtre est fermée, on la définit à null, pour cela, il faut utiliser l
évènement closed de la fenêtre principale.

119
120