🎋 🐡 🙌 Comment se faire des amis Electron et Webix 🧙🏻 👨‍🍳 😢

introduction

Bon moment de la journée! Je voudrais partager avec vous mon expérience personnelle dans la création d'une application JavaScript de bureau utilisant une combinaison d'Electron et de Webix. Un tel bundle vous permet d'accélérer le processus de mise en page de l'interface, en particulier sans perdre de temps sur la mise en page et autres choses Web que le framework Webix peut faire.

Outils

Commençons donc, nous aurons besoin des outils suivants:

Un éditeur dans lequel nous écrirons directement notre code. J'emploierai le code visuel de studio (VSC), qui peut être pris d'ici ;
Serveur Node.js, qui peut être pris à partir d'ici . Téléchargez-le et installez;
Webix Framework est une version gratuite (Webix Standard est une bibliothèque d'interface utilisateur gratuite sous licence GNU GPLv3), que nous prenons ici webix.com/get-webix-gpl . Pour le télécharger, vous devez accéder au lien ci-dessus, saisir un e-mail, prénom et nom, mettre trois coches, cliquer sur envoyer, puis un lien de téléchargement sera envoyé à votre courrier.

En général, c'est tout ce dont nous avons besoin.

Installez les outils nécessaires

Nous procédons donc directement à la création:

1. Installez "node.js". Je ne m'arrêterai pas ici. Je suis sûr que vous pouvez le faire sans moi.

2. Créez un dossier dans lequel nous écrirons notre code - par exemple electron_webix (Fig. 1).

Figure. 1 - Création d'un dossier de travail

3. Lancez VSC et ouvrez ce dossier (Fig. 2).

Figure. 2 - Ouvrez le dossier de travail

4. Ouvrez le terminal VSC avec la combinaison de touches “Ctrl + '” et entrez la commande “npm init”, qui initialisera notre projet “node.js”. Après quoi, le système demandera un tas de questions différentes et très utiles, auxquelles il n'est pas nécessaire de répondre. Ensuite, nous appuyons tout le temps en toute confiance sur le bouton "Entrée" et ne pensons à rien de mal (Fig. 3).

Figure. 3 - Initialisation du projet

5. Installez directement Electron lui-même. Pourquoi saisissons-nous la commande «npm install --save-dev electron» dans la console VSC, puis nous nous asseyons et attendons que tout soit installé (Fig. 4).

Figure. 4 - Installation d'Electron

Organisation de l'espace de travail

Nous passons maintenant à l'organisation de l'espace de travail. La première chose que nous devons faire est de créer plusieurs dossiers et fichiers dont nous ne pouvons pas nous passer (figure 5):

le dossier «libs», ici nous mettons les fichiers téléchargés depuis le site «Webix»;
le dossier «.vscode», ici nous mettons le fichier json qui va exécuter notre application en VSC;
fichier "main.js", le fichier principal qui exécutera notre application Electron;
le fichier «index.html» contiendra notre contenu et notre balisage;
fichier "renderer.js", le gestionnaire d'événements de notre application. Fonctionne en conjonction avec index.html;
fichier «launch.json», dans le dossier «.vscode» le fichier nécessaire à l'exécution de notre code dans l'environnement «VSC» à l'aide du bouton «F5»;
fichier "style.css", dans ce fichier, nous devons encore enregistrer certains styles afin que notre fenêtre soit décente.

Figure. 5 - Dossiers et fichiers requis

Remplissez l'espace de travail avec le contenu initial

Commençons à remplir l'espace de travail avec le fichier "launch.json", qui est utilisé pour lancer notre application dans l'environnement "VSC" sans aucune commande supplémentaire de la console.
Le contenu du fichier «launch.json» a été extrait d'ici . Ici, nous ne nous pencherons pas sur le contenu de ce fichier, il suffit de le copier et de l'enregistrer. Le contenu du fichier est présenté ci-dessous (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"
    }
  ]
}

Figure. 6 - Le fichier "launch.json" dans l'environnement "VSC"

Ensuite, nous devons corriger le fichier "package.json", qui a été créé automatiquement lors de l'exécution de la commande "npm init". Il doit être modifié en deux lignes comme indiqué ci-dessous (Fig. 7):

Il y avait un tel «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"
  }
}

Voici un package.json:

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

Figure. 7 - Le fichier «package.json» dans l'environnement «VSC»

Nous allons maintenant passer au remplissage du fichier «main.js», copier son contenu à partir d'ici . Insérez et enregistrez.

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.

Figure. 8 - Le fichier «main.js» dans l'environnement «VSC»

Après quoi nous pouvons enfin enfin effectuer le premier lancement de la «touche F5» de notre application. Alors, appuyez sur "F5" et voici notre fenêtre (Fig. 9).

Figure. 9 - Fichier "main.js" dans l'environnement "VSC".

Ce que nous voyons sur la Fig. 9? Il s'agit de la zone de travail de notre application à gauche et des outils de débogage à droite.

Créez maintenant le balisage initial dans le fichier index.html. Pourquoi faire ce qui suit dans "VSC": ouvrez le fichier "index.html" => entrez "!" => et cliquez sur "Entrée" => puis la magie et le résultat suivant:

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

Eh bien, comme dans la meilleure tradition d'écriture de code entre les balises "", insérez le texte "Hello world !!!"

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

Après quoi, nous essayons d'appuyer à nouveau sur "F5" et de vérifier que tout fonctionne pour nous (Fig. 10)

Fig. 10 - Fenêtre «Bonjour tout le monde !!!»

Nous devons maintenant extraire tout le contenu du dossier «codebase» de l'archive webix.zip que nous avons téléchargée et la transférer dans notre dossier libs (Fig. 11).

Ouvrez l'archive, allez dans le dossier codebase, prenez son contenu et transférez-le dans le pack libs.

Figure. 11 - Contenu du dossier «libs»

Après avoir rempli le contenu du dossier «libs», ouvrez le fichier «renderer.js» et écrivez ce qui suit:

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

Ensuite, nous allons composer notre interface. Pourquoi aller ici designer.webix.com/welcome cliquez sur le bouton "Quick Start" et passez à la mise en page de l'interface. par exemple, comme illustré à la figure 12.

Fig. 12 - Disposition de l'interface dans Webix Web Designer La disposition

montrée à la figure 12 est très simple et consiste à faire glisser et déposer l'élément souhaité avec la souris dans la zone de conception. La partie droite du constructeur est pour éditer les propriétés des éléments. Une fois la mise en page terminée (Fig. 13), vous devez la transférer dans le fichier renderer.js. Pourquoi cliquer sur le bouton «Code» et obtenir une mise en page prête sous forme de texte. Sélectionnez ce texte et copiez-le.

Figure. 13 - Convertir la mise en page en texte

Après cela, nous ouvrons le fichier «renderer.js» dans «VSC» et collons le texte copié dans la fonction «webix.ui» préparée (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"
                            }
                        ]
                    }
                ]
            }
        ]
    }
)

Figure. 14 - Ajout d'une mise en page créée avec le concepteur

Souffrez un peu plus. Ensuite, prenez et ouvrez dans "VSC" notre fichier index.html pré-préparé et ajoutez-y littéralement les trois lignes suivantes:, et le
fichier index.html prendra la forme suivante:

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

Ensuite, cliquez sur "F5" et obtenez notre application avec mise en page de Webix (Fig. 15)

Fig. 15 - La fenêtre de travail de l'application avec mise en page de Webix

Ajoutez quelques jetons.

Tout semble fonctionner. Mais je voudrais supprimer le cadre de fenêtre dont nous n'avons pas besoin, qui ne correspond pas vraiment à notre conception. Nous utiliserons une solution personnalisée avec vous. Pourquoi ouvrons-nous le fichier «main.js» et ajoutons-nous le paramètre frame: false lors de la création de BrowserWindow, cet indicateur supprime le menu standard et la bordure de la fenêtre. Ça devrait ressembler à ça:

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

Cliquez sur «F5» et regardez le résultat sans fenêtre de cadre (Fig. 16).

Figure. 16 - La fenêtre de travail de l'application avec mise en page de Webix

Reste à apprendre à notre fenêtre à répondre à l'événement depuis la souris. Au début, nous rendrons le titre actif afin qu'il puisse déplacer notre fenêtre autour de l'écran du moniteur. Pourquoi ouvrir le fichier "renderer.js", y trouver l'élément view: label et y ajouter la propriété css: "head_win", il devrait se révéler comme le montre la figure 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}

Figure. 17 - Ajouter un style à l'élément view: label

Vous devez maintenant enregistrer ce style dans un fichier créé spécialement à cet effet. Ouvrez le fichier «style.css» et créez le style suivant:

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

Après cela, nous lançons l'application "F5" et essayons de faire glisser notre fenêtre par le titre. Tout devrait fonctionner.

Enfin, notre application répondra en cliquant sur les boutons de titre de la fenêtre «-, +, x». Pourquoi ajouter le code suivant à la fin du fichier 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();
    }
})

Dans ce code, un enregistrement de la forme «$$ (« max-bt »)» signifie l'accès à l'élément Webix par son identifiant. Par conséquent, il est nécessaire que les boutons d'en-tête spécifient ces identifiants dans le fichier "renderer.js", ce que nous ferons devrait être comme le montre la figure 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" }

Figure. 18 - Ajouter un style à la vue: élément label

C'est tout pour l'instant. Essayez, cela devrait fonctionner. Le code source peut être téléchargé depuis le github, voici le lien . Merci de votre attention.