Building attractive UIs in J2ME

… is not easy. If all you are looking for is functionality, then the Swing UI component library included in J2ME distribution is probably enough. It will work, but looks really dated:

J2ME Swing UI

This was almost OK few years ago until iPhone came and changed the playing field. For all its faults, iPhone has one of the best user interfaces I have ever seen. It is slick, smooth and intuitive. With a single release Apple raised the bar several notches. Suddenly people started requiring all kinds of extras that can only be categorized as “eye candy”: 3D – animated transitions, visual feedback of on-screen selection of items and advanced real-time rendered effects such as reflections.

So what can you do if you’re developing for mobile Java? There are almost too many 3rd party UI libraries available — for a pretty comprehensive listing see Forum Nokia listing:

After browsing through most of them I realized that if I want to make the UI look exactly I want, I need to create it myself. This means I needed to:

  1. Use a full screen application (see setFullScreenMode -method of Canvas)
  2. Create a subclass of javax.microedition.lcdui.Canvas to handle ALL display drawing and user input
  3. Use java.util.Timer class in your MIDlet class to create screen transitions and other animations
  4. Use UI elements drawn in an image editor to for controls, view borders etc

This is a lot of work, but the results can be as good as you can make them. J2ME API has some limitations, especially in the lack of support for most of java.lang.math. Also performance is somewhat limited, so for any kind of 3D effects you’ll need to use pre-rendered animations or try using JSR-184 API.

The most significant limitation I encountered was the font support in Nokia E71. Essentially you have only one font style available, and the smallest size is still quite large. I ended up using pre-rendered images for all static text and only using the system font for dynamically changing text.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s