Electron - UI de construcción
La interfaz de usuario de las aplicaciones Electron se crea utilizando HTML, CSS y JS. Así que aquí también podemos aprovechar todas las herramientas disponibles para el desarrollo web front-end. Puede utilizar herramientas como Angular, Backbone, React, Bootstrap y Foundation para crear las aplicaciones.
Puede usar Bower para administrar estas dependencias de front-end. Instale bower usando -
$ npm install -g bower
Ahora puede obtener todos los marcos, bibliotecas, complementos, etc. de JS y CSS disponibles utilizando bower. Por ejemplo, para obtener la última versión estable de bootstrap, ingrese el siguiente comando:
$ bower install bootstrap
Esto descargará bootstrap en bower_components . Ahora puede hacer referencia a esta biblioteca en su HTML. Creemos una página simple usando estas bibliotecas.
Instalemos ahora jquery usando el comando npm -
$ npm install --save jquery
Además, esto será necesario en nuestro archivo view.js. Ya tenemos una configuración main.js de la siguiente manera:
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)
Abre tu index.html archivo e ingrese el siguiente código en él -
<!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>
Crear view.js e ingrese la lógica del contador de clics en él -
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)
})
Ejecute la aplicación usando el siguiente comando:
$ electron ./main.js
El comando anterior generará la salida como en la siguiente captura de pantalla:
Puede crear su aplicación nativa del mismo modo que crea sitios web. Si no desea que los usuarios estén restringidos a un tamaño de ventana exacto, puede aprovechar el diseño receptivo y permitir que los usuarios usen su aplicación de manera flexible.