ACS-1805 Introduction to Programming (with App Inventor)

Transcription

1 ACS-1805 Introduction to Programming (with App Inventor) Chapter 9 Paris Map Tour 11/1/2018 1

2 What We Will Learn In this chapter we ll build a tour guide app for a trip to Paris This chapter introduces the following App Inventor components and concepts The Activity Starter component for launching other Android apps from your app The WebViewer component for showing web pages within your app How to use list variables to store information for your app The ListPicker component to give the user the ability to choose from a list of locations How to build a URL dynamically to show different maps 11/1/2018 2

3 Designing the Components In the first version of this app The user interface for the app includes An Image component with a picture of Paris A Label component with some text A ListPicker component that comes with an associated button An ActivityStarter (non-visible) component 11/1/2018 3

4 Designing the Components 11/1/2018 4

5 ActivityStarter A relatively low-level component You ll need to set some of its properties with information shown in the table below Be careful they re case-sensitive These would be familiar to a Java Android SDK programmer 11/1/2018 5

6 ActivityStarter Set one more property DataUri in the Blocks Editor It lets you provide a URL to launch a specific map in Google Maps Other components Download the file metro.jpg to load into your project set it as the Picture property of Image1. The ListPicker component comes with a button to list the choices after the user clicks it Set the text of that button by changing the Text property of ListPicker1 to Choose Paris Destination 11/1/2018 6

7 Adding Behaviors to the Components In the Blocks Editor you ll need to define a list of destinations two behaviors The app loads the destinations into the ListPicker component when the app begins so that the user can choose one When the user chooses a destination from the ListPicker The Maps application is launched and shows a map of that destination In this first version of the app it just opens Maps and instruct it to run a search for the chosen destination 11/1/2018 7

8 Creating a List of Destinations Create a variable with the list of Paris destinations By using the blocks listed below 11/1/2018 8

9 Creating a List of Destinations Finish the list component The make a list block will have only two available sockets initially You can add another one by clicking the dark blue icon it and adding a third item Create the text blocks for each destination and place them in the sockets 11/1/2018 9

10 Letting the User Choose a Destination The list just defined does not appear in the user interface Why? So we need to use a ListPicker component to display the list of items for the user to choose from Preload the choices into the ListPicker by setting the property "Elements" to a list In this case set the Elements property for ListPicker to the destinations list just created Define this behavior in the Screen1.Initialize event because this only needs to be set once 11/1/

11 Letting the User Choose a Destination 11/1/

12 Opening Maps with a Search URL Next task after the user chooses one of the destinations Let the ActivityStarter launch Google Maps and searches for the selected location What is the URL for such a search? The? indicates that a parameter is coming A parameter is the information the website needs to process the request Here the parameter name is q Short for query Its value is Paris -- instructs Google Maps what map to search 12

13 Opening Maps with a Search URL Build a URL dynamically Create the parameter value based on which location the user chooses By this way it can show different maps based on the user s choices Great flexibility When the user chooses an item from the ListPicker component the List Picker.AfterPicking event is triggered In the event handler for AfterPicking set the DataUri of the ActivityStarter component so that it knows which map to open then launch Google Maps by using ActivityStarter.StartActivity 13

14 Opening Maps with a Search URL 14

15 Opening Maps with a Search URL The DataUri property is set to a text object composed by combining together the chosen item stored in ListPicker.Selection We are done with the first version Remember You can do more with ActivityStarter It provides access to any other app on the device 15

16 The Second Version of the App Spice up the app It opens some zoomed-in and street views of the Paris monuments. Define a second list and use a more complicated scheme to decide which map to show First explore Google Maps to obtain the URLs of some specific maps Still use the same Parisian landmarks for the destinations But when the user chooses one location use the index (the position in the list) of his/her choice to select and open a specific zoomed-in or street-view map 16

17 Implementing the Second Version Save the first version as another project Add the web viewer component Delete the ActivityStarter component in the Designer Drag in a WebViewer component from the User Interface drawer Place it below the other components Uncheck the Screen1.Scrollable property so the WebViewer will display web pages correctly 17

18 Finding the URL for Specific Maps Do your own research to find the specific maps you want to launch for each destination On your computer, browse to Search for a landmark (e.g., the Eiffel Tower) Zoom in to the level you desire Choose the type of view you want (e.g., Street View) Grab the URL In the classic version of Maps click the Link button near the top right of the Maps window and copy the URL for the map In the newer version of Google Maps you can just grab the URL from the address bar You may want to use the shortened the URLs (with the bit.ly service or similar service provided by Google itself) 18

19 Finding the URL for Specific Maps 19

20 Defining the URLs List Create a list named URLs It contains a URL for each of the destinations Make sure the items correspond to the items in the destinationslist 20

21 Modifying the ListPicker.AfterPicking Behavior The AfterPicking behavior is now more sophisticated Because the user is choosing from one list (destinations) while the app is choosing from the URLs list for the URL When the user chooses an item from the ListPicker the app needs to know the index of the choice so it can use the index to select the correct URL from the list 21

22 New/Modified Blocks 22

23 New Mechanism How the blocks work When the user chooses an item from the ListPicker the AfterPicking event is triggered, The chosen item (say, Tour Eiffel ) is in ListPicker.Selection You used this property in the first version of this app 23

24 New Mechanism ListPicker also has a property SelectionIndex It corresponds to the position of the chosen destination in the list If Tour Eiffel is chosen the SelectionIndex will be 1 If Musée du Louvre is chosen the index will be 2 If Cathédrale Notre Dame de Paris is chosen the index will be 3 24

25 The Complete App 25