إنشاء قائمة في تطبيق MIT App Inventor - كتاب هندسة البرمجيات - الصف 12 - الفصل 1 - المملكة العربية السعودية

--- SECTION: لإضافة تسمية المدن --- لإضافة تسمية المدن من مجموعة (واجهة المستخدم) User Interface ، أضف مكون Label (التسمية) إلى الشاشة، 1 وأعد تسميته إلى cities_label (تسمية_المدن). 2 في المكون (تسمية_المدن) cities_label ، اضبط خاصية BackgroundColor (لون الخلفية) إلى None (بدون) 3 ، واضبط الخاصية FontSize (حجم الخط) إلى 18.0 4 ، واضبط الخاصية Text (النص) إلى Cities (المدن) واضبط خاصية TextColor (لون النص) إلى White (أبيض) 5 . --- SECTION: إنشاء قائمة Creating a List --- إنشاء قائمة Creating a List القوائم هي نوع من هياكل البيانات التي تُستخدم لإنشاء مجموعات مختلفة من القيم أو العناصر وإدارتها، وستضيف قائمة مع كل صورة تضيفها إلى التطبيق. على سبيل المثال، عند الضغط على صورة مدينة الرياض، ستظهر قائمة باثنين من أبرز معالم هذه المدينة على النحو التالي: المصمك) Al Masmak) بوليفارد مدينة الرياض) Boulevard Riyadh City) شكل 3.22: إضافة تسمية نصية شكل 3.23: فتح صفحة جديدة من ListPicker (قائمة الخيارات). وزارة التعليم Ministry of Education 2023 - 1447 140 --- VISUAL CONTEXT --- **SCREENSHOT**: MIT App Inventor Interface for Visit_SA_App Description: A detailed screenshot of the MIT App Inventor development environment, showing the 'Visit_SA_App' project. The interface is structured with a 'Palette' panel on the left, listing various User Interface components such as Button, CheckBox, DatePicker, Image, Label, ListPicker, ListView, Notifier, PasswordTextBox, Slider, Spinner, Switch, TextBox, TimePicker, and WebViewer. The central 'Viewer' panel displays a smartphone emulator with 'Discover Saudi Arabia' and 'Cities' text, indicating the app's current state. The 'Components' panel on the right shows the hierarchical structure of the app's UI elements, including 'Cities', 'discover_label', 'VerticalArrangement1', and 'cities_label'. Below 'Components' is the 'Properties' panel, which displays the configurable attributes for the selected 'cities_label' component, such as BackgroundColor (None), FontSize (18.0), Text (cities), and TextColor (White). The 'Media' panel at the bottom right lists 'welcome-screen.png'. Numbered circles (1-5) are overlaid on the screenshot, pointing to specific UI elements and properties mentioned in the accompanying instructions. Key Values: Palette: User Interface components (Button, CheckBox, DatePicker, Image, Label, ListPicker, ListView, Notifier, PasswordTextBox, Slider, Spinner, Switch, TextBox, TimePicker, WebViewer), Viewer: Phone size (505,320), App title 'Discover Saudi Arabia', Label 'Cities', Components: Cities, discover_label, VerticalArrangement1, cities_label, Properties for cities_label: BackgroundColor: None, FontBold: unchecked, FontItalic: unchecked, FontSize: 18.0, FontTypeface: default, HTMLFormat: unchecked, HasMargins: checked, Height: Automatic, Width: Automatic, Text: cities, TextAlign: left: 0, TextColor: White, Visible: checked, Media: welcome-screen.png, Upload File button, Top Menu: Projects, Connect, Build, Settings, Help, My Projects, View Trash, Guide, Report an Issue, qkhaled.bl@gmail.com, Designer, Blocks Context: This screenshot serves as a visual guide for users following the instructions to add and configure a 'Label' component named 'cities_label' within the MIT App Inventor environment, demonstrating the visual outcome of each step. **DIAGRAM**: فتح صفحة جديدة من ListPicker Description: A conceptual diagram illustrating the functionality of a ListPicker component. It shows two stylized smartphone screens. The left screen displays a list of text items, representing the initial state of a ListPicker where a user can make a selection. A dashed arrow points from the left screen to the right screen, which depicts a new page or view with two distinct, empty rectangular sections. This signifies that selecting an item from the ListPicker on the first screen leads to the display of new content or a new interface on a subsequent screen. Context: This diagram visually explains how a ListPicker component functions in an app, showing that user interaction with a list (selection) triggers a transition to a new screen or displays new information based on that selection.