ลค
ไลบรารี C สำหรับสร้างส่วนต่อประสานผู้ใช้
สารบัญ
- สารบัญ
- การแนะนำ
- คุณสมบัติหลัก
- ภาพรวมของคุณสมบัติ
- สถาปัตยกรรม
- เริ่มต้นอย่างรวดเร็ว
- เอกสารประกอบ
- แผนการทำงาน
- ผลงาน
- คำถามที่พบบ่อย
- ใบอนุญาต
การแนะนำ
中文版说明文档
LCUI เป็นไลบรารีที่เขียนด้วยภาษา C สำหรับสร้างส่วนต่อประสานผู้ใช้แบบกราฟิก เป้าหมายคือการสำรวจและฝึกฝนวิธีการใหม่ๆ ในการพัฒนาส่วนติดต่อผู้ใช้ โดยมีลักษณะเฉพาะคือมีขนาดเล็ก ใช้งานง่าย และจัดเตรียมเครื่องมือการพัฒนาที่สะดวก เพื่อช่วยให้นักพัฒนาสร้างแอปพลิเคชันเดสก์ท็อปด้วยส่วนติดต่อผู้ใช้แบบกราฟิกได้อย่างรวดเร็ว
LC มาจากอักษรย่อของชื่อผู้แต่ง ห้องสมุดได้รับการออกแบบมาเพื่อช่วยผู้เขียนพัฒนาโครงการขนาดเล็กและได้รับประสบการณ์ในการพัฒนา อย่างไรก็ตาม ผู้เขียนไม่ได้รับความได้เปรียบในการแข่งขันในตลาดงาน ซึ่งมีผู้เชี่ยวชาญ C/C++ หนาแน่น ดังนั้นจึงต้องทำงานในการพัฒนาส่วนหน้าของเว็บ ด้วยเหตุนี้ LCUI จึงหันไปบูรณาการเทคโนโลยีจากโดเมนส่วนหน้าของเว็บ
คุณสมบัติหลัก
- ข้ามแพลตฟอร์ม: รองรับ Windows และ Linux
- ส่วนประกอบที่วาดขึ้นเองทั้งหมด: ส่วนประกอบต่างๆ จะรักษารูปลักษณ์และลักษณะการทำงานที่สอดคล้องกันในหลายแพลตฟอร์ม
- เอ็นจิ้น CSS ในตัว: รองรับการใช้ CSS เพื่อกำหนดสไตล์และเลย์เอาต์ของส่วนต่อประสานกับผู้ใช้ ทำให้ง่ายต่อการเริ่มต้นสำหรับผู้ที่มีประสบการณ์ในการพัฒนาเว็บไซต์
- มีเครื่องมือการพัฒนาที่ทันสมัย: เครื่องมือเหล่านี้อนุญาตให้คุณใช้ภาษา TypeScript กับไวยากรณ์ JSX, ไลบรารี React และเทคโนโลยีส่วนหน้าของเว็บอื่น ๆ เพื่อเขียนส่วนต่อประสานกับผู้ใช้
ภาพรวมของคุณสมบัติ
คุณสามารถเรียนรู้เกี่ยวกับประสบการณ์การพัฒนาแอปพลิเคชัน LCUI ได้จากภาพหน้าจอต่อไปนี้:
- การพัฒนาส่วนประกอบในรูปแบบ React-like: การเขียนไฟล์การกำหนดค่า UI โดยใช้ TypeScript ด้วยข้อดีที่รวมกันของ TypeScript, ไวยากรณ์ JSX และไลบรารี LCUI React คุณสามารถอธิบายโครงสร้างอินเทอร์เฟซ การขึ้นต่อกันของทรัพยากร สถานะของส่วนประกอบ การโยงข้อมูล และการเชื่อมโยงเหตุการณ์ได้อย่างกระชับ
- วิธีการเขียนสไตล์ชีตต่างๆ: Tailwind CSS, โมดูล CSS, Sass และ CSS ทั่วโลก
- เราเตอร์ที่ใช้ระบบไฟล์: จัดระเบียบหน้าแอปพลิเคชันในรูปแบบไดเรกทอรี โดยแต่ละหน้าสอดคล้องกับไดเรกทอรี เส้นทางของไดเรกทอรีทำหน้าที่เป็นเส้นทางสำหรับหน้านั้น ด้วยแอปพลิเคชันเราเตอร์ในตัว คุณสามารถใช้งานการสลับหน้าและการนำทางได้อย่างง่ายดาย โดยไม่ต้องกำหนดค่าเส้นทางด้วยตนเอง
- ไลบรารีไอคอนที่ใช้งานง่ายและทันสมัย: ไอคอนมีที่มาจากไลบรารี fluentui-system-icon พร้อมการปรับแต่งบางส่วนเพื่อให้เหมาะกับลักษณะของ LCUI โดยมีรูปแบบการใช้งานที่คล้ายกัน
- เครื่องมือพัฒนาบรรทัดคำสั่ง: รันคำสั่ง
lcui build เพื่อประมวลผลไฟล์การกำหนดค่าล่วงหน้าภายในไดเร็กทอรีแอพ จากนั้นสร้างซอร์สโค้ด C และไฟล์ทรัพยากรที่เกี่ยวข้อง
สถาปัตยกรรม
เมื่อเวลาผ่านไป LCUI ได้รับการสร้างขึ้นเพื่อให้อิงตามไลบรารีต่างๆ:
- lib/yutil: ไลบรารียูทิลิตี้ที่มีโครงสร้างข้อมูลและฟังก์ชันทั่วไป
- lib/pandagl: PandaGL (Panda Graphics Library) นำเสนอการจัดการแบบอักษร เค้าโครงข้อความ I/O รูปภาพ การประมวลผลกราฟิก และความสามารถในการเรนเดอร์
- lib/css: ตัวแยกวิเคราะห์ CSS และกลไกตัวเลือกที่ให้ความสามารถในการแยกวิเคราะห์และการเลือก CSS
- lib/ptk: ไลบรารีชุดเครื่องมือแพลตฟอร์มที่นำเสนอ API ที่เกี่ยวข้องกับระบบแบบครบวงจรข้ามแพลตฟอร์ม รวมถึงการวนรอบข้อความ การจัดการหน้าต่าง วิธีการป้อนข้อมูล ฯลฯ
- lib/thread: ไลบรารีเธรดที่ให้ความสามารถมัลติเธรดข้ามแพลตฟอร์ม
- lib/timer: ไลบรารีตัวจับเวลาที่ให้ความสามารถในการดำเนินงานตามช่วงเวลาที่สม่ำเสมอ
- lib/ui: ไลบรารีหลักของ UI ที่ให้ความสามารถ UI ที่จำเป็น เช่น การจัดการส่วนประกอบ UI, คิวเหตุการณ์, การคำนวณสไตล์ และการวาดภาพ
- lib/ui-xml: ไลบรารีการแยกวิเคราะห์ XML ที่ให้ความสามารถในการสร้าง UI จากเนื้อหาไฟล์ XML
- lib/ui-cursor: ไลบรารีเคอร์เซอร์ที่มีความสามารถในการวาดเคอร์เซอร์
- lib/ui-server: เซิร์ฟเวอร์ UI ที่ให้ความสามารถในการแมปส่วนประกอบ UI กับหน้าต่างระบบ
- lib/ui-router: ตัวจัดการเราเตอร์ที่ให้ความสามารถในการแมปเส้นทางและการนำทาง
- lib/ui-widgets: ไลบรารีส่วนประกอบพื้นฐานที่กำหนดไว้ล่วงหน้าซึ่งมีส่วนประกอบ UI พื้นฐาน เช่น ข้อความ ปุ่ม แถบเลื่อน ฯลฯ
- lib/ผู้ปฏิบัติงาน: ไลบรารีเธรดของผู้ปฏิบัติงานที่ให้ความสามารถในการสื่อสารและการจัดการเธรดของผู้ปฏิบัติงานที่เรียบง่าย
เริ่มต้นอย่างรวดเร็ว
ก่อนที่คุณจะเริ่มต้น คุณต้องติดตั้งซอฟต์แวร์ต่อไปนี้บนคอมพิวเตอร์ของคุณ:
- Git: เครื่องมือควบคุมเวอร์ชันที่ใช้ในการดาวน์โหลดซอร์สโค้ดของโปรเจ็กต์ตัวอย่าง
- XMake: เครื่องมือสร้างที่ใช้ในการสร้างโครงการ
- Node.js: สภาพแวดล้อมรันไทม์ JavaScript ที่ใช้ในการรันเครื่องมือพัฒนาบรรทัดคำสั่ง LCUI
จากนั้น เรียกใช้คำสั่งต่อไปนี้ในหน้าต่างบรรทัดคำสั่ง:
# Install the LCUI command-line development tool
npm install -g @lcui/cli
# Create an LCUI application project
lcui create my-lcui-app
ปฏิบัติตามคำแนะนำที่ได้รับจากคำสั่งในภายหลัง
เอกสารประกอบ
- เอกสารออนไลน์
- ขอความคิดเห็น (RFC)
- บันทึกการเปลี่ยนแปลง
- แนวทางการบริจาค
บทช่วยสอน
- รายการสิ่งที่ต้องทำ: เรียนรู้แนวคิดพื้นฐานและการใช้งาน LCUI รวมถึงวิธีใช้เพื่อสร้างอินเทอร์เฟซและปรับใช้การจัดการสถานะ การอัปเดตอินเทอร์เฟซ และการโต้ตอบ
- การเรนเดอร์แอนิเมชั่นผ้า: เขียนซอร์สโค้ด JavaScript ของโปรแกรมจำลองแฟบริคที่มีอยู่ใหม่ในภาษา C และใช้ไลบรารีกราฟิกไคโรสำหรับการเรนเดอร์แฟบริค จากนั้น ใช้ LCUI เพื่อใช้งานการเล่นและการโต้ตอบแฟบริคแอนิเมชั่น
- เบราว์เซอร์: อ้างอิงเว็บเบราว์เซอร์ ใช้ LCUI เพื่อใช้โครงสร้างอินเทอร์เฟซ เค้าโครง สไตล์ และคุณสมบัติการจัดการหลายแท็บที่คล้ายกัน ใช้ฟังก์ชันการจัดการเส้นทางของ LCUI เพื่อใช้การจัดการสถานะของเพจแบบหลายแท็บและการนำทาง รวมถึงหน้าการเรียกดูไฟล์แบบธรรมดา (บทช่วยสอนนี้ล้าสมัยแล้ว ยินดีต้อนรับการมีส่วนร่วมในการอัปเดต)
อ้างอิง
คุณสมบัติบางอย่างของ LCUI และโครงการที่เกี่ยวข้องได้รับแรงบันดาลใจจากโครงการโอเพ่นซอร์สอื่นๆ คุณสามารถดูเอกสารประกอบเพื่อทำความเข้าใจแนวคิดพื้นฐานและการใช้งาน
- DirectXTK: การอ้างอิงซอร์สโค้ดสำหรับตัวจับเวลาแบบสเต็ป
- Vue Router: ข้อมูลอ้างอิงสำหรับตัวจัดการเราเตอร์ ฟังก์ชันบางอย่างยังอ้างอิงซอร์สโค้ดของ Vue Router ด้วย
- Next.js: การอ้างอิงสำหรับวิธีการกำหนดเส้นทาง
แผนการทำงาน
นี่คือรายการที่จะเกิดขึ้น:
- ลค
- ปรับปรุงการออกแบบ API
- ปรับปรุงกลไก CSS เพื่อรองรับอักขระ
inherit , !important และ Escape - เพิ่มแบ็กเอนด์ SDL เพื่อแทนที่ไลบรารี lib/ptk
- ปรับให้เข้ากับไลบรารีกราฟิกโอเพ่นซอร์สอื่นๆ เพื่อประสิทธิภาพการเรนเดอร์ที่ดีขึ้น
- เครื่องมือบรรทัดคำสั่ง
-
lcui build --watch : ตรวจสอบการเปลี่ยนแปลงไฟล์อย่างต่อเนื่องและสร้างใหม่โดยอัตโนมัติ -
lcui dev-server : คล้ายกับ webpack-dev-server สร้างแอปพลิเคชัน LCUI เป็นเว็บไซต์สำหรับนักพัฒนาเพื่อดูตัวอย่างอินเทอร์เฟซในเบราว์เซอร์ - เพิ่มแคชบิลด์เพื่อสร้างเฉพาะไฟล์ที่มีการเปลี่ยนแปลงเท่านั้น
- React Component Library: อ้างอิงถึงไลบรารีส่วนประกอบส่วนหน้าของเว็บ (เช่น radix, shadcn/ui) พัฒนาไลบรารีส่วนประกอบ TypeScript + React ที่เหมาะสำหรับแอปพลิเคชัน LCUI โดยการนำส่วนประกอบจากไลบรารีส่วนประกอบ LC Design กลับมาใช้ใหม่
- เอกสารประกอบ
- บทช่วยสอน
- ขอความคิดเห็น (RFC)
ผลงาน
คิดว่า LCUI อัปเดตช้าใช่ไหม มีหลายวิธีในการร่วมสนับสนุน LCUI
- ส่งจุดบกพร่องและช่วยเราตรวจสอบการแก้ไขเมื่อมีการเช็คอิน
- แบ่งปันแนวคิดที่น่าสนใจเกี่ยวกับการพัฒนา GUI ในหน้าปัญหา
- ค้นหาความคิดเห็น FIXME ในซอร์สโค้ดแล้วลองแก้ไข
- ให้ทุนแก่ประเด็นที่คุณสนใจใน IssueHunt เพื่อดึงดูดนักพัฒนารายอื่นให้มีส่วนร่วม
- ตรวจสอบการเปลี่ยนแปลงซอร์สโค้ด
- ร่วมแก้ไขข้อผิดพลาด
LCUI ได้นำหลักปฏิบัติที่กำหนดโดยกติกาผู้ร่วมให้ข้อมูลมาใช้ เอกสารนี้ใช้ในชุมชนโอเพ่นซอร์สหลายแห่ง และเราคิดว่ามันสะท้อนถึงคุณค่าของเราได้เป็นอย่างดี สำหรับข้อมูลเพิ่มเติม โปรดดูหลักจรรยาบรรณ
คำถามที่พบบ่อย
นี่คือเคอร์เนลของเบราว์เซอร์ใช่ไหม หรือไลบรารีการพัฒนาเช่น Electron ที่รวมสภาพแวดล้อมของเบราว์เซอร์เข้าด้วยกัน?
ไม่ คุณสามารถคิดได้ว่านี่เป็นไลบรารีการพัฒนา GUI แบบดั้งเดิมที่ใช้เทคโนโลยีเว็บบางอย่าง
เนื่องจากรองรับการใช้ภาษา TypeScript ทำไมฉันจึงไม่ใช้ Electron
ใช่ หากคุณมีประสบการณ์ด้านการพัฒนาเว็บไซต์และเต็มใจที่จะเรียนรู้เกี่ยวกับ Electron แน่นอนว่า Electron คือตัวเลือกที่ดีที่สุด
ด้วยความสามารถในปัจจุบันของ LCUI จึงเหมาะอย่างยิ่งสำหรับการตอบสนองความต้องการส่วนบุคคลของผู้เขียนและพัฒนาเครื่องมือง่ายๆ
เหตุใดฉันจึงควรเลือก LCUI เหนือไลบรารี/เฟรมเวิร์ก GUI อื่นๆ
เราขอแนะนำให้คุณจัดลำดับความสำคัญของไลบรารี/เฟรมเวิร์ก GUI อื่นๆ
แล้วการสนับสนุน CSS ล่ะ?
ต่อไปนี้เป็นรายการคุณสมบัติ CSS ที่รองรับ ตรวจสอบแล้วได้รับการสนับสนุน (แต่ไม่ได้หมายถึงการสนับสนุนเต็มรูปแบบ) คุณสมบัติที่ไม่อยู่ในรายการไม่ได้รับการสนับสนุนโดยค่าเริ่มต้น
ความครอบคลุมของคุณสมบัติ CSS
- ตามกฎ
- คำหลัก
- ตัวเลือก
- หน่วย
- คุณสมบัติ
ใบอนุญาต
โครงการ LCUI ได้รับการเผยแพร่ภายใต้ใบอนุญาต MIT
