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

إنشاء الشاشة الثانية للتطبيق Creating the Second Screen of the App ستعرض الشاشة التالية في التطبيق للمستخدم مدينتي الرياض وجدة وأبرز معالمهما، وعندما يضغط المستخدم على إحدى المدينتين ستظهر قائمة بالمعالم المميزة المتاحة في التطبيق. ستضيف الآن بعض الأزرار المفيدة على الشاشة الرئيسة وتجري بعض التغييرات على مظهرها. --- SECTION: لإضافة شاشة جديدة: --- لإضافة شاشة جديدة: < اضغط على زر Add screen (إضافة شاشة)، 1 ثم أنشئ شاشة جديدة باسم Cities (المدن). 2 < في قسم Properties (الخصائص) لشاشة Cities (المدن)، ألغ تحديد الخاصية TitleVisible (العنوان مرئي)، 3 و في خاصية BackgroundImage (صورة الخلفية) ضع صورة لعلم المملكة العربية السعودية. 4 --- SECTION: شكل 3.19: إضافة شاشة جديدة إلى التطبيق --- شكل 3.19: إضافة شاشة جديدة إلى التطبيق وزارة التعليم 137 2025 - 1447 --- VISUAL CONTEXT --- **FIGURE**: App Development Interface with New Screen Dialog and Properties Panel Description: A composite image showing steps to create a new screen in an app development environment. It includes a main workspace, a dialog box for creating a new screen, a properties panel, and a phone emulator displaying the result. Data: The image illustrates a sequence of actions within an app development platform. Numbered circles indicate specific interaction points: 1 points to the 'Add Screen' button, 2 points to the 'New Screen' dialog where 'Cities' is entered as the screen name, 3 points to the 'TitleVisible' checkbox in the properties panel, and 4 points to the 'BackgroundImage' property field where 'welcome-screen.png' is specified. Context: This visual element demonstrates the practical steps for adding a new screen to a mobile application, setting its name, and configuring its properties like title visibility and background image, as described in the accompanying text instructions. **SCREENSHOT**: Main App Development Workspace Description: A screenshot of an app development environment's main workspace. It shows a top menu bar, screen management buttons, a 'Viewer' area with a phone emulator, and 'Components' and 'Media' panels on the right. Data: Top menu bar includes 'Projects', 'Build', 'Settings', 'Help', 'My Projects', 'View Trash', 'Guide', 'Report an Issue', 'En'. Below it are buttons 'Screen1', 'Add Screen...', 'Remove Screen', 'Publish to Gallery'. The 'Viewer' section shows 'Display hidden components in Viewer' and 'Phone size (360,320)'. The 'Components' panel lists 'Screen1', 'VerticalArrangement1', 'discover_button_en', 'discover_button_ar'. The 'Media' panel shows 'welcome-screen.png' and buttons 'Rename', 'Delete', 'Upload File...'. Key Values: Add Screen..., Screen name: Cities, TitleVisible: unchecked, BackgroundImage: welcome-screen.png Context: This screenshot provides the visual context for the app development instructions, showing the interface where users perform actions like adding screens and managing components. **DIALOG**: New Screen Dialog Description: A dialog box titled 'New Screen' prompting the user to enter a screen name. The name 'Cities' is pre-filled in the input field. Data: The dialog contains a 'Screen name' label, an input field with 'Cities' as the value, and 'Cancel' and 'OK' buttons. Key Values: New Screen, Screen name: Cities, Cancel, OK Context: This dialog is a key step in the instruction 'ثم أنشئ شاشة جديدة باسم Cities (المدن)', showing how a new screen is named. **SCREENSHOT**: Properties Panel Description: A screenshot of the properties panel, typically found on the left side of an app development environment, showing various configurable attributes for a selected screen or component. Data: The panel lists properties such as 'BackgroundColor', 'Default' (checkbox), 'BackgroundImage' (with 'welcome-screen.png' as value), 'BigDefaultText' (checkbox), 'CloseScreenAnimation' (dropdown 'Default'), 'HighContrast' (checkbox), 'OpenScreenAnimation' (dropdown 'Default'), 'ScreenOrientation' (dropdown 'Unspecified'), 'Scrollable' (checkbox), 'ShowStatusBar' (checked checkbox), 'Title' (with 'Cities' as value), and 'TitleVisible' (unchecked checkbox). Key Values: BackgroundColor, BackgroundImage: welcome-screen.png, Title: Cities, TitleVisible: unchecked Context: This panel is crucial for the instructions 'ألغ تحديد الخاصية TitleVisible' and 'ضع صورة لعلم المملكة العربية السعودية' (implied by 'welcome-screen.png' which is the Saudi flag in the emulator). **SCREENSHOT**: Phone Emulator Displaying Saudi Arabian Flag Description: A screenshot of a phone emulator showing a screen with the Saudi Arabian flag as its background image. The top status bar shows '9:48'. Data: The emulator displays the green and white Saudi Arabian flag, which is the visual outcome of setting the 'BackgroundImage' property to 'welcome-screen.png'. The time '9:48' is visible in the status bar. Key Values: Saudi Arabian flag, Time: 9:48 Context: This visual represents the final appearance of the newly created 'Cities' screen after applying the specified background image, as per the instructions.