LCUI
Pustaka C untuk membangun antarmuka pengguna
Daftar isi
- Daftar isi
- Perkenalan
- Fitur Utama
- Ikhtisar Fitur
- Arsitektur
- Mulai Cepat
- Dokumentasi
- Peta jalan
- Kontribusi
- Pertanyaan Umum
- Lisensi
Perkenalan
中文版说明文档
LCUI adalah perpustakaan yang ditulis dalam C untuk membangun antarmuka pengguna grafis. Tujuannya adalah untuk mengeksplorasi dan mempraktikkan cara-cara baru dalam mengembangkan antarmuka pengguna, yang ditandai dengan ukurannya yang kecil, kemudahan penggunaan, dan penyediaan alat pengembangan yang mudah digunakan untuk membantu pengembang dengan cepat membuat aplikasi desktop dengan antarmuka pengguna grafis.
LC berasal dari inisial nama penulis. Perpustakaan pada awalnya dirancang untuk membantu penulis mengembangkan proyek kecil dan mendapatkan pengalaman pengembangan. Namun, penulis tidak mendapatkan keunggulan kompetitif di pasar kerja, yang penuh dengan pakar C/C++, sehingga harus bekerja di pengembangan web front-end. Hasilnya, LCUI kini condong ke arah pengintegrasian teknologi dari domain front-end web.
Fitur Utama
- Lintas Platform: Mendukung Windows dan Linux.
- Komponen yang Digambar Sesuai Pesanan Sepenuhnya: Komponen mempertahankan tampilan dan perilaku yang konsisten di berbagai platform.
- Mesin CSS Bawaan: Mendukung penggunaan CSS untuk menentukan gaya dan tata letak antarmuka pengguna, sehingga lebih mudah untuk memulai bagi mereka yang memiliki pengalaman pengembangan web.
- Menyediakan Alat Pengembangan Modern: Alat ini memungkinkan Anda menggunakan bahasa TypeScript dengan sintaksis JSX, pustaka React, dan teknologi front-end web lainnya untuk menulis antarmuka pengguna.
Ikhtisar Fitur
Anda dapat mempelajari pengalaman pengembangan aplikasi LCUI dari tangkapan layar berikut:
- Pengembangan Komponen dalam Gaya Seperti React: Menulis file konfigurasi UI menggunakan TypeScript. Dengan gabungan keunggulan TypeScript, sintaksis JSX, dan pustaka LCUI React, Anda dapat menjelaskan secara ringkas struktur antarmuka, ketergantungan sumber daya, status komponen, pengikatan data, dan pengikatan peristiwa.
- Berbagai Metode Penulisan Stylesheet: Tailwind CSS, Modul CSS, Sass, dan CSS global.
- Router berbasis sistem file: Mengatur halaman aplikasi dalam bentuk direktori, dengan setiap halaman berhubungan dengan direktori. Jalur direktori berfungsi sebagai rute untuk halaman tersebut. Dengan router aplikasi bawaan, Anda dapat dengan mudah menerapkan peralihan halaman dan navigasi tanpa konfigurasi rute manual.
- Perpustakaan Ikon yang Ramah Pengguna dan Modern: Ikon bersumber dari perpustakaan ikon sistem fluentui, dengan penyesuaian sebagian agar sesuai dengan karakteristik LCUI, menawarkan pola penggunaan yang serupa.
- Alat Pengembangan Baris Perintah: Jalankan perintah
lcui build untuk melakukan praproses file konfigurasi dalam direktori aplikasi, lalu buat kode sumber C dan file sumber daya yang sesuai.
Arsitektur
Seiring berjalannya waktu, LCUI telah dibangun berdasarkan berbagai perpustakaan:
- lib/yutil: Pustaka utilitas yang menyediakan struktur dan fungsi data umum.
- lib/pandagl: PandaGL (Panda Graphics Library), menawarkan manajemen font, tata letak teks, I/O gambar, pemrosesan grafis, dan kemampuan rendering.
- lib/css: Pengurai CSS dan mesin pemilih yang menyediakan kemampuan penguraian dan pemilihan CSS.
- lib/ptk: Pustaka Platform Toolkit yang menawarkan API terkait sistem terpadu lintas platform, termasuk loop pesan, manajemen jendela, metode input, dll.
- lib/thread: Pustaka thread yang menyediakan kemampuan multithreading lintas platform.
- lib/timer: Pustaka pengatur waktu yang menyediakan kemampuan untuk menjalankan tugas secara berkala.
- lib/ui: Pustaka inti UI yang menyediakan kemampuan UI penting seperti manajemen komponen UI, antrean acara, komputasi gaya, dan menggambar.
- lib/ui-xml: Pustaka parsing XML yang menyediakan kemampuan untuk membuat UI dari konten file XML.
- lib/ui-cursor: Pustaka kursor yang menawarkan kemampuan menggambar kursor.
- lib/ui-server: Server UI menyediakan kemampuan untuk memetakan komponen UI ke sistem windows.
- lib/ui-router: Manajer router yang menawarkan pemetaan rute dan kemampuan navigasi.
- lib/ui-widgets: Pustaka komponen dasar yang telah ditentukan sebelumnya yang menyediakan komponen UI dasar seperti teks, tombol, bilah gulir, dll.
- lib/worker: Pustaka thread pekerja yang menyediakan kemampuan komunikasi dan manajemen thread pekerja sederhana.
Mulai Cepat
Sebelum memulai, Anda perlu menginstal perangkat lunak berikut di komputer Anda:
- Git: Alat kontrol versi yang digunakan untuk mengunduh kode sumber proyek contoh.
- XMake: Alat build yang digunakan untuk membangun proyek.
- Node.js: Lingkungan runtime JavaScript yang digunakan untuk menjalankan alat pengembangan baris perintah LCUI.
Kemudian, jalankan perintah berikut di jendela baris perintah:
# Install the LCUI command-line development tool
npm install -g @lcui/cli
# Create an LCUI application project
lcui create my-lcui-app
Ikuti petunjuk yang diberikan oleh perintah sesudahnya.
Dokumentasi
- Dokumentasi Online
- Permintaan Komentar (RFC)
- log perubahan
- Pedoman Kontribusi
Tutorial
- Daftar Tugas: Pelajari konsep dasar dan penggunaan LCUI, serta cara menggunakannya untuk membangun antarmuka dan mengimplementasikan manajemen status, pembaruan antarmuka, dan interaksi.
- Rendering Animasi Fabric: Tulis ulang kode sumber JavaScript program simulasi fabric yang ada dalam bahasa C, dan gunakan perpustakaan grafis cairo untuk rendering fabric. Kemudian, terapkan LCUI untuk mengimplementasikan pemutaran dan interaksi animasi fabric.
- Browser: Merujuk browser web, gunakan LCUI untuk mengimplementasikan struktur antarmuka, tata letak, gaya, dan fitur manajemen multi-tab yang serupa. Manfaatkan fungsionalitas manajemen perutean LCUI untuk menerapkan manajemen dan navigasi status halaman multi-tab, serta halaman penelusuran file sederhana. (Tutorial ini sudah usang, kontribusi untuk memperbaruinya dipersilahkan)
Referensi
Beberapa fitur LCUI dan proyek terkait terinspirasi oleh proyek sumber terbuka lainnya. Anda dapat merujuk ke dokumentasinya untuk memahami konsep dasar dan penggunaannya.
- DirectXTK: Referensi kode sumber untuk pengatur waktu langkah.
- Vue Router: Referensi untuk manajer router. Beberapa fungsi juga merujuk pada kode sumber Vue Router.
- Next.js: Referensi untuk metode penentuan rute.
Peta jalan
Berikut adalah item yang akan datang:
- LCUI
- Tingkatkan desain API.
- Tingkatkan mesin CSS untuk mendukung karakter
inherit , !important , dan escape. - Tambahkan backend SDL untuk menggantikan perpustakaan lib/ptk.
- Beradaptasi dengan pustaka grafis sumber terbuka lainnya untuk kinerja rendering yang lebih baik.
- Alat Baris Perintah
-
lcui build --watch : Terus memantau perubahan file dan membangun kembali secara otomatis. -
lcui dev-server : Mirip dengan webpack-dev-server, membangun aplikasi LCUI sebagai situs web bagi pengembang untuk melihat pratinjau antarmuka di browser. - Tambahkan build cache untuk membangun kembali hanya file yang telah berubah.
- Pustaka Komponen React: Merujuk beberapa pustaka komponen frontend web (misalnya, radix, shadcn/ui), mengembangkan pustaka komponen TypeScript + React yang cocok untuk aplikasi LCUI, menggunakan kembali komponen dari pustaka komponen Desain LC.
- Dokumentasi
- Tutorial
- Permintaan Komentar (RFC)
Kontribusi
Merasa LCUI lambat dalam memperbarui? ada banyak cara untuk berkontribusi pada LCUI.
- Kirimkan bug dan bantu kami memverifikasi perbaikan saat mereka check in.
- Bagikan beberapa ide menarik terkait pengembangan GUI di halaman terbitan.
- Cari komentar FIXME di kode sumber dan coba perbaiki.
- Danai isu yang Anda minati di IssueHunt untuk menarik pengembang lain agar berkontribusi.
- Tinjau perubahan kode sumber.
- Berkontribusi pada perbaikan bug.
LCUI telah mengadopsi kode etik yang ditetapkan oleh Perjanjian Kontributor. Dokumen ini digunakan di banyak komunitas open source, dan menurut kami dokumen ini mengartikulasikan nilai-nilai kami dengan baik. Untuk lebih lanjut, lihat Kode Etik.
Pertanyaan Umum
Apakah ini kernel browser? Atau perpustakaan pengembangan seperti Electron yang mengintegrasikan lingkungan browser?
Tidak, Anda dapat menganggapnya sebagai perpustakaan pengembangan GUI tradisional yang menerapkan beberapa teknologi Web.
Karena mendukung penggunaan bahasa TypeScript, kenapa saya tidak menggunakan Electron?
Ya, jika Anda memiliki pengalaman pengembangan web dan ingin mempelajari Electron, maka Electron jelas merupakan pilihan terbaik.
Mengingat kemampuan LCUI saat ini, LCUI terutama cocok untuk memenuhi kebutuhan pribadi penulis dan mengembangkan alat sederhana.
Mengapa saya harus memilih LCUI dibandingkan pustaka/kerangka GUI lainnya?
Kami menyarankan Anda memprioritaskan pustaka/kerangka GUI lainnya.
Bagaimana dengan dukungan CSS?
Berikut ini adalah daftar fitur CSS yang didukung. Dicentang didukung (Tetapi tidak berarti dukungan penuh). Properti yang tidak terdaftar tidak didukung secara default.
Cakupan fitur CSS
- di aturan
- kata kunci
- penyeleksi
- unit
- properti
Lisensi
Proyek LCUI dirilis di bawah Lisensi MIT.
