Get best of the week

Cómo hacer amigos Electron y Webix

Introducción


Buen momento del día! Me gustaría compartir con ustedes mi experiencia personal en la creación de una aplicación JavaScript de escritorio usando una combinación de Electron y Webix. Dicho paquete le permite acelerar el proceso de diseño de la interfaz, especialmente sin perder tiempo en el diseño y otras cosas web que puede hacer el marco de Webix.

Herramientas


Entonces, comencemos, necesitaremos las siguientes herramientas:

  1. Un editor en el que escribiremos nuestro código directamente. Usaré el código de estudio visual (VSC), que se puede tomar desde aquí ;
  2. Servidor Node.js, que se puede tomar desde aquí . Descárguelo e instálelo;
  3. Webix Framework es una versión gratuita (Webix Standard es una biblioteca de interfaz de usuario gratuita bajo licencia GNU GPLv3), que tomamos de aquí webix.com/get-webix-gpl . Para descargarlo, debe ir al enlace anterior, ingresar un correo electrónico, nombre y apellido, poner tres marcas de verificación, hacer clic en enviar y luego se enviará un enlace de descarga a su correo.

En general, eso es todo lo que necesitamos.

Instala las herramientas necesarias


Entonces, procedemos directamente a la creación:

1. Instale "node.js". No me detendré aquí. Estoy seguro de que puedes hacer esto sin mí.

2. Cree una carpeta en la que escribiremos nuestro código, por ejemplo electron_webix (Fig. 1).


Higo. 1 - Crear una carpeta de trabajo

3. Inicie VSC y abra esta carpeta (Fig. 2).


Higo. 2 - Abra la carpeta de trabajo

4. Abra el terminal VSC con la combinación de teclas "Ctrl + '" e ingrese el comando "npm init", que iniciará nuestro proyecto "node.js". Después de lo cual el sistema preguntará por un montón de preguntas diferentes y muy útiles, que no son necesarias para responder. Luego presionamos todo el tiempo con confianza en el botón "Entrar" y no pensamos en nada malo (Fig. 3).


Higo. 3 - Inicialización del proyecto

5. Instalar directamente el propio electrón. ¿Por qué ingresamos el comando "npm install --save-dev electron" en la consola VSC, luego nos sentamos y esperamos hasta que todo esté instalado (Fig. 4).


Higo. 4 - Instalación de electrones

Organización del espacio de trabajo


Ahora pasamos a la organización del espacio de trabajo. Lo primero que debemos hacer es crear varias carpetas y archivos sin los que no podemos prescindir (Figura 5):

  • la carpeta "libs", aquí ponemos los archivos descargados del sitio "Webix";
  • la carpeta ".vscode", aquí ponemos el archivo json que ejecutará nuestra aplicación en VSC;
  • archivo "main.js", el archivo principal que ejecutará nuestra aplicación Electron;
  • el archivo "index.html" contendrá nuestro contenido y marcado;
  • archivo "renderer.js", el controlador de eventos de nuestra aplicación. Funciona junto con index.html;
  • archivo "launch.json", en la carpeta ".vscode", el archivo que se necesita para ejecutar nuestro código en el entorno "VSC" utilizando el botón "F5";
  • archivo "style.css", en este archivo todavía tenemos que registrar algunos estilos para que nuestra ventana se vea decente.


Higo. 5 - Carpetas y archivos necesarios

Llenar el espacio de trabajo con contenido inicial.


Comencemos a llenar el espacio de trabajo con el archivo "launch.json", que se utiliza para iniciar nuestra aplicación en el entorno "VSC" sin ningún comando adicional de la consola.
El contenido del archivo "launch.json" se tomó de aquí . Aquí no profundizaremos en el contenido de este archivo, solo cópielo y guárdelo. El contenido del archivo se presenta a continuación (Fig. 6).

  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug Main Process",
      "type": "node",
      "request": "launch",
      "cwd": "${workspaceFolder}",
      "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
      "windows": {
        "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd"
      },
      "args" : ["."],
      "outputCapture": "std"
    }
  ]
}


Higo. 6 - El archivo "launch.json" en el entorno "VSC"

A continuación, debemos corregir el archivo "package.json", que se creó automáticamente cuando se ejecutó el comando "npm init". Debe cambiarse en dos líneas como se muestra a continuación (Fig. 7):

había un "package.json":

  "name": "electron_webix",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
  "test": "echo \"Error: no test specified\" && exit 1
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "^8.2.3"
  }
}

Aquí hay un paquete.json:

{
  "name": "electron_webix",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
   "start": "electron ."
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "^8.2.3"
  }
}


Higo. 7 - El archivo "package.json" en el entorno "VSC"

Ahora pasamos a llenar el archivo "main.js", copie su contenido desde aquí . Insertar y guardar.

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

function createWindow () {
  //   .
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  // and load the index.html of the app.
  win.loadFile('index.html')

  //   .
  win.webContents.openDevTools()
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
//  API       .
app.whenReady().then(createWindow)

// Quit when all windows are closed.
app.on('window-all-closed', () => {
  //       macOS    
  //    ,       Cmd + Q
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
   //  MacOS     ,
   //  ,           .
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})

// In this file you can include the rest of your app's specific main process
// code.            require.


Higo. 8 - El archivo "main.js" en el entorno "VSC"

Después de lo cual finalmente podemos finalmente realizar el primer lanzamiento de la "tecla F5" de nuestra aplicación. Entonces, presione "F5" y aquí está nuestra ventana (Fig. 9).


Higo. 9 - Archivo "main.js" en el entorno "VSC".

Lo que vemos en la Fig. 9? Esta es el área de trabajo de nuestra aplicación a la izquierda y las herramientas de depuración a la derecha.

Ahora cree el marcado inicial en el archivo index.html. ¿Por qué hacer lo siguiente en "VSC": abra el archivo "index.html" => enter "!" => y haga clic en "Enter" => y luego la magia y el siguiente resultado:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

Bueno, como en la mejor tradición de escribir código entre las etiquetas "", inserte el texto "¡Hola mundo!"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    Hello world!!!
</body>
</html>

Después de lo cual intentamos presionar "F5" nuevamente y verificar que todo funcione para nosotros (Fig. 10)


Fig. 10 - Ventana "¡Hola, mundo!"

Ahora necesitamos extraer todo el contenido de la carpeta "codebase" del archivo webix.zip que descargamos y transferirlo a nuestra carpeta libs (Fig. 11).

Abra el archivo, vaya a la carpeta de la base de código, tome su contenido y transfiéralo al paquete libs.


Higo. 11 - El contenido de la carpeta "libs"

Después de llenar el contenido de la carpeta "libs", abra el archivo "renderer.js" y escriba lo siguiente en él:

//   
const { remote } = require('electron')
//           
let WIN = remote.getCurrentWindow()
//   webix
const webix = require('./libs/webix.min.js')
//  JQuery
$ = require('jquery')
// ,              
webix.ui({
})

A continuación, vamos a componer nuestra interfaz. ¿Por qué ir aquí designer.webix.com/welcome? Haga clic en el botón "Inicio rápido" y avance al diseño de la interfaz. por ejemplo, como se muestra en la Figura 12.


Fig. 12 - Diseño de la interfaz en Webix Web Designer El diseño que se

muestra en la Figura 12 es muy simple y consiste en arrastrar y soltar el elemento deseado en el espacio de trabajo del diseñador. La parte derecha del constructor es para editar las propiedades de los elementos. Cuando se completa el diseño (Fig. 13), debe transferirlo al archivo renderer.js. ¿Por qué hacer clic en el botón "Código" y obtener un diseño listo en forma de texto. Seleccione este texto y cópielo.


Higo. 13 - Convertir diseño a texto

Después de eso, abrimos el archivo "renderer.js" en "VSC" y pegamos el texto copiado en la función preparada "webix.ui" (Fig. 14).

//   
const { remote } = require('electron')
//           
let WIN = remote.getCurrentWindow()
//   webix
const webix = require('./libs/webix.min.js')
//  JQuery
$ = require('jquery')
//               
webix.ui(
    {
        "id": 1587908357897,
        "rows": [
            {
                "css": "webix_dark",
                "view": "toolbar",
                "height": 0,
                "cols": [
                    { "view": "label", "label": "Elcetron +Webix its cool!"},
                    { "label": "-", "view": "button", "height": 38, "width": 40},
                    { "label": "+", "view": "button", "height": 38, "width": 40},
                    { "label": "x", "view": "button", "height": 38, "width": 40}
                ]
            },
            {
                "width": 0,
                "height": 0,
                "cols": [
                    { "url": "demo->5ea58f0e73f4cf00126e3769", "view": "sidebar", "width": 177 },
                    {
                        "width": 0,
                        "height": 0,
                        "rows": [
                            { "template": "Hello WORLD! ", "view": "template" },
                            {
                                "url": "demo->5ea58f0e73f4cf00126e376d",
                                "type": "bar",
                                "xAxis": "#value#",
                                "yAxis": {},
                                "view": "chart"
                            }
                        ]
                    }
                ]
            }
        ]
    }
)


Higo. 14 - Agregar un diseño creado con el diseñador

Suffer poco más. A continuación, tome y abra en "VSC" nuestro archivo index.html preparado previamente y agregue allí literalmente las siguientes tres líneas :, y el
archivo index.html tomará la siguiente forma:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./libs/webix.css">
    <link rel="stylesheet" href="./style.css">
    <title>Document</title>
</head>
<body>
    <script src="./renderer.js"></script>
</body>
</html>

Luego, haga clic en "F5" y obtenga nuestra aplicación con diseño de Webix (Fig. 15)


Fig. 15 - La ventana de trabajo de la aplicación con diseño de Webix

Agrega un par de papas fritas.


Todo parece funcionar. Pero me gustaría eliminar el marco de la ventana que no necesitamos, que realmente no se ajusta a nuestro diseño. Usaremos una solución personalizada con usted. ¿Por qué abrimos el archivo "main.js" y agregamos el parámetro de marco allí: falso al crear BrowserWindow, esta bandera elimina el menú estándar y el borde de la ventana. Debe tener un aspecto como este:

const win = new BrowserWindow({
    width: 800,
    height: 600,
    frame:false,
    webPreferences: {
      nodeIntegration: true
    }
  })

Haga clic en "F5" y mire el resultado sin una ventana de marco (Fig. 16).


Higo. 16 - La ventana de trabajo de la aplicación con diseño de Webix

Queda por enseñar a nuestra ventana a responder al evento desde el mouse. Al principio, activaremos el título para que pueda mover nuestra ventana por la pantalla del monitor. ¿Por qué abrir el archivo "renderer.js"? Encuentre el elemento view: label y agregue la propiedad css: "head_win", tal como se muestra en la Figura 17.

   { "view": "label", "label": "Elcetron +Webix its cool!", css:"head_win" },
                    { "label": "-", "view": "button", "height": 38, "width": 40},
                    { "label": "+", "view": "button", "height": 38, "width": 40 },
                    { "label": "x", "view": "button", "height": 38, "width": 40}


Higo. 17 - Agregar un estilo a la vista: elemento de etiqueta

Ahora debe registrar este estilo en un archivo creado específicamente para este propósito. Abra el archivo "style.css" y cree el siguiente estilo:

.head_win {
    -webkit-app-region: drag;
}

Después de eso, lanzamos la aplicación "F5" e intentamos arrastrar nuestra ventana por el título. Todo debería funcionar.

Finalmente, nuestra aplicación responderá al hacer clic en los botones de título de la ventana "-, +, x". ¿Por qué agregar el siguiente código al final del archivo renderer.js?

//  
$$("close-bt").attachEvent("onItemClick", () => {
    const window = remote.getCurrentWindow();
    window.close();
})

//  
$$("min-bt").attachEvent("onItemClick", () => {
    const window = remote.getCurrentWindow();
    window.minimize();
})

//  
$$("max-bt").attachEvent("onItemClick", () => {
    const window = remote.getCurrentWindow();
    if (!window.isMaximized()) {
        window.maximize();
    } else {
        window.unmaximize();
    }
})

En este código, una entrada de la forma "$$ (" max-bt ")" significa acceso al elemento "Webix" por su "id". Por lo tanto, es necesario que los botones de encabezado especifiquen esta identificación en el archivo "renderer.js", lo que haremos debería ser como se muestra en la Figura 18:

   { "view": "label", "label": "Elcetron +Webix its cool!", css:"head_win" },
                    { "label": "-", "view": "button", "height": 38, "width": 40, id:"min-bt" },
                    { "label": "+", "view": "button", "height": 38, "width": 40, id:"max-bt" },
                    { "label": "x", "view": "button", "height": 38, "width": 40, id:"close-bt" }


Higo. 18 - Agregar un estilo a la vista: elemento de etiqueta

Eso es todo por ahora. Intenta que funcione. El código fuente se puede descargar desde el github, aquí está el enlace . Gracias por su atención.

More articles:


All Articles