New Image Viewing Classes in JDE 5.0

Java Development

BlackBerry® Java® Development Environment v5.0 introduces two new user interface elements for displaying images on BlackBerry® smartphones. The PictureScrollField allows users to browse through many images. The ZoomScreen allows users to zoom and pan around images.


The picture scroll field is a horizontally, kinetically scrolling field for displaying images. ‘Kinetic’ is a fancy way of saying the pictures slow down before they stop animating. Developers can customize how the images are highlighted. The screen shot below shows a picture scroll field where a center lens is rendered over the selected picture.

Among other highlight styles, the picture scroll field can be customized to draw attention to the selected image by drawing the other images smaller.

Text descriptions such as titles or captions can also be displayed when an image is highlighted.

Here is a code snippet of what setting up picture scroll fields entails.

// import statements to put at the top of your class
import net.rim.device.api.ui.extension.component.PictureScrollField;
import net.rim.device.api.ui.extension.component.PictureScrollField.HighlightStyle;
import net.rim.device.api.ui.extension.component.PictureScrollField.ScrollEntry;
// … skipping lines
// create some entries
final int numImages = 2;
ScrollEntry[] entries = new ScrollEntry[ numImages ];
entries[0] = new ScrollEntry(someBitmap,
“label appears below image when highlighted”,
“text briefly appears over image when highlighted”);

// … skipping lines
// Initialize the picture scroll field
_pictureScrollField = new PictureScrollField(150, 100);
_pictureScrollField.setData(entries, 0);
_pictureScrollField.setHighlightBorderColor(Color.RED); _pictureScrollField.setBackground(BackgroundFactory.createSolidBackground(Color.LIGHTBLUE));

Zoom Screen

The ZoomScreen is a user interface element for zooming and panning around images. A navigation helper is overlaid on the image to indicate which part of the image is being displayed. On all BlackBerry smartphones, users click to zoom and hit escape button to zoom out. On BlackBerry smartphones with touchscreens, two fingers on the screen define a rectangle to zoom. The screenshots below will clarify the touch method of zooming.

Adding a zoom screen to an application is straightforward as the following code sample demonstrates.

// import statements to put at the top of your class
import net.rim.device.api.system.EncodedImage;
import net.rim.device.api.ui.extension.container.ZoomScreen;
// … skipping lines

// load an image.
EncodedImage image = EncodedImage.getEncodedImageResource(“screenSize.jpg”);

// Note that the zoom screen supports orientation info in the EXIF data
ZoomScreen zoomScreen = new ZoomScreen(image);

// push the screen on the display stack (code not shown).


Here is an exercise to use the PictureScrollField and ZoomScreen in conjunction. Write an application that will pop up a zoom screen when a user hits the space bar or taps on an image from a picture scroll field.

Join the conversation

Show comments Hide comments
+ -
  • Patrice


    i would like to know the answer of your exercice since i m trying to resolve that using images that will show another screen to the user on clik…i ve get to the point that my selection work fine but the switch happen before the click which impact the scrolling process as well…

    In case you find a minute of your precious time for me…



    • openstringed

      hey….is there anyway to find out the zoom level when zoomed in on the zoomscreen ?

blog comments powered by Disqus