Get best of the week

Cara berteman dengan Electron dan Webix. Bagian 2. Buat aplikasi dengan Tampilan Anda

pengantar


Di artikel sebelumnyakami telah memeriksa dengan Anda masalah mengintegrasikan kerangka Webix ke dalam Electron dan membuat aplikasi GUI sederhana berdasarkan kerangka kerja ini. Tujuan artikel ini adalah untuk lebih mengembangkan masalah integrasi ke dalam antarmuka GUI yang dibangun dengan bantuan Electron dan Webix dari kerangka kerja JavaScript lainnya. Semua elemen GUI yang diimplementasikan dalam "Webix" ditandai oleh parameter "view". Bergantung pada nilai parameter ini, satu atau beberapa elemen GUI akan ditampilkan. Jumlah jenis elemen "tampilan" yang memungkinkan Anda membuat "Webix" tumpang tindih sekitar 90% dari tugas saat mengimplementasikan antarmuka. Sisanya 10% hanyalah kasus ketika perlu untuk mengintegrasikan kode yang ditulis sebelumnya atau kerangka kerja (perpustakaan) yang tidak didukung secara eksplisit di Webix.Untuk menerapkan integrasi dengan kerangka kerja pihak ketiga (perpustakaan), kami akan membuat bersama Anda elemen "tampilan" Webix kami.

Perumusan masalah


Buat aplikasi GUI "Electron + Webix", yang akan membangun grafik fungsi dari bentuk "y = a * sin (b) + c" dengan kemampuan untuk mengubah parameter fungsi "a, b dan c" dengan gambar grafik yang dinamis.

Reservasi kecil


Segera buat reservasi bahwa di "Webix" ada alat standar yang sangat kuat untuk bekerja dengan grafik. Tujuan saya bukan untuk melengkapi alat-alat ini, tetapi untuk menunjukkan bagaimana Anda dapat mengintegrasikan kerangka kerja atau pustaka tambahan ke dalam bundel Electron + Webix. Kebetulan saya memiliki kode yang sudah jadi untuk grafik ini menggunakan "D3.js" dan saya memutuskan untuk mengintegrasikannya ke dalam aplikasi.

Alat


  1. Visual Studio Code - editor code.visualstudio.com .
  2. Node.JS - unduh dari sini nodejs.org/en
  3. Electron - install "npm install --save-dev electron".
  4. Webix – ru.webix.com.
  5. JQuery – «npm jquery»
  6. D3.js – d3js.org
  7. (https://github.com/kapakym/electron_webix) , .


1. Karena saya orang yang malas, saya tidak ingin menulis semua kode dari awal untuk yang kedua kalinya. Karena itu, kami mengambil kode dari artikel sebelumnya dan mengisinya di folder yang kami butuhkan. Ada dua opsi. Yang pertama adalah mengunduh arsip dari situs (Gbr. 1) atau mengkloningnya jika Anda memiliki klien Git yang diinstal (Gbr. 2).


Ara. 1 - Mengunduh kode sumber dari situs


Gambar. 2 - Mengkloning repositori

2. Agar tidak bingung nanti, ganti nama foldernya (ini opsional), misalnya, seperti "electron_webix_2" dan buka di Visual Studio Code (Gbr. 3).


Ara. 3 - Buka proyek

3. Pasang elemen yang diperlukan. Hal pertama yang perlu Anda lakukan adalah mengunduh dari tautan yang disediakan di alat di atas “Node.JS” dan menginstalnya. Tanpa "Node.JS", Anda tidak dapat melakukan apa pun lebih lanjut. Selanjutnya, buka konsol "Ctr +` "dalam Visual Studio Code dan masukkan perintah berikut satu per satu (Gbr. 4):

  • "Npm install --save-dev electron";
  • "Npm instal jquery".


Ara. 4 - Menginstal Node.JS dan JQuery

4. Selanjutnya, Anda dan saya masih membutuhkan kerangka kerja "D3.js", kami juga mengunduhnya menggunakan tautan dari alat (file "d3.zip"). Dari arsip yang diunduh "d3.zip" kami mengekstrak file "d3.js" dan meletakkannya di folder "libs" (Gbr. 5).


Ara. 5 - Menambahkan perpustakaan D3.js

Di workstation ini, kami telah menyiapkan.

Mengetik antarmuka


Sekarang tempat kerja sudah siap, mari kita langsung menuju pembuatan aplikasi kita. Ini akan terdiri dari elemen "tampilan" berikut:

  • - toolbar, elemen Webix standar. Elemen ini akan ditempatkan di bagian atas jendela dan akan berisi tombol kontrol jendela dan nama aplikasi. Kami telah membuat elemen antarmuka ini dalam bahan-bahan artikel sebelumnya, dan di sini kami tidak akan mengubah apa pun;
  • - Myview, yang harus Anda dan saya buat, jadi, "tampilan" khusus. Ini akan menjadi area di mana grafik fungsi kita akan dibangun menggunakan kerangka kerja "D3.js". Antara lain, area ini akan diajarkan untuk beradaptasi dengan ukuran jendela aplikasi kita. Tempatkan di tengah jendela aplikasi;
  • - slider, elemen standar "Webix". Elemen ini memungkinkan Anda untuk mengubah nilainya menggunakan apa yang disebut "slider". Kami akan membuat 3 buah elemen tersebut, masing-masing akan bertanggung jawab untuk mengubah parameter tertentu dari fungsi kami "a, b atau c". Tempatkan mereka di bagian bawah jendela aplikasi.

Mari kita mulai. Buka file "renderer.js" dan edit dengan kata lain kita menghapus elemen yang tidak kita butuhkan dari artikel sebelumnya dan menggantinya dengan elemen yang dijelaskan di atas.

File “renderer.js” seperti ini:

//   
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!", 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" }
                ]
            },
            {
                "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"
                            }
                        ]
                    }
                ]
            }
        ]
    }
)

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

Ini akan menjadi seperti ini:

//   
const { remote } = require('electron')
//           
let WIN = remote.getCurrentWindow()
//   webix
const webix = require('./libs/webix.min.js')
//  JQuery
$ = require('jquery')
//               
webix.ui(
    {
        "id": 1587908357897,
        "rows": [
            {
                // view : toolbar - 1   
                "css": "webix_dark",
                "view": "toolbar",
                "height": 0,
                "cols": [
                    //  
                    { "view": "label", "label": "Electron + Webix + D3.js", 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" }
                ]
            },
            // view : myview -    ,      .
            { "view": "myview", id: "d3_chart" },
            {
                "cols": [
                    // view : slider - 3 .     sin
                    {
                        "label": "Amplitude", "title": "#value#", "value": 50, "view": "slider", id: "slider_amplitude",
                    },
                    // view : slider - 4 .      sin   Y
                    {
                        "label": "Bias", "title": "#value#", "value": 0, "view": "slider", "height": 38, id: "slider_scope", min:-50, max:50, step:1,
                    },
                    // view : slider - 5 .     sin
                    {
                        "label": "Frequency", "title": "#value#", "value": 0.005, "view": "slider", "height": 38, id: "slider_freq", min:0, max:0.1, step:0.001,
                    }
                ]
            }
        ]
    }
)

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

Mari kita pertimbangkan secara lebih terperinci parameter apa saja yang termasuk "{" view ":" myview ", id:" d3_chart "}":
- view: myview - ketik "view", walaupun belum ada, kami belum membuatnya;
- id: d3_chart - id "Webix", kami akan menggunakannya untuk merujuk ke elemen kami.
Saya juga akan menjelaskan parameter elemen "slider" untuk kelengkapan:
- view: slider - ketik "view", slider;
- label: "text" - label yang akan ditampilkan pada slider;
- title: "#value" - nilai yang ditampilkan saat ini dari slider;
- value: "value" - nilai slider standar;
- min: "value" - nilai minimum slider;
- maks: "nilai" - nilai maksimum bilah geser ";
- langkah:" nilai "- langkah mengubah nilai bilah geser.
Anda dapat membaca lebih lanjut tentang semua parameter elemen Webix di sini docs.webix.com/desktop__components.html

Buat "myview"


Sekarang buat file "view_chart.js" di mana kita mendefinisikan tipe baru "myview" dan buka di "VSC".


Ara. 6 - Memulai mengedit view_chart.js

Tambahkan kode berikut ke dalamnya:

webix.protoUI({
    name: "myview",
    $init: function () {
    },
    redraw: function (a, b, c) {
    },
}, webix.ui.view);

Fungsi webix.protoUI dirancang untuk membuat elemen Webix khusus berdasarkan pada elemen standar. Pertimbangkan parameter yang diteruskan ke fungsi ini:

  • nama - nama barang yang dibuat;
  • $ init adalah fungsi yang akan diluncurkan ketika sebuah elemen dibuat. Dengan kata lain, itu adalah konstruktor;
  • redraw - fungsi kami dengan Anda, yang akan bertanggung jawab untuk menggambar ulang grafik fungsi. Kami akan meneruskan nilai parameter dari variabel kami "a, b dan c"
  • webix.ui.view adalah induk dari elemen kami.

Anda dapat membaca lebih lanjut tentang webix.protoUI di sini.
Jadi, ketika kerangka "view" kami siap, kami akan menulis beberapa fungsi yang akan bertanggung jawab untuk merencanakan grafik dosa.
Fungsi untuk menghitung nilai-nilai fungsi dosa akan terlihat seperti:
function calcsin(a, b, c) {
    dataset = [];
    for (var i = 1; i < 360; i++) {
        dataset.push({ "x": i, "y": a * Math.sin(b * i) + c });
    };
};


Semuanya sangat sederhana di sini, kami mengganti nilai parameter ke dalam fungsi matematika dosa dan menyimpan hasilnya dalam array. Tambahkan ke akhir file "view_chart.js".
Selanjutnya, tambahkan ke akhir file "view_chart.js" sebuah fungsi yang akan menggambar grafik menggunakan kerangka D3.js, itu akan terlihat seperti ini:
function drawSin() {
    $(document).ready(function () {
        width = $("#mycontent").width() - margin.left - margin.right
        height = $("#mycontent").height() - margin.top - margin.bottom;
        var xScale = d3.scaleLinear()
            .domain([0, 360]) 
            .range([0, width]); 

        var yScale = d3.scaleLinear()
            .domain([-100, 100]) 
            .range([height, 0]);  

        var line = d3.line()
            .x(function (d, i) { return xScale(d.x); }) 
            .y(function (d) { return yScale(d.y); })
            .curve(d3.curveMonotoneX)

        var svg = d3.select("#mycontent").append("svg")
            .attr("float", "center")
            .attr("class", "webix_chart")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
            .append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")")

        svg.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0," + height/2 + ")")
            .call(d3.axisBottom(xScale)); 

        svg.append("g")
            .attr("class", "y axis")
            .call(d3.axisLeft(yScale))

        svg.append("path")

            .datum(dataset) 
            .attr("class", "line") 
            .attr("d", line); 
    })

}

Urutan fungsi yang diberikan adalah sebagai berikut:
- menghitung ukuran grafik relatif terhadap elemen div di mana ia dikemas "lebar" dan "tinggi";
- kami menskalakan nilai grafik dengan "X" dan "Y";
- buat elemen "html" "svg" di mana kita menggambar sumbu "X", sumbu "Y" dan grafik itu sendiri;
Sekarang setelah fungsi untuk menghitung dan merender bagan kami siap, kami akan menghubungkan beberapa perpustakaan dan mendeklarasikan beberapa variabel di awal file "view_chart.js":
//     D3.js
const d3 = require("./libs/d3")
//   JQuery
$ = require('jquery')
//          X    Y
var dataset = [];
//         
var margin = { top: 50, right: 50, bottom: 50, left: 50 }
    , width = $("#mycontent").width() - margin.left - margin.right 
    , height = $("#mycontent").height() - margin.top - margin.bottom;

Variabel "lebar" dan "tinggi" akan menyimpan lebar dan tinggi grafik, dengan mempertimbangkan lekukan.
Selanjutnya, kembali ke fungsi "webix.protoUI" dan tulis fungsinya:
webix.protoUI({
    name: "myview",
    $init: function () { //  View
        //   div  id=mycontent.      
        this.$view.innerHTML = "<div id='mycontent'></div>"
        //   calcsin       data  
        calcsin(60, 0.05, 0)
        //   drawSin        data
        drawSin()
    },
    redraw: function (a, b, c) { //    
        //   
        $("#mycontent").html("")
        //       data
        calcsin(a, b, c)
        //  
        drawSin()
    },
}, webix.ui.view);

Diisi dengan dua fungsi konten. "Init" pertama dijalankan hanya sekali ketika membuat "view". Yang kedua akan dipanggil ketika kita perlu menggambar ulang bagan.
Sekarang isi penuh dari file "view_chart.js" akan terlihat seperti ini:
//     D3.js
const d3 = require("./libs/d3")
//   JQuery
$ = require('jquery')
//          X    Y
var dataset = [];
//         
var margin = { top: 50, right: 50, bottom: 50, left: 50 }
    , width = $("#mycontent").width() - margin.left - margin.right 
    , height = $("#mycontent").height() - margin.top - margin.bottom;

webix.protoUI({
    name: "myview",
    $init: function () { //  View
        //   div  id=mycontent.      
        this.$view.innerHTML = "<div id='mycontent'></div>"
        //   calcsin       data  
        calcsin(60, 0.05, 0)
        //   drawSin        data
        drawSin()
    },
    redraw: function (a, b, c) { //    
        //   
        $("#mycontent").html("")
        //       data
        calcsin(a, b, c)
        //  
        drawSin()
    },
}, webix.ui.view);



function drawSin() {
    $(document).ready(function () {
        width = $("#mycontent").width() - margin.left - margin.right
        height = $("#mycontent").height() - margin.top - margin.bottom;
        var xScale = d3.scaleLinear()
            .domain([0, 360]) 
            .range([0, width]); 

        var yScale = d3.scaleLinear()
            .domain([-100, 100]) 
            .range([height, 0]);  

        var line = d3.line()
            .x(function (d, i) { return xScale(d.x); }) 
            .y(function (d) { return yScale(d.y); })
            .curve(d3.curveMonotoneX)

        var svg = d3.select("#mycontent").append("svg")
            .attr("float", "center")
            .attr("class", "webix_chart")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
            .append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")")

        svg.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0," + height/2 + ")")
            .call(d3.axisBottom(xScale)); 

        svg.append("g")
            .attr("class", "y axis")
            .call(d3.axisLeft(yScale))

        svg.append("path")

            .datum(dataset) 
            .attr("class", "line") 
            .attr("d", line); 
    })

}

function calcsin(a, b, c) {
    dataset = [];
    for (var i = 1; i < 360; i++) {
        dataset.push({ "x": i, "y": a * Math.sin(b * i) + c });
    };
};


Selanjutnya, Anda perlu menghubungkan konten file "view_chart.js" di file "renderer.js". Mengapa kita perlu menambahkan baris "mengharuskan (" ./ view_chart.js ") ke bagian atas file renderer.js seperti yang ditunjukkan di bawah ini:
//   
const { remote } = require('electron')
//           
let WIN = remote.getCurrentWindow()
//   webix
const webix = require('./libs/webix.min.js')
//  JQuery
$ = require('jquery')
//  view_chart.js
require("./view_chart.js")


Sekarang Anda perlu menambahkan beberapa gaya ke file "styles.css", buka dan tambahkan "svg path" dan "#mycontent" gaya seperti yang ditunjukkan di bawah ini:
.head_win {
    -webkit-app-region: drag;
}

/*   */
svg path{
    /*   */
    stroke: #666;
    /*   */
    fill: none;
    /*    */
    stroke-width: 1;
}

/*   mycontent,     */
#mycontent { 
    /*     */
    text-align: center;
    /*   */
    overflow: none;
    /*   */
    border: 1px solid black;
    /*     */
    background-color: antiquewhite;
    /*   */
    height: calc(100% - 2px);
}

Setelah selesai dengan gaya, Anda dapat mencoba menjalankan aplikasi kami dan melihat apa yang terjadi. Jadi, tekan "F5" dan setelah itu sebuah jendela akan muncul di layar seperti yang ditunjukkan pada Gambar 7.


Gambar. 7 - Jendela aplikasi kita

Apa yang kita lihat di sana? Bagian atas adalah bilah alat Webix standar. Bagian tengah adalah bagan yang kami buat di tampilan saya. Bagian bawah adalah tiga bilah geser yang harus kita ajarkan untuk mengubah nilai parameter fungsi kita.

Mari kita buat slider bekerja


Sekarang mari kita beralih ke langkah di mana kita akan menggambar ulang grafik di tengah aplikasi kita, tergantung pada nilai-nilai dari slider "Amplitude", "Bias" dan "Frequency". Mengapa kita menambahkan event handler "onChange" ke slider seperti yang ditunjukkan di bawah ini:

// view : slider - 3 .     sin
                    {
                        "label": "Amplitude", "title": "#value#", "value": 50, "view": "slider", id: "slider_amplitude",
                        on: {
                            onChange: function () {
                                $$("d3_chart").redraw($$("slider_amplitude").getValue(), $$("slider_freq").getValue(), $$("slider_scope").getValue());
                            }
                        }
                    },
                    // view : slider - 4 .      sin   Y
                    {
                        "label": "Bias", "title": "#value#", "value": 0, "view": "slider", "height": 38, id: "slider_scope", min:-50, max:50, step:1,
                        on: {
                            onChange: function () {
                                $$("d3_chart").redraw($$("slider_amplitude").getValue(), $$("slider_freq").getValue(), $$("slider_scope").getValue());
                            }
                        }
                    },
                    // view : slider - 5 .     sin
                    {
                        "label": "Frequency", "title": "#value#", "value": 0.005, "view": "slider", "height": 38, id: "slider_freq", min:0, max:0.1, step:0.001,
                        on: {
                            onChange: function () {
                                $$("d3_chart").redraw($$("slider_amplitude").getValue(), $$("slider_freq").getValue(), $$("slider_scope").getValue());
                            }
                        }
                    }

Dalam penangan ini, kita akan mengakses elemen kita dengan "id" dan memanggil fungsi "redraw" yang kita buat sebelumnya untuk menggambar ulang bagan, meneruskannya nilai saat ini dari slider. Klik "F5", jalankan aplikasi kami dan coba ubah nilainya (Gbr. 8).


Ara. 8 - Memeriksa fungsi slider

Tarik grafik setelah jendela


Dan akhirnya, kami menambahkan fungsi yang akan menyesuaikan bagan kami dengan ukuran jendela saat itu berubah. Mengapa kita membuka file "view_chart.js" di editor dan menambahkan handler di ujungnya yang menangkap perubahan jendela seperti yang ditunjukkan di bawah ini:

window.onresize = function ( e ) {
  
    $("#mycontent").html("")
    drawSin()
}

Fungsi ini berfungsi saat ukuran jendela diubah. Fungsionalitasnya turun untuk membersihkan isi blok "konten saya" dan menggambar ulang grafik (memanggil fungsi "drawSin ()"). Setiap kali fungsi drawSin () dipanggil, variabel width dan height diberi informasi terkini tentang ukuran (tinggi dan lebar) dari blok konten saya, setelah itu grafik akan mengubah skala agar sesuai dengan dimensi blok.

Kesimpulan


Itu saja. Saya harap informasi ini bermanfaat bagi Anda. Terima kasih! Sumber dapat diunduh di sini .

More articles:


All Articles