Electron - Construire des interfaces utilisateur

L'interface utilisateur des applications Electron est construite à l'aide de HTML, CSS et JS. Nous pouvons donc exploiter ici également tous les outils disponibles pour le développement Web frontal. Vous pouvez utiliser des outils tels que Angular, Backbone, React, Bootstrap et Foundation pour créer les applications.

Vous pouvez utiliser Bower pour gérer ces dépendances frontales. Installez le bower en utilisant -

$ npm install -g bower

Vous pouvez maintenant obtenir tous les frameworks, bibliothèques, plugins, etc. JS et CSS disponibles en utilisant bower. Par exemple, pour obtenir la dernière version stable de bootstrap, entrez la commande suivante -

$ bower install bootstrap

Cela téléchargera bootstrap dans bower_components . Vous pouvez maintenant référencer cette bibliothèque dans votre HTML. Créons une page simple en utilisant ces bibliothèques.

Installons maintenant jquery en utilisant la commande npm -

$ npm install --save jquery

De plus, cela sera requis dans notre fichier view.js. Nous avons déjà une configuration main.js comme suit -

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

let win

function createWindow() {
   win = new BrowserWindow({width: 800, height: 600})
   win.loadURL(url.format ({
      pathname: path.join(__dirname, 'index.html'),
      protocol: 'file:',
      slashes: true
   }))
}

app.on('ready', createWindow)

Ouvrez votre index.html fichier et entrez le code suivant -

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "UTF-8">
      <title>Hello World!</title>
      <link rel = "stylesheet" 
         href = "./bower_components/bootstrap/dist/css/bootstrap.min.css" />
   </head>
   
   <body>
      <div class = "container">
         <h1>This page is using Bootstrap and jQuery!</h1>
         <h3 id = "click-counter"></h3>
         <button class = "btn btn-success" id = "countbtn">Click here</button>
         <script src = "./view.js" ></script>
      </div>
   </body>
</html>

Créer view.js et entrez-y la logique du compteur de clics -

let $ = require('jquery')  // jQuery now loaded and assigned to $
let count = 0
$('#click-counter').text(count.toString())
$('#countbtn').on('click', () => {
   count ++ 
   $('#click-counter').text(count)
})

Exécutez l'application à l'aide de la commande suivante -

$ electron ./main.js

La commande ci-dessus générera la sortie comme dans la capture d'écran suivante -

Vous pouvez créer votre application native comme vous créez des sites Web. Si vous ne souhaitez pas que les utilisateurs soient limités à une taille de fenêtre exacte, vous pouvez tirer parti de la conception réactive et permettre aux utilisateurs d'utiliser votre application de manière flexible.