Archive for the ‘tutorial’ Category

HttpMultipartRequest: simple file uploads with J2ME

Monday, May 12th, 2008

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.

j2me file upload sample screenshot

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.

Parsing RSS feeds with J2ME and KXML

Friday, May 9th, 2008

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.

J2ME Kxml rss parser screenshot

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:

J2ME game code: let’s play Darts!

Monday, May 5th, 2008

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

J2ME game darts screenshot

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.

2007 Rome JavaDay Midlet screenshot

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.

How to implement a loading bar with J2me

Wednesday, April 30th, 2008

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

j2me canvas loading bar

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.

Building a fisheye menu in J2ME with JSR 226

Thursday, April 24th, 2008

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

J2ME fisheye menu

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

J2ME Table component with focus and scroll

Tuesday, April 22nd, 2008

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

J2ME canvas table screenshot

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.

Collapsible trees with J2ME

Tuesday, April 15th, 2008

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 :)
j2me collapsible 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.

Customizing game sprites with J2ME

Monday, April 14th, 2008

You know, my great passion are games, and here’s a first game-related tutorial :)

Often in games a nice feature to give to users it the possibility to customize their own character, for example changing colors of the different parts (hairs, eyes, shirt, and so on).

To support this features there are 2 possibilities:

  • Include a different image for each color of each different part
  • Replace colors by code

The second options will save you the effort to create these multiple images, and will strip down your JAR size. Also, it will allow you to support a lot more colors.

You can see a simple midlet showing how this can be done with simple code on the emulator page

For the full source code you can visit the Forum Nokia Wiki page: J2ME Customizing Game Sprites Color

How to draw gradients with J2ME

Saturday, April 12th, 2008

Gradients are a nice graphic element to be used within your game or application. But, wouldn’t it be great if you could use all the gradients you want, without using images?

And here is the Saturday Tutorial :)

Draw gradients with J2me

The gradients shown in the screenshot above are generated by the following straightforward method:

Gradient.gradientBox(Graphics g, 
	int color1, int color2, 
	int left, int top, 
	int width, int height, 
	int orientation)

For the full source code you can see the J2me Gradient tutorial on Forum Nokia Wiki

How to build a tab menu with J2ME

Friday, April 11th, 2008

Here is a tutorial showing how to build a simple tabbed menu using J2ME, that you can try live on the emulator page

J2me tabbed menu
This first version will support:

  • Full styling of tabs (bg color, fore color, font face, margin, paddings and corner radius)
  • Automatic horizontal scrolling, so that you can put as many tab you want, without caring about screen width

There’s still a lot of room for improvements, but we’ll leave them for the next tutorial :)

You can find a detailed tutorial with source code on Form Nokia Wiki: J2ME Tabbed Menu Tutorial.

Direct links to source code:

  • TabMenu.java: main class, to include in your projects to build Tabbed Menus
  • TabMenuCanvas.java: a sample Canvas using TabMenu component, useful to understand how to use it