app inventor maptour

8/6/2019 App Inventor Maptour

1/6

Learn about App Inventor

About Learn

My Projects

Learn > Tutorials > Map Tour

Map Tour

What Your're Building

This is a two-part tutorial introduces the ActivityStartercomponent for launching arbitrary Android

Apps and the ListPickercomponent 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 d isplay 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.

Set up the Components

The user interface for MapTour is simple: you'll have a single ListPicker component and an ActivityStarter (non-visible) component. The design view should look

like this when you're done:

Map Tour - App Inventor for Android http://appinventor.googlelabs.com/learn/tutorials

of 6 10/15/2010 04:31


2/6

The components listed below were used to create this designer window. Drag each component from the Palette into the Viewerand name it as specified:

Component Type Palette Group What you'll name it Purpose of Component

Image Basic Image1 Show a static image of Paris map on screen

ListPicker Basic ListPicker1 Display the list of destinations

ActivityStarter other stuff ActivityStarter1 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 ListPickercomponent 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".

Setting the properties of ActivityStarter

ActivityStarteris a component that lets you launch any An droid app-- the browser, Maps, even another one of your own apps. When another app is launched

from your app, the user can click the back button to get back to your app. You'll build MapTour so that the Maps application is launched to show particular

maps based on the user's choice. The user can then hit the back button to return to your app and choose a different destination.

ActivityStarteris a relatively low-level component in that you'll need to set some properties of the component with information familiar to a Java Android SDK

programmer, but foreign to the rest of the 99.999% people in the world. Not to worry, however. By copying the sample protocol information provided here, you

can easily learn how to launch apps like Maps from the apps you are creating.

So, to set-up the ActivityStarterto launch the Maps application, set the following ActivityStarter properties in the Component Designer:

Property Value

Action android.intent.action.VIEW

ActivityPackage com.google.android.apps.maps

ActivityClass com.google.android.maps.MapsActivity

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.

Create a list of destinations

Open the blocks editor and create a variable with the list of destinations for the MapTour. You'll need the following blocks:


2 of 6 10/15/2010 04:31


3/6

Block Type Drawer Purpose

def variable ("Destinations") Definitions create a list of the destinations

make a list Lists use to add the items to the list

text ("Tour Eiffel") Text the first destination

text ("Musee du Louvre") Text the second destination

text ("Cathedrale Notre Dame") Text set the Message property before sending

The blocks will look like this:

Add behaviors to the components

MapTour has two behaviors:

1. When the app begins, the app loads the destinations into the ListPickercomponent so the user can choose.

2. When the user chooses a destination from the ListPicker, the Maps application is launched to show a map of that destination. For Part I, youll just openMaps and tell it to invoke a search for the chosen destination

The ListPickercomponent displays a list of items when the user clicks a button. ListPickerhas a p roperty Elements. If you set Elements to a list, the items in

the list will appear in the ListPicker. For this app, you want to set the ListPicker's Elements property to the destinations list you just created. Because you

want this to happen when the app b egins, you'll define this behavior in the Screen1.Initialize event. You'll need the following blocks:


Screen1.Initialize Screen1 this event is triggered when the app starts

set ListPicker1.Elements to L istPicke r1 se t this p ro pe rty to th e list you wan t to ap pe ar

global destinations My Definitions the list of destinations

The blocks should look like this:

How the Blocks Work

Screen1.Initialize is triggered when the app beg ins. The event-handler just sets the Elements property ofListPickerso that the three destinations will

appear.

Test this behavior. On the phone, click the button labeled "Choose Destination". The list picker should appear with the three

items.

Launching Maps with a search for the destination

Next, you'll program the behavior that should occur when the user chooses one of the destinations-- the ActivityStartershould launch Maps and search for

the selected destination.

When the user chooses from the ListPickercomponent, the ListPicker.AfterPicking event is triggered. In the event-handler forAfterPicking you need to set

the DataUri of the ActivityStarter component so it knows which map to open, the n you n eed to launch the app using StartActivity.

You'll need the following blocks:



3 of 6 10/15/2010 04:31


4/6

ListPicker1.AfterPicking L istPicker1 th is event is triggered when the user chooses from ListPicker

set ActivityStarter1.DataUri to ActivityStarter1 the DataUri tells Maps which map to open on launch

make text Text build the DataUri from two pieces of text

text ("geo:0,0?q=") Text the first part of the DataUri expected by Maps

ListPicker1.Selection ListPicker1 the item the user chose

ActivityStarter1.StartActivity ActivityS ta rte r1 lau nch Ma ps

The blocks should look like this:

How the Blocks Work

When the user chooses from the ListPicker, the AfterPicking event is triggered. Whatever item was chosen is in the ListPicker1.Selectionproperty. So if theuser chose "Musee du Louvre", that value is in ListPicker1's Selection property.

In the Component Designer, you already setup the ActivityStartercomponenent with properties so that it will launch the Maps application. Here, you just need

to tell it which map to show. The DataUri property of ActivityStarter allows you to specify this using a special protocol.

In this case, you want to show the map that would appear if you typed in "Musee du Louvre" in the search box of th e Maps application. To do this, the DataUri

should be set to:

geo:0,0?q='Musee du Louvre'

The make a text block creates a text exactly like this, only the text after "q=" will be the choice made by the user.

Once the DataUri is set, ActivityStarter1.StartActivity launches the Maps app.

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).

Map Tour, Final Program


4 of 6 10/15/2010 04:31


5/6

Review

Here are some of the ideas covered in this tutorial:

The ListPickercomponent 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 ActivityStartercomponent 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 pag e on Activity Starterfor more details.

Learn more sophisticated uses of the ActivityStarterand the ListPickercomponants in MapTour Part 2.

Scan the Sample App to your Phone

Scan the following barcode onto your phone to install and run the sample app.

Download Source Code

If you'd like to work with this sample in App Inventor, download the source code to your computer, then op en App Inventor, go to the My Projects page, and

choose More Actions | Upload Source .

Google is grateful to Professor David Wolber, CS Professor at The University of San Francisco, for developing this tutorial.

2010 Google

About | Privacy | Terms


5 of 6 10/15/2010 04:31


6/6

Page last updated: 09/30/2010


6 of 6 10/15/2010 04:31

app inventor maptour

Documents