Get best of the week

Cara berteman dengan Electron dan Webix

pengantar


Waktu yang baik hari ini! Saya ingin berbagi dengan Anda pengalaman pribadi saya dalam membuat aplikasi JavaScript desktop menggunakan kombinasi Electron dan Webix. Bundel semacam itu memungkinkan Anda untuk mempercepat proses tata letak antarmuka, terutama tanpa membuang waktu untuk tata letak dan hal-hal web lainnya yang dapat dilakukan kerangka kerja Webix.

Alat


Jadi mari kita mulai, kita akan membutuhkan alat berikut:

  1. Editor di mana kita akan menulis kode kita secara langsung. Saya akan menggunakan kode visual studio (VSC), yang dapat diambil dari sini ;
  2. Server Node.js, yang dapat diambil dari sini . Unduh dan instal;
  3. Kerangka Webix adalah versi gratis (Standar Webix adalah perpustakaan UI gratis di bawah lisensi GNU GPLv3), yang kami ambil dari sini webix.com/get-webix-gpl . Untuk mengunduhnya, Anda harus pergi ke tautan di atas, masukkan email, nama dan nama keluarga, tuliskan tiga tanda centang, klik kirim, dan kemudian tautan unduhan akan dikirim ke email Anda.

Secara umum, hanya itu yang kita butuhkan.

Instal alat yang diperlukan


Jadi, kami melanjutkan langsung ke pembuatan:

1. Instal "node.js". Saya tidak akan berhenti di sini. Saya yakin Anda bisa melakukan ini tanpa saya.

2. Buat folder tempat kami akan menulis kode kami - misalnya electron_webix (Gbr. 1).


Ara. 1 - Membuat folder yang berfungsi

3. Luncurkan VSC dan buka folder ini (Gbr. 2).


Ara. 2 - Buka folder kerja

4. Buka terminal VSC dengan kombinasi tombol "Ctrl + '" dan masukkan perintah "npm init", yang akan menginisialisasi proyek "node.js" kami. Setelah itu sistem akan menanyakan banyak pertanyaan yang berbeda dan sangat berguna, yang tidak perlu dijawab. Kemudian kami menekan semua waktu dengan percaya diri pada tombol "Enter" dan jangan berpikir tentang hal buruk (Gbr. 3).


Ara. 3 - Inisialisasi proyek

5. Instal langsung Elektron itu sendiri. Mengapa kita memasukkan perintah “npm install --save-dev electron” di konsol VSC, lalu kita duduk dan menunggu sampai semuanya terpasang (Gbr. 4).


Ara. 4 - Instalasi Elektron

Organisasi ruang kerja


Sekarang kita beralih ke organisasi ruang kerja. Hal pertama yang perlu kita lakukan adalah membuat beberapa folder dan file yang tidak dapat kita lakukan tanpa (Gambar 5):

  • folder "libs", di sini kita meletakkan file-file yang diunduh dari situs "Webix";
  • folder ".vscode", di sini kita meletakkan file json yang akan menjalankan aplikasi kita di VSC;
  • file "main.js", file utama yang akan menjalankan aplikasi Electron kami;
  • file "index.html" akan berisi konten dan markup kami;
  • file "renderer.js", pengendali acara aplikasi kita. Bekerja bersama dengan index.html;
  • file "launch.json", di folder ".vscode" file yang diperlukan untuk menjalankan kode kami di lingkungan "VSC" menggunakan tombol "F5";
  • file "style.css", dalam file ini kita masih harus mendaftarkan beberapa gaya agar jendela kita terlihat bagus.


Ara. 5 - Folder dan file yang diperlukan

Isi ruang kerja dengan konten awal


Mari kita mulai mengisi ruang kerja dengan file "launch.json", yang digunakan untuk meluncurkan aplikasi kita di lingkungan "VSC" tanpa perintah tambahan dari konsol.
Isi file "launch.json" diambil dari sini . Di sini kita tidak akan menyelidiki isi file ini, cukup salin dan simpan. Isi file disajikan di bawah ini (Gbr. 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"
    }
  ]
}


Ara. 6 - File "launch.json" di lingkungan "VSC"

Selanjutnya, kita perlu memperbaiki file "package.json", yang secara otomatis dibuat ketika perintah "npm init" dijalankan. Itu perlu diubah dalam dua baris seperti yang ditunjukkan di bawah ini (Gbr. 7):

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

Ini adalah package.json:

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


Ara. 7 - File "package.json" di lingkungan "VSC"

Sekarang kita beralih untuk mengisi file "main.js", salin isinya dari sini . Masukkan dan simpan.

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.


Ara. 8 - File “main.js” di lingkungan “VSC”

Setelah itu akhirnya kita bisa melakukan peluncuran pertama “kunci F5” dari aplikasi kita. Jadi, tekan "F5" dan ini dia jendela kita (Gbr. 9).


Ara. 9 - File "main.js" di lingkungan "VSC".

Apa yang kita lihat pada Gambar. 9? Ini adalah area kerja aplikasi kita di sebelah kiri, dan alat debugging di sebelah kanan.

Sekarang buat markup awal dalam file index.html. Mengapa melakukan hal berikut dalam “VSC”: buka file “index.html” => masukkan “!” => dan klik "Enter" => dan kemudian keajaiban dan hasil berikut:

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

Yah, seperti dalam tradisi terbaik menulis kode di antara tag "", masukkan teks "Halo dunia !!!"

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

Setelah itu kami mencoba menekan "F5" lagi dan memeriksa apakah semuanya berfungsi untuk kami (Gbr. 10)


Gbr. 10 - Jendela "Hello world !!!"

Sekarang kita perlu mengekstraksi seluruh isi folder “basis kode” dari arsip webix.zip yang telah kita unduh dan mentransfernya ke folder libs kita (Gbr. 11).

Buka arsip, buka folder basis kode, ambil kontennya dan transfer ke paket libs.


Ara. 11 - Isi folder "libs"

Setelah mengisi konten folder "libs", buka file "renderer.js" dan tulis yang berikut di dalamnya:

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

Selanjutnya, kita akan mengeset antarmuka kita. Mengapa pergi di sini designer.webix.com/welcome klik pada tombol "Mulai Cepat" dan maju ke tata letak antarmuka. misalnya, seperti yang ditunjukkan pada Gambar 12.


Gambar. 12 - Tata Letak antarmuka di Webix Web Designer Tata letak yang

ditunjukkan pada Gambar 12 sangat sederhana dan terdiri dalam menyeret dan menjatuhkan elemen yang diinginkan ke ruang kerja desainer. Bagian kanan konstruktor adalah untuk mengedit properti elemen. Ketika tata letak selesai (Gbr. 13), Anda perlu mentransfernya ke file renderer.js. Mengapa mengklik tombol "Kode" dan dapatkan tata letak yang siap dalam bentuk teks. Pilih teks ini dan salin.


Ara. 13 - Konversi tata letak menjadi teks

Setelah itu kita membuka file "renderer.js" di "VSC" dan menempelkan teks yang disalin ke fungsi "webix.ui" yang telah disiapkan (Gbr. 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"
                            }
                        ]
                    }
                ]
            }
        ]
    }
)


Ara. 14 - Menambahkan tata letak yang dibuat dengan desainer

Menderita sedikit lagi. Selanjutnya, ambil dan buka di "VSC" file index.html kami yang sudah disiapkan sebelumnya dan tambahkan di sana secara harfiah tiga baris berikut :, dan
file index.html akan mengambil bentuk berikut:

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

Selanjutnya, klik "F5" dan dapatkan aplikasi kami dengan tata letak dari Webix (Gbr. 15)


Gambar. 15 - Jendela aplikasi yang berfungsi dengan tata letak dari Webix

Tambahkan beberapa chip.


Segalanya tampak bekerja. Tetapi saya ingin menghapus bingkai jendela yang tidak kita butuhkan, yang tidak terlalu cocok dengan desain kita. Kami akan menggunakan solusi khusus untuk Anda. Mengapa kita membuka file “main.js” dan menambahkan parameter frame di sana: false ketika membuat BrowserWindow, flag ini menghapus menu standar dan batas jendela. Seharusnya terlihat seperti ini:

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

Klik "F5" dan lihat hasilnya tanpa bingkai jendela (Gbr. 16).


Ara. 16 - Jendela kerja aplikasi dengan tata letak dari Webix

Tetap mengajarkan jendela kita untuk merespons acara dari mouse. Pada awalnya, kita akan membuat judul aktif sehingga dapat memindahkan jendela kita di sekitar layar monitor. Mengapa membuka file "renderer.js", cari tampilan: elemen label di dalamnya dan tambahkan properti css: "head_win" seperti yang ditunjukkan pada Gambar 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}


Ara. 17 - Menambahkan gaya ke tampilan: elemen label

Sekarang Anda harus mendaftarkan gaya ini dalam file yang dibuat khusus untuk tujuan ini. Buka file "style.css" dan buat gaya berikut:

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

Setelah itu kami meluncurkan aplikasi "F5" dan mencoba menyeret jendela kami dengan judul. Semuanya harus bekerja.

Akhirnya, aplikasi kita akan merespons mengklik tombol judul pada jendela “-, +, x”. Mengapa menambahkan kode berikut ke akhir file 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();
    }
})

Dalam kode ini, entri formulir "$$ (" max-bt ")" berarti akses ke elemen "Webix" dengan "id" -nya. Oleh karena itu, perlu tombol header untuk menentukan id ini dalam file "renderer.js", yang akan kita lakukan harus seperti yang ditunjukkan pada Gambar 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" }


Ara. 18 - Menambahkan gaya ke tampilan: elemen label

Itu saja untuk saat ini. Coba itu harus berhasil. Kode sumber dapat diunduh dari github, ini tautannya . Terima kasih atas perhatian Anda.

More articles:


All Articles