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

MIT APP INVENTOR Projects Connect Build Settings Help Visit_SA_App Blocks Viewer AlMasmak Add Screen Remove Screen Publish to Gallery Variables Procedures AlMasmak discover_label VerticalArrangement1 title_label image description_label HorizontalArrangement1 zoom_in_button zoom_out_button text_to_speech_button color_button map_button Map1 text_to_speech Any component Rename Delete --- SECTION: شكل 4.14 --- شكل 4.14: برمجة زر تنسيق اللون البرنامج كاملاً بميزات قابلية الوصول في الشاشة الثالثة (المصمك) The Complete Code for the Accessibility Features on the Third Screen (Al Masmak) وزارة التعليم Ministry of Education 217 2025 - 1447 --- VISUAL CONTEXT --- **DIAGRAM**: MIT App Inventor Blocks for Visit_SA_App Description: A screenshot of the MIT App Inventor 'Blocks' editor for a project named 'Visit_SA_App'. The left panel, labeled 'Blocks', lists components and categories: 'Variables', 'Procedures', 'AlMasmak', 'discover_label', 'VerticalArrangement1', 'title_label', 'image', 'description_label', 'HorizontalArrangement1', 'zoom_in_button', 'zoom_out_button', 'text_to_speech_button', 'color_button', 'map_button', 'Map1', 'text_to_speech', and 'Any component' with 'Rename' and 'Delete' options. The right panel, labeled 'Viewer', displays five event handler blocks for a 'color_button': 'when color_button .Click do', 'when color_button .GotFocus do', 'when color_button .LongClick do', 'when color_button .LostFocus do', and 'when color_button .TouchDown do'. A specific 'when color_button .LongClick do' block is visually highlighted with the number 6, and a dashed arrow points from it to a more detailed, expanded version of this block (labeled 7) positioned below the main screenshot. The detailed block (7) shows the 'when color_button .LongClick do' event block containing five nested 'set' blocks: 'set VerticalArrangement1 .BackgroundColor to [dark green color block]', 'set discover_label .BackgroundColor to [dark green color block]', 'set discover_label .TextColor to [white color block]', 'set title_label .TextColor to [white color block]', 'set description_label .TextColor to [white color block]'. Context: Illustrates the event-driven programming paradigm in MIT App Inventor, showing how different user interactions (click, focus, long click, lost focus, touch down) with a 'color_button' can trigger specific actions. The detailed block (7) demonstrates how to change UI element properties like background and text colors. **DIAGRAM**: Complete Code for Accessibility Features Description: A collection of MIT App Inventor blocks demonstrating the complete code for accessibility features. * **Zoom In Functionality:** A 'when zoom_in_button .Click do' block contains three 'set' blocks: 'set discover_label .FontSize to (discover_label .FontSize + 1)', 'set title_label .FontSize to (title_label .FontSize + 1)', and 'set description_label .FontSize to (description_label .FontSize + 1)'. * **Zoom Out Functionality:** A 'when zoom_out_button .Click do' block contains three 'set' blocks: 'set discover_label .FontSize to (discover_label .FontSize - 1)', 'set title_label .FontSize to (title_label .FontSize - 1)', and 'set description_label .FontSize to (description_label .FontSize - 1)'. * **Text-to-Speech Functionality:** A 'when text_to_speech_button .Click do' block contains a 'call text_to_speech .Speak message' block. The 'message' input is connected to a 'join' block that concatenates the text from 'discover_label .Text', 'title_label .Text', and 'description_label .Text'. * **Color Scheme 1 (Click):** A 'when color_button .Click do' block contains four 'set' blocks: 'set VerticalArrangement1 .BackgroundColor to [dark green color block]', 'set discover_label .BackgroundColor to [dark green color block]', 'set title_label .TextColor to [white color block]', and 'set description_label .TextColor to [white color block]'. * **Color Scheme 2 (Long Click):** A 'when color_button .LongClick do' block contains four 'set' blocks: 'set VerticalArrangement1 .BackgroundColor to [black color block]', 'set discover_label .BackgroundColor to [black color block]', 'set title_label .TextColor to [white color block]', and 'set description_label .TextColor to [white color block]'. Context: Demonstrates how to implement common accessibility features in an app, such as dynamically adjusting font sizes, converting on-screen text to speech, and switching between different color themes (dark green background with white text, or black background with white text) based on button clicks and long clicks.