App Development Tutorial: Adding UI Components in MIT App Inventor - كتاب هندسة البرمجيات - الصف 12 - الفصل 1 - المملكة العربية السعودية

--- SECTION: لإضافة مكون HorizontalArrangement (الترتيب الأفقي): --- لإضافة مكون HorizontalArrangement (الترتيب الأفقي): من مجموعة Layout (التخطيط)، أضف مكوّن HorizontalArrangement (الترتيب الأفقي) إلى الشاشة. في مكوّن HorizontalArrangement1 (الترتيب الأفقي)، اضبط خاصية BackgroundColor (لون الخلفية) إلى None (بدون). 2 واضبط خاصية AlignHorizontal (المحاذاة الأفقية) إلى 3 :Center (المنتصف:3). 3 واضبط خاصية AlignVertical (المحاذاة العمودية) إلى 3 :Bottom (الأسفل:3). 4 اضبط خاصية Height (الارتفاع) إلى Fill parent (تعبئة المساحة). 5 وخاصية Width (العرض) إلى Fill parent (تعبئة المساحة). 6 --- SECTION: لإضافة زر Map (الخريطة): --- لإضافة زر Map (الخريطة): من مجموعة User Interface (واجهة المستخدم)، أضف المكوّن Button (زر) إلى Screen1 (شاشة 1)، وأعد تسميته إلى map_button (زر_الخريطة). 2 في المكوّن map_button (زر_الخريطة)، اضبط خاصية BackgroundColor (لون الخلفية) إلى None (بدون). 3 وامسح النص من حقل Text (النص)، 4 واضبط خاصية Image (صورة) إلى أيقونة خريطة. 5 وزارة التعليم 147 Ministry of Education 2025 - 1447 --- VISUAL CONTEXT --- **FIGURE**: شكل 3.30: إضافة مكون HorizontalArrangement (الترتيب الأفقي) Description: A screenshot of the MIT App Inventor development environment. The interface is divided into several panels: **Top Bar**: Displays 'MIT APP INVENTOR' logo, navigation links ('Projects', 'Connect', 'Build', 'Settings', 'Help', 'My projects', 'View Trash', 'Guide', 'Report an issue'), language selector ('English'), user email ('qkhaled.bl@gmail.com'), and view toggles ('Designer', 'Blocks'). **Left Panel (Palette)**: Lists various UI components and categories. Categories include 'User Interface' (with components like Button, CheckBox, DatePicker, Image, Label, ListPicker, ListView, Notifier, PasswordTextBox, Slider, Spinner, TextBox, TimePicker, WebViewer), 'Layout' (with HorizontalArrangement, HorizontalScrollArrangement, TableArrangement, VerticalArrangement, VerticalScrollArrangement), 'Media', 'Drawing and Animation', 'Maps', 'Sensors', 'Social', 'Storage', 'Connectivity', 'LEGO® MINDSTORMS®', 'Experimental', 'Extension'. **Center Panel (Viewer)**: Shows a smartphone emulator with an app preview. The app is titled 'Discover Saudi Arabia' and 'Al Masmak', displaying an image of a fort and the text 'Text for Label1'. Above the emulator, there are options 'Display hidden components in Viewer' and 'Phone size (506,320)'. **Right Panel (Components & Properties)**: * **Components**: Lists the components currently in the app: 'AlMasmak', 'discover_label', 'VerticalArrangement1', 'title_label', 'image', 'description_label', 'HorizontalArrangement1'. Below this, 'Rename' and 'Delete' buttons are visible. * **Properties**: Displays properties for the selected component, 'HorizontalArrangement1'. Properties shown are 'AlignHorizontal' (set to Center: 3), 'AlignVertical' (set to Bottom: 3), 'BackgroundColor' (set to None), 'Height' (set to Fill parent), 'Width' (set to Fill parent), 'Image' (set to None), and 'Visible' (checked). **Bottom Right Panel (Media)**: Lists media assets: 'welcome-screen.png', 'riyadh_nav-img.png', 'jeddah_nav-img.png'. Numbered circles (1-6) are overlaid on the image, pointing to specific areas of the interface relevant to the instructions provided in the text. Key Values: MIT APP INVENTOR, Projects, Connect, Build, Settings, Help, My projects, View Trash, Guide, Report an issue, English, qkhaled.bl@gmail.com, Designer, Blocks, Palette, Search Components..., User Interface, Button, CheckBox, DatePicker, Image, Label, ListPicker, ListView, Notifier, PasswordTextBox, Slider, Spinner, TextBox, TimePicker, WebViewer, Layout, HorizontalArrangement, HorizontalScrollArrangement, TableArrangement, VerticalArrangement, VerticalScrollArrangement, Media, Drawing and Animation, Maps, Sensors, Social, Storage, Connectivity, LEGO® MINDSTORMS®, Experimental, Extension, Viewer, Display hidden components in Viewer, Phone size (506,320), Discover Saudi Arabia, Al Masmak, Text for Label1, Components, AlMasmak, discover_label, VerticalArrangement1, title_label, image, description_label, HorizontalArrangement1, Rename, Delete, Properties, HorizontalArrangement1, AlignHorizontal, Center: 3, AlignVertical, Bottom: 3, BackgroundColor, None, Height, Fill parent, Width, Fill parent, Image, None, Visible, welcome-screen.png, riyadh_nav-img.png, jeddah_nav-img.png Context: This figure visually demonstrates the steps for adding and configuring UI components (specifically HorizontalArrangement and implicitly a Map button) within the MIT App Inventor interface, a visual programming tool for app development. The numbered circles in the image correspond to specific areas of the interface referenced in the accompanying instructions.