Select your GUI

Form

Using Forms is a fast way to create good-looking applications. On the full screen touch Nokia devices, the Form UI is quite attractive and includes a number of nice enhancements, like the CategoryBar and action icons, which make this an attractive choice. Forms automatically mirror the current theme, but it can be difficult to customise the look of a Form UI.

If you want the fastest way to a great UI and still need some parts of the interface to be highly tailored, a nice approach is to go to the NetBeans IDE’s drag-and-drop Form creation tool, then add with code one or more CustomComponent objects to the interface. This really gives the best of both worlds – fast application creation, and pixel perfect tailoring just where it is needed.

Unfortunately Forms are not as twitchy fast as Canvas and GameCanvas, and they are generally not flexible enough to create games. For example, animation on a Form is much slower than on a Canvas, and there is no way to influence the vertical scroll position, animate transitions between screens, or shift to a full screen view. You can, however, slightly increase the performance when changing screens by using just one Form and re-populating it with new Items.

If you are not sure which UI to use, use Form. It is the easiest to learn, in many ways the most capable, and you can mix in Canvas or GameCanvas for individual screen later as needed so you are not “stuck” with your choice.

Canvas

Many professional applications are built on top of Canvas because it is highly customisable. Canvas is great for creating custom graphics with good performance, but you have to take care of render timing yourself, or you can use Nokia’s FrameAnimator class to quickly create effects such as kinetic scrolling. However, keep in mind that working with a Form usually requires less developer effort, since on a Canvas you must take care of all details, such as scrolling and painting the screen.

The basic operating mode of Canvas is that any part of your code can call Canvas.repaint to signal that painting should occur soon. The system then queues a Canvas.paint operation on the Event Dispatch Thread (EDT), and once any previously queued activities complete, your Canvas.paint method gets called. From a performance standpoint, keep in mind that all the code in your paint routine is running on the EDT, so any long delays such as reading from flash memory or the network need to be clearly isolated from your painter.

Canvas also provides methods for handling low-level events. Games, for example, should be done using Canvas or GameCanvas. You can also switch between Canvas-based screens and Forms, so that, for example, settings view of a game is implemented as Form but the actual game view is implemented as Canvas.

The most important performance tip for navigating through a Canvas-based UI is to implement your own View class to represent each screen, and paint all Views on one Canvas rather than switching from one Canvas to another, which can be slow and does not give you the possibility of animating the transition for smooth effect. Note that though an animated transition between screens is in reality slower than just painting the next screen, it feels much nicer, and if the transition starts the moment the user touches the screen, the user’s perception of application smoothness and performance can actually be higher than if the new screen just bumps into place. Our interest in performance is about having the extra phone resources for nice effects and experiences, so take full advantage of this with Canvas to create your own custom effects and the precise look that supports your game or brand values.

Nokia has provided a large number of enhancements to make the Canvas User Experience (UX) better and programming easier on Nokia Series 40 phones. These include gesture recognition, frame animation, icon commands, the category bar for screen navigation, scalable fonts, an on-Canvas text editor, and advanced and fast translucent drawing routines. Together these go a long way in making Canvas creation easier and more fun. These enhancements work equally well on GameCanvas.

LWUIT

LWUIT (Lightweight User Interface Toolkit) is a toolkit for creating SWING-like applications without some of the complexity of SWING. Like Form, it offers basic components, but it adds to this better layouts, styles and theming, bundling own fonts into your application, and animated screen transitions. It is quite customisable, and the layout of screens can be designed using a resource editor program. So, if you are willing to spend some time on learning a new UI library, this might be a solution to create something attractive relatively quick.

Since LWUIT is a library that is not bundled with any phone, applications which use it must include a LWUIT JAR file and bundle that into their application. Nokia has created a version of LWUIT 1.5 which is optimised for Nokia Series 40 phones. It runs faster than baseline Oracle LWUIT 1.5 and includes support for Nokia theming, enhanced text editing, touch and type keyboards, full touch virtual keyboard, and navigation using the CategoryBar. LWUIT is available as a plugin in the Nokia SDK 2.0 for Java. You can also find more details and latest versions here.

There are many good things about LWUIT. Performance can be acceptable in many cases, but you should be aware of the following when making your choice:

If these performance tradeoffs are acceptable, then LWUIT can be an excellent and highly productive choice for making a more complex and beautiful user interface for business and consumer applications without having to implement your own painter routines and screen transition effects.