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

when zoomin_button .Click do set discover_label . FontSize to set title_label . FontSize to set description_label . FontSize to discover_label . FontSize + 1 title_label . FontSize + 1 description_label . FontSize + 1 شكل 4.7: برمجة زر التكبير إضافة زر التصغير للتطبيق Adding a Zoom Out Button to the Application ستضيف الآن زرًا لتصغير حجم الخط لجميع مكونات النص في كل مرة يتم الضغط عليه. لإضافة زر التصغير: > من مجموعة (واجهة المستخدم) ، أضف مكون Button (زر) إلى Screen1 (شاشة 1) ، 1 وأعد تسميته إلى Zoomout_button (زر_التصغير). 2 > من المكون Zoomout_button (زر_التصغير) ، اضبط خاصية BackgroundColor (لون الخلفية) إلى None (بدون) ، 3 ثم امسح خاصية Text (النص) ، 4 واضبط خاصية Image (صورة) إلى أيقونة علامة ناقص. 5 شكل 4.8: إضافة زر التصغير وزارة التعليم Ministry of Education 2025 - 1447 208 --- VISUAL CONTEXT --- **DIAGRAM**: شكل 4.7: برمجة زر التكبير Description: A visual representation of MIT App Inventor code blocks. It shows an event handler `when zoomin_button .Click do` which contains three `set` blocks. Each `set` block targets a label (`discover_label`, `title_label`, `description_label`) and sets its `FontSize` property to its current `FontSize` plus `1`. A blue circle with the number `5` is positioned next to the last `+ 1` block, indicating a step in a sequence. Key Values: zoomin_button, discover_label, title_label, description_label, FontSize, + 1, 5 Context: This diagram illustrates the event handling logic for a 'zoom in' button, specifically how to increase the font size of multiple text labels when the button is clicked. **SCREENSHOT**: شكل 4.8: إضافة زر التصغير Description: A screenshot of the MIT App Inventor Designer interface, showing three main panels: 1. **Palette (left)**: A list of user interface components. The 'Button' component is highlighted with a blue circle containing the number '1'. Other visible components include CheckBox, DatePicker, Image, Label, ListView, Notifier, PasswordTextBox, Slider, Spinner, Switch, TextBox, TimePicker, WebViewer. Below these are categories like Layout, Media, Drawing and Animation. 2. **Viewer (middle)**: An emulator displaying a mobile application. The app shows 'Discover Saudi Arabia' at the top, followed by 'Al Masmak' and an image of a historical fort. Below the image, there's 'Text for Label1'. At the bottom of the app screen, there are three circular buttons: a green plus sign, a red minus sign, and a green map icon. 3. **Components & Properties (right)**: This panel is divided into two sections: * **Components list**: Shows the hierarchy of components in the current app: AlMasmak, discover_label, VerticalArrangement1, title_label, image, description_label, HorizontalArrangement, zoomin_button, zoomout_button, map_button, Map1. The 'zoomout_button' is highlighted with a blue circle containing the number '2'. * **Properties panel**: Displays the properties for the selected 'zoomout_button'. Key properties shown are: * `BackgroundColor`: None (highlighted with blue circle '3') * `Enabled`: (checked checkbox) * `FontBold`: (unchecked checkbox) * `FontItalic`: (unchecked checkbox) * `FontSize`: 14.0 * `FontTypeface`: default * `Height`: Automatic * `Width`: Automatic * `Image`: zoom_out_icon.png (highlighted with blue circle '5') * `ShowFeedback`: (checked checkbox) * `Text`: (empty text field, highlighted with blue circle '4') * `TextAlignment`: center : 1 Key Values: Button (component), zoomout_button, BackgroundColor: None, Image: zoom_out_icon.png, Text: (empty), 1, 2, 3, 4, 5 Context: This screenshot visually guides the user through the process of adding a new button ('zoomout_button') to an MIT App Inventor project and configuring its properties, such as setting its background to none, clearing its text, and assigning a specific image (zoom_out_icon.png) to it. The numbers 1-5 correspond to steps in the accompanying text instructions.