Java ME on Symbian OS : Handling Diversity - Handling Screen and Display Diversity

All Java ME developers are familiar with issues of screen and display differences.

1. Proprietary Solutions

In S60 5th Edition and some of the S60 3rd Edition devices, proprietary JAD attributes were introduced to automatically handle scaling and orientation switches. For the full list of proprietary S60 JAD attributes please refer to the Java ME Developer Library.^[]

^[] www.forum.nokia.com/document/Java_ME_Developers_Library/

Nokia-MIDlet-Target-Display-Size specifies the target size for the MIDlet and Nokia-MIDlet-Original-Display-Size spec-ifies the screen for which the MIDlet was designed. Automatic scaling does not distort image aspect ratio. The content is scaled to fit the display dimensions and then centered on the display with black color used to fill at the sides (see Figure 1).

Figure 1. Setting a constant MIDlet display area

An additional attribute Nokia-MIDlet-Canvas-Scaling-Orientation-Switch indicates if the MIDlet can support the resolution specified in Nokia-MIDlet-Original-Display-Size in both portrait and landscape resolutions. For example, you could specify that your MIDlet display area is 240×320 in both portrait and landscape modes by specifying in the JAD:

Nokia-MIDlet-Canvas-Scaling-Orientation-Switch: false
Nokia-MIDlet-Original-Display-Size: 240,320

If you add additional attributes that change how the screen is divided (e.g., Nokia-MIDlet-On-Screen-Keypad adds a virtual keypad to the screen), there are even more combinations that can be used by your MIDlet. Adding the following JAD attributes adds the virtual keypad and enables orientation switches (see Figure 2):

Nokia-MIDlet-Canvas-Scaling-Orientation-Switch: true
Nokia-MIDlet-Original-Display-Size: 240,320
Nokia-MIDlet-On-Screen-Keypad: gameactions

Figure 2. Scaling, orientation switches and virtual keypad

An additional JAD attribute in S60 5th Edition, Nokia-MIDlet-App-Orientation, allows MIDlets to force either portrait or landscape UI orientation. MIDlets need to add the JAD attribute with the value portrait or landscape. If the attribute is undefined, the MIDlet is required to support dynamic orientation switching.

2. Generic Solutions

The screen and display parameters are the size and the color depth. MIDlets should never assume any specific screen size. Instead, they should query the size of the display and adjust their view accordingly.

Here is a snippet of code taken from DisplayDetectorMIDlet in the Java ME Detectors suite:

public void detectScreenSize(){
  MyCanvas canvas = new MyCanvas();

  // detect normal size
  int width = canvas.getWidth();
  int height = canvas.getHeight();
  form.append("width:" + width);
  form.append("height:" + height);

  // detect full screen size
  canvas.setFullScreenMode(true);
  width = canvas.getWidth();
  height = canvas.getHeight();
  form.append("full width:" + width);
  form.append("full height:" + height);
}

Please note the second check of width and height, after setting the screen mode to full screen.

A few of the generic solutions to diversity in screen size are tiling, centering the application view, scaling the view images and deployment of multiple size images.

Using tiling you can use smaller images and render them repeatedly to cover the whole screen or parts of the screen. You could use a single image and render it at various locations or you could use multiple images and tile them according to some policy. For example, you could use three images, rendering two of them at the corners and tiling the third across the screen between the two corners (see Figure 3).

Figure 3. An image tiled between two others

You could query the screen dimensions and render the image in the center. To fill the gaps left between the image and the edges of the screen, you could use a background color or tiling.

MIDP does not have a library for image scaling. However, you could find such a library or develop it yourself. Then, you need to decide when in the execution of the application is the most appropriate time to do the scaling. For example, you could do the scaling once at the first launch and cache the scaled images in the file system to be loaded for subsequent runs.

If you deploy multiple images of various sizes, your application can choose at run time which one is closest to the required dimensions.

Display detection is less frequently used but is still useful in certain cases. A few display properties can be retrieved using the static Display instance, such as the number of colors that can be represented, the supported number of alpha transparency levels, the best image height and width for a given image type, and the color specifiers that match well with the native color scheme.

The following code displays some of those properties, as shown in Figure 4:

public void detectDisplay(){
  Display display = Display.getDisplay(this);
  form.append("\nnumColors:" + display.numColors());
  form.append("\nalpha:" + display.numAlphaLevels());
  form.append("\nfg color:" + Display.COLOR_FOREGROUND);
  form.append("\nbg color:" + Display.COLOR_BACKGROUND);
  form.append("\nleh:" +
                        display.getBestImageHeight(Display.LIST_ELEMENT));
  form.append("\nlew:" + display.getBestImageWidth(Display.LIST_ELEMENT));
}

Figure 4. Querying Display and detecting screen dimensions

Generally the display attributes are useful for creating CustomItem objects that match the user interface of other items and for creating user interfaces within the canvas that match the user interface of the rest of the system.