Geolocation for BlackBerry PlayBook

Before you begin:

In this section:

Set up folders and files

For this tutorial, we'll provide most of the files, and we'll review in detail the ones that you create.

Your app files need to be created where the Ripple emulator can find them.

  1. Navigate to your RippleSites folder. As a reminder, you created it in one of the following locations:
    • Windows XP: C:\Documents and Settings\<Username>\RippleSites
    • Windows 7: C:\Users\<Username>\RippleSites
    • Mac OS: /Users/<Username>/RippleSites
  2. Within the RippleSites folder, create a folder named HelloGeo.
  3. Download the HelloGeo_PB.zip file to your computer.
  4. Extract the contents of the .zip file into the HelloGeo folder. Confirm that you have the following:
    • a folder called images that contains two image files, hellogeo.png and icon.png
    • a styles.css file
    • a geo.js file

Create the layout

In addition to the files we provided, you'll need an HTML file to hold the basic layout of your app. Using a text editor, create index.html in the HelloGeo folder. Copy and paste the following code into the file:

<!DOCTYPE html>
<html>
<head>
    <title>HelloGeo</title>
    <meta id="viewport" name="viewport" content="user-scalable=no,
        width=device-width" />
    <link href="styles.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
    <div id="container">
        <div id="world">
            <img src="images/hellogeo.png" width="500" height="500" alt="world" />
        </div>    
        <div id="button">
            <h2>Hello world. Where am I?</h2>
			<button type="button" id="btnGPSDefault">Get my coordinates</button>
        </div>
    </div>

</body>
</html>

Let's review this code.

The !DOCTYPE line identifies this as an HTML5 file.

<!DOCTYPE html>

This line indicates the title of the app.

<title>HelloGeo</title>

The viewport metadata controls the behavior and initial appearance of the web page when it is displayed in the browser window. Setting user-scalable to no prevents the user from changing the zoom level. Setting width to device-width forces the browser window to match the width of the device.

<meta id="viewport" name="viewport" content="user-scalable=no, width=device-width" />

This line identifies the CSS style sheet associated with our app. Feel free to play around with the properties in the style sheet.

<link href="styles.css" rel="stylesheet" type="text/css" />

Between the <BODY> tags, we define containers for different sections of the screen.

The container element represents the whole screen. The styles associated with this section are determined by the container id. If you peek in the styles.css file, you'll see that the width and height correspond to the device screen size. If necessary, you can adjust these values.

<div id="container">

The world element corresponds to where we display the image of the world. 

<div id="world">
    <img src="images/hellogeo.png" width="500" height="500" alt="world" />
</div>

Finally, the button element defines the button area. This code creates a button that the user will be able to click. It isn't complete yet, since we'll need to associate an action with it. For now, we can check that it appears on the screen where we expect it.

<div id="button">
    <h2>Hello world, where am I?</h2>
    <button type="button" id="btnGPSDefault">Get my coordinates</button>
</div>

Test in a browser

We can test the basic layout of our app just by using an HTML5-compliant browser. Clicking the button won't have an effect since we haven't yet associated any JavaScript, but we can verify the layout.

  1. Browse to the index.html file that you created.
  2. Open the file in your browser. Here is what you should see:
This illustration shows the Hello World application running in a browser window.