إضافة قائمة منتقي القائمة (ListPicker) - كتاب التقنية الرقمية - الصف 12 - الفصل 1 - المملكة العربية السعودية

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

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

الدرس: إضافة قائمة منتقي القائمة (ListPicker)

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

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

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

📋 المحتوى المنظم

📖 محتوى تعليمي مفصّل

إضافة قائمة منتقي القائمة (ListPicker)

نوع: محتوى تعليمي

إضافة قائمة منتقي القائمة (ListPicker)

نوع: محتوى تعليمي

بدل شاشة العرض Screen1 (الشاشة الأولى) إلى وضع Designer (المصمم).

نوع: محتوى تعليمي

من لوحة User Interface (واجهة المستخدم)، اسحب وأفلت زر القائمة ListPicker (منتقي القائمة) إلى شاشة العرض (مساحة العمل).

نوع: محتوى تعليمي

اضغط على Rename (إعادة تسمية).

نوع: محتوى تعليمي

اكتب اسمًا لأداة منتقي القائمة وليكن Foods (الأطعمة).

نوع: محتوى تعليمي

اضغط على OK (موافق).

نوع: محتوى تعليمي

من قسم Properties (الخصائص)، في حقل Text (النص)، اكتب "أطعمة صحية".

نوع: محتوى تعليمي

وحدد FontBold (الخط الغامق) لجعل النص غامقًا.

نوع: NON_EDUCATIONAL

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

نوع: METADATA

140

🔍 عناصر مرئية

Properties Panel for ListPicker1

A screenshot of a software interface's 'Properties' panel. It shows 'ListPicker1' selected under 'Components'. Key properties visible include 'Enabled' (checked), 'FontBold' (unchecked), 'FontItalic' (unchecked), 'FontSize' (14.0), 'FontTypeface' (default). This visual corresponds to the initial state before renaming and setting text.

User Interface Palette with ListPicker Highlighted

A screenshot of a software interface's 'Palette' panel, specifically the 'User Interface' section. 'ListPicker' is highlighted, indicating it's selected or about to be dragged. Other components like Button, CheckBox, DatePicker, Image, Label, ListView, Notifier are visible.

Components Panel with Rename Button Highlighted

A screenshot of the 'Components' panel. 'Screen1' and 'Tips' are visible. 'Foods' is selected. Below the components list, 'Rename' and 'Delete' buttons are visible, with 'Rename' highlighted.

Rename Component Dialog with 'Foods' Entered

A dialog box titled 'Rename Component'. It has two fields: 'Old name:' showing 'ListPicker1' and 'New name:' with 'Foods' entered.

Rename Component Dialog with OK Button Highlighted

A dialog box titled 'Rename Component'. It shows 'Old name: ListPicker1' and 'New name: Foods'. Below these fields, 'Cancel' and 'OK' buttons are present, with 'OK' highlighted.

Properties Panel with Text Property Set to 'أطعمة صحية'

A screenshot of the 'Properties' panel. It shows the 'Text' property field with the Arabic text 'أطعمة صحية' (Healthy Food) entered. Other properties like 'ShowFilterBar' (checked) are also visible.

Properties Panel with FontBold Property Checked

A screenshot of the 'Properties' panel. It shows the 'FontBold' property with its checkbox checked. Other properties like 'Enabled' (checked), 'FontItalic' (unchecked), 'FontSize' (14.0) are also visible.

Phone Screen Displaying 'أطعمة صحية'

A screenshot of a smartphone screen displaying an application. The app shows an image of garlic and tomatoes, with a white card in the center that has the text 'أطعمة صحية' (Healthy Food) on it. The phone status bar shows 9:48 and battery/signal icons. This visual represents the final output of the instructions.

Ministry of Education Logo

The logo of the Ministry of Education, Kingdom of Saudi Arabia, with text 'وزارة التعليم' and 'Ministry of Education 2025 - 1447'.

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

--- SECTION: إضافة قائمة منتقي القائمة (ListPicker) --- إضافة قائمة منتقي القائمة (ListPicker) بدل شاشة العرض Screen1 (الشاشة الأولى) إلى وضع Designer (المصمم). من لوحة User Interface (واجهة المستخدم)، اسحب وأفلت زر القائمة ListPicker (منتقي القائمة) إلى شاشة العرض (مساحة العمل). اضغط على Rename (إعادة تسمية). اكتب اسمًا لأداة منتقي القائمة وليكن Foods (الأطعمة). اضغط على OK (موافق). من قسم Properties (الخصائص)، في حقل Text (النص)، اكتب "أطعمة صحية". وحدد FontBold (الخط الغامق) لجعل النص غامقًا. وزارة التعليم Ministry of Education 2025 - 1447 140 --- VISUAL CONTEXT --- **DIAGRAM**: Properties Panel for ListPicker1 Description: A screenshot of a software interface's 'Properties' panel. It shows 'ListPicker1' selected under 'Components'. Key properties visible include 'Enabled' (checked), 'FontBold' (unchecked), 'FontItalic' (unchecked), 'FontSize' (14.0), 'FontTypeface' (default). This visual corresponds to the initial state before renaming and setting text. Key Values: Component: ListPicker1, Enabled: true, FontBold: false, FontItalic: false, FontSize: 14.0, FontTypeface: default Context: Shows the properties panel in the Designer view, relevant for step 1 of the instructions. **DIAGRAM**: User Interface Palette with ListPicker Highlighted Description: A screenshot of a software interface's 'Palette' panel, specifically the 'User Interface' section. 'ListPicker' is highlighted, indicating it's selected or about to be dragged. Other components like Button, CheckBox, DatePicker, Image, Label, ListView, Notifier are visible. Context: Illustrates the location of the ListPicker component in the UI palette, relevant for step 2 of the instructions. **DIAGRAM**: Components Panel with Rename Button Highlighted Description: A screenshot of the 'Components' panel. 'Screen1' and 'Tips' are visible. 'Foods' is selected. Below the components list, 'Rename' and 'Delete' buttons are visible, with 'Rename' highlighted. Context: Shows the 'Rename' button in the components panel, relevant for step 3 of the instructions. **DIAGRAM**: Rename Component Dialog with 'Foods' Entered Description: A dialog box titled 'Rename Component'. It has two fields: 'Old name:' showing 'ListPicker1' and 'New name:' with 'Foods' entered. Key Values: Old name: ListPicker1, New name: Foods Context: Displays the rename dialog with the new name 'Foods' being entered, relevant for step 4 of the instructions. **DIAGRAM**: Rename Component Dialog with OK Button Highlighted Description: A dialog box titled 'Rename Component'. It shows 'Old name: ListPicker1' and 'New name: Foods'. Below these fields, 'Cancel' and 'OK' buttons are present, with 'OK' highlighted. Key Values: Old name: ListPicker1, New name: Foods, Buttons: Cancel, OK Context: Shows the 'OK' button in the rename dialog, relevant for step 5 of the instructions. **DIAGRAM**: Properties Panel with Text Property Set to 'أطعمة صحية' Description: A screenshot of the 'Properties' panel. It shows the 'Text' property field with the Arabic text 'أطعمة صحية' (Healthy Food) entered. Other properties like 'ShowFilterBar' (checked) are also visible. Key Values: Property: Text, Value: أطعمة صحية Context: Illustrates setting the 'Text' property for the ListPicker, relevant for step 6 of the instructions. **DIAGRAM**: Properties Panel with FontBold Property Checked Description: A screenshot of the 'Properties' panel. It shows the 'FontBold' property with its checkbox checked. Other properties like 'Enabled' (checked), 'FontItalic' (unchecked), 'FontSize' (14.0) are also visible. Key Values: Property: FontBold, Value: true Context: Shows checking the 'FontBold' property, relevant for step 7 of the instructions. **FIGURE**: Phone Screen Displaying 'أطعمة صحية' Description: A screenshot of a smartphone screen displaying an application. The app shows an image of garlic and tomatoes, with a white card in the center that has the text 'أطعمة صحية' (Healthy Food) on it. The phone status bar shows 9:48 and battery/signal icons. This visual represents the final output of the instructions. Context: Provides a visual representation of the application's appearance after following the instructions. **FIGURE**: Ministry of Education Logo Description: The logo of the Ministry of Education, Kingdom of Saudi Arabia, with text 'وزارة التعليم' and 'Ministry of Education 2025 - 1447'. Context: Administrative information, not directly related to the lesson content.

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

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

سؤال 1: بدل شاشة العرض Screen1 (الشاشة الأولى) إلى وضع Designer (المصمم).

الإجابة: تحريري

خطوات الحل:

  1. **الشرح:** لنفهم هذا السؤال. السؤال يتعلق ببرمجة تطبيقات باستخدام بيئة تطوير مثل App Inventor. في مثل هذه البيئات، لدينا شاشات (Screens) ووضعين رئيسيين للعمل: وضع "المصمم" (Designer) ووضع "المبرمج" أو "الكتل" (Blocks). وضع "المصمم" هو المكان الذي نضع فيه العناصر المرئية للتطبيق، مثل الأزرار والنصوص، ونحدد خصائصها. بينما وضع "الكتل" هو المكان الذي نكتب فيه منطق البرنامج باستخدام كتل برمجية. السؤال يطلب منا تغيير شاشة معينة اسمها "Screen1" من أي وضع تكون فيه إلى وضع "المصمم". هذا يعني أننا نريد فتح نافذة التصميم المرئي لتلك الشاشة المحددة. لذلك، الإجراء المطلوب هو: **تحريري**، أي النقر على زر أو خيار التحرير (Edit) الخاص بشاشة "Screen1"، والذي عادةً ما يكون رمز قلم أو كلمة Edit، والذي يؤدي إلى فتحها في وضع المصمم.

سؤال 7: وحدد FontBold (الخط الغامق) لجعل النص غامقًا.

الإجابة: تحريري

خطوات الحل:

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