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

إضافة زر لتبديل النسق اللوني للتطبيق --- SECTION: Adding a Button to Change the Color Theme of the Application --- Adding a Button to Change the Color Theme of the Application ستضيف الآن زراً يغير نسق الشاشة بين نسق فاتح وآخر أخضر. --- SECTION: لإضافة زر نسق اللون: --- لإضافة زر نسق اللون: من مجموعة (واجهة المستخدم)، أضف مكون Button (زر) إلى Screen1 (شاشة 1)، وأعد تسميته إلى (زر_اللون). في مكون (زر_اللون)، اضبط خاصية BackgroundColor (لون الخلفية) إلى None (بدون)، ثم امسح خاصية Text (النص)، واضبط خاصية Image (صورة) إلى أيقونة نصف دائرة. شكل 4.13: إضافة زر نسق اللون وزارة التعليم Ministry of Education 2025 - 1447 214 --- VISUAL CONTEXT --- **DIAGRAM**: شكل 4.13: إضافة زر نسق اللون Description: A detailed screenshot of the MIT App Inventor Designer interface, demonstrating the process of adding and configuring a 'color_button' component. The interface is divided into several panels: the 'Palette' (left) showing UI components, the 'Viewer' (center) displaying a phone emulator with the 'Discover Saudi Arabia' app, and the 'Components' and 'Properties' panels (right) for managing and customizing elements. Visible text elements within the screenshot include: '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', 'Switch', 'TextBox', 'TimePicker', 'WebViewer', 'Layout', 'Media', 'Drawing and Animation', 'Maps', 'Charts', 'Sensors', 'Social', 'Storage', 'Connectivity', 'LEGO® MINDSTORMS®', 'Viewer', 'Display hidden components in Viewer', 'Phone size (506,320)', '9:48', 'Discover Saudi Arabia', 'Al Masmak', 'Text for Label1', 'Non-visible components', 'text_to_speech', 'Components', 'AlMasmak', 'discover_label', 'VerticalArrangement1', 'title_label', 'Image', 'description_label', 'HorizontalArrangement', 'zoomin_button', 'zoomout_button', 'text_to_speech_but', 'color_button', 'map_button', 'Map1', 'text_to_speech', 'Rename', 'Delete', 'Properties', 'color_button', 'BackgroundColor', 'None', 'Enabled', 'FontBold', 'FontItalic', 'FontSize', '14.0', 'FontTypeface', 'default', 'Height', 'Automatic', 'Width', 'Automatic', 'Image', 'color_icon.png', 'Shape', 'default', 'ShowFeedback', 'Text', 'TextAlignment', 'center : 1', 'TextColor', 'Default', 'Visible', 'Media (file list): Jeddah.png, Riyadh.png, al_masmak.jpg, al_masma...sized.jpg, color_icon.png, jeddah_nav-img.png, ksa_vision_logo.jpg, map_icon.png, riyadh_nav-img.png, speaker_icon.png, welcome-screen.png, zoom_in_icon.png'. Table Structure: Headers: N/A Rows: Data: The screenshot visually guides the user through selecting a 'Button' from the 'User Interface' palette, renaming it to 'color_button', and then modifying its properties. Key property changes include setting 'BackgroundColor' to 'None', clearing the 'Text' field, and assigning 'color_icon.png' as the 'Image'. Key Values: 1: The 'Button' component is selected within the 'User Interface' section of the 'Palette' panel., 2: The 'color_button' is highlighted in the 'Components' list, indicating it is the currently selected component for property modification., 3: The 'BackgroundColor' property in the 'Properties' panel is set to 'None', as indicated by the checked checkbox., 4: The 'Text' property field in the 'Properties' panel is shown as empty, indicating the button will not display text., 5: The 'Image' property in the 'Properties' panel is set to 'color_icon.png', which will be displayed on the button. Context: This visual element serves as a step-by-step guide for users learning to develop mobile applications with MIT App Inventor, specifically focusing on customizing UI elements like buttons to implement theme-changing functionality.