Electron - Creazione di interfacce utente

L'interfaccia utente delle app Electron è costruita utilizzando HTML, CSS e JS. In questo modo possiamo sfruttare tutti gli strumenti disponibili per lo sviluppo web front-end anche qui. Puoi utilizzare strumenti come Angular, Backbone, React, Bootstrap e Foundation per creare le app.

Puoi usare Bower per gestire queste dipendenze front-end. Installa pergola usando -

$ npm install -g bower

Ora puoi ottenere tutti i framework JS e CSS, le librerie, i plugin, ecc. Disponibili usando bower. Ad esempio, per ottenere l'ultima versione stabile di bootstrap, inserisci il seguente comando:

$ bower install bootstrap

Questo scaricherà bootstrap in bower_components . Ora puoi fare riferimento a questa libreria nel tuo HTML. Creiamo una semplice pagina utilizzando queste librerie.

Ora installiamo jquery usando il comando npm -

$ npm install --save jquery

Inoltre, questo sarà richiesto nel nostro file view.js. Abbiamo già una configurazione main.js come segue:

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)

Apri i tuoi index.html file e inserisci il seguente codice in esso -

<!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>

Creare view.js e inserisci la logica del contatore dei clic in esso -

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)
})

Esegui l'app utilizzando il seguente comando:

$ electron ./main.js

Il comando precedente genererà l'output come nello screenshot seguente:

Puoi creare la tua app nativa proprio come costruisci siti web. Se non desideri che gli utenti siano limitati a una dimensione esatta della finestra, puoi sfruttare il design reattivo e consentire agli utenti di utilizzare la tua app in modo flessibile.