Software Engineering
3. Developing Applications with App Inventor
Lesson 3 Programming the Mobile App
Lesson Programming the Mobile App - Software Engineering - ثالث ثانوي
1. Software Engineering
2. Prototyping
3. Developing Applications with App Inventor
4. Software Accessibility and Digital Inclusion
Programming Applications in App Inventor
Variables in App Inventor
Lists in App Inventor
The ListPicker Component
Sending Variables to Another Screen
Conditional If Statements in App Inventor
The VerticalScrollArrangement Component
The HorizontalArrangement Component
Programming the Home Screen
Programming Language Support Buttons
To program the language buttons in the home screen:
Figure 3.35: Programming the home screen buttons
The Complete Code for the First Screen (Screen1)
Programming the Cities Screen
Creating the Content for the ListPicker
Figure 3.37: Creating the content lists
The if-then block is used to program the menu item so
To select the content for the list:1
To select the content for the list:2
To select the content for the list:3
Figure 3.38: Initializing the ListPicker content
Opening a New Page from the ListPicker
To get the new page name from the ListPicker selection:
To get the new page name from the ListPicker selection:1
Figure 3.39: Selecting the page from the ListPicker
Opening the Appropriate Page for the ListPicker Selection
To open the appropriate page from the ListPicker selection:
Figure 3.40: Opening the appropriate page from the ListPicker selection
Figure 3.41: Complete code for the second screen
Programming the Highlight Screen (Al Masmak)
Dynamically Changing the Language for the Highlight Page
To change the language dynamically:
To change the language dynamically:1
To change the language dynamically:2
To change the language dynamically:3
To change the language dynamically:4
Figure 3.42: Changing the language dynamically
Programming the Interactive Map
To program the interactive map:
Figure 3.43: Programming the interactive map
The Complete Code for the Third Screen (Al Masmak)
Figure 3.45: Application t in the Emulator
In each destination, add more options for highlights and create more pages for each highlight. Search the Internet for photos and information for each new highlight.
Add two new navigation buttons in each page. One button will take the user to the home screen and the other will take the user to the previous screen.
In each page, add another row with buttons that change the language between English and Arabic and modify each page's code to accommodate this feature.
In a highlight page, add a new text label that will display the coordinates of the interactive map component. You can find the coordinates properties by clicking the map component in the bloc
In a highlight page, add two new buttons that will change the type of the interactive map between Aerial and Road views. You can find the map type properties by clicking the map component in
