How to download online image after display list data?

Question

For my current code, it will download the images first then only display data and cause the device like lagging.

public Custom_ListField(Vector content, boolean islatest) {
    this.content = content;
    this.islatest = islatest;

    newsid = new int[content.size()];
    title = new String[content.size()];
    category = new String[content.size()];
    date = new String[content.size()];
    imagepath = new String[content.size()];
    catsid = new int[content.size()];
    imagebitmap = new Bitmap[content.size()];
    ischeck = new boolean[content.size()];

    for (int i = 0; i < content.size(); i++) {
        newslist = (List_News) content.elementAt(i);
        newsid[i] = newslist.getID();
        title[i] = newslist.getNtitle();
        category[i] = newslist.getNewCatName();
        date[i] = newslist.getNArticalD();
        imagepath[i] = newslist.getImagePath();
        catsid[i] = newslist.getCatID();
        ischeck[i] = false;

        if (!imagepath[i].toString().equals("no picture")) {
            if (Config_GlobalFunction.isConnected())
                imagebitmap[i] = Util_ImageLoader.loadImage(imagepath[i]);
            else
                imagebitmap[i] = localimage;
        }
    }
    initCallbackListening();
}

private void initCallbackListening() {
    callback = new ListCallback();
    this.setCallback(callback);
    this.setRowHeight(-2);
}

private class ListCallback implements ListFieldCallback {
    public ListCallback() {

    }

    public void drawListRow(ListField listField, Graphics graphics,
            final int index, int y, int width) {
        currentPosition = index;

        if (!imagepath[index].toString().equals("no picture")) {
            float ratio = (float) ((float) localimage.getHeight() / (float) imagebitmap[index]
                    .getHeight());
            Bitmap temp = new Bitmap(
                    (int) (imagebitmap[index].getWidth() * ratio),
                    (int) (imagebitmap[index].getHeight() * ratio));
            imagebitmap[index].scaleInto(temp, Bitmap.FILTER_BILINEAR,
                    Bitmap.SCALE_TO_FIT);
            imagebitmap[index] = temp;

            graphics.drawBitmap(
                    Display.getWidth()
                            - localimage.getWidth()
                            - 5
                            + ((localimage.getWidth() - imagebitmap[index]
                                    .getWidth()) / 2),
                    y
                            + (listField.getRowHeight(index) - imagebitmap[index]
                                    .getHeight()) / 2,
                    imagebitmap[index].getWidth(),
                    imagebitmap[index].getHeight(), imagebitmap[index], 0,
                    0);

            graphics.setColor(Color.BLACK);
            text = Config_GlobalFunction
                    .wrap(title[index], Display.getWidth()
                            - imagebitmap[index].getWidth() - 15);

            for (int i = 0; i < text.size(); i++) {
                int liney = y + (i * Font.getDefault().getHeight());
                graphics.drawText(
                        (String) text.elementAt(i),
                        5,
                        liney + 3,
                        DrawStyle.TOP | DrawStyle.LEFT | DrawStyle.ELLIPSIS,
                        Display.getWidth() - imagebitmap[index].getWidth()
                                - 10);
            }
        } else {
            graphics.setColor(Color.BLACK);
            text = Config_GlobalFunction.wrap(title[index],
                    Display.getWidth() - 10);
            for (int i = 0; i < text.size(); i++) {
                int liney = y + (i * Font.getDefault().getHeight());
                graphics.drawText(
                        (String) text.elementAt(i),
                        5,
                        liney + 3,
                        DrawStyle.TOP | DrawStyle.LEFT | DrawStyle.ELLIPSIS,
                        Display.getWidth() - 10);
            }
        }

        if (text.size() == 2) {
            graphics.setColor(Color.GRAY);
            graphics.drawText(date[index], 5, y
                    + Font.getDefault().getHeight() + 3);

            if (islatest) {
                graphics.setColor(Color.RED);
                graphics.drawText(category[index], Font.getDefault()
                        .getAdvance(date[index]) + 15, y
                        + Font.getDefault().getHeight() + 3);
            }
        } else if (text.size() == 3) {
            graphics.setColor(Color.GRAY);
            graphics.drawText(date[index], 5, y
                    + Font.getDefault().getHeight() * 2 + 3);

            if (islatest) {
                graphics.setColor(Color.RED);
                graphics.drawText(category[index], Font.getDefault()
                        .getAdvance(date[index]) + 15, y
                        + Font.getDefault().getHeight() * 2 + 3);
            }
        }

        if (!imagepath[index].toString().equals("no picture"))
            setRowHeight(index, imagebitmap[index].getHeight() + 10);
        else {
            if (text.size() == 2)
                setRowHeight(index, getRowHeight() + 9);
            else if (text.size() == 3) {
                setRowHeight(index, getRowHeight() * 15 / 10 + 9);
            }
        }

        graphics.setColor(Color.WHITE);
        graphics.drawRect(0, y, width, listField.getRowHeight(index));

        ischeck[index] = true;
    }
 }

I want this imagebitmap[i] = Util_ImageLoader.loadImage(imagepath[i]); run after display data so that no need stuck there. However, I tried to put inside drawListRow, it works but very slow because initially display it will run 0-8 times then when i scroll the listfield, it run again. It was download and download again.

Update

public class Util_LazyLoader implements Runnable {
String url = null;
BitmapDowloadListener listener = null;

public Util_LazyLoader(String url, BitmapDowloadListener listener) {
    this.url = url;
    this.listener = listener;
}

public void run() {
    Bitmap bmpImage = getImageFromWeb(url);
    listener.ImageDownloadCompleted(bmpImage);
}

private Bitmap getImageFromWeb(String url) {
    HttpConnection connection = null;
    InputStream inputStream = null;
    EncodedImage bitmap;
    byte[] dataArray = null;

    try {
        connection = (HttpConnection) (new ConnectionFactory())
                .getConnection(url + Database_Webservice.ht_params)
                .getConnection();

        int responseCode = connection.getResponseCode();
        if (responseCode == HttpConnection.HTTP_OK) {
            inputStream = connection.openDataInputStream();
            dataArray = IOUtilities.streamToBytes(inputStream);
        }
    } catch (Exception ex) {
    } finally {
        try {
            inputStream.close();
            connection.close();
        } catch (Exception e) {
        }
    }

    if (dataArray != null) {
        bitmap = EncodedImage.createEncodedImage(dataArray, 0,
                dataArray.length);
        return bitmap.getBitmap();
    } else {
        return null;
    }
}
}

I created a new class but i don't know how to use it.

Answer 1

you should create method on thread where you are putting the data from Url to vector. this could be in your connection class where you have extend as thread. like this>>>>

getimagemethod(image[i]);

after you declare your method get the image string url to the method. like this>>

private void getimagemethod(String image2) 
{
this.imageforlist = image2;

// you should declare imageforlist string as global string..

newBitmap1 = Util_ImageLoader.getImageFromUrl(imageforlist);

//newBitmap1 is also global Bitmap..** }

after this put your bitmap which is newBitmap1 to the Vector like this>>

imagevct.addElement(newBitmap1);

here imagevct is vector which is also global** **inorder to create global vector use this....

private Vector imagevct = new Vector();

now you are ready to draw the bitmap on your list

for that do it like this...

public void drawListRow(ListField list, Graphics g, int index, int y, int w) {
Bitmap imagee = (Bitmap) imagevct.elementAt(index);
g.drawBitmap(HPADDING, 15 + y, 60, 60, imagee , 0, 0);
}

Here HPADDING is>>>> private static final int HPADDING = Display.getWidth() <= 320 ? 6 : 8;

this is just tutorial sample step by step.. if any query then you can post here...

Answer 2

You need to use lazy loading concept here. For ex:

http://supportforums.blackberry.com/t5/Java-Development/How-to-load-images-quickly-like-android/m-p/1487995#M187253

http://supportforums.blackberry.com/t5/Java-Development/Lazy-loading-issue-in-blackberry/m-p/1835127

You need to download images in a separate thread (not in UI Thread). Actually what happens when you render a list row , it looks for bitmap image. So what you can do once you are creating your List view. Provide a default loading bitmap image, start a thread to download image ,