load images dynamically on scroll in blackberry - image

Question

How to display images in the form of pages where only one page is displayed at a time on blackberry screen. On scrolling down subsequent images will load at run time. So that loading of images do not consume time at startup.
Edit: I am using loadimage function which loads images from blackberry device memory which loads images from specified path and resizing them.As number of images increases, it increases the startup time during opening of window.There is an in-built application(Media) in blackberry phone, where images load without taking any extra time. My idea is to display particular number of images which fit to the blackberry screen. As user scroll down to bottom of screen, application will then load and display more images. So my question is how to detect when user reached to bottom of blackberry screen and display one more row images.

Answer 1

Keep array of images url and current image index. Put a BitmapField on screen. Add menu items for Next/Prev. On Next load Bitmap from incremented index url, set it to BitmapField and invalidate screen. On Prev do the same with decremented index.
you can use button as well (maybe in storm) but menu is obligatory
load images in separate threads (especially if they are stored in web)
you can implement caching (in app memory or by saving images on device storage)
some text field may be helpful (file name, type, size, dimentions etc)
UPDATE
For this purpose you can use ScrollChangeListener
try this code:
class Scr extends MainScreen implements ScrollChangeListener {
static int mRowNumber = 0;
public Scr() {
getMainManager().setScrollListener(this);
//preload some images on the start
for (int i = 0; i < 20; i++) {
mRowNumber = i;
add(new BitmapField(downloadBitmap(), FOCUSABLE));
}
}
public static Bitmap downloadBitmap() {
Bitmap result = new Bitmap(200, 80);
Graphics g = new Graphics(result);
g.drawRect(0, 0, 200, 80);
g.drawText("row #" + String.valueOf(mRowNumber), 30, 30);
return result;
}
public void scrollChanged(final Manager manager, int newHorizontalScroll,
int newVerticalScroll) {
int testBottomScroll = manager.getVirtualHeight()
- manager.getVisibleHeight();
if (testBottomScroll == newVerticalScroll) {
mRowNumber++;
(new Thread(new Runnable() {
public void run() {
// simulating download
Bitmap bitmap = downloadBitmap();
// update ui in thread safe way
addBitmap(bitmap);
}
})).start();
}
}
public void addBitmap(final Bitmap bitmap) {
UiApplication.getUiApplication().invokeLater(new Runnable() {
public void run() {
getMainManager().add(new BitmapField(bitmap, FOCUSABLE));
}
});
}
}
PS the problem with this approach is you will be able to catch scroll event only if there are enough images on screen. Consider using Screen.navigationMovement(int, int, int, int) then. And don't forget to test it with trackwheel and touchscreen.
Btw my opinion is that it would be better to load all images at once using some thread queue (so images will be loaded asynchronously without locking ui)