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.

↰ Previous page Next page ↱