📋 المحتوى المنظم
📖 محتوى تعليمي مفصّل
نوع: محتوى تعليمي
Viewer
نوع: محتوى تعليمي
Components
نوع: محتوى تعليمي
Properties
نوع: محتوى تعليمي
Display hidden components in Viewer
Phone size (505,320)
نوع: محتوى تعليمي
الصفحة الرئيسية
9:48
نصائح صحية
نوع: محتوى تعليمي
Upload File ...
نوع: محتوى تعليمي
Choose File No file chosen
Cancel OK
نوع: محتوى تعليمي
Open
Pictures ImagesApp
Organize New folder
3D Objects
Documents
Downloads
Music
Pictures
Videos
Local Disk (C:)
Bread.jpg
Fish.jpg
Healthy_food.jpg
Home_Screen.jpg
Meat.jpg
Oats.jpg
Rice.jpg
File name: Home_Screen.jpg
Open Cancel
نوع: محتوى تعليمي
appinventor.mit.edu/#5064177228840960
Phone size (505,320)
نوع: محتوى تعليمي
حدد الزر لتعديل خصائصه.
نوع: محتوى تعليمي
Tips
BackgroundColor
None
Enabled
FontBold
FontItalic
FontSize
14.0
FontTypeface
default
Height
Automatic
Width
Automatic
Image
None
Rename Delete
Media
Home_Screen.jpg
Upload File...
Text
نصائح صحية
TextAlignement
center: 1
TextColor
Default
نوع: محتوى تعليمي
يمكنك تغيير لون خلفية من BackgroundColor (لون الخلفية).
نوع: محتوى تعليمي
يمكنك تحديد FontBold (الخط الغامق)، لجعل النص غامقًا.
نوع: محتوى تعليمي
يمكنك تغيير لون النص، من خيار TextColor (لون النص).
نوع: METADATA
وزارة التعليم
Ministry of Education
2025 - 1447
نوع: METADATA
129
🔍 عناصر مرئية
App Inventor Interface: Components and Properties
A screenshot of the App Inventor development environment, showing the 'Viewer', 'Components', and 'Properties' panels. The 'Components' panel lists 'Screen1' and 'Tips'. The 'Properties' panel shows various properties for 'Screen1', including 'AboutScreen', 'AccentColor', 'AlignHorizontal', 'AlignVertical', 'AppName' (Healthy_Food), 'BackgroundColor', 'BackgroundImage' (None), 'Upload File...', 'Cancel', 'OK', 'HighContrast', and 'Icon'.
- Callout 1 (blue circle with '1'): Points to 'Screen1' under the 'Components' panel.
- Callout 2 (blue circle with '2'): Points to the 'BackgroundImage' property field, which currently shows 'None'.
- Callout 3 (blue circle with '3'): Points to the 'Upload File...' button next to the 'BackgroundImage' property.
Mobile App with File Upload Dialog
A screenshot of a mobile phone screen displaying an application. The app's title bar shows 'الصفحة الرئيسية' (Home Page) and the time '9:48'. The main content area displays 'نصائح صحية' (Health Tips). Overlaid on the phone screen is a green 'Upload File...' dialog box. Inside this dialog, there is a 'Choose File' button and text 'No file chosen', along with 'Cancel' and 'OK' buttons.
- Callout 4 (blue circle with '4'): Points to the 'Choose File' button within the 'Upload File...' dialog.
File Selection Dialog
A standard file explorer dialog, typical of a Windows operating system, titled 'Open'. The navigation pane on the left shows 'Organize', 'New folder', '3D Objects', 'Documents', 'Downloads', 'Music', 'Pictures', 'Videos', and 'Local Disk (C:)'. The main content area shows various image files: 'Bread.jpg', 'Fish.jpg', 'Healthy_food.jpg', 'Home_Screen.jpg', 'Meat.jpg', 'Oats.jpg', 'Rice.jpg'. The 'File name:' field shows 'Home_Screen.jpg'. At the bottom, there are 'Open' and 'Cancel' buttons.
- Callout 5 (blue circle with '5'): Points to the 'Home_Screen.jpg' file selected in the file list.
- Callout 6 (blue circle with '6'): Points to the 'Open' button at the bottom right of the dialog.
Simplified Upload File Dialog
A simplified green dialog box titled 'Upload File...'. It contains a 'Choose File' button, a text field showing 'Home_Screen.jpg', and 'Cancel' and 'OK' buttons.
- Callout 7 (blue circle with '7'): Points to the 'OK' button in the dialog.
Mobile App Interface
A screenshot of a mobile phone screen displaying an application. The top bar shows 'appinventor.mit.edu/#5064177228840960' and 'Phone size (505,320)'. The app's title bar shows 'الصفحة الرئيسية' (Home Page) and the time '9:48'. The main content area displays 'نصائح صحية' (Health Tips). This is similar to visual element 1 but without the overlaid upload dialog.
App Inventor Properties Panel with Explanations
A screenshot of the 'Properties' panel in App Inventor, showing various configurable attributes. Properties include 'Tips', 'BackgroundColor' (None), 'Enabled' (checked), 'FontBold' (checked), 'FontItalic' (unchecked), 'FontSize' (14.0), 'FontTypeface' (default), 'Height' (Automatic), 'Width' (Automatic), 'Image' (None), 'Text' ('نصائح صحية'), 'TextAlignement' (center: 1), and 'TextColor' (Default). Below the properties, there are 'Rename', 'Delete', 'Media', 'Home_Screen.jpg', and 'Upload File...' options.
- A blue arrow points from 'BackgroundColor' to the Arabic text: 'يمكنك تغيير لون خلفية من BackgroundColor (لون الخلفية).'
- A blue arrow points from 'FontBold' to the Arabic text: 'يمكنك تحديد FontBold (الخط الغامق)، لجعل النص غامقًا.'
- A blue arrow points from 'TextColor' to the Arabic text: 'يمكنك تغيير لون النص، من خيار TextColor (لون النص).'
📄 النص الكامل للصفحة
Viewer
Components
Properties
Display hidden components in Viewer
Phone size (505,320)
الصفحة الرئيسية
9:48
نصائح صحية
Upload File ...
Choose File No file chosen
Cancel OK
Open
Pictures ImagesApp
Organize New folder
3D Objects
Documents
Downloads
Music
Pictures
Videos
Local Disk (C:)
Bread.jpg
Fish.jpg
Healthy_food.jpg
Home_Screen.jpg
Meat.jpg
Oats.jpg
Rice.jpg
File name: Home_Screen.jpg
Open Cancel
appinventor.mit.edu/#5064177228840960
Phone size (505,320)
حدد الزر لتعديل خصائصه.
Tips
BackgroundColor
None
Enabled
FontBold
FontItalic
FontSize
14.0
FontTypeface
default
Height
Automatic
Width
Automatic
Image
None
Rename Delete
Media
Home_Screen.jpg
Upload File...
Text
نصائح صحية
TextAlignement
center: 1
TextColor
Default
يمكنك تغيير لون خلفية من BackgroundColor (لون الخلفية).
يمكنك تحديد FontBold (الخط الغامق)، لجعل النص غامقًا.
يمكنك تغيير لون النص، من خيار TextColor (لون النص).
وزارة التعليم
Ministry of Education
2025 - 1447
129
--- VISUAL CONTEXT ---
**DIAGRAM**: App Inventor Interface: Components and Properties
Description: A screenshot of the App Inventor development environment, showing the 'Viewer', 'Components', and 'Properties' panels. The 'Components' panel lists 'Screen1' and 'Tips'. The 'Properties' panel shows various properties for 'Screen1', including 'AboutScreen', 'AccentColor', 'AlignHorizontal', 'AlignVertical', 'AppName' (Healthy_Food), 'BackgroundColor', 'BackgroundImage' (None), 'Upload File...', 'Cancel', 'OK', 'HighContrast', and 'Icon'.
- Callout 1 (blue circle with '1'): Points to 'Screen1' under the 'Components' panel.
- Callout 2 (blue circle with '2'): Points to the 'BackgroundImage' property field, which currently shows 'None'.
- Callout 3 (blue circle with '3'): Points to the 'Upload File...' button next to the 'BackgroundImage' property.
Context: Illustrates the structure and property settings within the App Inventor interface.
**FIGURE**: Mobile App with File Upload Dialog
Description: A screenshot of a mobile phone screen displaying an application. The app's title bar shows 'الصفحة الرئيسية' (Home Page) and the time '9:48'. The main content area displays 'نصائح صحية' (Health Tips). Overlaid on the phone screen is a green 'Upload File...' dialog box. Inside this dialog, there is a 'Choose File' button and text 'No file chosen', along with 'Cancel' and 'OK' buttons.
- Callout 4 (blue circle with '4'): Points to the 'Choose File' button within the 'Upload File...' dialog.
Context: Demonstrates a user interaction flow for uploading a file within a mobile application.
**DIAGRAM**: File Selection Dialog
Description: A standard file explorer dialog, typical of a Windows operating system, titled 'Open'. The navigation pane on the left shows 'Organize', 'New folder', '3D Objects', 'Documents', 'Downloads', 'Music', 'Pictures', 'Videos', and 'Local Disk (C:)'. The main content area shows various image files: 'Bread.jpg', 'Fish.jpg', 'Healthy_food.jpg', 'Home_Screen.jpg', 'Meat.jpg', 'Oats.jpg', 'Rice.jpg'. The 'File name:' field shows 'Home_Screen.jpg'. At the bottom, there are 'Open' and 'Cancel' buttons.
- Callout 5 (blue circle with '5'): Points to the 'Home_Screen.jpg' file selected in the file list.
- Callout 6 (blue circle with '6'): Points to the 'Open' button at the bottom right of the dialog.
Context: Illustrates the process of selecting a file from a local storage system.
**DIAGRAM**: Simplified Upload File Dialog
Description: A simplified green dialog box titled 'Upload File...'. It contains a 'Choose File' button, a text field showing 'Home_Screen.jpg', and 'Cancel' and 'OK' buttons.
- Callout 7 (blue circle with '7'): Points to the 'OK' button in the dialog.
Context: Shows the final confirmation step in a file upload process.
**FIGURE**: Mobile App Interface
Description: A screenshot of a mobile phone screen displaying an application. The top bar shows 'appinventor.mit.edu/#5064177228840960' and 'Phone size (505,320)'. The app's title bar shows 'الصفحة الرئيسية' (Home Page) and the time '9:48'. The main content area displays 'نصائح صحية' (Health Tips). This is similar to visual element 1 but without the overlaid upload dialog.
Context: Presents the visual appearance of a mobile application.
**DIAGRAM**: App Inventor Properties Panel with Explanations
Description: A screenshot of the 'Properties' panel in App Inventor, showing various configurable attributes. Properties include 'Tips', 'BackgroundColor' (None), 'Enabled' (checked), 'FontBold' (checked), 'FontItalic' (unchecked), 'FontSize' (14.0), 'FontTypeface' (default), 'Height' (Automatic), 'Width' (Automatic), 'Image' (None), 'Text' ('نصائح صحية'), 'TextAlignement' (center: 1), and 'TextColor' (Default). Below the properties, there are 'Rename', 'Delete', 'Media', 'Home_Screen.jpg', and 'Upload File...' options.
- A blue arrow points from 'BackgroundColor' to the Arabic text: 'يمكنك تغيير لون خلفية من BackgroundColor (لون الخلفية).'
- A blue arrow points from 'FontBold' to the Arabic text: 'يمكنك تحديد FontBold (الخط الغامق)، لجعل النص غامقًا.'
- A blue arrow points from 'TextColor' to the Arabic text: 'يمكنك تغيير لون النص، من خيار TextColor (لون النص).'
Context: Details how to modify visual and textual properties of UI components in App Inventor, with specific instructions for background color, font boldness, and text color.