السابق

التالي

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

مكتمل

تقترب من نهاية وحدة التعلم هذه، لذا لنجمع كل شيء معًا في أحد التمارين.

في المثال التالي، نواصل إضافة وظيفة انتقال الشاشة إلى تطبيق ماكينات القهوة من Contoso، ولكن يمكنك استخدام أي تطبيق متعدد الشاشات. تتوافق الخطوات أدناه مع التطبيق الذي كنا نعمل عليه فِي مسار التعليم هذا.

‏‫ملاحظة

عند إدخال الصيغ، وبدلاً من استخدام تقنية النسخ/اللصق، من الأفضل كتابتها فِي الصيغة (fx). علامات الاقتباس المفردة والمزدوجة لا تترجم نفس الشيء فِي Power Apps.

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

2. على الشاشة الرئيسية، حدّد الزر عرض الكتالوج. في الصيغة 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.

6. حدّد أيقونة السهم (أو أي رمز تستخدمه كالزر الرجوع) وقم بتغيير الصيغة لـ OnSelect من Back() إلى:

   Back(ScreenTransition.UnCoverRight)

7. ارجع إلى الشاشة الرئيسية وضع تطبيقك فِي وضع المعاينة. حدّد زر Admin Screen، ثم حدّد الزر الرجوع. هل لاحظت الفرق فِي الانتقال؟

8. العودة إلى وضع التحرير. قم بإضافة Success screen عن طريق تحديد شاشة جديدة>قوالب>نجاح.

9. إعادة تسمية الشاشة Success Screen.

10. انتقل إلى catalog screen وحدّد عنصر التحكم Form لديك. يمكنك تحديده من لوحة طريقة عرض الشجرة لديك.

11. في الخاصية OnSuccess للنموذج، أدخل الرمز التالي:

    Navigate(‘Success Screen’,ScreenTransition.Fade)

12. الآن بعد أن أضفت OnSuccess إلى النموذج الخاص بك، انتقل إلى شاشة النجاح عن طريق تحديد Success Screen فِي لوحة طريقة عرض الشجرة.

13. في success screen، أدخل عنصر التحكم Timer.

14. اضبط الخصائص التالية على عنصر التحكم Timer لديك:

    • AutoStart: true

    • Duration: 4000

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

    • Visible: false

    

15. لاختبار/عرض وظيفة مؤقت success screen، ارجع إلى catalog screen وضع تطبيقك فِي وضع المعاينة. حدّد أي عنصر وقم بإجراء تغيير على العنصر الموجود فِي النموذج.

16. حدّد الزر حفظ التغييرات الموجود أسفل النموذج. إذا قمت بذلك بشكل صحيح، فسيعرض التطبيق success screen لمدة أربع ثوانٍ ثم يعود إلى catalog screen، حيث يمكنك الاستمرار فِي إجراء التغييرات.

17. أغلق وضع المعاينة وارجع إلى الشاشة الرئيسية من لوحة طريقة عرض الشجرة. الآن ستقوم بإنشاء قائمة التنقل المنسدلة.

18. أدخل عنصر التحكم Dropdown على شاشة الصفحة الرئيسية وضعه أسفل الزاوية اليسرى العليا من مستطيل العنوان.

19. قم بإدراج عنصر التحكم Text label وتحديث الخاصية Text إلى Screen Navigation. ضعه فوق عنصر التحكم Dropdown مباشرةً.

20. حدّد عنصر التحكم Dropdown لديك. قم بتحديث الخاصية Default إلى:

    ""

21. استمر فِي عنصر التحكم Dropdown، قم بتحديث الخاصية Items إلى:

    ["", "Catalog", "Admin"]

22. أدخل الصيغة التالية لـ OnChange لخاصية عنصر التحكم Dropdown:

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

23. ضع التطبيق مرة أخرى فِي وضع المعاينة/التشغيل واختبر الوظيفة OnChange فِي عنصر التحكم DropDown للانتقال إلى الشاشات الأخرى.

24. أضف أيقونة الصفحة الرئيسية إلى catalog screen الخاص بك. أعد التطبيق مرة أخرى إلى وضع التحرير وحدّد Catalog Screen.

25. حدّد عنصر تحكم أيقونة الرجوع الموجود فِي الجزء العلوي الأيمن من catalog screen، ثم انسخه باستخدام Ctrl+C أو بالنقر بزر الماوس الأيمن ثم تحديد نسخ.

26. الصق نسخة الأيقونة الرجوع (Ctrl + V) وأعد وضعه فِي أعلى يسار مستطيل العنوان.

27. مع تحديد أيقونة الرجوع الذي تم لصقه، استخدم زر الأيقونة فِي شريط الأوامر وقم بتغيير الأيقونة إلى أيقونة الصفحة الرئيسية.

28. قم بتغيير الخاصية OnSelect إلى:

    Navigate('Home Screen', ScreenTransition.CoverRight)

    وبعد أن نجحنا فِي حفظ التغييرات على بياناتك، لدينا الآن طريقة للعودة إلى الشاشة الرئيسية.

29. على catalog screen، ضع تطبيقك فِي وضع المعاينة. تأكد من أن تحديد عنصر التحكم فِي أيقونة الصفحة الرئيسية ينقلك إلى الشاشة الرئيسية.

لقد نجحنا فِي إضافة بعض وظائف التنقل إلى أحد التطبيقات:

• انتقالات الشاشة للدالتين Navigate وBack.
• Success screen التي تنتقل إليها باستخدام الخاصية OnSuccess للنموذج.
• عنصر التحكم Timer يعود إلى catalog screen باستخدام الخاصية OnTimerEnd.
• عنصر التحكم Dropdown ينتقل إلى الشاشات الأخرى باستخدام الخاصية OnChange.
• أيقونة الصفحة الرئيسية لتمكين المستخدمين من العودة إلى الشاشة الرئيسية.

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

متابعة