Lesson Adding More Elements to the App - Software Engineering - ثالث ثانوي
1. Software Engineering
2. Prototyping
3. Developing Applications with App Inventor
4. Software Accessibility and Digital Inclusion
Link to digital lesson Lesson 2 Adding more Elements to the App www.ien.edu.sa Designing the Home Screen In the previous lesson, you created the Home screen of the app with a button, which when pressed, made a message appear. Now, you will add some useful buttons on the Home screen and make some changes to its appearance. To add a VerticalArrangement component: > From the Components section, select Visit_KSA button 1 and then click Delete. > From the Layout group, add a VerticalArrangement component to the screen by dragging and dropping it in the viewer. 3 > In the VerticalArrangement1 component, set the AlignHorizontal property to Center: 3, Align Vertical property to Center: 25 and the BackgroundColor property to None. 6 4 the > Set the Height property to Fill parent and the Width property to Fill parent. 8 Use a VerticalArrangement component to display a group of components one below another. User Interface Layout HorizontalArrangemen HorizontalScrollArrangement TableArrange ent VerticalArrangement 3 VerticalScroll Arrangement Media Drawing and Animation Maps Charts Sensors Social Storage Connectivity LEGO® MINDSTORMS® Experimental Extension وزارة التعليم Ministry of Education 2024-1446 ect Build Settings Help My Projects View Trash Guide Report an Issue English qkhaled.bl@gmail.com. Remove Screen Publish to Gallery Designer Blocks Components Properties splay hidden components in Viewer Phone size (505,320) Screen1 VerticalArrangement! 1 19:48 Media 2 Rename Delete welcome-screen.png Upload File... Figure 3.17: Adding a VerticalArrangement component (5 7 VerticalArrangement1 AlignHorizontal Center: 3- 4 AlignVertical Center 2 BackgroundColor None Height 6 Fill parent Width Fill parent 8 Image None Visible 135
Designing the Home Screen
To add a VerticalArrangement component:
To add an English language button: > From the User Interface group, in the palette panel, add a Button component to the screen and rename it discover_button_en. 2 > In the discover_button_en component, set the BackgroundColor property to Custom 3 and type the value #28a595ff, 4 set the Text property to "Discover", 5 set the Shape property to rectangular and set the TextColor property to White. ⑦ > Repeat the steps to add an Arabic language button. 8 وزارة التعليم Ministry of Education 136 2024-1446 Projects Connect- Build Settings ▾ Help My Projects View Trash Guide Report an Issue English. qkhaled bl@gmail.com. Screen Add Screen.... Remove Screen Publish to Gallery Designer Blocks Viewer Components Properties Display hidden components in Viewer Phone size (505,320) Phone size (505,320) Δ Discover 1 Discover اكتشف 8 ☐ 9:48 9:48 2 Screen1 discover_button_en VerticalArrangement1 BackgroundColor Custom... discover_button_en 3 4 #28a595 Cancel Done default Height Automatic Width Automatic Image None. Rename Delete Shape VerticalArrangement discover_button_en discover button.ar reen.png rectangular 6 ShowFeedback Text Discover TextAlignment center: 1. TextColor White Visible 7 5 Media Rename Delete welcome-screen.png Upload File... Hex color codes are a way of specifying colors in web design and digital graphics. They consist of a six-digit hexadecimal (base-16) code that represents a color's red, green, and blue (RGB) components. Figure 3.18: Adding an English language button
To add an English language button:
Creating the Second Screen of the App The next screen will be the one that shows the user the cities of Riyadh and Jeddah and their highlights. When the user clicks on one of the cities, a list of available highlights will appear. Now, you will add some useful buttons on the Home screen and make some changes to its appearance. To add a new screen: > Click on the Add Screen button 1 and create a New Screen with the name Cities. 2 > In the Properties section of Cities, untick the TitleVisible property BackgroundImage property put an image of a Saudi flag. 4 3 and in the Projects 1 Build Settings Help My Projects View Trash Guide Report an Issue En Screen1- Add Screen... Remove Screen Publish to Gallery BackgroundColor Default BackgroundImage welcome-screen.png 4 Viewer Display hidden components in Viewer Phone size (505,320) ▼ Components Screen! e VerticalArrangement1 discover_button_en discover_button.ar BigDefaultText وزارة التعليم Ministry of Education 2024-1446 New Screen Screen name: Cancel 2 Cified 9:48 OK Phone size (505,320) ▼ ㅁ 9:48 CloseScreenAnimation Default HighContrast 0 Open ScreenAnimation Default ScreenOrientation Unspecified Scrollable 。 ShowStatusBar 3 Title Cities TitleVisible F-- Figure 3.19: Adding a new screen to the app 137
Creating the Second Screen of the App
To add a label: > From the User Interface group, add a Label component to the screen and rename it discover_label. 2 1 > In the discover_label component, set the BackgroundColor property to Black, 3 set the Width property to Fill parent, 4 set the Text property to "Discover Saudi Arabia" 5 and set the TextColor property to White. 6 MIT Projects Connect. Build- Settings Help ▾ My Projects View Trash Guide Report an Issue English qkhaled.bl@gmail.com. APP INVENTOR Visit_SA_App Cities Add Screen.... Remove Screen Publish to Gallery Designer Blocks Palette Search Components User Interface Button CheckBox DatePicker Image A Label ListPicker ListView Notifier PasswordTextBox Slider Spinner Switch TextBox TimePicker WebViewer Layout Media Drawing and Animation Maps Charts Sensors Social Storage Connectivity وزارة التعليم Ministry of Education 138 2024-1446 1 Viewer ODisplay hidden components in Viewer Phone size (505,320) Discover Saudi Arabia لية العلة Δ O ☐ 9:48 Figure 3.20: Adding a label component Components Cities A discover_label 2 Properties discover_label BackgroundColor Black FontBold 。 3 Fontitalic FontSize 14.0 Font Typeface default HTMLFormat 。 HasMargins Height Automatic Width Fill parent... Text Rename Delete Discover Saudi Arabia Media TextAlignment left:0 welcome-screen.png TextColor Upload File... White 6 Visible 4 5
To add a label:
To add a VerticalArrangement component: > From the Layout group, add a VerticalArrangement component to the screen. > In the VerticalArrangement1 component, set the BackgroundColor property to Custom and type the value #11613eff. 2 > In the VerticalArrangement1 component, set the Height property to Fill parent 3 and the Width property to Fill parent. 4 MIT Projects Connect Build Settings Help My Projects View Trash Guide Report an Issue English. qkhaled bl@gmail.com. APP INVENTOR Visit_SA_App Cities Add Screen. Remove Screen Publish to Gallery Designer Blocks Palette Viewer Properties Search Components User Interface Layout HorizontalArrangement HorizontalScrollArrangement TableArrangement VerticalArrangement 1 VerticalScrollArrangement Media Drawing and Animation Maps Charts Sensors Social Storage Connectivity LEGO® MINDSTORMS® Experimental Extension وزارة التعليم Ministry of Education 2024-1446 Display hidden components in Viewer Phone size (505,320) 9:48 Discover Saudi Arabia ☐ Components Cities A discover_label VerticalArrangement! VerticalArrangement AlignHorizontal Left: 1. AlignVertical Top 1 BackgroundColor Custom... Rename Delete 3 Media welcome-screen.png Upload File... Figure 3.21: Adding a VerticalArrangement component 2 Height Fill parent Width parent. 4 Image None Visible 139
To add a VerticalArrangement component:
To add a cities label: > From the User Interface group, add a Label component to the screen 1 and rename it cities_label. 2 > In the cities_label component, set the BackgroundColor property to None ③ set the FontSize property to 18.0 4 set the Text property to "Cities" and set the TextColor property to White. 5 MIT Projects Connect Build Settings Help My Projects View Trash Guide Report an Issue English ⚫qkhaled.bl@gmail.com APP INVENTOR Visit_SA_App Cities Add Screen Remove Screen Publish to Gallery Designer Blocks Palette Search Components User Interface Button CheckBox DatePicker Image A Label ListPicker ListView Notifier PasswordTextBox Slider Spinner Switch TextBox TimePicker WebViewer Layout Media Drawing and Animation Viewer ODisplay hidden components in Viewer Phone size (505,320) ร 9:48 Discover Saudi Arabia Cities 1 ☐ Figure 3.22: Adding a text label Creating a List Lists are a type of data structure we use to create and manage different combinations of values/items, and in your app, a list will be contained in each image you will add. For example, when you press the image of Riyadh city, a list of two highlights of this city will appear as ●⚫follows: Al Masmak Boulevard Riyadh Cityارة التعليم Ministry of Education 140 2024-1446 Components Cities A discover_label eVerticalArrangements A cities Jabel 2 Properties cities_label BackgroundColor 3 ☐ None FontBold Fontitalic FontSize 4 FontTypeface default- HTMLFormat HasMargins Height Automatic... Width Automatic... Text Rename Delete Cities Media TextAlignment left:0 welcome-screen.png Upload File... TextColor White 5 Visible Figure 3.23: Opening a new page from the ListPicker
To add a cities label:
Creating a List
The ListPicker component will be used to select the highlight from each city. Each city will be represented by a ListPicker. So, there will be a ListPicker for Riyadh and a ListPicker for Jeddah. To add a ListPicker component for Riyadh: > From the User Interface group, add a Label "RIYADH" 1 and then a ListPicker component to the screen 2 and rename it riyadh_list. 3 > In the riyadh_list component, set the Height property to Fill parent 4 and the Width property to Fill parent, 5 upload an image of Riyadh from the Image property 6 and clear the Text property. 7 > Repeat the steps to add a Label "JEDDAH" and a ListPicker for the city of Jeddah. Palette Viewer Seah Components User Interface Button CheckBox DatePicker Image Label ListPicker 2 ListView Notifier PasswordTextBox Slider Spinner Switch TextBox TimePicker WebViewer Layout Media Drawing ar -ch Maps Charts T Layour ter Bawing A وزارة التعليم Ministry of Education 2024-1446 Cham Co CDisplay hidden components in Viewer Phone size (505,320) Discover Saudi Arabia Cities RIYADH Discover Saud Aubie NACH JEDDAH 1 8 9:48 По Ustice Figure 3.24: Adding a ListPicker component Components B Cities Adiscover_label Properties riyadh list e verticalArrangement! cities Jabel Riyadh Eriyadh list BackgroundColor None ElementsFromString Enabled FontBold 3 Fontitalic FontSize Rename Delete Media almasmak.jpg almasma...sized.jpg 5 14.0 Font Typeface default Height Fil parent Width Fil parent Image Riyadh.png ItemBackgroundColor Default ItemTextColor Default 5 jeddah.png xeddah_nav-img.png Selection map_icon.png iyadh_nav-img.png Shape default ShowFeedback 4 6 ShowFilterBar D Text 7 141
To add a ListPicker component for Riyadh:
When you run the finished application on your mobile phone, the ListPicker component works in the following way. When you select an image of each ListPicker, the screen contents will change to show the list of options. For example, when you click on the ListPicker component for Riyadh, the application will have the following behavior: 9:48 Discover Saudi Arabia Al Masmak Cities RIYADH Boulevard Riyadh City JEDDAH Figure 3.25: The ListPicker component O ร 9:48 Creating the Third Screen of the App The final screen will be the screen that displays information about the selected highlight from the previous screen. This screen will show the title of the highlight, a representative image, a text description and a map button which will launch an interactive map to view the location of the highlight in the respective city. Each highlight will have its dedicated screen, and in this lesson, you will create a screen for Al Masmak. وزارة التعليم Ministry of Education 142 2024-1446
When you run the finished application on your mobile phone, the ListPicker component works in the
Creating the Third Screen of the App
You will need to remove the original screen title label and replace it with the Discover Saudi Arabia label. Add a new screen as you have already learned and rename it "AlMasmak". Then add the KSA flag as a background and the screen title as shown below. Viewer Display hidden components in Viewer Phone size (505,320) 9:48 Discover Saudi Arabia Δ Components AIMasmak A discover_label Properties discover_label BackgroundColor Black FontBold Fontitalic FontSize 14.0 Font Typeface default- HTML Format HasMargins 2 Height Automatic Width Fill parent Text Rename Delete Discover Saudi Arabia Media TextAlignment left:0 welcome-screen.png riyadh_nav-img.png jeddah_nav-img.png TextColor White Visible Figure 3.26: Creating the third screen To add elements on the screen: > From the Layout group, add a VerticalArrangement component to the screen. 1 > In the VerticalArrangement1 component set the BackgroundColor property to Custom 2 and type the value #11613eff. > In the VerticalArrangement1 component, set the Height property to Fill parent and the Width property to Fill parent. 4 3 > From the User Interface group, add a Label component to the screen and rename it title_label. 5 > In the title_label component, set the BackgroundColor property to None, 6 set the FontSize property to 18.07 set the Text property to "Al Masmak" 8 and set the TextColor property to White. 9 وزارة التعليم Ministry of Education 2024-1446 143
Add a new screen as you have already learned and
To add elements on the screen:
Visit_SA_App AlMasmak Add Screen Remove Screen Publish to Gallery Palette Viewer Search Components. Display hidden components in Viewer User Interface Phone size (505,320) ▼ Layout HorizontalArrangement HorizontalScrollArrangement TableArrangement VerticalArrangement 1 VerticalScrollArrangement Media Drawing and Animation Maps Charts Sensors Social Storage Connectivity LEGO® MINDSTORMS® Experimental Extension Visit_SA_App Palette Search Components User Interface Button CheckBox DatePicker Image A Label ListPicker ListView Notifier PasswordTextBox Slider Spinner Switch TextBox TimePicker WebViewer Layout Media وزارة التعليم Ministry of Education 144 2024-1446 9:48 Discover Saudi Arabia Δ о ☐ Designer Blocks Components AlMasmak Adiscover_label VerticalArrangement! Properties VerticalArrangement AlignHorizontal Left: 1- Media 666 Rename Delete welcome-screen.png riyadh_nav-img.png jeddah_nav-img.png AlignVertical Top:1- BackgroundColor Custom... Height 3 Fil parent... Width <+ 4 Fill parent.. Image None Visible 2 AlMasmak Add Screen Remove Screen Publish to Gallery Viewer ODisplay hidden components in Viewer Phone size (505,320) Components AIMasmak A discover Jabel eVerticalArrangement1 Properties title Jabel BackgroundColor None Designer Blocks 6 A title_label FontBold 9:48 Fontitalic Discover Saudi Arabia 5 Al Masmak Rename Delete FontSize 18.0 7 Font Typeface default HTMLFormat HasMargins Height Automatic Width Automatic Text Al Basmak TextAlignment left:0 TextColor White 80 9 Media ㅁ welcome-screen.png riyadh_nav-img.png jeddah_nav-img.png Visible Figure 3.27: Adding elements to the third screen
Figure 3.27: Adding elements to the third screen
To add an image component: > From the User Interface group, add an Image component to the screen and rename it image. 2 1 > In the image component, set the Height property to Fill parent 3 and the Width property to Fill parent 4 and set the Picture property to an image of Al Masmak. 5 The component instance name cannot be the same as the name of the component type, but image and Image are different names. MIT Projects Connect Build Settings Help My Projects View Trash Guide Report an Issue English- qkhaled bl@gmail.com. APP INVENTOR Visit_SA_App AlMasmak Add Screen Remove Screen Publish to Gallery Designer Blocks Palette Viewer Components Properties image Search Components User Interface Button CheckBox Display hidden components in Viewer Phone size (505,320) AIMasmak discover_label eVerticalArrangement? title Jabel 9:48 2 image DatePicker Discover Saudi Arabia Image 1 Al Masmak Label ListPicker ListView Notifier PasswordTextBox Slider Spinner Switch TextBox TimePicker WebViewer Layout Media Figure 3.28: Adding an image component Rename Delete Media welcome-screen.png riyadh_nav-img.png Jeddah_nav-imo.png Alternate Text Clickable Height Fill parent... 3 4 Width Fill parent... Picture al_masmak_castle_resized 5 RotationAngle 0.0 Scale PictureToFit Visible Now, you will add a Label that will contain a description of Al Masmak. But, at this point, you will add a placeholder for the text that will be added in the next lesson. To add a text description component: > From the User Interface group, add a Label component to the screen and rename it description_label. ② > In the description_label component, set the Height property to Fill parent, 3 set the BackgroundColor property to None 4 and the TextColor property to White. 5 When more components are added, the image will be scaled properly. وزارة التعليم Ministry of Education 2024-1446 145
To add an image component:
To add a text description component:
MIT Projects Connect Build▾ Settings Help My Projects View Trash Guide Report an Issue English khaled.bl@gmail.com. APP INVENTOR Visit_SA_App AlMasmak Add Screen Remove Screen Publish to Gallery Designer Blocks Palette Viewer Components Properties Search Components User Interface Button CheckBox DatePicker Display hidden components in Viewer Phone size (505,320) AIMasmak description_label discover_label BackgroundColor VerticalArrangement! None 4 title_label FontBold 9:48 image Fontitalic Discover Saudi Arabia 2 A description_label Image Al Masmak FontSize 14.0 A Label 1 FontTypeface ListPicker default HTMLFormat ListView Notifier PasswordTextBox Slider Text for Label1 Spinner Switch TextBox TimePicker WebViewer Layout Media Drawing and Animation ☐ HasMargins Height Fill parent3 Width Automatic Text Rename Delete Text for Labeli Media welcome-screen.png riyadh_nav-img.png jeddah_nav-img.png al_masma...sized.jpg TextAlignment left:0 TextColor ☐ White 5 LO Visible Figure 3.29: Adding a text description component Adding an Interactive Map to the Application On the screen of each highlight, the users will be able to launch an interactive map that displays the accurate location of the highlight so that they can see where each highlight is located in each city. You will first create a container for a button that will activate the interactive map, and then you will add the component. Horizontal Arrangement Component • With the HorizontalArrangement component, objects are arranged horizontally along the horizontal axis and aligned vertically in the center. If the Height or Width property is set to Automatic, then the actual height of the component is specified as the length of the tallest object within it. If the Height property for the HorizontalArrangement component is blank, the Height will be 100. If the Height or Width property of the HorizontalArrangement component is specified by Fill Parent or pixels (in pixels), any Width property specified by the Fill Parent will equally take up space not occupied by the other components. وزارة التعليم Ministry of Education 146 2024-1446
Figure 3.29: Adding a text description component
Adding an Interactive Map to the Application
Horizontal Arrangement Component
To add a HorizontalArrangement component: > From the Layout group, add a HorizontalArrangement component to the screen. > In the HorizontalArrangement1 component, set the BackgroundColor property to None, set the AlignHorizontal property to Center: 3, 3 and set the AlignVertical property to Bottom: 3. 4 > Set the Height property to Fill parent 5 and the Width property to Fill parent. 6 MIT Projects Connect Build Settings Help - APP INVENTOR My Projects View Trash Guide Report an Issue English qkhaled.bl@gmail.com. Visit_SA_App AlMasmak Add Screen Remove Screen Publish to Gallery Designer Blocks Palette Viewer Components Search Components User Interface Layout HorizontalArrangement HorizontalScrollArrangement Table Arrangement VerticalArrangement VerticalScrollArrangement Display hidden components in Viewer Phone size (505,320) 1 Discover Saudi Arabia Al Masmak Media Drawing and Animation Maps Text for Label1 Charts Sensors Social Storage Connectivity LEGO® MINDSTORMS® Experimental Extension وزارة التعليم Ministry of Education 2024-1446 ן 9:48 AIMasmak discover_label eVerticalArrangement! A title_label image description label <+ 4 HorizontalArrangemen Media Rename Delete welcome-screen.png riyadh.nav-img.png Jeddah nau.ime.non Figure 3.30: Adding a HorizontalArrangement component Properties HorizontalArrangement1 AlignHorizontal Center: 3- 3 AlignVertical Bottom: 3 BackgroundColor None 2 5 Height Fill parent Width Fill parent... 6 Image None Visible 147
To add a HorizontalArrangement component:
To add a map button:
To add a map button: 1 > From the User Interface group, add a Button component to the screen and rename it map_button. ② > In the map_button component, set the BackgroundColor property to None, 3 clear the Text property 4 and set the Image property to an icon of a map. 5 MIT Projects Connect Build Settings Help My Projects View Trash Guide Report an Issue English- gkhaled.bl@gmail.com + APP INVENTOR Visit_SA_App AIMasmak Add Screen Remove Screen Publish to Gallery Designer Blocks Palette Viewer Components Properties Search Components User Interface Display hidden components in Viewer Phone size (505,320) AIMasmak map_button A discover_label eVerticalArrangement1 BackgroundColor None Button A title_label Enabled CheckBox DatePicker Image 9:48 image FontBold Discover Saudi Arabia description_label Al Masmak HorizontalArrangemen Fontitalic 3 Label 1 map_button FontSize ListPicker 14.0 ListView Notifier 2 PasswordTextBox Text for Label 1 Slider Spinner Switch TextBox TimePicker WebViewer Layout Media Drawing and Animation Maps Charts Sensors Social Storage Connectivity وزارة التعليم Ministry of Education 148 2024 -1446 Figure 3.31: Adding a map button FontTypeface default Height Automatic Width Automatic Image map_icon.png Rename Delete Shape default Media ShowFeedback welcome-screen.png riyadh nav-img.png jeddah_nav-img.png Text (5 TextAlignment al_masma.sized.jpg center: 1- map_icon.png Upload File TextColor Default Visible 4
Figure 3.31: Adding a map button
To add a map component:
To add a map component: > From the Maps group, select the Map component 1 and place it under HorizontalArrangement1. 2 > Set the Height property to Fill Parent 3 and the Width property to Fill Parent. 4 > Untick the Visible property. 5 > Set the ZoomLevel property to 16. 6 MIT Projects Connect Build Settings Help My Projects View Trash Guide Report an Issue English- APP INVENTOR qkhaled.bl@gmail.com. Visit_SA_App AlMasmak Add Screen Remove Screen Publish to Gallery Designer Blocks Palette Viewer Search Components User Interface Display hidden components in Viewer Phone size (505,320) Layout Components AIMasmak Adiscover_label VerticalArrangement! A title_label Properties Map1 CenterFromString 42.359144,-71.093612 Media EnablePan 9:48 Drawing and Animation Discover Saudi Arabia Al Masmak Maps Circle FeatureCollection LineString Map Marker Navigation Polygon Rectangle Charts Sensors Social Storage Connectivity LEGO® MINDSTORMS® Experimental Extension 1 Text for Label1 Δ A O ☐ Figure 3.32: Adding a Map component image description_label EnableRotation HorizontalArrangemen EnableZoom map_button 2 PM Mapl Height Fill parent 3 Media <+ 4 Width Fill parent Location Sensor None MapType Roads Rotation 0.0 Rename Delete ScaleUnits Metric ShowCompass welcome-screen.png riyadh_nav-img.png jeddah_nav-img.png al_masma...sized.jpg map_icon.png Upload File.... ShowScale ShowUser ShowZoom Visible 5 ZoomLevel 16 6 ليم When you run the finished application on your mobile phone, the map component opens at the location of the selected highlight. In the next lesson, you will add the coordinates depending. Ministry of Education 2024-1446 149
Figure 3.32: Adding a Map component
Discover Saudi Arabia Al Masmak Text for Label1 A وزارة التعليم Ministry of Education 150 2024-1446 9:48 Discover Saudi Arabia Al Masmak 9:48 Text for Label1 م مام تركي بن عبدالله . P صل بن عبد العزيز. Leaflet | Map data © OpenStreetMap contributors الديرة. A Figure 3.33: Activation of the Map component by the map button You can interact with the map component as you would with any other complete map application. О
Figure 3.33: Activation of the Map component by the map button
1 Exercises Describe how HorizontalArrangement and VerticalArrangement components help you form the layout of a mobile screen. 2 State the difference between a ListPicker and a Button component. وزارة التعليم Ministry of Education 2024-1446 151
Describe how HorizontalArrangement and VerticalArrangement components help you form the layout of a mobile screen.
State the difference between a ListPicker and a Button component.
3 Design an application with a VerticalArrangement and two HorizontalArrangements. Each HorizontalArrangement has two buttons. All of the components are in the center of their container. Use the Alignment properties of the appropriate components. 4 Design another screen for the above application which has a HorizontalArrangement as an external container and two VerticalArrangements with buttons inside. All of the components are in the center of their container. Use the Alignment properties of the appropriate components. 5 Design another screen for the above application which has a Vertical Arrangement and three rows of HorizontalArrangements. Each HorizontalArrangement row will have two photos. Each photo will be of a different sport. Make sure that all the components are arranged in the center of their containers and all the photos have the same dimensions. وزارة التعليم Ministry of Education 152 2024-1446
Design an application with a VerticalArrangement and two HorizontalArrangements. Each HorizontalArrangement has two buttons. All of the components are in the center of their container. Use th
Design another screen for the above application which has a HorizontalArrangement
Design another screen for the above application which has a VerticalArrangement and
