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

رابط الدرس الرقمي www.ien.edu.sa الدرس الثاني إضافة المزيد من العناصر إلى التطبيق تصميم الصفحة الرئيسية Designing the Home Screen لقد أنشأت الشاشة الرئيسة لتطبيقك في الدرس السابق، وقد تضمنت زرًا يعرض رسالة عند الضغط عليه. ستضيف الآن بعض الأزرار المفيدة إلى الشاشة الرئيسة لتطبيقك، ثم ستجري بعض التغييرات على مظهرها. لإضافة مكون VerticalArrangement (الترتيب العمودي): < من قسم Components (المكونات) حدد زر Visit_KSA (زيارة_المملكة العربية السعودية)، 1 ثم اضغط على Delete (حذف). 2 < من مجموعة Layout (التخطيط)، أضف المكون VerticalArrangement (الترتيب العمودي) إلى الشاشة عن طريق سحبه وإفلاته 3 < من مكون VerticalArrangement1 (الترتيب العمودي)، عين خاصية AlignHorizontal (المحاذاة الأفقية) إلى 3:Center (المنتصف:3)، 4 وخاصية AlignVertical (المحاذاة العمودية) إلى 2:Center (المنتصف:2)، 5 وخاصية BackgroundColor (لون الخلفية) إلى None (بدون). 6 < اضبط خاصية Height (الارتفاع) إلى Fill parent (تعبئة المساحة)، 7 وخاصية Width (العرض) إلى Fill parent (تعبئة المساحة). 8 استخدم مكون VerticalArrangement (الترتيب العمودي) لعرض مجموعة من المكونات واحدة تحت الأخرى. شكل 3.17: إضافة مكون VerticalArrangement (الترتيب العمودي) وزارة التعليم 135 Ministry of Education 2025 - 1447 --- VISUAL CONTEXT --- **IMAGE**: رابط الدرس الرقمي Description: A QR code linking to the digital lesson at www.ien.edu.sa. Context: Provides a quick link to supplementary digital content for the lesson. **DIAGRAM**: شكل 3.17: إضافة مكون VerticalArrangement (الترتيب العمودي) Description: A screenshot of an app development interface, likely App Inventor, showing the process of adding and configuring a VerticalArrangement component. The interface is divided into several panels: a top menu bar, a left-hand palette of components, a central viewer area with a phone emulator, and a right-hand panel for components and their properties. Key Values: Top Menu Bar: Connect, Build, Settings, Help, My Projects, View Trash, Guide, Report an issue, qhaled.b@gmail.com, Designer, Blocks, Left Palette (User Interface): Button, CheckBox, DatePicker, Image, Label, ListPicker, ListView, Notifier, PasswordTextBox, Slider, Spinner, TextBox, TimePicker, WebViewer, Left Palette (Layout): HorizontalArrangement, HorizontalScrollArrangement, TableArrangement, VerticalArrangement, VerticalScrollArrangement, Left Palette (Media): Player, Sound, SoundRecorder, SpeechRecognizer, TextToSpeech, VideoPlayer, Left Palette (Other Categories): Drawing and Animation, Maps, Charts, Sensors, Social, Storage, Connectivity, LEGO® MINDSTORMS®, Experimental, Extension, Viewer Area: 'Display hidden components in Viewer' checkbox, 'Phone size (360,320)' dropdown, Phone emulator displaying a green screen with the Saudi Arabian flag and '9:48' time., Right Panel (Components): 'e Screen1', 'VerticalArrangement1' (highlighted with green icon). Below this: 'Rename', 'Delete'., Right Panel (Properties for VerticalArrangement1): 'AlignHorizontal: Center: 3' (labeled 4), 'AlignVertical: Center: 2' (labeled 5), 'BackgroundColor: None' (checkbox, labeled 6), 'Height: Fill parent' (labeled 7), 'Width: Fill parent' (labeled 8), 'Image: None', 'Visible' (checkbox)., Numbered Callouts:, 1: Points to 'VerticalArrangement1' in the Components panel., 2: Points to 'Delete' button below the Components panel., 3: Points to 'VerticalArrangement' in the Layout section of the left palette., 4: Points to 'AlignHorizontal: Center: 3' property., 5: Points to 'AlignVertical: Center: 2' property., 6: Points to 'BackgroundColor: None' property., 7: Points to 'Height: Fill parent' property., 8: Points to 'Width: Fill parent' property. Context: This diagram visually illustrates the step-by-step instructions provided in the text for designing an app's home screen. It shows how to locate the 'VerticalArrangement' component, drag it to the screen, and then configure its properties like alignment, background color, height, and width, which are crucial for layout design in app development.