إضافة مكون ListPicker (قائمة الخيارات) - كتاب هندسة البرمجيات - الصف 12 - الفصل 1 - المملكة العربية السعودية

سيتم استخدام المكون ListPicker (قائمة الخيارات) لتحديد معلم كل مدينة، وسيتم تمثيل كل مدينة بواسطة القائمة، ولهذا سيكون هناك قائمة لمدينة الرياض وقائمة لمدينة جدة. لإضافة المكون ListPicker (قائمة الخيارات) للرياض: من مجموعة User Interface (واجهة المستخدم)، أضف Label (التسمية) باسم RIYADH (الرياض)، ثم أضف مكون ListPicker (قائمة الخيارات) إلى Screen2 (شاشة 2)، وأعد تسميته إلى riyadh_list (قائمة_الرياض). في المكون riyadh_list (قائمة_الرياض)، اضبط خاصية Height (الارتفاع) إلى Fill parent (تعبئة المساحة)، وخاصية Width (العرض) إلى Fill parent (تعبئة المساحة)، ثم حمل صورة الرياض من خاصية Image (صورة)، وامسح النص الموجود سابقًا داخل حقل Text (النص). كرر الخطوات لإضافة Label (التسمية) باسم JEDDAH (جدة) و ListPicker (قائمة الخيارات) الخاصة بها. شكل 3.24: إضافة مكون ListPicker (قائمة الخيارات) وزارة التعليم Ministry of Education 141 2025 - 1447 --- VISUAL CONTEXT --- **DIAGRAM**: شكل 3.24: إضافة مكون ListPicker (قائمة الخيارات) Description: A composite screenshot of the MIT App Inventor development environment, illustrating the steps to add and configure a ListPicker component. The image shows three main panels: the 'Palette' (left), the 'Viewer' (center, displaying a phone emulator), and the 'Components' and 'Properties' panels (right). Numbered callouts highlight specific elements and actions. Data: The diagram shows the user interface of App Inventor. The 'Palette' on the left lists UI components. The 'Viewer' in the center displays a mobile phone emulator showing an app titled 'Discover Saudi Arabia' with 'Cities' and 'RIYADH' (callout 1) and an image of Riyadh. Below this, another emulator instance (callout 8) shows 'JEDDAH' with an image of Jeddah. The 'Components' panel on the right lists the app's UI elements, including 'riyadh_list' (callout 3). The 'Properties' panel (right) shows various properties for the selected component, including 'Height' set to 'Fill parent' (callout 4), 'Width' set to 'Fill parent' (callout 5), 'Image' showing 'riyadh.png' (callout 6), and an empty 'Text' field (callout 7). Callout 2 points to the 'Label' component in the 'User Interface' section of the 'Palette'. Key Values: Callout 1: Phone emulator displaying 'RIYADH' city with image., Callout 2: 'Label' component selected in the 'User Interface' palette., Callout 3: 'riyadh_list' component in the 'Components' panel., Callout 4: 'Height' property set to 'Fill parent' in the 'Properties' panel., Callout 5: 'Width' property set to 'Fill parent' in the 'Properties' panel., Callout 6: 'Image' property showing 'riyadh.png' in the 'Properties' panel., Callout 7: 'Text' property, appearing empty, in the 'Properties' panel., Callout 8: Phone emulator displaying 'JEDDAH' city with image. Context: This visual element directly supports the instructional text by providing a visual guide to the steps involved in adding and configuring the ListPicker component in the MIT App Inventor environment. It shows the expected appearance of the app at different stages of development.