Mobile games development

Note: You can find this article also on Forum Nokia Wiki: How to use Google Maps data in mobile applications

Today we’ll see how to use Google Maps data within a mobile application.
Google Maps offers REST services that allows accessing its data with simple HTTP requests, so we can easily integrate them within our mobile apps.

Signup for a Google Maps API key

First thing you must do is to signup on this page:
http://code.google.com/apis/maps/signup.html
Once done, you’ll get a key (a simple String) you’ll use for all your query to Google Maps services

Static maps

Standard Google Maps code is suited for web applications, since it includes alot of Ajax functionalities, that are not really useful if you’re building a mobile application. So, the solution is to use static maps service, that will allow us to retrieve single images, easily usable within our apps.

Static maps service supports different image formats (png32, gif, jpg) and customizable image size, so that we can get perfect images for all our needs. As an example, suppose we want to retrieve the location at:

• latitude: 41.867878
• longitude: 12.471516

We can simply retrieve this URL with an HTTP GET request:

http://maps.google.com/staticmap?center=41.867878,12.471516&
format=png32&zoom=8&size=240x320&key=<API_KEY>

This way, we’ll get a PNG32 image, with a width of 240 pixels, and a height of 320, centered at point (41.867878,12.471516), and with a zoom level of 8 (zoom can go from 0 to a maximum level of 19).

Geocode an address

From Google Maps docs:
Geocoding is the process of converting addresses (like “1600 Amphitheatre Parkway, Mountain View, CA”) into geographic coordinates (like latitude 37.423021 and longitude -122.083739)

So, let’s assume we want to build an application that displays the address typed by our user. We should firstly geocode its address to geographics coordinates.
To do this, Google Maps offer another REST service easily accessible with simple HTTP requests.

Let’s say you want to geocode this address “Leicester Square, London”, then you’ll request this URL:

http://maps.google.com/maps/geo?q=Leicester%20Square,%20London
&output=csv&key=<API_KEY>

and you’ll get this output:

200,6,51.510605,-0.130728

Where:

• the first number is a code, that in this case (200) means that geocoding has been successfull (for a full list of status codes you can see here: [1])
• the second number gives a measure of geocoding accuracy (from 0 to 9 - maximum accuracy)
• 3rd and 4th numbers represent latitude and longitude of the geocoded address, so these are the coordinate we’ll use to retrieve the map through the static map service we’ve seen before

As you can see, there is an ‘output’ parameter within the geocode request, and this means that we can choose the output format we prefer for our needs. Supported formats are:

• xml
• kml (same as xml, but with different Content-Type)
• json (not really useful for mobile apps)
• csv (comma separated values)

Proxy server, usage limits

Since your Google Maps API key is bound to a specific URL, to access map services you should setup a proxy server that will receive HTTP requests from your mobile application and forward them to Google Maps REST URLs, giving back Google responses to mobile clients.

Also, be aware that there is a limit to the number of requests (both for static maps and geocode service) you can do each day. For personal uses they’re more than enough, anyway consider this point if you plan to develop commercial services.

Google Maps J2ME API and sample application

Now, you want code right? Here it is:

• a J2ME class to access Google Maps REST services: http://wiki.forum.nokia.com/index.php/J2ME_Google_Maps_API
• a sample application using Google Maps data: http://www.jappit.com/index.php?page=emulator&midlet=google_maps

Today’s code is related to file uploads using J2ME. We’ll use Http POST MultiPart requests to handle and transfer data from J2ME application to server; since there is no builtin support for MultiPart, we’ll have to build the request body by hand.

Code is limited to 1 class only (HttpMultipartRequest), that will be easy to include and easy in your code, just instatiate it with its constructor:

HttpMultipartRequest(String url, Hashtable params,
String fileField, String fileName,
String fileType, byte[] fileBytes)

and then send data to server (and get response) with its send() method. As you can see from the constructor, this implementation support also parameter passing, that will be posted to server together with the file bytes.

Detailed and explained code (with sample client and server code) is available here: HTTP Post multipart file upload with J2ME Wiki article. To directly download source code, click here.

Some days have passed since last J2ME tutorial, so here is a fresh new one!

Today we’ll see how parsing a RSS feed with J2me is easy using KXML library, a fast and small XML pull parser, expecially suited for constrained environments like mobile devices. A live sample, parsing the RSS feed of this blog, is available here.

The detailed explanation of source code is available on my Forum Nokia Wiki article: J2ME RSS Parser with KXml. If you’re interested only in plain source code, you can pick it up here (it includes also the sample midlet you find on the emulator page). To use KXmlRssParser class, you must simply do:

KXmlRssParser parser = new KXmlRssParser();
 
Vector rssItems = parser.parse(yourFeedURL);

and the parse() method will return the complete list of parsed Items, as instances of RssItem class. Source code is of course simplified, for the purpose of this tutorial, as it only considers title, link and description tags of each <item>, but once you understand KXml logic you can extend it, without much effort, to include other infos from RSS feed.

Other resources you might find useful:

• KXML JavaDocs: http://kxml.sourceforge.net/kxml2/javadoc/
• RSS 2.0 Specifications: http://cyber.law.harvard.edu/rss/rss.html

Darts is an ideal game for mobile users, since it does only require few seconds for a match, and could be really helpful while waiting for a bus.. (If you must wait a bus in Rome, it’s easy you’ll become a Darts champion within a day :))

This simple game was originally included, as easter egg, in the midlet built for 2007 Edition of Rome JavaDay, to help folks being awake during long talks For a live test you can go directly to the emulator page.

Now, It’s source code is fully available to everyone to (ab)use, and please be kind with me for the total lack of comments…

Here is the source code, and the full sample midlet if you want to try it out on your phone.

Do you need a simple, effective j2me loading bar for your long-running operations? And would you like to avoid using (horrible) forms and gauges? Here’s a simple component you can freely use, modify or even ignore

You can see a live preview on the emulator. To use it, you’ll simply instantiate and start it, like this:

LoadingBar bar = new LoadingBar(100, 40, 5, 10, 0xff0000);
bar.start();

For an explanation of source code you can go to my Forum Nokia Article: J2ME Canvas Loading Bar. If you simply want rude code, here it is: LoadingBar.java, and here is a sample Canvas using it: LoadingBarCanvas.java.

TvProgrammi.com, the Italian TV guide, finally has its mobile version!

If you have a phone supporting J2me (MIDP 2.0), you can download its first version directly from www.tvprogrammi.com.

Navigation is really straightfoward:

• 1 .. 9 keys allow channel switching
• left/right keys change the selected date
• up/down keys scroll the program text
• left soft key updates programs informations
• right soft key closes the application

This version is not suitable for devices with small displays (let’s say, with a width of less than 128px), but for those a new version will be released soon.

I’ve always loved fisheye menus but, while there are quite a lot of ready-to-use components for web applications, when it comes to mobile it’s hard to find something. What better reason to build one?

Since we’ll have dynamically resizable icons, a natural choice to build one with J2ME is JSR 226, that give us full support of SVG Tiny. This will limit portability of code, since this JSR is not supported on all J2me phones, but support is rapidly growing with latest generation phones.

As you’ll see, code is quite straightforward, and great part of it is dedicated to coordinates/size calculations, to create that “slide/resize” effect that is soooooo cool

You can find menu source code on my Forum Nokia Wiki article: J2ME Fisheye Menu with JSR 226, or download sample midlet here (and source code here).

Sometimes it happens that you must draw a table within a J2ME application. Even if there are some nice UI frameworks out there, they’re simply oversized if you need only a simple, plain, scrollable table.

This is the reason why I’ve decided to write a custom component that you can use to draw tables, with the following features:

• Focusable cells
• Vertical scrolling
• Auto-sizing columns

Some nice features to be added in a future version could be, for example:

• Cell wrap when moving from a cell to another
• Horizontal scrolling, to support tables with a lot of columns
• Support for headers

You can see a live version on the emulator page. Full midlet source code is available here.

FaceRoller is a micro-blogging service with integrated picture and geo-locating funcionalities: practically, you snap a photo, write what you want and tell where you are, and the job is done and, if you’ve got a Flickr or Facebook account, your pictures will be automatically uploaded there.

It has also a J2me mobile client to upload photos when you’re on the go, directly from your java enabled phone.

If you want to give it a try signup on FaceRoller and then download the j2me client.

We’re still developing and expanding its concept, so comments and feedback are welcome!

Trees are not often used within j2me applications, but since it’s quite always a mess to deal with them, here’s a ready to use component for managing and drawing collapsible/scrollable trees

As usual, you can go to Forum Nokia Wiki for the full source code: J2me Collapsible Trees, or go to the emulator page to have a first look at a sample midlet using this component.