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

📚 معلومات الصفحة

الكتاب: كتاب هندسة البرمجيات - الصف 12 - الفصل 1 | المادة: هندسة البرمجيات | المرحلة: الصف 12 | الفصل الدراسي: 1

الدولة: المملكة العربية السعودية | المنهج: المنهج السعودي - وزارة التعليم

نوع المحتوى: درس تعليمي

مستوى الصعوبة: مبتدئ

📝 ملخص الصفحة

تشرح هذه الصفحة خطوات إضافة وتكوين مكونات Image (صورة) و Label (تسمية) في بيئة MIT App Inventor لتطوير تطبيقات الجوال. يبدأ المحتوى بمناقشة حول تسمية المكونات، حيث يُوضح أن اسم المكون Image يختلف عن تسميته image، مما يعكس ممارسات البرمجة الشائعة.

في القسم الأول، يتم تفصيل إضافة مكون Image: من مجموعة User Interface، يُضاف المكون إلى Screen1 ويُعاد تسميته إلى image. ثم يتم ضبط خصائصه، حيث يُحدد Height و Width إلى Fill parent لملء المساحة المتاحة، ويُضبط Picture لاستخدام صورة قصر المسمك. يُذكر أن حجم الصورة سيتغير تلقائياً عند إضافة مكونات أخرى.

في القسم الثاني، يتم شرح إضافة مكون Label: يُضاف من مجموعة User Interface إلى الشاشة ويُعاد تسميته إلى description_label. يتم تكوين خصائصه، بما في ذلك ضبط Height إلى Fill parent، وBackgroundColor إلى None، وTextColor إلى White، مع الإشارة إلى أن النص الكامل سيُضاف في درس لاحق. يُختتم المحتوى بمعلومات وزارة التعليم وتاريخ النشر، ويُرفق بوصف مرئي لشكل يوضح واجهة MIT App Inventor وعملية الإضافة خطوة بخطوة.

📄 النص الكامل للصفحة

لا يمكن أن يتشابه اسم المكون مع تسميته، لكن تسمية image هنا تختلف عن المكون .Image

--- SECTION: لإضافة المكون Image (صورة): ---
لإضافة المكون Image (صورة):

< من مجموعة User Interface (واجهة المستخدم)، أضف المكون Image (صورة) إلى Screen1 (شاشة 1)، 1 وأعد تسميته إلى image (صورة). 2
< في المكون image (صورة)، اضبط خاصية Height (الارتفاع) إلى Fill parent (تعبئة المساحة)، 3 وخاصية Width (العرض) إلى Fill parent (تعبئة المساحة)، 4 واضبط خاصية Picture (الصورة) إلى صورة قصر المسمك. 5

ستضيف الآن Label (تسمية) تحتوي على وصف لقصر المسمك، ولكن في هذه المرحلة ستضيف اختصاراً للنص الذي ستتم إضافته في الدرس التالي.

سيتم تغيير حجم الصورة بشكل صحيح عند إضافة المزيد من المكونات.

--- SECTION: لإضافة مكون الوصف النصي: ---
لإضافة مكون الوصف النصي:

< من مجموعة User Interface (واجهة المستخدم)، أضف مكون Label (التسمية) إلى الشاشة، 1 وأعد تسميته إلى description_label (تسمية_الوصف). 2
< في مكون description_label (تسمية_الوصف)، اضبط خاصية Height (الارتفاع) إلى Fill parent (تعبئة المساحة)، 3 واضبط خاصية BackgroundColor (لون الخلفية) إلى None (بدون)، 4 وخاصية TextColor (لون النص) إلى White (أبيض). 5

وزارة التعليم
145
Ministry of Education
2025 - 1447

--- VISUAL CONTEXT ---
**FIGURE**: شكل 3.28: إضافة المكون Image (صورة)
Description: A screenshot of the MIT App Inventor interface showing the process of adding an Image component. The interface is divided into three main panels: Palette on the left, Viewer (phone emulator) in the center, and Components/Properties on the right. The Palette shows a list of User Interface components, with 'Image' highlighted by a blue circle labeled '1'. The Viewer displays a phone screen with 'Discover Saudi Arabia' and 'Al Masmak' text, and an image of Al Masmak castle. The Components panel lists the components in the current project, with 'image' highlighted by a blue circle labeled '2'. The Properties panel shows the properties for the selected 'image' component, including 'Height' set to 'Fill parent' (highlighted by '3'), 'Width' set to 'Fill parent' (highlighted by '4'), and 'Picture' set to 'al_masmak_castle_resized' (highlighted by '5'). Other visible components in the Palette include Button, CheckBox, DatePicker, Label, ListView, Notifier, PasswordTextBox, Slider, Spinner, Switch, TextBox, TimePicker, and WebViewer. The Media section in the Properties panel shows 'welcome-screen.png', 'riyadh_nav-img.png', and 'jeddah_nav-img.png'.
Context: This figure visually demonstrates the steps described in the text for adding and configuring an Image component in the MIT App Inventor environment, showing the user interface elements involved in the process of selecting the component, renaming it, and setting its size and image source.

✅ حلول أسئلة الكتاب الرسمية

عدد الأسئلة: 2

سؤال مربع-1: ملاحظة هامة حول تسمية المكونات

الإجابة: لا يمكن أن يتشابه اسم المكون مع تسميته، لكن تسمية image هنا تختلف عن المكون .Image

خطوات الحل:

**الشرح:** لنفهم هذا السؤال. الفكرة هنا هي التمييز بين مفهومين في البرمجة أو تطوير الواجهات: اسم المكون (Component Name) وتسميته أو وسمه (Tag). اسم المكون هو المعرف الداخلي الذي يستخدمه المبرمج في الكود، مثل تعريف مكون باسم `Image`. أما التسمية فهي الوسم الذي يُكتب في واجهة المستخدم أو في هيكل الصفحة، مثل كتابة `<image>`. السؤال يوضح قاعدة مهمة: لا يمكن أن يكون هذان الاسمان متطابقين تماماً لتجنب الالتباس في النظام. على سبيل المثال، يمكن أن يكون لدينا مكون اسمه `ImageGallery` ولكن الوسم المستخدم له هو `<img>`. لذلك، الإجابة تؤكد أن `image` كتسمية (وسم) تختلف عن المكون الذي قد يكون اسمه `.Image` (مع نقطة للإشارة إلى أنه فئة أو مكون). إذن الإجابة هي: **لا يمكن أن يتشابه اسم المكون مع تسميته، لكن تسمية image هنا تختلف عن المكون .Image**

سؤال مربع-2: ملاحظة هامة حول تغيير حجم الصورة

الإجابة: سيتم تغيير حجم الصورة بشكل صحيح عند إضافة المزيد من المكونات.

خطوات الحل:

**الشرح:** الفكرة في هذا السؤال تتعلق بكيفية تعامل أنظمة تصميم الواجهات أو أدوات التطوير مع عناصر مثل الصور عند إضافة مكونات جديدة إلى الصفحة. عندما نضيف مكونات إضافية إلى واجهة المستخدم (مثل أزرار أو نصوص أو جداول بجانب صورة)، قد يتغير تخطيط الصفحة. السؤال يطمئن المستخدم أو المطور بأن نظام التصميم سيتعامل مع هذا التغيير تلقائياً. سيقوم النظام بإعادة حساب الأبعاد والمساحات المطلوبة لجميع المكونات، بما في ذلك الصورة، لضمان أن الحجم النهائي للصورة سيكون مناسباً ومنسجماً مع العناصر الجديدة دون تشويه أو مشاكل في العرض. لذلك الإجابة هي: **سيتم تغيير حجم الصورة بشكل صحيح عند إضافة المزيد من المكونات.**

🎴 بطاقات تعليمية للمراجعة

عدد البطاقات: 4 بطاقة لهذه الصفحة

ما هي الخطوات المطلوبة لإضافة مكون Image (صورة) في MIT App Inventor؟

الإجابة: 1. من مجموعة User Interface (واجهة المستخدم)، أضف المكون Image (صورة) إلى Screen1 (شاشة 1). 2. أعد تسميته إلى image (صورة). 3. اضبط خاصية Height (الارتفاع) إلى Fill parent (تعبئة المساحة). 4. اضبط خاصية Width (العرض) إلى Fill parent (تعبئة المساحة). 5. اضبط خاصية Picture (الصورة) إلى الصورة المطلوبة (مثل صورة قصر المسمك).

الشرح: هذه الخطوات تمثل عملية إضافة وتكوين مكون صورة بشكل صحيح في بيئة تطوير التطبيقات، وهي خطوات متسلسلة ومنطقية.

تلميح: ركز على الخطوات الخمس المذكورة في النص، بدءاً من إضافة المكون من المجموعة الصحيحة.

التصنيف: صيغة/خطوات | المستوى: متوسط

ما هي الخطوات المطلوبة لإضافة مكون Label (تسمية) لوصف نصي في MIT App Inventor؟

الإجابة: 1. من مجموعة User Interface (واجهة المستخدم)، أضف مكون Label (التسمية) إلى الشاشة. 2. أعد تسميته إلى description_label (تسمية_الوصف). 3. اضبط خاصية Height (الارتفاع) إلى Fill parent (تعبئة المساحة). 4. اضبط خاصية BackgroundColor (لون الخلفية) إلى None (بدون). 5. اضبط خاصية TextColor (لون النص) إلى White (أبيض).

الشرح: إضافة مكون Label يتطلب تكوين خصائصه لتتناسب مع التصميم المرغوب، مثل لون الخلفية ولون النص.

تلميح: تذكر أن الخطوات تشبه إضافة مكون الصورة، ولكن مع خصائص مختلفة متعلقة بالمظهر.

التصنيف: صيغة/خطوات | المستوى: متوسط

ما هو الغرض من ضبط خاصيتي Height و Width لمكون Image إلى 'Fill parent'؟

الإجابة: الغرض هو جعل الصورة تملأ المساحة المتاحة لها في الشاشة أو الحاوية الأم بشكل كامل.

الشرح: هذه الخاصية تضمن أن الصورة ستتغير حجمها تلقائياً لتناسب المساحة المخصصة لها، مما يحسن من تجربة المستخدم واستجابة التصميم.

تلميح: فكر في معنى الكلمة الإنجليزية 'Fill parent' وكيفية ارتباطها بحجم المكون.

التصنيف: مفهوم جوهري | المستوى: سهل

ما الفرق بين اسم المكون وتسميته في MIT App Inventor كما ورد في النص؟

الإجابة: لا يمكن أن يتشابه اسم المكون مع تسميته، لكن تسمية image هنا تختلف عن المكون .Image. بمعنى أن 'Image' هو نوع المكون في المكتبة، بينما 'image' هو الاسم المخصص لهذا المكون في المشروع.

الشرح: هذا التمييز مهم في البرمجة المرئية لتجنب التضارب وفهم الفرق بين النوع (Class) والمثيل (Instance).

تلميح: انتبه إلى الحرف الأول في الكلمتين المذكورتين في الجملة الأولى من النص.

التصنيف: فرق بين مفهومين | المستوى: صعب