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

شكل 3.29: إضافة مكون الوصف النصي Adding an Interactive Map to the Application إضافة خريطة تفاعلية للتطبيق سيتمكن المستخدمون من تصفح خريطة تفاعلية تعرض الموقع الدقيق للمعلم من الشاشة الخاصة به، وذلك ليتمكنوا من رؤية جميع معالم المدينة. ستُنشئ في البداية مجمعًا للزر الذي سيعرض الخريطة التفاعلية، ثم ستُضيف المكون. مكون الترتيب الأفقي Horizontal Arrangement Component باستخدام مكون الترتيب الأفقي، يتم ترتيب الكائنات أفقيًا على طول المحور الأفقي ومحاذاتها رأسيًا في الوسط. إذا تم تعيين خاصية الارتفاع أو العرض إلى Automatic (تلقائي)، سيتم تحديد الارتفاع الفعلي للمكون حسب ارتفاع أطول كائن بداخله. إذا كانت خاصية Height (الارتفاع) لمكون HorizontalArrangement (الترتيب الأفقي) فارغة، فسيكون الارتفاع 100. إذا تم تحديد خاصية Height (الارتفاع) أو Width (العرض) لمكون HorizontalArrangement (الترتيب الأفقي) بواسطة Fill parent (تعبئة المساحة) أو (البكسل)، فإن أي خاصية Width (عرض) محددة بواسطة Fill parent (تعبئة المساحة) ستشغل أيضًا أي مساحة لا تشغلها المكونات الأخرى. 146 وزارة التعليم 2025 - 1447 Ministry of Education --- VISUAL CONTEXT --- **SCREENSHOT**: MIT App Inventor Interface for Visit_SA_App Description: A comprehensive screenshot of the MIT App Inventor development environment, displaying the user interface for creating a mobile application. The interface is divided into several panels: a top menu bar, a project bar, a left-hand 'Palette' for UI components, a central 'Viewer' with a phone emulator, a 'Components' panel showing the app's structure, a 'Properties' panel for component configuration, and a 'Media' panel for asset management. The phone emulator shows a preview of the 'Visit_SA_App' with a map-related theme. Data: The screenshot shows the MIT App Inventor web-based IDE. The top bar includes project management options ('Projects', 'Connect', 'Build', 'Settings', 'Help', 'My Projects', 'View Trash', 'Guide', 'Report an Issue') and user account details ('English', 'qkhaled.b@gmail.com'). Below that, a project bar shows 'Visit_SA_App', 'AlMasmak', 'Add Screen', 'Remove Screen', 'Publish to Gallery'. The left 'Palette' panel lists UI components under 'User Interface' (e.g., 'Button', 'CheckBox', 'Image', 'Label') and other categories ('Layout', 'Media', 'Drawing and Animation'). The central 'Viewer' panel displays a phone emulator with 'Phone size (506,320)' and the app preview. The app preview shows 'Discover Saudi Arabia', 'Al Masmak', an image of a fort, and 'Text for Label1'. The 'Components' panel on the right lists the hierarchical structure of the app's UI elements ('AlMasmak', 'discover_label', 'VerticalArrangement1', 'title_label', 'image', 'description_label'). The 'Properties' panel allows configuration of the selected component ('description_label'), showing properties like 'BackgroundColor: None', 'FontBold: unchecked', 'FontSize: 14.0', 'Height: Fill parent', 'Width: Automatic', 'Text: Text for Label1', 'TextColor: White', 'Visible: checked'. The 'Media' panel lists uploaded image assets ('welcome-screen.png', 'riyadh_nav-img.png', 'jeddah_nav-img.png', 'al_masma_sized.jpg'). Key Values: App Name: Visit_SA_App, Project Name: AlMasmak, Phone Size: 506,320, Font Size: 14.0, Height property: Fill parent, Width property: Automatic, Text property: Text for Label1, TextColor property: White, Media files: welcome-screen.png, riyadh_nav-img.png, jeddah_nav-img.png, al_masma_sized.jpg Context: This visual provides a detailed overview of the MIT App Inventor environment, demonstrating the layout of its various panels and the types of information and controls available to a developer. It serves as a visual aid for understanding the context of app development instructions. **CALLOUT**: Callout 1: Label Component in Palette Description: A blue numbered '1' pointing to the 'Label' component within the 'User Interface' section of the 'Palette' panel on the left side of the App Inventor interface. This indicates the selection or identification of the Label component. Key Values: Label Context: Highlights a fundamental UI component used for displaying static text in the app. **CALLOUT**: Callout 2: description_label in Components Tree Description: A blue numbered '2' pointing to 'description_label' in the 'Components' panel on the right side of the App Inventor interface. This indicates that 'description_label' is the currently selected component in the app's hierarchy, whose properties are displayed in the 'Properties' panel. Key Values: description_label Context: Identifies a specific instance of a label component within the application's structure, showing how components are organized. **CALLOUT**: Callout 3: Height and Width Properties Description: A blue numbered '3' pointing to the 'Height' property (set to 'Fill parent') and 'Width' property (set to 'Automatic') under the 'Properties' panel for 'description_label'. These settings control the dimensions of the selected component. Key Values: Height: Fill parent, Width: Automatic Context: Illustrates how to configure the size and layout behavior of a UI component, demonstrating options like 'Fill parent' for dynamic sizing and 'Automatic' for content-based sizing. **CALLOUT**: Callout 4: BackgroundColor and FontBold Properties Description: A blue numbered '4' pointing to the 'BackgroundColor' property (set to 'None') and the 'FontBold' checkbox (unchecked) under the 'Properties' panel for 'description_label'. These properties control the background and font style of the text label. Key Values: BackgroundColor: None, FontBold: unchecked Context: Shows how to customize the visual appearance of a text label, including its background and text weight. **CALLOUT**: Callout 5: TextColor and Visible Properties Description: A blue numbered '5' pointing to the 'TextColor' property (set to 'White') and the 'Visible' checkbox (checked) under the 'Properties' panel for 'description_label'. These properties control the color of the text and whether the component is displayed on the screen. Key Values: TextColor: White, Visible: checked Context: Demonstrates further customization options for text color and the ability to control the visibility of a component during runtime.