Get best of the week

Wie man Freunde findet Electron und Webix

Einführung


Gute Tageszeit! Ich möchte Ihnen meine persönlichen Erfahrungen beim Erstellen einer Desktop-JavaScript-Anwendung mit einer Kombination aus Electron und Webix mitteilen. Mit einem solchen Bundle können Sie den Layoutprozess der Benutzeroberfläche beschleunigen, insbesondere ohne Zeit mit dem Layout und anderen Webaufgaben zu verschwenden, die das Webix-Framework ausführen kann.

Werkzeuge


Beginnen wir also, wir benötigen die folgenden Tools:

  1. Ein Editor, in den wir unseren Code direkt schreiben. Ich werde Visual Studio Code (VSC) verwenden, der von hier übernommen werden kann .
  2. Node.js Server, der von hier aus übernommen werden kann . Laden Sie es herunter und installieren Sie es.
  3. Das Webix Framework ist eine kostenlose Version (Webix Standard ist eine kostenlose UI-Bibliothek unter der GNU GPLv3-Lizenz), die wir hier unter webix.com/get-webix-gpl herunterladen . Um es herunterzuladen, müssen Sie zum obigen Link gehen, eine E-Mail, einen Vor- und Nachnamen eingeben, drei Häkchen setzen, auf Senden klicken, und dann wird ein Download-Link an Ihre E-Mail gesendet.

Im Allgemeinen ist das alles, was wir brauchen.

Installieren Sie die erforderlichen Werkzeuge


Wir fahren also direkt mit der Erstellung fort:

1. Installieren Sie "node.js". Ich werde hier nicht aufhören. Ich bin sicher, dass Sie dies ohne mich tun können.

2. Erstellen Sie einen Ordner, in den wir unseren Code schreiben - zum Beispiel elektron_webix (Abb. 1).


Feige. 1 - Erstellen eines Arbeitsordners

3. Starten Sie VSC und öffnen Sie diesen Ordner (Abb. 2).


Feige. 2 - Öffnen Sie den Arbeitsordner.

4. Öffnen Sie das VSC-Terminal mit der Tastenkombination "Strg +` "und geben Sie den Befehl" npm init "ein, mit dem unser Projekt" node.js "initialisiert wird. Danach wird das System eine Reihe verschiedener und sehr nützlicher Fragen stellen, die nicht beantwortet werden müssen. Dann drücken wir die ganze Zeit sicher auf die Eingabetaste und denken an nichts Schlechtes (Abb. 3).


Feige. 3 - Initialisierung des Projekts

5. Installieren Sie Electron selbst direkt. Warum geben wir den Befehl „npm install --save-dev elektron“ in die VSC-Konsole ein und warten, bis alles installiert ist (Abb. 4).


Feige. 4 - Installation von Electron

Organisation des Arbeitsbereichs


Nun wenden wir uns der Organisation des Arbeitsbereichs zu. Als erstes müssen wir mehrere Ordner und Dateien erstellen, auf die wir nicht verzichten können (Abbildung 5):

  • Im Ordner "libs" legen wir die von der Website "Webix" heruntergeladenen Dateien ab.
  • Im Ordner ".vscode" legen wir hier die JSON-Datei ab, mit der unsere Anwendung in VSC ausgeführt wird.
  • Datei "main.js", die Hauptdatei, in der unsere Electron-Anwendung ausgeführt wird;
  • Die Datei "index.html" enthält unseren Inhalt und unser Markup.
  • Datei "renderer.js", der Ereignishandler unserer Anwendung. Funktioniert in Verbindung mit index.html;
  • Datei "launch.json" im Ordner ".vscode" die Datei, die benötigt wird, um unseren Code in der "VSC" -Umgebung mit der Schaltfläche "F5" auszuführen;
  • Datei "style.css", in dieser Datei müssen wir noch einige Stile registrieren, damit unser Fenster anständig aussieht.


Feige. 5 - Erforderliche Ordner und Dateien

Füllen Sie den Arbeitsbereich mit anfänglichem Inhalt


Beginnen wir damit, den Arbeitsbereich mit der Datei "launch.json" zu füllen, mit der unsere Anwendung in der "VSC" -Umgebung ohne zusätzliche Befehle von der Konsole aus gestartet wird.
Der Inhalt der Datei "launch.json" wurde von hier übernommen . Hier werden wir uns nicht mit dem Inhalt dieser Datei befassen, sondern sie einfach kopieren und speichern. Der Inhalt der Datei ist unten dargestellt (Abb. 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"
    }
  ]
}


Feige. 6 - Die Datei "launch.json" in der Umgebung "VSC"

Als Nächstes müssen wir die Datei "package.json" korrigieren, die automatisch erstellt wurde, als der Befehl "npm init" ausgeführt wurde. Es muss in zwei Zeilen geändert werden, wie unten gezeigt (Abb. 7):

Es gab eine solche „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"
  }
}

Hier ist eine package.json:

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


Feige. 7 - Die Datei "package.json" in der Umgebung "VSC"

Nun füllen wir die Datei "main.js" und kopieren ihren Inhalt von hier . Einfügen und speichern.

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.


Feige. 8 - Die Datei "main.js" in der Umgebung "VSC".

Danach können wir endlich den ersten Start des "F5-Schlüssels" unserer Anwendung durchführen. Drücken Sie also „F5“ und hier ist unser Fenster (Abb. 9).


Feige. 9 - Datei "main.js" in der "VSC" -Umgebung.

Was wir in Abb. 9? Dies ist der Arbeitsbereich unserer Anwendung auf der linken Seite und die Debugging-Tools auf der rechten Seite.

Erstellen Sie nun das erste Markup in der Datei index.html. Warum in "VSC" Folgendes tun: Öffnen Sie die Datei "index.html" => geben Sie "!" => und klicken Sie auf "Enter" => und dann die Magie und das folgende Ergebnis:

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

Nun, wie in der besten Tradition, Code zwischen den "" Tags zu schreiben, fügen Sie den Text "Hallo Welt !!!"

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

Danach versuchen wir erneut, „F5“ zu drücken und zu überprüfen, ob alles für uns funktioniert (Abb. 10)


. 10 - Fenster „Hallo Welt !!!“

Jetzt müssen wir den gesamten Inhalt des Ordners „codebase“ aus dem von uns heruntergeladenen webix.zip-Archiv extrahieren und in unseren libs-Ordner übertragen (Abb. 11).

Öffnen Sie das Archiv, gehen Sie zum Codebasisordner, nehmen Sie den Inhalt und übertragen Sie ihn in das libs-Paket.


Feige. 11 - Der Inhalt des Ordners "libs"

Nachdem Sie den Inhalt des Ordners "libs" ausgefüllt haben, öffnen Sie die Datei "renderer.js" und schreiben Sie Folgendes hinein:

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

Als nächstes beginnen wir, unsere Schnittstelle zu setzen. Warum hier gehen designer.webix.com/welcome Klicken Sie auf die Schaltfläche "Schnellstart" und fahren Sie mit dem Layout der Benutzeroberfläche fort. zum Beispiel, wie in Fig. 12 gezeigt


. 12 - Layout der Benutzeroberfläche in Webix Web Designer Das

in Abbildung 12 gezeigte Layout ist sehr einfach und besteht darin, das gewünschte Element mit der Maus in den Entwurfsbereich zu ziehen und dort abzulegen. Der rechte Teil des Konstruktors dient zum Bearbeiten der Eigenschaften von Elementen. Wenn das Layout fertig ist (Abb. 13), müssen Sie es in die Datei renderer.js übertragen. Warum auf die Schaltfläche „Code“ klicken und ein fertiges Layout in Form von Text erhalten? Wählen Sie diesen Text aus und kopieren Sie ihn.


Feige. 13 - Layout in Text konvertieren

Danach öffnen wir die Datei „renderer.js“ in „VSC“ und fügen den kopierten Text in die vorbereitete Funktion „webix.ui“ ein (Abb. 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"
                            }
                        ]
                    }
                ]
            }
        ]
    }
)


Feige. 14 - Hinzufügen eines mit dem Designer erstellten Layouts

Leiden Sie etwas mehr. Nehmen Sie als Nächstes unsere vorbereitete Datei index.html und öffnen Sie sie in „VSC“. Fügen Sie dort buchstäblich die folgenden drei Zeilen hinzu: Die
Datei index.html hat die folgende Form:

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

Klicken Sie anschließend auf "F5" und rufen Sie unsere Anwendung mit Layout von Webix auf (Abb. 15)


. 15 - Das Arbeitsfenster der Anwendung mit Layout von Webix

Fügen Sie ein paar Chips hinzu.


Alles scheint zu funktionieren. Ich möchte jedoch den Fensterrahmen entfernen, den wir nicht benötigen und der nicht wirklich in unser Design passt. Wir werden mit Ihnen eine kundenspezifische Lösung verwenden. Warum öffnen wir die Datei "main.js" und fügen dort den Frame-Parameter hinzu: false Beim Erstellen von BrowserWindow werden durch dieses Flag das Standardmenü und der Fensterrand entfernt. Es sollte so aussehen:

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

Klicken Sie auf „F5“ und sehen Sie sich das Ergebnis ohne Rahmenfenster an (Abb. 16).


Feige. 16 - Das Arbeitsfenster der Anwendung mit Layout von Webix Es

bleibt unserem Fenster beizubringen, auf das Ereignis mit der Maus zu reagieren. Zu Beginn werden wir den Titel aktivieren, damit er unser Fenster über den Bildschirm bewegen kann. Warum die Datei "renderer.js" öffnen, das Element "view: label" darin finden und die Eigenschaft "css:" head_win "hinzufügen, sollte wie in Abbildung 17 dargestellt sein.

   { "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}


Feige. 17 - Hinzufügen eines Stils zur Ansicht: label-Element

Jetzt müssen Sie diesen Stil in einer speziell für diesen Zweck erstellten Datei registrieren. Öffnen Sie die Datei "style.css" und erstellen Sie den folgenden Stil:

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

Danach starten wir die Anwendung „F5“ und versuchen, unser Fenster um den Titel zu ziehen. Alles sollte funktionieren.

Schließlich reagiert unsere Anwendung auf das Klicken auf die Titelschaltflächen des Fensters "-, +, x". Warum den folgenden Code am Ende der Datei renderer.js hinzufügen:

//  
$$("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();
    }
})

In diesem Code bedeutet ein Eintrag der Form "$$ (" max-bt ")" den Zugriff auf das "Webix" -Element über seine "id". Daher müssen die Header-Schaltflächen diese ID in der Datei "renderer.js" angeben. Dies sollte wie in Abbildung 18 dargestellt erfolgen:

   { "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" }


Feige. 18 - Hinzufügen eines Stils zur Ansicht: Beschriftungselement

Das ist alles für jetzt. Versuchen Sie es sollte funktionieren. Der Quellcode kann vom Github heruntergeladen werden, hier ist der Link . Vielen Dank für Ihre Aufmerksamkeit.

More articles:


All Articles