Universal GUI ~ = mengakhiri kesengsaraan

Bagi saya, GUI yang ideal adalah aplikasi yang tidak memerlukan pemrograman, desain, pemeliharaan, dan mampu bekerja sama dengan bahasa apa pun dan pada platform apa pun tanpa tweak. Mungkinkah seumur hidup kita, kita akan berusaha mencari tahu.

Sangat mudah untuk secara individual mempelajari sesuatu dari Vue / React, JavaFX, Python PyQt, ... tetapi mendapatkan data dan berinteraksi dengan kebun binatang perangkat lunak dengan cara yang sederhana dan elegan tanpa memikirkan pengguna-OS / browser / platform adalah tugas yang belum terselesaikan untuk alat-alat tersebut. Saya tidak ingin masuk ke kerangka kerja baru (bahkan yang lama, dilupakan), mengubah bahasa pemrograman, menyapu menyapu dan menyumbat kepala saya dengan sampah. Saya ingin memprogram persis tugas saya, tanpa terganggu oleh perjuangan dengan segala macam kerangka kerja GUI. Dan saya menemukan solusi untuk diri saya sendiri.

Sebagai protokol pertukaran, kami akan menggunakan Json sebagai format teratas dalam hal popularitas / kelengkapan / keterbacaan / dukungan untuk semua bahasa pemrograman hingga tingkat tertentu.

Server mengirim data Json, yang menurutnya GUI aplikasi kami harus merancang gambar yang memenuhi spesifikasi GUI yang indah. Google dengan Desain Materialnya hari ini menjadi standar, jadi ambillah.

Persyaratan untuk GUI modern termasuk keberadaan elemen standar, seperti tombol, bidang input, tabel, dll. Mari kita perkirakan bagaimana menggunakan set konvensi minimum untuk memberi tahu GUI bahwa kita memerlukan elemen tertentu di layar. Inilah yang utama:

• Tombol tanpa kewarganegaraan {'name': 'Push me'}. Jika elemen hanya berisi nama, maka itu adalah tombol.
• Kolom input adalah {'name': 'Edit me', 'value': ''} karena nilai tipe adalah string.
• Tombol switcher {'name': 'My state', 'value': false} karena tipe false adalah boolean.
• Pilih dari daftar {'name': 'Alihkan sesuatu', nilai: 'choice1', options = ['choice1', 'choice2', 'choice3']}
• {‘name’:’Image, ‘url'’: ’..’, ‘width’: .., ‘height’:… }
• {‘name’:’My table’, 'headers'=[‘Name’, ‘Synonym’], rows = [
  [‘young’, ‘youthful’],
  [‘small’, ‘ meager’],
  ...]
  }
  

Untuk kemampuan penyesuaian, Anda dapat mengatur tipe elemen ke {type: 'ButtonSwitcher'} jika tipe yang dipilih secara otomatis oleh JSON tidak cocok untuk Anda. Ini dimungkinkan ketika JSON yang sama dapat ditampilkan dalam lebih dari satu cara. Misalnya, 'Pilih dari daftar' dapat direpresentasikan sebagai bidang input dengan daftar turun bawah, atau juga dapat berupa set tombol horizontal, salah satunya aktif dan sesuai dengan nilai saat ini.

Dengan sejumlah kecil opsi, masuk akal untuk secara otomatis menggunakan opsi tombol, dengan sejumlah besar (lebih dari 3) - bidang pemilihan input. GUI kami sendiri memilih cara terbaik untuk rendering, tetapi jika Anda benar-benar membutuhkannya - ketik: ... untuk membantu. Biasanya, jenis ini tidak diperlukan dan perancang mobil harus mengatasi sendiri.

Mari kita lengkapi gambar secara detail:

• jika nama tidak boleh ditampilkan di layar, itu harus dimulai dengan _;
• - , ‘icon’: ‘ Material Design ’; push - {‘name’: ‘_Check’, ‘icon’: ‘check’}
• , Viewers, , ‘colors’, ‘params’,… // . — , .

Untuk pengelompokan elemen secara logis, kami memperkenalkan konsep blok yang mengelompokkan elemen yang terkait secara logis ke dalam satu blok visual.

{'name': 'Block 1', 'elems': [{'name': '_Check', 'icon': 'check'}, ...]}
Di dalam blok, semua elemen harus memiliki nama unik, karena mereka id .

Biasanya, blok dibangun secara horizontal, jika mereka tidak dapat memuat semua yang ada di layar (mereka memulai GUI aplikasi pada ponsel, misalnya), perancang otomatis menyembunyikannya, tetapi menambahkan ikon pada bilah alat untuk membukanya dengan ketukan. Ini memberi Anda opsi untuk bekerja dengan GUI yang kompleks bahkan pada layar kecil.

Deskripsi tingkat atas adalah Layar. Sepertinya {'name': 'Screan', blokir: [..], menu: [{'name': 'Screen', 'icon': ..,}, ..], 'toolbar': [set JSON - elemen (tombol, bidang, apa pun)]}

Tambahkan detail implementasi untuk uniGUI bersyarat yang mendukung protokol JSON kami. Ini adalah proses terpisah yang berkomunikasi dengan server data Websocket dan menyediakan tampilan data dengan pelaporan selanjutnya dari semua pembaruan data ini yang penting bagi server.

Saat terhubung ke server, uniGUI mengharapkan untuk menerima Layar. Setelah menerimanya, ia mendesain dan menggambar informasi yang dihasilkan dengan cara yang optimal untuk layar saat ini bagi pengguna, kemudian ia menunggu reaksi dari pengguna dan server. Dari gambar data yang dibangun, server menerima aliran pesan JSON yang sepenuhnya menggambarkan apa yang dilakukan pengguna. Mereka memiliki bentuk ['Blok', 'Elem', 'jenis tindakan', 'nilai'], di mana 'Blok' dan 'Elem' adalah nama-nama blok dan elemen, nilai adalah nilai acara.

Server dapat menerima perubahan atau mengembalikannya dengan mengirimkan jendela info tentang perbedaan tersebut. Itu dapat memunculkan kotak dialog, yang digambarkan sebagai blok, dan memiliki tambahan. parameter 'tombol', yang menggambarkan tombol-tombol pada dialog. Klien secara instan menampilkan data server saat ini dan perubahannya. Hanya objek yang diubah oleh server yang dikirim. Untuk menerima acara dan memastikan prosesnya, kami akan membuat lapisan Websocket (kerangka kerja), yang secara otomatis akan menerjemahkan pesan menjadi panggilan ke penangan yang terkait dengan data (objek) kami.

Semua keajaiban di server bermuara pada fakta bahwa data kami yang ditampilkan harus ditautkan ke lapisan sedemikian rupa untuk memastikan terjemahan otomatis mereka ke dalam JSON dan memanggil kembali pemberitahuan dari aktivitas pengguna tanpa pengkodean apa pun. Karena itu tergantung pada kemampuan bahasa tertentu, maka untuk setiap bahasa layer dapat memiliki opsi yang berbeda, baik secara arsitektur dan khusus.

Misalnya, dalam satu kasus, layer memiliki folder tangkapan layar, masing-masing modul di mana memiliki deskripsi satu layar dalam Python. Saat startup, layer membaca layar, memberikan pengguna satu dengan prioritas global = 0. Semua data secara otomatis ditransmisikan menggunakan jsonpickle. Elemen kompleks memiliki "kecerdasan" mereka sendiri, menghilangkan perincian dari programmer. Misalnya, sebuah tabel menerima serangkaian baris, di mana secara default baris id mungkin tidak ada ketika jumlah data dalam baris == jumlah elemen dalam header. Dalam hal ini, ketika pengguna memilih satu baris atau mengedit isinya, server akan mengirim id dalam id baris baris. Jika jumlah data dalam baris lebih dari satu di header, elemen terakhir di baris ditafsirkan sebagai id dan itu yang dikirim ke server. Otomatisasi seperti itu sangat menyederhanakan kehidupan di mana Anda tidak perlu spesifik,tetapi jika Anda tiba-tiba membutuhkannya, tersedia dengan cara yang paling tidak padat karya.

Tugas menyediakan terjemahan otomatis dalam JSON, mengikuti format yang menempati satu atau dua halaman, sepenuhnya dapat dipecahkan dalam bahasa apa pun (saya harap begitu).

Agar tidak membahas penerapan pendekatan ini untuk aplikasi yang kompleks, di bawah ini adalah tangkapan layar seperti yang dijelaskan oleh uniGUI yang ditulis dalam flutter. Pilihannya jatuh pada dia untuk multi-platform dan kurangnya lapisan tambahan seperti JS / chrome. Dalam minus flutter, Anda dapat menuliskan dukungan desktop yang menjijikkan dan kualitas rendah kode lapisan atas (elemen GUI), arsitektur yang tidak menyenangkan untuk pembaruan titik dan mengelola elemen sebagai data, yang, bagaimanapun, diperlakukan.



GUI aplikasi alur pesan -> server terlihat seperti ini:

bergetar: [Glosarium, Ketentuan, =, 658]
bergetar: [_Detail, Tautan, @, @Folliculitis]
bergetar: [_Rincian, Tautan, @, @Adolescent]
flutter: [toolbar, _Back, =, _Back]
flutter: [toolbar, _Forward, =, _Forward]
flutter: [toolbar, _Back, =, _Back]
bergetar: [_Detail, _Status, =, Virtual]
bergetar: [_Details, _Status , =, Stabil]
bergetar: [_Detail, Tautan, @,Peradangan]
flutter: [_Details, _Status, =, Virtual]
flutter: [_Details, _Status, =, Stable]
flutter: [toolbar, _Back, =, _Back]
flutter: [_Details, Links, @, @Folliculitis]

Akankah ada memperlambat GUI seperti itu saat menunggu acara dari server. Tidak, karena GUI berfungsi dalam mode pemberitahuan server, bereaksi terhadap semua tindakan pengguna sebagai GUI lokal normal. Secara default, ini menganggap server diam pada tindakan pengguna sebagai OK. Saat mengganti layar, jelas bahwa deskripsinya harus datang. Mungkin ada penundaan dibandingkan dengan aplikasi khas c yang tertanam GUI.

Total. Mungkin saat ini, pada alat saat ini, untuk membuat GUI yang menghilangkan 90% dari kode layanan suram standar dan tidak mengganggu di mana dan bagaimana ia akan bekerja. Setidaknya untuk aplikasi bisnis / sains. Artikel ini adalah Bukti konsep bahwa membuat Aplikasi Browser bersyarat tidak hanya mungkin, tetapi perlu.