The Blackberry platform offers the developer a few interesting choices if one wants to deleve deeper into the UI componenets. Here we see one such component known as the PictureScrollView. We use the PictureScrollView to design a screen which,

1. Contains a horizontal row of scrolling pictures in the top half of the screen, each one of which can be scrolled through or selected.

2. The lower half displays the enlarged picture which has been selected from the top half.

Our screen will have 3 small icon-pics in top half,

All in all, the UI(when center icon-pic is selected) will look like,

The Obvious part is that our PictureScrollScreen will extend from MainScreen.  The upper half of this screen will contain a PictureScrollField which would be containing an array of bitmaps. The lower half would be a BitmapField to display the enlarged Images. We would be intercepting the scroll event from the PictureScrollField by setting a FieldChangeListener onto it to achive the functionality,

/**
 * A class extending the MainScreen class, which provides default standard
 * behavior for BlackBerry GUI applications.
 */
public final class PictureScrollScreen extends MainScreen {
	int width = 0;
	int height = 0;
	static int count = 0;

	/**
 * Creates a new MyScreen object
 */
public PictureScrollScreen(int width, int height, long style) {
	// Set the displayed title of the screen
	super(style);
	((VerticalFieldManager) getMainManager())
			.setBackground(BackgroundFactory
					.createSolidBackground(Color.BLACK));
	this.setTitle("Picture Scroll");
	this.width = width;
	this.height = height;

	final Bitmap[] images = new Bitmap[3];
	String[] labels = new String[3];
	String[] tooltips = new String[3];

	images[0] = Bitmap.getBitmapResource("image1.jpg");
	labels[0] = "Label for image 1";
	tooltips[0] = "Tooltip for image 1";

	images[1] = Bitmap.getBitmapResource("image2.jpg");
	labels[1] = "Label for image 2";
	tooltips[1] = "Tooltip for image 2";

	images[2] = Bitmap.getBitmapResource("image3.jpg");
	labels[2] = "Label for image 3";
	tooltips[2] = "Tooltip for image 3";

	ScrollEntry[] entries = new ScrollEntry[3];
	for (int i = 0; i < entries.length; i++) {
		entries[i] = new ScrollEntry(images[i], labels[i], tooltips[i]);
	}

	final PictureScrollField pictureScrollField = new PictureScrollField(
			width / 2, height / 4);
	pictureScrollField.setData(entries, 0);
	pictureScrollField.setLabelsVisible(false);
	pictureScrollField
			.setHighlightStyle(HighlightStyle.ILLUMINATE_WITH_SHRINK_LENS);
	pictureScrollField.setHighlightBorderColor(Color.BLUE);

	pictureScrollField.setBackground(BackgroundFactory
			.createSolidBackground(Color.BLACK));

	/*
	 * PictureScrollField pictureScrollFieldBig = new
	 * PictureScrollField(width,(3*height)/4);
	 * pictureScrollFieldBig.setData(entries, 0);
	 * pictureScrollFieldBig.setLabelsVisible(false);
	 * pictureScrollFieldBig.setEnabled(false);
	 * pictureScrollFieldBig.setEditable(false);
	 * pictureScrollFieldBig.setCenteredLens(false);
	 * pictureScrollFieldBig.setImageDistance(1);
	 * pictureScrollFieldBig.setVisualState
	 * (Field.VISUAL_STATE_DISABLED_FOCUS);
	 * pictureScrollFieldBig.setBackground
	 * (BackgroundFactory.createSolidBackground(Color.BLACK));
	 */

		final int w = width;
		final int h = height / 2;
		Bitmap bmp = new Bitmap(w, h);
		images[0].scaleInto(bmp, Bitmap.FILTER_LANCZOS, Bitmap.SCALE_STRETCH);

		final BitmapField _bitmapField = new BitmapField(bmp, FIELD_HCENTER);
		_bitmapField.setBackground(BackgroundFactory
				.createSolidBackground(Color.BLACK));
		_bitmapField.setPadding(10, 5, 10, 5);

		pictureScrollField.setChangeListener(new FieldChangeListener() {
			public void fieldChanged(Field field, int context) {
				if (field == pictureScrollField) {
					int currentIndex = pictureScrollField
							.getCurrentImageIndex();
					Bitmap map = new Bitmap(w, h);
					images[currentIndex].scaleInto(map, Bitmap.FILTER_LANCZOS,
							Bitmap.SCALE_STRETCH);
					_bitmapField.setBitmap(map);
				}

			}
		});

		add(pictureScrollField);
		add(_bitmapField);
	}
}

So this is all about our little Salsa and Tango with the PictureScrollField. Hope you enjoyed it!

Feel free with any of your queries/doubts/improvements.

Advertisements