Cara menggunakan HTML / CSS / JavaScript untuk semua perkara GUI - Bagaimana Untuk

Cara menggunakan HTML / CSS / JavaScript untuk semua perkara GUI

Menggunakan platform yang dipanggil NW.js, adalah mungkin untuk menyediakan antara muka web untuk aplikasi arahan atau skrip anda, tanpa menyediakan pelayan web setempat. Ini membuka cara baru untuk menggunakan aplikasi desktop, dan dapat menjimatkan banyak masa untuk mempelajari API GUI bahasa kegemaran anda. Dalam contoh ini, saya akan melakukan contoh yang sangat mudah menggunakan alat "baris nama" alat baris arahan.

Jumlah 5 Langkah

Langkah 1: Muat turun dan pasang NW.js

NW.js, aka "node-webkit", adalah alat cross-platform yang memberikan pemaju penyemak imbas Chromium tertanam (Chromium adalah komponen sumber terbuka Google Chrome) supaya mereka boleh menggunakan teknologi web untuk membuat GUI tanpa sekatan tempat penyemak imbas pada aplikasi web biasa. Ini bermakna ia boleh menjalankan skrip / program luaran secara langsung dari DOM. Saya menggunakannya di rumah dengan banyak skrip Python, dan bekerja dengan EXE yang ditulis dalam C # dan AutoHotkey. Saya juga telah mengujinya dengan menguji ini dengan C, C ++, dan Java. Dan jika saya tahu PowerShell sedikit lebih baik, saya pasti saya akan dapat untuk bekerja dengannya juga; jika ia menulis kepada output standard (stdout), ia boleh dikawal melalui antara muka pengguna berasaskan web.

Jadi perkara pertama yang perlu anda lakukan adalah pergi mendapatkannya. Inilah URL:
http://nwjs.io/
Saya cadangkan "versi SDK" untuk pembangunan, kerana ia menawarkan alat pemaju yang anda harapkan di Chrome - dan saya tidak dapat membayangkan penyahpepijat JavaScript tanpa alat dev.

Langkah 2: Sediakan pakej.json

Seperti aplikasi Google Chrome, NW.JS menggunakan fail JSON untuk menyimpan data konfigurasi. Ini biasanya tidak terlalu rumit, walaupun anda boleh menjadi mewah seperti yang anda suka dengannya. Buat masa sekarang, inilah yang akan kelihatan seperti kami:

{
"utama": "code / index.html",
"nama": "Nama hos",
"tetingkap": {"kiosk": benar}
}

"utama" memberitahu NW yang fail untuk memuatkan apabila ia berjalan. Dalam contoh di atas saya mencipta folder yang dipanggil "kod" dan fail bernama "index.html"; anda boleh memanggil fail yang anda suka dan simpan di mana anda suka, tetapi saya ingin menyimpan saya dalam folder yang berasingan, kerana NW.JS sendiri mempunyai banyak DLL lain dan kebergantungan lain yang saya suka untuk tetap berasingan.

"Nama" pada dasarnya ialah tajuk tetingkap. Saya memanggil nama "Hostname" ini, jelasnya, kerana itu arahan saya mahu ia dijalankan.

"Tetingkap" adalah objek yang mengandungi pilihan tetingkap. Dalam contoh ini saya menetapkan "kiosk" untuk benar, untuk menjadikannya program berjalan dalam mod skrin penuh / kiosk. Itu hanya kerana fail yang disalin / disisipkan dari aplikasi kiosk (lol). Tetapi anda boleh dengan mudah menetapkan lebar dan ketinggian, sama ada atau tidak untuk memaparkan sempadannya, sama ada ia mempunyai butang memaksimumkan dan lain-lain Tetapi sekarang mari kita simpannya dengan mudah.

Langkah 3: Sediakan fail HTML utama anda

NW.js menyokong HTML5 dan mana-mana perpustakaan yang anda mahukan (saya menggunakannya dengan Dojo Toolkit, sebagai contoh), tetapi untuk tujuan kami, saya akan tetap mudah:

badan {background-color: navy; warna: kuning;}

Memuatkan ...

Langkah 4: Gunakan JavaScript untuk memuatkan nama hos apabila beban DOM

Kini kami akan menambah ini kepada elemen kami:

// Saya menetapkan nama yang lebih mudah dibaca manusia untuk fungsi Node.js ini.
// Saya juga mendapati ini berguna jika anda menggunakan perpustakaan yang mempunyai fungsi "memerlukan" sendiri.
var run = require ("child_process") execFile;

// Sekarang kita akan memanggilnya dan menangkap outputnya.
lari ("nama hos", [], fungsi (ralat, stdout, stderr) {

// Parameter terakhir fungsi "run" kami di atas adalah fungsi panggil balik, dan di sinilah anda boleh melakukan perkara dengan data.
// Dalam kes ini, saya hanya mengeluarkan data pada halaman.
document.body.innerHTML = stdout;
});

Langkah 5: Run NW.exe

Anda boleh menamakan semula EXE kepada apa sahaja yang anda suka, dan juga menukar ikon jika anda suka, tetapi pada akhirnya ia NW.exe ini yang memuat GUI siap anda. Sekiranya semuanya berjalan menurut pelan, anda harus mempunyai aplikasi skrin penuh yang memaparkan nama hos komputer anda. Dan itulah yang paling penting.

Saya cuba simpannya mudah di sini, tetapi itu bermakna saya benar-benar hanya menggaru permukaan potensi NW. Terdapat beberapa cara untuk pakej aplikasi NW untuk kegunaan pengeluaran / komersil, walaupun saya tidak pergi ke mana-mana berhampiran itu (lagi!). Tetapi satu perkara yang pasti: Saya telah selesai dengan:
- TkInter, PyQT, dan lain-lain dan sebagainya untuk Python
- WinForms atau WPF untuk C #
- Win32 untuk C / C ++
- Rangka kerja GUI AutoHotkey
- Ayunan untuk Java
Dan senarai itu terus berlaku. Saya boleh menggunakan HTML5 / CSS / JavaScript untuk semua perkara GUI - dan sekarang, mudah-mudahan, begitu juga anda! :)