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.