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

وزارة التعليم Ministry of Education 2023 - 1447 216 --- VISUAL CONTEXT --- **SCREENSHOT**: واجهة MIT App Inventor Description: لقطتا شاشة لواجهة بيئة تطوير MIT App Inventor. تعرض اللقطة اليسرى محرر 'Blocks' مع قائمة بالكتل المدمجة والخاصة بالمكونات، بالإضافة إلى كتل تعيين الخصائص للمكون 'discover_label'. تعرض اللقطة اليمنى جزء 'Viewer' والمزيد من كتل تعيين الخصائص للمكون 'discover_label'. Key Values: App Name: Visit_SA_App, Menu items: Projects, Connect, Build, Settings, Help, Editor tabs: Designer, Blocks, Block categories: Built-in, Control, Logic, Math, Text, Lists, Dictionaries, Colors, Variables, Procedures, Any component, Component list (left pane): VerticalArrangement1, Image, title_label, description_label, HorizontalArrangement1, zoomin_button, zoomout_button, text_to_speech_b, color_button, map_button, Map1, Property blocks shown (left screenshot): discover_label . BackgroundColor, set discover_label . BackgroundColor to, discover_label . FontSize, set discover_label . FontSize to, discover_label . HTMLContent, discover_label . HasMargins, set discover_label . HasMargins to, Property blocks shown (right screenshot): discover_label . Height, set discover_label . Height to, discover_label . HeightPercent, set discover_label . HeightPercent to, discover_label . Text, set discover_label . Text to, discover_label . TextColor, set discover_label . TextColor to, discover_label . Visible Context: توضح الواجهة البرمجية المرئية والكتل المتاحة لمعالجة خصائص مكونات واجهة المستخدم. **DIAGRAM**: مقطع برمجي لتغيير الألوان (1) Description: مقطع برمجي لمعالج حدث في App Inventor. عند النقر على 'color_button'، يقوم بتعيين 'BackgroundColor' للمكون 'VerticalArrangement1' إلى اللون الأبيض، و'BackgroundColor' للمكون 'discover_label' إلى اللون الرمادي الفاتح، و'TextColor' للمكون 'discover_label' إلى اللون الأسود. الأرقام 3 و 4 تشير إلى كتل الألوان. Key Values: Event: when color_button . Click, Action 1: set VerticalArrangement1 . BackgroundColor to [white color block] (annotated with 3), Action 2: set discover_label . BackgroundColor to [light gray color block], Action 3: set discover_label . TextColor to [black color block] (annotated with 4) Context: يوضح معالجة الأحداث الأساسية وتعيين خصائص متعددة لواجهة المستخدم. **DIAGRAM**: مقطع برمجي لتغيير الألوان (2) Description: مقطع برمجي معدل لمعالج حدث في App Inventor. عند النقر على 'color_button'، يقوم بتعيين 'BackgroundColor' للمكون 'VerticalArrangement1' إلى اللون الأبيض، و'BackgroundColor' للمكون 'discover_label' إلى اللون الرمادي الفاتح، و'TextColor' للمكونات 'discover_label' و'title_label' و'description_label' إلى اللون الأسود. الرقم 5 يشير إلى كتلة اللون الأسود لـ 'title_label'. Key Values: Event: when color_button . Click, Action 1: set VerticalArrangement1 . BackgroundColor to [white color block], Action 2: set discover_label . BackgroundColor to [light gray color block], Action 3: set discover_label . TextColor to [black color block], Action 4: set title_label . TextColor to [black color block] (annotated with 5), Action 5: set description_label . TextColor to [black color block] Context: يوضح كيفية توسيع معالجة الأحداث للتأثير على مكونات نصية متعددة.