البرنامج بأكمله للشاشة الثانية (المدن) - كتاب هندسة البرمجيات - الصف 12 - الفصل 1 - المملكة العربية السعودية

الكتاب: كتاب هندسة البرمجيات - الصف 12 - الفصل 1 | المادة: هندسة البرمجيات | المرحلة: الصف 12 | الفصل الدراسي: 1

الدولة: المملكة العربية السعودية | المنهج: المنهج السعودي - وزارة التعليم

الدرس: برمجة شاشة معلم (المصمك) وتغيير اللغة ديناميكياً

📚 معلومات الصفحة

الكتاب: كتاب هندسة البرمجيات - الصف 12 - الفصل 1 | المادة: هندسة البرمجيات | المرحلة: الصف 12 | الفصل الدراسي: 1

الدولة: المملكة العربية السعودية | المنهج: المنهج السعودي - وزارة التعليم

نوع المحتوى: درس تعليمي

مستوى الصعوبة: متوسط

📝 ملخص الصفحة

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

يتضمن البرنامج تهيئة متغيرات عامة للاختيار وقائمتين لعناوين الرياض باللغتين الإنجليزية والعربية. يتم استخدام معالجات الأحداث مثل 'riyadh_list.BeforePicking' لتعيين عناصر القائمة بناءً على قيمة اللغة المحددة ('en' أو 'ar')، و'riyadh_list.AfterPicking' لالتقاط اختيار المستخدم والتنقل إلى شاشة أخرى إذا تم اختيار 'Al Masmak' أو 'المصمك'.

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

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

📄 النص الكامل للصفحة

البرنامج بأكمله للشاشة الثانية (المدن) The Complete Code for the Second Screen (Cities) --- SECTION: شكل 3.41: البرنامج بأكمله للشاشة الثانية --- شكل 3.41: البرنامج بأكمله للشاشة الثانية --- SECTION: برمجة شاشة معلم (المصمك) --- برمجة شاشة معلم (المصمك) Programming the Highlight Screen (Al Masmak) ستتغير لغة الشاشة الخاصة بالمعلم وكذلك تنسيق النص اعتمادًا على اختيار اللغة من الصفحة الرئيسية، وستقدم هذه الشاشة أيضًا خيار عرض خريطة تفاعلية لموقع المعلم. --- SECTION: تغيير اللغة ديناميكيا لصفحة المعلم --- تغيير اللغة ديناميكيا لصفحة المعلم Dynamically Changing the Language for the Highlight Page سيتم توجيه المستخدم إلى الصفحة الخاصة بالمعلم، والتي تحتوي على نص حول المعلم المحدد، وستتغير لغة النص وفقًا للغة المحددة. ستتم محاذاة النص بشكل صحيح بناءً على اللغة التي تم اختيارها في الصفحة الرئيسية، حيث يتم محاذاة النص إلى اليسار إذا كان اختيار اللغة هو الإنجليزية، ومحاذاة النص إلى اليمين إذا كان اختيار اللغة هو العربية. وزارة التعليم Ministry of Education 2025 - 1447 168 --- VISUAL CONTEXT --- **DIAGRAM**: شكل 3.41: البرنامج بأكمله للشاشة الثانية Description: A diagram showing App Inventor programming blocks for the second screen (Cities). It includes initialization of global variables for selection and two lists for Riyadh highlights (English and Arabic). It also shows event handlers for 'riyadh_list.BeforePicking' to set list elements based on the 'start value' (language 'en' or 'ar'), and 'riyadh_list.AfterPicking' to set the global selection and then open another screen ('AlMasmak') with the selected language if 'Al Masmak' or 'المصمك' is chosen. Data: The diagram illustrates conditional logic for language selection and screen navigation in a mobile application. It initializes global variables 'selection', 'riyadh_highlights_en' (with 'Al Masmak', 'Boulevard Riyadh City'), and 'riyadh_highlights_ar' (with 'المصمك', 'بوليفارد الرياض'). The 'BeforePicking' event sets the list elements based on whether the 'start value' is 'en' or 'ar'. The 'AfterPicking' event captures the user's selection and, if 'Al Masmak' or 'المصمك' is selected, navigates to the 'AlMasmak' screen, passing the original 'start value' (language) to it. Key Values: initialize global selection, initialize global riyadh_highlights_en, make a list (Al Masmak, Boulevard Riyadh City), initialize global riyadh_highlights_ar, make a list (المصمك, بوليفارد الرياض), when riyadh_list.BeforePicking, if get start value = "en", set riyadh_list.Elements to get global riyadh_highlights_en, else if get start value = "ar", set riyadh_list.Elements to get global riyadh_highlights_ar, when riyadh_list.AfterPicking, set global selection to riyadh_list.Selection, if get global selection = "Al Masmak" or get global selection = "المصمك", open another screen with start value screenName AlMasmak startValue get start value Context: This visual element provides a practical example of how to implement dynamic language switching and conditional screen navigation in a mobile application using App Inventor blocks. It demonstrates variable initialization, event handling, and 'if-else if' logic for user interface customization based on language preference.

🎴 بطاقات تعليمية للمراجعة

عدد البطاقات: 4 بطاقة لهذه الصفحة

ما هي الخطوات التي ينفذها الحدث 'riyadh_list.BeforePicking' في برنامج شاشة المدن؟

الإجابة: 1. التحقق من قيمة اللغة المخزنة في 'start value'. 2. إذا كانت القيمة 'en'، يتم تعيين عناصر القائمة (Elements) إلى قائمة معالم الرياض الإنجليزية (riyadh_highlights_en). 3. إذا كانت القيمة 'ar'، يتم تعيين عناصر القائمة إلى قائمة معالم الرياض العربية (riyadh_highlights_ar).

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

تلميح: ركز على التسلسل المنطقي: التحقق أولاً، ثم تنفيذ إجراء بناءً على نتيجة التحقق.

التصنيف: صيغة/خطوات | المستوى: متوسط

ما الذي يحدث عند اختيار المستخدم لمعلم 'المصمك' أو 'Al Masmak' من القائمة في شاشة المدن؟

الإجابة: يتم تخزين الاختيار في المتغير العام 'selection'، ثم يتم فتح شاشة أخرى باسم 'AlMasmak' مع تمرير قيمة اللغة الأصلية ('start value') إليها.

الشرح: هذه العملية تمكن من التنقل بين الشاشات مع الحفاظ على حالة التطبيق (مثل تفضيل اللغة) وتمرير المعلومات اللازمة للشاشة التالية.

تلميح: تذكر أن هناك حدثاً يتم تنفيذه بعد اختيار المستخدم (AfterPicking).

التصنيف: صيغة/خطوات | المستوى: سهل

كيف يتم تحقيق التغيير الديناميكي للغة في صفحة المعلم (شاشة المصمك) بناءً على اختيار المستخدم؟

الإجابة: يتم تغيير لغة النص ومحاذاته بناءً على قيمة اللغة ('start value') التي تم تمريرها من الشاشة السابقة. إذا كانت اللغة الإنجليزية، يتم محاذاة النص لليسار. إذا كانت اللغة العربية، يتم محاذاة النص لليمين.

الشرح: هذا يوضح مبدأ فصل البيانات عن العرض، حيث يتم تمرير تفضيل اللغة كمعامل (parameter) لتعديل العرض تلقائياً، مما يجعل التطبيق أكثر مرونة وسهولة في الصيانة.

تلميح: فكر في كيفية استخدام البيانات التي تم تمريرها بين الشاشات لتعديل واجهة المستخدم.

التصنيف: مفهوم جوهري | المستوى: صعب

ما الفرق بين الحدثين 'BeforePicking' و 'AfterPicking' في سياق قائمة معالم الرياض؟

الإجابة: الحدث 'BeforePicking' يتم تنفيذه قبل أن يرى المستخدم خيارات القائمة، ويستخدم لإعداد محتوى القائمة (مثل تعيين اللغة). الحدث 'AfterPicking' يتم تنفيذها بعد أن يقوم المستخدم باختيار عنصر من القائمة، ويستخدم للتعامل مع هذا الاختيار (مثل تخزينه والتنقل لشاشة أخرى).

الشرح: هذا التمييز مهم في برمجة واجهات المستخدم التفاعلية، حيث يجب إعداد العناصر قبل عرضها، ثم الاستجابة لاختيارات المستخدم بعد حدوثها.

تلميح: ركز على توقيت تنفيذ كل حدث بالنسبة لفعل المستخدم (الاختيار من القائمة).

التصنيف: فرق بين مفهومين | المستوى: متوسط