Palm Developer Center

1.0 Tutorial - GPS/Maps

This tutorial will guide you throught the creation of a webOS application using new features in the 1.0 version of Ares, Palm’s online visual development tool. Before following the steps here, be sure to read the Ares Oveview document. It contains important information about Ares that you will need to know before trying to build an app using the tool.

This tutorial will guide you through creating a GPS-enabled Google Maps application.

Prerequisites

Make sure you do the following before you attempt to follow this tutorial:

Install the webOS SDK from developer.palm.com

 

Create a new application

  1. In the New menu at the top of the screen (+ icon), select New Application and name the application MyMapApp. This will create a new application and load the first scene’s chrome file onto the main Designer view.

    Create User Interface

    Add Header

  2. Now it is time to create the first scene. In the palette, locate the header widget in the first section, and drag it onto the canvas to place it automatically at the top of the phone's screen.
  3. In the property inspector (in the Settings/Common subsection), find the label property and set the label for the header to "My Maps App" - the header's label should change on the screen.

    Add map

  4. Back in the palette, locate the maps widget in the first section, and drag it onto the canvas below the header. You will see a Google map appear, showing Palm HQ by default.
  5. In the Property inspector, under Sizing Tools, select the "Maximize" button to make the map take up the entire screen.

    Add GPS Component

  6. In the palette, locate the GPS component in the Sensors section. You will have to drag the palette up to reveal it below. Drag the GPS component onto the screen - note that it will not appear on-screen, but rather below in the "Non-visual components" section.
  7. In the property inspector, make sure the "subscribe" checkbox is checked for the GPS component, so you get regular updates from the sensor rather than just one.

    Add Code

  8. Still in the property inspector, select the "Events" tab at the top, and click on the button inside the "onSuccess" event listing. This will take you to the code editor, and create a new method for you.
  9. In this new method, where the cursor is by default (Inside the gps1Success method), type the following two lines of code to set the map coordinates based on the response from the GPS sensor:

    this.$.map1.setLongitude(inResponse.longitude);
    this.$.map1.setLatitude(inResponse.latitude);
  10. Now locate the "setup" method higher up in the code file. After the line Ares.setupSceneAssistant, type the following line of code to activate the GPS when the app is loaded:

    this.$.gps1.startTracking();

    Run App!

That's it, you are done! Connect your developer-mode enabled Pre or Pixi to your computer via USB, and press the "launch" button (play symbol) at the top of Ares' UI to package, download, and launch your application. You will see the map appear, and a few seconds later when the GPS responds, the location of the map will zoom to your current location. Multi-touch is enabled by default for zooming or panning. Every time the GPS comes back with a new value, the map will be re-centered on that value, so if you were walking with the app, it would keep updating with your location.