Skip to main content
SVG GUI Makeover

SVG GUI Makeover of the Yahoo! Local Business Search application


This project is licensed under BSD.


Bored of the same old lcdui.*-based MIDP content? Are you looking for high resolution and scalable images and UI elements? Do you want slick animations and transitions? Would you like to compose your UI and its elements in a separate professional tool and then simply instantiate and animate them in your application?

Using SVG and JSR 226 can improve your development process, make your application dramatically more appealing, and improve usability significantly. And much of the hard work is done by tools and the underlying SVG engine. But how get started?

The goal of this project is to provide developers with a complete example of how a traditional lcdui.*-based MIDP application can be redone using SVG and JSR 226, including all source code and artwork of both the original application as well as the reworked version.

Watch the screencast


This page describes the "SVG GUI Makeover" of an existing lcdui.*-based application called "Local Business Search". More information and the full source code of this application can be found here as part of the Mobile Ajax Project

The Local Business Search application consists of three screens: The query screen, the result screen, and the map screen. The Yahoo! Local web service is used to search and retrieve business information that is then displayed in the application. We leave the underlying logic untouched but rework the application UI using SVG and JSR 226 technology.

With SVG and JSR 226 many improvements are possible. We can start by replacing the existing screens with SVG-based screens and add simple animations. Next, we can improve the usability by employing SVG techniques to create animated components such as scrolling lists and transitions. Finally, we can enhance the UI flow by utilizing overlays and transparency.

Not all of these have been implemented at this time. Currently, the code focuses on replacing the lcdui.*-based screens and using animations and a scrollable and zoomable list to improve the application UI and usability. These changes alone results in a dramatic improvement of the application and should give developers a good idea what is possible and how to get started in reworking their own content.

Additional changes and enhancements will be made over time.

Before-and-After Screen Shots

Here are some screen shots. On the left is the screen of the original application and on the right the SVG-based version. As you can see the difference is dramatic. But the pictures tell only a part of the story. The SVG version contains animations for cursor movement, text input, input focus, and list scrolling and zooming that you need to try out live to get a feel for it (see below for instructions).

Original query screen

  New screen with animated cursor and horizontally scrolling text fields

Original result screen

  New screen as a animated scrolling list with zooming capability

New result detail view invoked by "right-scroll" from result screen

Original map screen

  New screen - no visual difference from original screen

Where To Go From Here + Sources

The complete sources of the can be found as a NetBeans project in the Demo Box repository:

SVG-based version of Local Business Search

Check them out with subversion, open the top level of the sources in NetBeans (with Mobility Pack installed) and simply click the "Run" button to build and run the application and play with it.

Note: If NetBeans prompts you to "Resolve Conflicts" then you need to tell NetBeans the location of the Mobile Ajax libraries which are needed by both the original as well as the reworked Local Business Search applications.

Please Confirm