التمرين - ممَارسة التنقل فِي التطبيق

مكتمل

تقتربُ من نهَايةِ وحدةِ التعلمِ هذه، لذا لنطبِّقْ مَا تعلَّمتَه فِي تمرينٍ إرشَاديٍّ.

فِي هَذا المثَال، ستستمر فِي تكوين انتقَالات الشَاشة فِي تطبيق Contoso Coffee Machines. إذا كنت تستخدمُ تطبيقًا آخرَ متعددَ الشَاشَاتِ، فيمكنك اتباعُ خطواتٍ ممَاثلةٍ.

‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫‏‫مُلاحظَة‬‬‬‬‬‬‬‬‬‬‬‬‬‬‬‬‬

عند إدخَالِ المعَادلاتِ، من الأفضلِ كتَابتُهَا مباشرةً فِي شريطِ المعَادلةِ. (fx). تجنب النسخَ واللصقَ من مصَادرَ أخرى، لأن علامَاتِ الاقتباسِ المفردةَ والمزدوجةَ قد لا تترجمُ بشكلٍ صَحِيحٍ فِي Power Apps.

1. قم بتسجيل الدخول إلى الصفحة الرئيسية من Power Apps وافتَح تطبيق Contoso Coffee Machines فِي وضع التحرير.

2. على الشَاشة الرئيسية، حدد الزرّ اعرض الكتَالوج (Button2 فِي المِثَال أدنَاه). فِي خَاصيةِ OnSelect، استَبدِل:

   Navigate('Catalog Screen')

   مع:

   Navigate('Catalog Screen',ScreenTransition.Cover)

   

3. استمر عَلى الشَاشة الرئيسية، وحدد الزر Admin Screen. فِي معَادلة OnSelect الخَاصة به، قُم بالتغيير:

   Navigate('Admin Screen')

   إلى:

   Navigate('Admin Screen',ScreenTransition.Fade)

4. معَاينة التَطبِيق. حدد زرّي الكتَالوج والمَسؤول لمُرَاقبة الانتِقَالات. بعدَ ذلك، استَخدِم أزرَار الرجُوع للعَودةِ إلى الشَاشَة الرَئيسِية.

5. التبديل إلى وضع التحرير. فِي Admin Screen، حَدد رمز السَهم المُستخدم كزر رجُوع. قم بتحديث الخَاصية OnSelect الخَاص بهَا إلى:

   Back()

   إلى:

   Back(ScreenTransition.UnCoverRight)

6. معَاينة التطبيق مرة أخرى. حدد زر Admin Screen، ثم حدد الزر الرجوع. لاحظ الفرق فِي انتقَال العودة.

7. فِي وَضع التحرير، أدخل شَاشةً جديدةً: شَاشة جديدة>قَوالب>نجَاح. أعِد تَسمِيته إلى Success Screen.

8. فِي Catalog Screen، حدد عنصر التحكم النموذج الخَاص بك من طريقة عرض الشجرة.

9. قم بتعيين الخَاصية OnSuccess الخَاصة بالنموذج إلى:

   Navigate(‘Success Screen’,ScreenTransition.Fade)

10. انتَقِل إلى Success Screen فِي طَريقة عَرضِ الشَجرة، وقُم بإدرَاج عُنصر تحكّمِ المُؤقّت.

11. تعيين خصَائص عنصر تحكم المؤقت.

    • التَشغِيل التلقَائي: true

    • المدة: 4000

    • OnTimerEnd: Navigate(‘Catalog Screen’,ScreenTransition.Fade)

    • مرئي: false

    

12. ارجَع إلى Catalog Screen وعَاين التَطبِيق. قُم بإجرَاء تَغيِير فِي النَمُوذج وحَدد حفظ التَغيِيرَات.

    يجب أن يعرضَ التَطبِيق Success Screen لمُدةِ أربع ثوانٍ، ثم يعودُ إلى Catalog Screen.

13. اخرج مِن وضع إصدَارٍ أولِي وارجَع إلى الصفحة الرئيسية. الآن قم بإضَافة قَائمة التنقل المنسدلة.

14. أقم بإدرَاج عنصر التحكم بـ القَائمة المنسدلة ووضعه أسفل المنطقة العلوية اليسرى من مستطيل العنوان.

15. أضف عنصر تحكم تسمية النص فوق القَائمة المنسدلة وعيّن خَاصية Text الخَاصة به إلى:

    Screen Navigation

    قم بتعيين خَاصية Color إلى:

    Color.White

16. حدد عُنصر التحكّم Dropdown واضبط خصَائصَه:

    • الافترَاضي: ""

    • العنَاصر: ["", "Catalog Screen", "Admin Screen"]

17. قم بتعيين خَاصية OnChange إلى:

    Switch(
        Self.SelectedText.Value,
        "Catalog",
        Navigate(
            'Catalog Screen',
            ScreenTransition.Cover
        ),
        "Admin",
        Navigate(
            'Admin Screen',
            ScreenTransition.Cover
        )
    );
    Reset(Self)
    

    

18. معَاينة التطبيق مرة أخرى. اختبرِ القَائمةَ المنسدلةَ لتأكيدِ التنقلِ بين الشَاشَاتِ.

19. ارجَع إلى وضعِ التَحرير، وحَدد Catalog Screen. انسخ رمز العودة (Ctrl+C), ثم انسخه (Ctrl+V). انقل الرمز المكرر إلى أعلى يمين مستطيل العنوان.

20. تغييرُ الأيقونةِ المكررةِ إلى أيقونةٍ الصَفحَة الرَئيسِية.

21. قم بتعيين الخَاصية OnSelect الخَاصة بالأيقونة إلى الصفحة الرئيسية إلى:

    Navigate('Home Screen', ScreenTransition.CoverRight)

22. معَاينة التَطبِيق. على Catalog Screen، تأكد من أن تحديد أيقونة الصفحة الرئيسية يعيدك إلى Home Screen.

لقد نجحت فِي تكوين ميزَات التنقل فِي تطبيقك:

• الدَالتَانِ Navigate وBack مع شَاشَات الانتقَال.
• Success Screen تظهر عند إرسَال النموذج باستخدَام OnSuccess.
• مؤقَّت يتنقلُ بَعد تأخيِر عَبر OnTimerEnd.
• قَائمة مُنسدلة للتَنقّل باستِخدَام OnChange.
• أيقُونة الصَفحَة الرَئيسية للعَودَة إلى الشَاشَة الرَئيسية.

فيمَا يلي، لنقم بإكمَال فحص المعرفة.