MIT App Inventor Interface Demonstration - كتاب هندسة البرمجيات - الصف 12 - الفصل 1 - المملكة العربية السعودية

MIT APP INVENTOR Projects Connect Build AlMasmak Add Screen --- SECTION: Visit_SA_App Interface (Top) --- Visit_SA_App Blocks Built-in Control Logic Math Text Lists Dictionaries Colors Variables Procedures AlMasmak discover_label VerticalArrangement1 title_label image description_label HorizontalArrangem Viewer 0 decimal 0 = + - x / Rename Delete --- SECTION: Zoom In Button Click Event (Initial) --- when zoomin_button .Click do set discover_label .FontSize to (addition block with empty sockets) 3 --- SECTION: Visit_SA_App Interface (Bottom) --- Visit_SA_App Blocks Built-in Control Logic Math Text Lists Dictionaries Colors Variables Procedures AlMasmak discover_label VerticalArrangement1 title_label image description_label HorizontalArrangem Viewer 0 decimal 0 = + - x / Rename Delete --- SECTION: Visit_SA_App_Accessible_Screenshots Property Setters --- Visit_SA_App_Accessible_Screenshots set discover_label .BackgroundColor to set discover_label .FontSize to set discover_label .FontSize to set discover_label .HTMLContent to set discover_label .HasMargins to set discover_label .Height to --- SECTION: Zoom In Button Click Event (Final) --- when zoomin_button .Click do set discover_label .FontSize to discover_label .FontSize + 1 4 وزارة التعليم 207 2025 - 1447 --- VISUAL CONTEXT --- **FIGURE**: MIT App Inventor Interface (Top) Description: Screenshot of the MIT App Inventor development environment showing the 'Visit_SA_App' project. The top bar displays 'Projects', 'Connect', 'Build' options. The left panel lists 'Blocks' categories including 'Built-in' (Control, Logic, Math, Text, Lists, Dictionaries, Colors, Variables, Procedures) and 'AlMasmak' components (discover_label, VerticalArrangement1, title_label, image, description_label, HorizontalArrangem). The right panel 'Viewer' displays various mathematical blocks: '0', 'decimal 0', '=', '+', '-', 'x', '/'. A blue circle with the number '3' highlights the addition block in the Viewer panel. The bottom of the left panel shows 'Rename' and 'Delete' options. Key Values: MIT APP INVENTOR, Projects, Connect, Build, AlMasmak, Add Screen, Visit_SA_App, Blocks, Built-in, Control, Logic, Math, Text, Lists, Dictionaries, Colors, Variables, Procedures, discover_label, VerticalArrangement1, title_label, image, description_label, HorizontalArrangem, Viewer, 0, decimal 0, =, +, -, x, /, Rename, Delete, 3 Context: Illustrates the main user interface of MIT App Inventor for block-based programming, highlighting a specific mathematical block. **DIAGRAM**: Zoom In Button Click Event (Initial) Description: A block-based code snippet showing the 'when zoomin_button .Click' event. The 'do' section contains a 'set discover_label .FontSize to' block, which is connected to an empty addition block ('+'). This snippet is visually linked to the blue circle '3' from the main interface, indicating the origin of the addition block. Key Values: when zoomin_button .Click, do set discover_label .FontSize to, + Context: Demonstrates how to start building an event handler for a button click to modify a label's font size using an addition operation. **FIGURE**: MIT App Inventor Interface (Bottom) Description: Another screenshot of the MIT App Inventor development environment, identical in content to the top one, showing the 'Visit_SA_App' project with its blocks and viewer panels. This serves as a repeated visual reference. Key Values: MIT APP INVENTOR, Projects, Connect, Build, AlMasmak, Add Screen, Visit_SA_App, Blocks, Built-in, Control, Logic, Math, Text, Lists, Dictionaries, Colors, Variables, Procedures, discover_label, VerticalArrangement1, title_label, image, description_label, HorizontalArrangem, Viewer, 0, decimal 0, =, +, -, x, /, Rename, Delete Context: Provides a consistent view of the App Inventor interface for context. **DIAGRAM**: Multiple Discover Label Property Setters Description: A block-based code snippet from a project named 'Visit_SA_App_Accessible_Screenshots'. It displays a sequence of 'set discover_label' blocks, each modifying a different property: '.BackgroundColor', '.FontSize' (appears twice), '.HTMLContent', '.HasMargins', and '.Height'. Key Values: Visit_SA_App_Accessible_Screenshots, set discover_label .BackgroundColor to, set discover_label .FontSize to, set discover_label .HTMLContent to, set discover_label .HasMargins to, set discover_label .Height to Context: Shows various properties of a 'discover_label' component that can be programmatically set in App Inventor, demonstrating different UI customization options. **DIAGRAM**: Zoom In Button Click Event (Final) Description: A block-based code snippet showing the 'when zoomin_button .Click' event. The 'do' section contains a 'set discover_label .FontSize to' block, which is connected to an addition block. This addition block takes the current 'discover_label .FontSize' and adds '1' to it. This snippet is visually linked to the blue circle '4', indicating a completed operation. Key Values: when zoomin_button .Click, do set discover_label .FontSize to, discover_label .FontSize, +, 1, 4 Context: Illustrates how to dynamically increment the font size of a label when a 'zoomin_button' is clicked, demonstrating a common interactive UI behavior.