Académique Documents
Professionnel Documents
Culture Documents
http://appinventor.googlelabs.com/learn/tutorials/m...
About
Learn
My Projects
Map Tour
What Your're Building
This is a two-part tutorial introduces the ActivityStarter component for launching arbitrary Android Apps and the ListPicker component for allowing a user to choose from a list of items. You'll build MapTour, an app for visiting French vacation destinations with a single click. Users of your app will be able to visit the Eiffel Tower, the Louvre, and Notre Dame in quick succession. This tutorial assumes you are familiar with the basics of App Inventor-- using the Component Designer to build a user interface, and using the Blocks Editor to specify event-handlers. If you are not familiar with the basics, try stepping through some of the basic tutorials before continuing. Once you complete the first part of this tutorial, try part 2.
Getting Started
Connect to the App Inventor web site and start a new project. Name it MapTour, and also set the screen's Title to MapTour. Open the Blocks Editor and connect to the phone.
Introduction
You'll design the app so that a list of destinations appears. When the user chooses one, the Google Maps app is launched to display a map of the destination. The tutorial introduces the following App Inventor concepts: The Activity Starter component for launching Android apps from your app. The ListPicker component for allowing the user to choose from a list of choices.
1 of 6
10/15/2010 04:31 PM
http://appinventor.googlelabs.com/learn/tutorials/m...
The components listed below were used to create this designer window. Drag each component from the Palette into the Viewer and name it as specified: Component Type Image ListPicker ActivityStarter Palette Group Basic Basic other stuff What you'll name it Image1 ListPicker1 ActivityStarter1 Purpose of Component Show a static image of Paris map on screen Display the list of destinations Launches the maps app when a destination is chosen
Download the file parismap.png onto your computer, then choose Add in the Media section to load it into your project. For it to appear, you'll also need to set this as the Picture property of Image1. The ListPicker component has an associated button-- when the user clicks it, the choices are listed. Set the text of that button by setting the Text property of ListPicker1 to "Choose Destination".
With these values set, you'll be able to launch the Maps application. In the Blocks Editor, you'll set one more property, DataUri, which will allow you to launch Maps with a particular map being displayed. This property must be set in the Blocks Editor because it will change based on whether the user chooses to visit the Louvre, the Eiffel Tower, or the Notre Dame.
2 of 6
10/15/2010 04:31 PM
http://appinventor.googlelabs.com/learn/tutorials/m...
Block Type def variable ("Destinations") make a list text ("Tour Eiffel") text ("Musee du Louvre") text ("Cathedrale Notre Dame") The blocks will look like this:
Purpose create a list of the destinations use to add the items to the list the first destination the second destination set the Message property before sending
Test this behavior. On the phone, click the button labeled "Choose Destination". The list picker should appear with the three items.
3 of 6
10/15/2010 04:31 PM
http://appinventor.googlelabs.com/learn/tutorials/m...
ListPicker1.AfterPicking set ActivityStarter1.DataUri to make text text ("geo:0,0?q=") ListPicker1.Selection ActivityStarter1.StartActivity The blocks should look like this:
this event is triggered when the user chooses from ListPicker the DataUri tells Maps which map to open on launch build the DataUri from two pieces of text the first part of the DataUri expected by Maps the item the user chose launch Maps
For help with the Maps application parameters, see this document from mapki.com
Test this behavior. Restart the app and click the "Choose Destinations" button again. When you choose one of the destinations, does a map of that destination appear? Can you click the back button to return to your app to choose again (you may have to click a couple of times to leave the Maps app).
4 of 6
10/15/2010 04:31 PM
http://appinventor.googlelabs.com/learn/tutorials/m...
Review
Here are some of the ideas covered in this tutorial: The ListPicker component lets the user choose from a list of items. ListPicker's Elements property holds the list, the Selection property holds the selected item, and the AfterPicking event is triggered when the user chooses. The ActivityStarter component allows your app to launch other apps. This tutorial demonstrated its use with the Maps application, but you can launch a browser or any other Android app as well-- even another one of your own. See the reference page on Activity Starter for more details. Learn more sophisticated uses of the ActivityStarter and the ListPicker componants in MapTour Part 2.
Google is grateful to Professor David Wolber, CS Professor at The University of San Francisco, for developing this tutorial.
5 of 6
10/15/2010 04:31 PM
http://appinventor.googlelabs.com/learn/tutorials/m...
6 of 6
10/15/2010 04:31 PM