الفصل 27: واجهات المستخدم الرسومية (GUI)
مقدمة
لغة ص تدعم بناء واجهات رسومية عبر مكتبة رسوميات المبنية على SDL2، ومكتبة واجهات لبناء واجهات تفاعلية بأدوات جاهزة.
نافذة بسيطة
sad
من واجهات استورد *
دالة رئيسية()
متغير نافذة = جديد نافذة("تطبيقي"، 400، 300)
متغير عنوان = جديد عنصر_نص("مرحباً بلغة ص!")
متغير زر = جديد زر("اضغط هنا")
زر.عند_الضغط = دالة()
عنوان.النص = "تم الضغط! 🎉"
نهاية
نافذة.أضف(عنوان)
نافذة.أضف(زر)
نافذة.اعرض()
نهايةأدوات الواجهة الرسومية
| العنصر | الوصف | مثال |
|---|---|---|
نافذة | نافذة رئيسية | جديد نافذة("عنوان"، 800، 600) |
زر | زر ضغط | جديد زر("احفظ") |
عنصر_نص | نص ثابت | جديد عنصر_نص("مرحباً") |
حقل_إدخال | إدخال نص | جديد حقل_إدخال("اكتب هنا") |
قائمة | قائمة منسدلة | جديد قائمة(["خيار 1"، "خيار 2"]) |
صندوق_نص | نص متعدد الأسطر | جديد صندوق_نص(4) |
شريط_تحميل | شريط تحميل | جديد شريط_تحميل(0، 100) |
مثال: آلة حاسبة كاملة
sad
من واجهات استورد *
دالة رئيسية()
متغير نافذة = جديد نافذة("آلة حاسبة"، 300، 400)
متغير شاشة = جديد عنصر_نص("0")
متغير رصيد = 0
متغير عملية = ""
دالة عند_ضغط_رقم(رقم)
عملية = عملية + لنص(رقم)
شاشة.النص = عملية
نهاية
دالة عند_ضغط_عملية(عمل)
عملية = عمل
شاشة.النص = عملية
نهاية
دالة عند_ضغط_يساوي()
متغير أجزاء = قسم(عملية، "+")
إذا (طول(أجزاء) == 2)
متغير أ = عدد(أجزاء[0])
متغير ب = عدد(أجزاء[1])
شاشة.النص = لنص(أ + ب)
وإلا
أجزاء = قسم(عملية، "-")
إذا (طول(أجزاء) == 2)
متغير أ = عدد(أجزاء[0])
متغير ب = عدد(أجزاء[1])
شاشة.النص = لنص(أ - ب)
نهاية
نهاية
عملية = ""
نهاية
# أزرار الأرقام
لكل س في ["7"، "8"، "9"، "4"، "5"، "6"، "1"، "2"، "3"، "0"]
متغير زر_ر = جديد زر(س)
متغير س_محلي = س # لالتقاط القيمة في الإغلاق
زر_ر.عند_الضغط = دالة() عند_ضغط_رقم(عدد(س_محلي)) نهاية
نافذة.أضف(زر_ر)
نهاية
متغير زر_جمع = جديد زر("+")
زر_جمع.عند_الضغط = دالة() عند_ضغط_عملية("+") نهاية
متغير زر_رفع = جديد زر("-")
زر_رفع.عند_الضغط = دالة() عند_ضغط_عملية("-") نهاية
متغير زر_يساو = جديد زر("=")
زر_يساو.عند_الضغط = عند_ضغط_يساوي
نافذة.أضف(شاشة)
نافذة.أضف(زر_جمع)
نافذة.أضف(زر_رفع)
نافذة.أضف(زر_يساو)
نافذة.اعرض()
نهايةالتخطيط بالتخطيط (Layout)
لترتيب العناصر بشكل منظم:
sad
من واجهات استورد *
دالة رئيسية()
متغير ن = جديد نافذة("تخطيط"، 400، 300)
# تخطيط أفقي
متغير صف = جديد صف_أفقي()
لكل عنصر في ["أحمد"، "سارة"، "محمد"]
صف.أضف(جديد زر(عنصر))
نهاية
# تخطيط عمودي
متغير عمود = جديد عمود_عمودي()
عمود.أضف(جديد عنصر_نص("عنوان"))
عمود.أضف(صف)
عمود.أضف(جديد زر("إغلاق"))
ن.أضف(عمود)
ن.اعرض()
نهايةمعالجة الأحداث
sad
من واجهات استورد *
دالة رئيسية()
متغير ن = جديد نافذة("أحداث"، 300، 200)
متغير تسمية = جديد عنصر_نص("تحرك فوق النافذة")
متغير ضغطة = جديد عنصر_نص("اضغط الأيسر للتغيير")
ن.عند_تحرك_المؤشر = دالة(س، ص)
تسمية.النص = "المؤشر: ("+لنص(س)+"، "+لنص(ص)+")"
نهاية
ن.عند_ضغط_يسار = دالة(س، ص)
ضغطة.النص = "ضغطة يسار عند ("+لنص(س)+"، "+لنص(ص)+")"
نهاية
ن.أضف(تسمية)
ن.أضف(ضغطة)
ن.اعرض()
نهايةمقارنة بالرسوميات SDL2
| المكتبة | الاستخدام | المستوى |
|---|---|---|
واجهات | تطبيقات سطح مكتب | سهل |
رسوميات | رسوميات وألعاب | متقدم |
تمرين
أنشئ تطبيقاً بسيطاً مع نافذة تحتوي على:
- حقل إدخال اسم
- زر "تحية"
- عنصر نص يعرض "مرحباً [name]!"
الحل
sad
من واجهات استورد *
دالة رئيسية()
متغير ن = جديد نافذة("تحية"، 300، 150)
متغير حقل = جديد حقل_إدخال("اكتب اسمك")
متغير رسالة = جديد عنصر_نص("")
متغير ز = جديد زر("تحية")
ز.عند_الضغط = دالة()
رسالة.النص = "مرحباً " + حقل.النص + "!"
نهاية
ن.أضف(حقل)
ن.أضف(ز)
ن.أضف(رسالة)
ن.اعرض()
نهاية