سير العمل

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

يحتوي كل مكون على علامة تبويب Workflow عمل لهذه المهمة. في ذلك ، يمكنك إنشاء عمليات الأعمال وتحديد الشروط (المشغلات) لإطلاقها. لنقم بإنشاء مثل هذه العملية التجارية لزر Calculate .

محفزات

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

دعنا نقرر خطة عامة. ما الذي يتعين علينا القيام به عند النقر فوق الزر:

• اكتشف قيمتي X و Y. احصل عليها من حقول الإدخال المقابلة.
• قم بتشغيل نقطة نهاية لإجراء العمليات الحسابية ومرر المعلمات X و Y إليها.
• اجعل حاوية النتيجة مرئية.
• ضع نتيجة الحساب في حقول Label المطلوبة.
  

كتل العمليات التجارية

تتطلب الخطوة الأولى كتلة InputFloat Get Properties . يقرأ القيم الحالية للمكون ، ليس فقط ما أدخله المستخدم ولكن أيضًا الإعدادات الأخرى (على سبيل المثال ، إعدادات المظهر أو نطاق القيم المسموح به). نحتاج إلى الحصول على Value ، وهذا بالضبط يحتوي على البيانات التي أدخلها المستخدم. كل قيمة من حقل الإدخال الخاص بها ونحتاج إلى كتلتين لهذا (لـ X و Y). في نفوسهم ، تحتاج إلى تحديد قيمة Component ID عند الإدخال. إذا لم تنس تحديد أسمائهم عند الإنشاء ، فلن يكون من الصعب العثور على المكون المطلوب وتحديده.

الخطوة التالية هي إطلاق نقطة النهاية. هذا هو المكان الذي يتم فيه الاتصال بين الواجهة الأمامية والخلفية ، ويتم إرسال أمر الحسابات من المتصفح إلى الخادم. يتم تمثيل كل نقطة نهاية لتطبيقنا ككتلة منفصلة. تحتاج فقط إلى تحديد الشخص الذي تحتاجه وتوصيله. تم تعيين طريقة GET لنقطة النهاية هذه URL module4-basic للوحدة النمطية 4 أثناء الوحدة النمطية الخامسة. سيكون تحت هذا الاسم في قائمة الكتل - Server request GET /module4-basic/

على عكس المكونات ، لا تحتاج نقاط النهاية إلى تعيين Endpoint ID (يتم تعيينه بشكل صحيح افتراضيًا). من الضروري فقط تطبيق المدخلات X و Y التي تم الحصول عليها في الخطوة السابقة.

المهمة التالية هي جعل الحاوية الناتجة مرئية. للقيام بذلك ، استخدم كتلة Container Update Properties . في الكتلة نفسها ، حدد ID الحاوية المطلوبة وقم بتعيين Visible = true .

آخر شيء يجب القيام به هو توزيع 5 عناصر ناتجة من المصفوفة إلى المكونات المقابلة لتطبيق الويب. نحن نعلم أن النتيجة يجب أن تأتي دائمًا بترتيب محدد بدقة ، لذلك نحتاج فقط إلى انتقاء العنصر بالفهرس المطلوب بالتسلسل وتعيين قيمته إلى مكون Label . للقيام بذلك ، نستخدم كتل Array Element (مع فهرس من 0 إلى 4) ، و toString (لتحويل بيانات Float إلى String ) ، و Label Update Properties لتغيير نص Label وعرض النتيجة.

ربما لاحظت أن هناك خيارين للكتلة لتحديث خصائص أي مكون - Update Properties Set Properties . الفرق بينهما هو نفسه بين أساليب Patch و Put في Rest API. الأول يغير فقط الخصائص المحددة صراحة ، بينما يحل الثاني محلها جميعًا.

النتيجة النهائية

هذا يكمل إنشاء عملية الأعمال. يمكنك حفظ ونشر والتحقق من النتيجة النهائية.

إذا تم تنفيذ كل شيء بشكل صحيح ، فيجب أن تبدو النتيجة النهائية كما يلي: