بناء واجهة المستخدم

لتصميم واجهة سهلة الاستخدام ومنظمة، يوفر AppMaster Web Designer مجموعة واسعة من مكونات واجهة المستخدم الذرية. يمكن دمج هذه المكونات وتجميعها بطرق مختلفة لتتوافق مع أهدافك وغاياتك.

يقدم AppMaster مكونات واجهة المستخدم التالية:

• الحاويات: العناصر الأساسية لهيكلة المكونات الأخرى وتجميعها بشكل منطقي.
• الوسائط والأدراج: مكونات تفاعلية لعرض معلومات أو إجراءات إضافية دون مغادرة الشاشة الحالية.
• مكونات مخرجات القيمة الديناميكية: تتضمن القوائم والشبكات والجداول لعرض البيانات ديناميكيًا.
• عناصر واجهة المستخدم الأساسية: مثل الأزرار والنص والأيقونات ، الضرورية لتفاعلات الواجهة الأساسية.
• مكونات التنقل: بما في ذلك القوائم الرأسية والأفقية وعلامات التبويب وأدوات التنقل المماثلة.
• عناصر النموذج: مدخلات وضوابط مختلفة لتفاعل المستخدم وجمع البيانات.

تعمل التحديثات المنتظمة لمكتبة المكونات على تحسين قدرتك على تطوير تطبيقات الويب بشكل أكثر كفاءة.

لنقم بإنشاء واجهة مستخدم لتطبيق الآلة الحاسبة البسيط الخاص بنا لتوضيح إمكانيات أداة إنشاء مواقع الويب التي تعمل بالسحب والإفلات في AppMaster. سيعرض هذا التطبيق نتيجة العمليات الرياضية المختلفة بناءً على قيم الإدخال.

حاوية فليكس

باستخدام Flex Container ، يمكنك بسهولة إدارة إدارة المحاذاة والتراص لجميع العناصر الفرعية داخل الحاوية.

يعد Flex Container مكونًا أساسيًا لبناء هيكل صفحة الويب الخاصة بك. يتيح Flex Container في مصمم تطبيق الويب AppMaster للمستخدمين ترتيب العناصر الفرعية (الأدوات أو الحاويات) بمرونة. وهو يدعم كلا من المحاذاة الأفقية والرأسية، مما يمكّن المطورين من إنشاء تخطيطات معقدة تتكيف مع أحجام الشاشات المختلفة.

إضافة الحاويات

سنستخدم حاويتين رئيسيتين: واحدة لإدخال البيانات والأخرى لعرض نتائج العمليات الحسابية في حاوية مشتركة واحدة.

أولاً، قم بإضافة Flex Container إلى اللوحة القماشية لإيواء جميع العناصر الأخرى.

في لوحة Appearance ، يمكنك استكشاف مجموعة من الإعدادات:

• معرف العنصر: معرف فريد للإشارة إلى الحاوية في العمليات التجارية.
• المجموعة المشتركة: إعدادات لتحديد الحالة الافتراضية للمكون، مثل الرؤية ونمط المؤشر.
• مجموعة الطفل المرنة: تحدد كيفية تصرف العنصر داخل المكون الأصل المرن.
• التخطيط: إعدادات ترتيب العناصر الفرعية داخل الحاوية.
• الأحجام: لتحديد أبعاد العناصر.
• Spacing : يضبط المساحة داخل العنصر وحوله.
• الخلفية: خيارات لألوان الخلفية وطبقاتها.
• نصف قطر الزاوية والحدود والظل: تخصيص حواف العناصر والحدود وتأثيرات الظل.
• تلميح الأداة: يضيف تلميح أداة لإجراءات التمرير أو التركيز.

تخصيص الحاوية الرئيسية الخاصة بك. على سبيل المثال، دعونا نضبط الاتجاه على الوضع الأفقي ونضبط الفجوة ، والحشو ، ونصف قطر الزاوية ، والحدود .

بعد ذلك، قم بإضافة حاوية Flex أخرى داخل الحاوية الرئيسية الخاصة بك حتى يقوم النموذج بإدخال القيم. اضبطه على العرض الكامل لملء المساحة المتوفرة في الحاوية الأصلية.

قم بتكرار هذه الحاوية (باستخدام CTRL/⌘+D ) لإنشاء كتلة منفصلة لعرض النتائج. اضبط خاصية العرض على 30%.

إضافة عناصر واجهة المستخدم

لمواصلة إنشاء تطبيقك، حان الوقت لإضافة عناصر واجهة المستخدم الضرورية.

إضافة نموذج

تتطلب عملية أعمالنا من المستخدم إدخال رقمين، كلاهما من النوع Float. ولجعل ذلك ممكنًا، أضف مدخلين عائمين وزرًا لبدء عملية الحساب.

قم بتبديل اتجاه الحاوية المرنة على الجانب الأيسر إلى الوضع الرأسي وأضف فجوة للعناصر المتداخلة للحصول على مساحة صغيرة بينها. أضف داخل هذه الحاوية المرنة Input Float للقيمة الأولى، والتي سنسميها بـ "X":

• قم بسحب وإسقاط عنصر Input Float في الحاوية الموجودة على الجانب الأيسر.
• في لوحة المظهر ، قم بتخصيص الحقل عن طريق إضافة تسمية وعنصر نائب .
• قم بضبط مظهر الحقل ليناسب تصميم التطبيق الخاص بك.

حدد الحقل المضاف على اللوحة القماشية وقم بتكراره باستخدام CTRL/⌘+D . قم بتعديل التسمية والعنصر النائب للحقل المكرر لتمثيل القيمة الثانية، 'Y'.

الآن قم بسحب وإسقاط عنصر الزر أسفل الحقول المضافة. في لوحة المظهر ، اضبط الزر ليشمل العرض الكامل. يمكن تحقيق ذلك عن طريق تعيين خاصية Align في مجموعة Flex Child على Stretch .

أدخل تسمية للزر، وقم بإضافة رمز اختياريًا لتحسين جاذبيته المرئية.

بعد إضافة هذه العناصر، من الجيد إعادة تسميتها من أجل الوضوح وسهولة التعرف عليها. وهذا يجعل من السهل الرجوع إليها في عمليات عملك، مما يعزز قابلية الفهم وتسريع عملية التطوير.

إضافة كتلة النتائج

على الجانب الأيمن من الحاوية الأصلية، سنقوم بتكوين مساحة لعرض النتائج بعد تنفيذ عملية الأعمال الخاصة بنا. أولاً، قم بتعيين خاصية الاتجاه لهذه الحاوية على عمودي وأضف فجوة صغيرة للحفاظ على تباعد العناصر بشكل أنيق. تغيير العرض إلى 30%.

داخل هذه الحاوية اليمنى، أدخل حاوية Horizontal Flex جديدة وأضف بداخلها عنصر أيقونة يمثل العملية، وكتلة نص برمز يساوي، وكتلة نص حيث سيتم عرض نتيجة العملية. قم بتكرار هذه الحاوية أربع مرات، مع تحديث كل منها لعملياتنا الرياضية المحددة.

قم بتخصيص كل عنصر كما تريد باستخدام لوحة المظهر .

إضافة كتلة تلميح

لتعزيز سهولة استخدام الواجهة، قمنا بإنشاء عنصر نائب سيتم عرضه حتى يتم الحصول على النتائج. لهذا، أضف حاوية مرنة إضافية، تعكس عرض الحاوية اليمنى (30%)، ثم ضع كتلة نصية بالداخل مع تلميح وصفي.

السمة الرئيسية للحاوية مع النتائج هي حالة رؤيتها الأولية. افتراضيًا، قم بإيقاف تشغيل المفتاح المرئي ، مما يجعله غير مرئي في البداية.

إخفاء العنصر

لن نجعل هذه الحاوية مرئية ولن نقوم بتحديث البيانات إلا بعد تنفيذ العملية التجارية والحصول على النتيجة. من المهم تعيين أسماء كتل النص، مما يضمن سهولة التعرف عليها أثناء إنشاء العمليات التجارية وكتابة النتائج لعرضها.

🎉 عمل جيد! لقد أنشأنا واجهة المستخدم المثالية لتطبيقنا ونحن على استعداد لإضافة التفاعل إلى عناصرنا.