Christian Engvall

This post provides an example of how to work with phonegap and multiple platforms. What folder structure to use and how to share the www folder between projects. Platforms used are iOS and Android. This example project can be downloaded at github but i recommend reading the post first.

Folder structure

The www folder is located in the top folder and linked in under android and iOS folders (windows phone and blackberry too if you’d like, but thats not covered here) -www
-Android
-IOS
(–WP)
(–Blackberry)

Starting with iOS

Start with creating a new Cordova-Based Application following these instructions on the phonegap wiki. But stop when the instruction tells you to copy the www folder and continue here. Save this application in your IOS folder.

You’re back? Good! let’s continue. Open Finder and navigate to your application. You should see a folder called www in the folder where you created the cordova based application. After copying it to the root folder your folderstructure should look like this:

Folderstructure

Now drop the www folder into the xcode project(images borrowed from phonegap wiki):

Cordova project

Choose the following options and click finish:

Cordova project options

Now click on run and your cordova application is working!

Cordova project in iOS simulator

Now we’re done with the IOS part, Let’s continue to Android and Eclipse.

Continuing with Android

Follow this guide to set up your Phonegap project with Eclipse for android. Skip the part with creating the www folder and continue here when you’re done.

Now our folder structure should look like this:

Folderstructure - Android

Now if you try to run the project in the simulator you get the following error, which we will deal with next:

Folderstructure - Android

Now let’s link the www folder in the assets folder. Open a terminal and navigate to your assets folder and create a symbolic link to the www folder:

ln -s ../../www/ www

Or if you are working with the Android project on windows you have to open a console and create a link with this command:

mklink /D c:\pathtoproject\Android\assets\www c:\pathtoproject\www

Note: If you’ll be using git you want to add assets/www to your .gitignore file to avoid having trouble with commits on Windows. You can get my phonegap gitignore file here.

And we are almost done, but first we must add a reference to the cordova.js file for android. In the phonegap archive you downloaded when you first installed it, you got a folder called lib. And inside that folder you another one called Android/example. If you go navigate to the www folder for that example project you see a file called cordova-1.5.0.js.

Copy that file to your own www folder and rename it to cordova-1.5.0-android.js

Open up index.html and go to the line that now contains this:

<script charset="utf-8" type="text/javascript" src="cordova-1.5.0.js">// <![CDATA[

// ]]></script>

and replace it with this:

<script type="text/javascript">// <![CDATA[
if (navigator.userAgent.toLowerCase().match(/android/)) {
document.write('<script charset="utf-8" src="cordova/cordova-1.5.0-android.js"><\/script>');
}
else if (navigator.userAgent.toLowerCase().match(/iphone/) || navigator.userAgent.toLowerCase().match(/ipad/)) {
document.write('<script charset="utf-8" src="cordova/cordova-1.5.0-ios.js"><\/script>');
}
// ]]></script>

And now you are ready to run the project on your emulator or android phone. As i wrote at the top of this post you can download the example project from github to see how i have done it if you’re having trouble.

How to show a Google map in your Phonegap app using Google Map api V3, and what whitelist urls to add to your project. This post expect you know how to set up a new Phonegap project.

1. Start by adding a reference to Google maps api in index.html

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />

Then add a div that will contain the map. Choose an id like “map_canvas”. That id will be used to add our map from our javascript later on.

<div id="map_canvas">
</div>

##2. Create a new javascript file called googlemap.js in the www folder and add the following content

function GoogleMap(){

this.initialize = function(){
var map = showMap();
}

 var showMap = function(){
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(-33, 151),
mapTypeId: google.maps.MapTypeId.ROADMAP
}

var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

return map;
}
}

and add a reference to it in index.html

<script type="text/javascript" src="googlemap.js"></script>

the mapOptions variable contains information about zoomlevel, where the center of the map is and what kind of map we want to show. And the line containing the map variable uses getElementById to get our map_canvas and adding the map.

3. Whitelisting google urls

Now we must add the following urls to our Cordova.plist under externalHosts if using Xcode:

*.google.com
*.googleapis.com
*.gstatic.com

4. Showing the map

To show the map we must run the initialize function in googlemap.js. Since we are using the example index.html from phonegap we add these lines to the onDeviceReady function in index.html

function onDeviceReady(){
    var map = new GoogleMap();
    map.initialize();
}

Now run the app and you should se a map over Australia.

5. Adding markers

To add markers to our map we use the LatLng and Marker object from Google API. Edit the initialize function in googlemap.js to look like this:

function GoogleMap(){

this.initialize = function(){
var map = showMap();
addMarkersToMap(map);
 }

and add the following function, called addMarkersToMap:

var addMarkersToMap = function(map){
var latitudeAndLongitudeOne = new google.maps.LatLng('-33.890542','151.274856');

var markerOne = new google.maps.Marker({
position: latitudeAndLongitudeOne,
map: map
});

var latitudeAndLongitudeTwo = new google.maps.LatLng('57.77828', '14.17200');

var markerOne = new google.maps.Marker({
position: latitudeAndLongitudeTwo,
map: map
});
 }
}

Here we added a function called addMarkersToMap and called it from the initialize function. What it’s doing is adding two markers on our map at the given latitude and longitude. And when we create a new marker object, like markerOne, we give the object the position and which map we want to add the marker to.

But if we run the app now we only see one marker. Let’s fix that.

6. Zooming out the map to show all markers

to zoom out the map without knowing which zoomlevel to use we are going to use the LatLngBounds object from the Google Map API.

Start off by adding the following line first in the addMarkersToMap function:

var mapBounds = new google.maps.LatLngBounds();

and before the closing tag of the function add these lines:

mapBounds.extend(latitudeAndLongitudeOne);
mapBounds.extend(latitudeAndLongitudeTwo);

map.fitBounds(mapBounds);

The addMarkersToMap function now looks like this:

var addMarkersToMap = function(map){
var mapBounds = new google.maps.LatLngBounds();

var latitudeAndLongitudeOne = new google.maps.LatLng('-33.890542','151.274856');

var markerOne = new google.maps.Marker({
position: latitudeAndLongitudeOne,
map: map
});

var latitudeAndLongitudeTwo = new google.maps.LatLng('57.77828', '14.17200');

var markerOne = new google.maps.Marker({
position: latitudeAndLongitudeTwo,
map: map
});

mapBounds.extend(latitudeAndLongitudeOne);
mapBounds.extend(latitudeAndLongitudeTwo);

map.fitBounds(mapBounds);
 }

Now we’re done, run the app and the map now zooms out so you can see the marker which we added in Sweden.

I’ve created an example application of this and pushed it to a repository on Github, have a look at it if you want to see the code.

From now on posts will be in English. Hopefully my posts can provide help for more people that way. The posts will be translated one by on but let me know if i forgot to translate something on the site.

Spelling errors

If you find any spelling or any other errors please let me know.

För att schemalägga script i OSX Lion används launchd. Lägg till ett jobb genom att spara en .plist i mappen /Users/%användare%/Library/LaunchAgents. Ett exempel på en .plist är:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple Computer//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
 <dict>
 <key>Label</key>
 <string>se.christianengvall.phptelldus</string>
 <key>ProgramArguments</key>
 <array>
 <string>/usr/bin/php</string>
 <string>/Users/%användare%/Sites/Telldus/hello.php</string>
 </array>
 <key>StartInterval</key>
 <integer>10</integer>
 </dict>
</plist>

Under Label namnger man sitt jobb, som man sedan kan se genom att skriva “launchctl list” i terminalen. I ProgramArguments anges att vi vill använda php för att köra filen hello.php. StartInterval anger i sekunder hur ofta jobbet kommer att köras.

i hello.php finns logiken man vill utföra, här är ett exempel som skriver ut ett meddelande i Systemmeddelanden:

<?php
 syslog(LOG_WARNING, "meddelande som syns i sysstemmeddelanden");
?>

Starta jobb med launchctl

För att köra jobbet läggs det till genom att skriva följande i ett terminalfönster:

launchctl load  /Users/%användarnamn%/Library/LaunchAgents/se.christianengvall.phptelldus.plist

Starta sedan Systemmeddelanden och klicka på “Alla meddelanden” så kommer texten “meddelande som syns i sysstemmeddelanden” dyka upp var tionde sekund.

Stoppa samma jobb med launchctl

Stoppa sedan jobbet genom att skriva:

launchctl unload  /Users/%användarnamn%/Library/LaunchAgents/se.christianengvall.phptelldus.plist

Jag håller för tillfället på att vidareutveckla en mjukvara som skulle behöva visa lite sportresultat, och lite mer precist ska den visa hockeyresultat. Jag hade hoppats på att hockeyligan.se hade ett publikt api som man kunde använda. Tyvärr fanns det inget sådant men om någon vill visa resultaten i de senaste matcherna så hittade jag en url på hockeyligan.se som returnerar just detta i JSON. Förhoppningsvis kan den här informationen hjälpa någon!

URL:en är: http://www.hockeyligan.se/elitserien-arena/currentstandings och det används på hockeyligan.se för att skriva ut det som visas till höger i denna bild:

Current standings

JSON-svar

i json strängen finns följande information:

Current standings JSON

• id : matchens id, kan användas i följande url: http://www.hockeyligan.se/elitserien-arena/37713
• isaId : ?
• homeTeamCode : Hemmalagets förkortning
• awayTeamCode : Bortalagets förkortning
• startDateString: Startdatum för matchen
• startDateTime : datum med tid för matchstart
• arenaActive: ?
• status : Status på matchen, avslutad match, ej spelad match eller pågående match.
• statusString: Samma som status fast översatt text
• homeTeamGoals : antal mål hemmalaget gjort.
• awayTeamGoals: antal mål bortalaget gjort.