LCUI
مكتبة C لبناء واجهات المستخدم
جدول المحتويات
- جدول المحتويات
- مقدمة
- الميزات الرئيسية
- نظرة عامة على الميزات
- بنيان
- بداية سريعة
- التوثيق
- خريطة الطريق
- مساهمة
- التعليمات
- رخصة
مقدمة
中文版说明文档
LCUI هي مكتبة مكتوبة بلغة C لبناء واجهات المستخدم الرسومية. هدفها هو استكشاف وممارسة طرق جديدة لتطوير واجهات المستخدم، والتي تتميز بصغر حجمها وسهولة الاستخدام وتوفير أدوات التطوير الملائمة لمساعدة المطورين على إنشاء تطبيقات سطح المكتب بسرعة مع واجهات المستخدم الرسومية.
ينشأ LC من الأحرف الأولى من اسم المؤلف. تم تصميم المكتبة في البداية لمساعدة المؤلف على تطوير المشاريع الصغيرة واكتساب الخبرة التنموية. ومع ذلك، لم يحصل المؤلف على ميزة تنافسية في سوق العمل المزدحم بخبراء C/C++، وبالتالي اضطر إلى العمل في تطوير الواجهة الأمامية للويب. ونتيجة لذلك، تميل LCUI الآن نحو دمج التقنيات من مجال الواجهة الأمامية للويب.
الميزات الرئيسية
- متعدد المنصات: يدعم نظامي التشغيل Windows وLinux.
- المكونات المرسومة حسب الطلب بالكامل: تحافظ المكونات على مظهر وسلوك متسقين عبر منصات متعددة.
- محرك CSS مدمج: يدعم استخدام CSS لتحديد نمط وتخطيط واجهة المستخدم، مما يسهل البدء لأولئك الذين لديهم خبرة في تطوير الويب.
- يوفر أدوات تطوير حديثة: تتيح لك الأدوات استخدام لغة TypeScript مع بناء جملة JSX ومكتبة React وتقنيات الواجهة الأمامية للويب الأخرى لكتابة واجهات المستخدم.
نظرة عامة على الميزات
يمكنك التعرف على تجربة تطوير تطبيقات LCUI من لقطة الشاشة التالية:
- تطوير المكونات بأسلوب يشبه رد الفعل: كتابة ملفات تكوين واجهة المستخدم باستخدام TypeScript. من خلال المزايا المجمعة لـ TypeScript، وبناء جملة JSX، ومكتبة LCUI React، يمكنك وصف بنية الواجهة، وتبعيات الموارد، وحالات المكونات، وربط البيانات، وربط الأحداث بإيجاز.
- طرق كتابة أوراق الأنماط المختلفة: Tailwind CSS، ووحدات CSS، وSass، وCSS العالمية.
- جهاز توجيه يعتمد على نظام الملفات: تنظيم صفحات التطبيق في شكل دليل، بحيث تتوافق كل صفحة مع الدليل. يعمل مسار الدليل كمسار لتلك الصفحة. باستخدام موجه التطبيق المدمج، يمكنك بسهولة تنفيذ تبديل الصفحات والتنقل دون الحاجة إلى تكوين المسار يدويًا.
- مكتبة أيقونات حديثة وسهلة الاستخدام: يتم الحصول على الأيقونات من مكتبة أيقونات نظام Fluentui، مع تخصيص جزئي لتلائم خصائص LCUI، مما يوفر أنماط استخدام مماثلة.
- أداة تطوير سطر الأوامر: قم بتشغيل أمر
lcui build لمعالجة ملفات التكوين مسبقًا داخل دليل التطبيق، ثم قم بإنشاء كود مصدر C وملفات الموارد المقابلة.
بنيان
بمرور الوقت، تم إنشاء LCUI لتعتمد على مكتبات مختلفة:
- lib/yutil: مكتبة مساعدة توفر هياكل ووظائف بيانات مشتركة.
- lib/pandagl: PandaGL (مكتبة رسومات Panda)، تقدم إدارة الخطوط وتخطيط النص وإدخال/إخراج الصور ومعالجة الرسومات وإمكانيات العرض.
- lib/css: محلل CSS ومحرك محدد يوفر إمكانات تحليل واختيار CSS.
- lib/ptk: مكتبة مجموعة أدوات النظام الأساسي التي تقدم واجهات برمجة التطبيقات الموحدة ذات الصلة بالنظام عبر الأنظمة الأساسية، بما في ذلك حلقة الرسائل وإدارة النوافذ وطريقة الإدخال وما إلى ذلك.
- lib/thread: مكتبة المواضيع التي توفر إمكانات تعدد الأنظمة الأساسية.
- lib/timer: مكتبة المؤقت التي توفر القدرة على تنفيذ المهام على فترات زمنية منتظمة.
- lib/ui: مكتبة واجهة المستخدم الأساسية التي توفر إمكانات واجهة المستخدم الأساسية مثل إدارة مكونات واجهة المستخدم وقائمة انتظار الأحداث وحساب الأنماط والرسم.
- lib/ui-xml: مكتبة تحليل XML توفر القدرة على إنشاء واجهة مستخدم من محتوى ملف XML.
- lib/ui-cursor: مكتبة المؤشرات التي توفر إمكانيات رسم المؤشر.
- lib/ui-server: خادم واجهة المستخدم الذي يوفر القدرة على تعيين مكونات واجهة المستخدم لنوافذ النظام.
- lib/ui-router: مدير جهاز التوجيه الذي يقدم إمكانيات رسم الخرائط والملاحة.
- lib/ui-widgets: مكتبة المكونات الأساسية المحددة مسبقًا والتي توفر مكونات واجهة المستخدم الأساسية مثل النص والزر وشريط التمرير وما إلى ذلك.
- lib/worker: مكتبة سلاسل العمليات التي توفر إمكانيات اتصال وإدارة بسيطة لسلاسل العمليات.
بداية سريعة
قبل أن تبدأ، تحتاج إلى تثبيت البرنامج التالي على جهاز الكمبيوتر الخاص بك:
- 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: مرجع لطرق تعريف المسار.
خريطة الطريق
وهنا العناصر القادمة:
- LCUI
- تحسين تصميم واجهة برمجة التطبيقات.
- قم بتحسين محرك CSS لدعم أحرف
inherit و !important و escape. - أضف واجهة SDL الخلفية لتحل محل مكتبة lib/ptk.
- التكيف مع مكتبات الرسومات الأخرى مفتوحة المصدر لتحسين أداء العرض.
- أدوات سطر الأوامر
-
lcui build --watch : مراقبة تغييرات الملف بشكل مستمر وإعادة البناء تلقائيًا. -
lcui dev-server : على غرار webpack-dev-server، يقوم بإنشاء تطبيق LCUI كموقع ويب للمطورين لمعاينة الواجهات في المتصفح. - قم بإضافة ذاكرة تخزين مؤقت لإعادة بناء الملفات التي تم تغييرها فقط.
- مكتبة مكونات React: الرجوع إلى بعض مكتبات مكونات الواجهة الأمامية للويب (على سبيل المثال، radix، shadcn/ui)، تطوير مكتبة مكونات TypeScript + React المناسبة لتطبيقات LCUI، وإعادة استخدام المكونات من مكتبة مكونات LC Design.
- التوثيق
مساهمة
هل تعتقد أن LCUI بطيء في التحديث؟ هناك طرق عديدة للمساهمة في LCUI.
- أرسل الأخطاء وساعدنا في التحقق من الإصلاحات عند تسجيلها.
- شارك بعض الأفكار المثيرة للاهتمام المتعلقة بتطوير واجهة المستخدم الرسومية في صفحة المشكلات.
- ابحث عن تعليقات FIXME في الكود المصدري وحاول إصلاحها.
- قم بتمويل القضايا التي تهمك على IssueHunt لجذب مطورين آخرين للمساهمة.
- قم بمراجعة تغييرات كود المصدر.
- المساهمة في إصلاحات الأخطاء.
اعتمدت LCUI قواعد السلوك المحددة في ميثاق المساهمين. يتم استخدام هذه الوثيقة عبر العديد من المجتمعات مفتوحة المصدر، ونعتقد أنها توضح قيمنا بشكل جيد. للمزيد، راجع مدونة قواعد السلوك.
التعليمات
هل هذه نواة المتصفح؟ أو مكتبة تطوير مثل Electron تدمج بيئة المتصفح؟
لا، يمكنك اعتبارها مكتبة تطوير واجهة المستخدم الرسومية التقليدية التي طبقت بعض تقنيات الويب.
بما أنه يدعم استخدام لغة TypeScript، فلماذا لا أستخدم Electron؟
نعم، إذا كانت لديك خبرة في تطوير الويب وترغب في تعلم Electron، فمن الواضح أن Electron هو الخيار الأفضل.
ونظرًا لقدرات LCUI الحالية، فهي مناسبة في المقام الأول لتلبية احتياجات المؤلف الشخصية وتطوير أدوات بسيطة.
لماذا يجب أن أختار LCUI بدلاً من مكتبات/أطر عمل واجهة المستخدم الرسومية الأخرى؟
نقترح عليك إعطاء الأولوية لمكتبات/أطر عمل واجهة المستخدم الرسومية الأخرى.
ماذا عن دعم CSS؟
فيما يلي قائمة بميزات CSS المدعومة. تم التحقق من دعمه (ولكن لا يعني الدعم الكامل). الخصائص غير المدرجة غير مدعومة بشكل افتراضي.
تغطية ميزات CSS
- في القواعد
- الكلمات الرئيسية
- محددات
- وحدات
- ملكيات
رخصة
تم إصدار مشروع LCUI بموجب ترخيص MIT.
