Smartphones

A cross-platform loading screen for mobile Java-enabled devices

Developer Heshan Perera describes how to use the Lightweight User Interface Toolkit for Java ME to create a simple dialog object that serves as a loading screen.

The Lightweight User Interface Toolkit for Java ME (LWUIT) provides an easy way to make a mobile application cross platform. However, if you try to create a loading screen in the LWUIT, you'll notice that the feature is not directly available in the library. Though almost all native APIs of mobile platforms such as Android, BlackBerry, and iPhone contain loading dialog classes that can be used out of the box, you may not be able to mix native UI components with those of LWUIT.

In order to achieve this when using a mix of LWUIT and the native BlackBerry API, you need to call the show() method of a dialog object, which is set to time out after a pre-specified time in milliseconds. This should be programmed to happen just before a time-consuming task. This results in the time-consuming task commencing after the specified timeout period of the dialog object. Don't expect the dialog to disappear once the timeout period expires because it won't. The UI thread does not fire until the other time-consuming task is complete. I have tested this technique in situations where highly time-consuming HTTP calls take place.

Here is a code example of a simple dialog object serving as a loading screen:

public static void displayLoadingDialog(String title) {
final Dialog dlg = new Dialog();
dlg.setTitle(title);
TextArea txtArea = new TextArea();
txtArea.setAlignment(Component.CENTER);
dlg.setLayout(new CoordinateLayout(dlg.getWidth(), dlg.getHeight()));
txtArea.setX(0);
txtArea.setY(0);
txtArea.setFocusable(false);
txtArea.setEditable(false);
txtArea.setText("Loading Please Wait...");
// THE FOLLOWING IS THE IMPORTANT PART OF THIS CODE, SETTING THE DIALOG TO TIMEOUT IN 1 SECOND (1000 MILLISECONDS)
dlg.setTimeout(1000);
txtArea.setPreferredH(dlg.getHeight() - 100);
txtArea.setPreferredW(dlg.getWidth() - 100);
dlg.addComponent(txtArea);
dlg.show(50, 50, 50, 50, true);
// DISPLAYS THE DIALOG, HALTING OTHER THREADS FOR 1 SECOND, THEN DISAPPEARS AFTER THE NEXT TASK COMPLETES.
}

The lines of code that are absolutely necessary to serve the purpose of a loading screen are:

final Dialog dlg = new Dialog();
dlg.setTitle(title);  // 

It not necessary to set the title. I used it here to provide the indication of a background task taking place. You may use another method to indicate to the user (i.e., by setting a suitable background image for the dialog).

dlg.setTimeout(1000);
dlg.show(50, 50, 50, 50, true); //

Other overloaded methods are available; this one creates a center aligned dialog with 50PX margins from the top, bottom, right, and left.

Now call this function right before a time consuming task, for example:

 displayLoadingDialog("Making HTTP Call");
 //CODE FOR HTTP CALL OR OTHER TIME CONSUMING TASK

You can reduce the timeout value, but there is a pitfall to doing so -- the specified time may not be sufficient to draw the dialog on the screen. In my experience, on second is the optimal time. You can also add whatever images you want to the dialog.

2 comments
Spitfire_Sysop
Spitfire_Sysop

I assume you haven't tested this exact code yet: "The lines of code that are absolutely necessary to serve the purpose of a loading screen are: final Dialog dlg = new Dialog();dlg.setTitile(title); // " The "setTitile" should be "setTitle"? No?

Heshan Perera
Heshan Perera

Yes the fact that it should be "setTitle();" is correct. But no, the code was tested, the above is a typo which probably occurred after being shifted to create the article. Not an excuse! Thank you for pointing that out!