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

إضافة زر إلى الشاشة Adding a Button to the Screen ستنشئ الآن زرًا يسمى Visit KSA (زيارة المملكة العربية السعودية)، وعند الضغط على هذا الزر سيفتح التطبيق شاشة جديدة ويعرض الوجهات التي يمكن زيارتها في المملكة العربية السعودية. --- SECTION: لإضافة المكون Button (زر): --- لإضافة المكون Button (زر): اسحب المكون Button (زر) وأفلته من لوحة User Interface (واجهة المستخدم) إلى الشاشة. 1 اضغط على Rename (إعادة تسمية). 2 اكتب Visit_KSA (زيارة المملكة العربية السعودية)، 3 ثم اضغط على OK (موافق). 4 مرر الشريط الجانبي لأسفل في قسم Proprties (الخصائص)، ثم اضغط على Text (النص) واكتب Visit Saudi Arabia (زيارة المملكة العربية السعودية). 5 سيتغير الاسم في قسم Components (المكونات) وفي صفحة Blocks (اللبنات البرمجية). شكل 3.6: إضافة المكون Button (زر). وزارة التعليم Ministry of Education 121 2025 - 1447 --- VISUAL CONTEXT --- **DIAGRAM**: MIT App Inventor Interface - Adding and Renaming a Button Description: A multi-step diagram illustrating how to add and rename a button in the MIT App Inventor environment. It shows the 'Palette' on the left with 'User Interface' category expanded and 'Button' highlighted. The 'Viewer' (phone screen) is in the center, initially showing 'Text for Button'. A 'Rename Component' dialog box appears, with 'New name' field showing 'Visit_KSA'. Numbered annotations (1-4) guide the user through dragging the button, clicking rename, typing the new name, and confirming. Key Values: Palette: User Interface, Button, Viewer: Screen, Text for Button, Rename Component dialog: New name (Visit_KSA), OK, Cancel, Annotation 1: Drag Button from User Interface to Screen, Annotation 2: Click Rename, Annotation 3: Type Visit_KSA in New name field, Annotation 4: Click OK Context: Illustrates the initial steps of adding and configuring a UI element (button) in a mobile application development platform. **DIAGRAM**: MIT App Inventor Interface - Button Properties and Display Description: A diagram showing the MIT App Inventor screen with the newly added and renamed button 'Visit Saudi Arabia'. The 'Properties' panel on the right is displayed, listing various properties such as BackgroundColor, Enabled, FontBold, FontItalic, FontSize, FontTypeface, Height, Width, Image, Shape, ShowFeedback, Text, TextAlignment, and TextColor. Annotation 5 points to the 'Text' property field, which shows 'Visit Saudi Arabia'. A dashed line connects the button on the screen to its 'Text' property in the panel, and a callout box explains that the name will change on the screen. Key Values: Screen: Visit Saudi Arabia button, Properties panel: BackgroundColor, Enabled, FontBold, FontItalic, FontSize, FontTypeface, Height, Width, Image, Shape, ShowFeedback, Text (Visit Saudi Arabia), TextAlignment, TextColor, Annotation 5: Points to the Text property field, Callout box: سيتغير الاسم في الشاشة (The name will change on the screen) Context: Demonstrates how to modify the visible text of a button using the Properties panel after it has been added and renamed, and how this change is reflected on the application screen.