Custom BitmapField bug on unfocus and scroll (BlackBerry)

Question

I have been having this annoying problem when trying to implement a picture gallery on BlackBerry 6.

Everything works, however when the focus changes from the top buttons to say the pictures further down the screen, the images seem to glitch and not paint themselves correctly. Please see the images below for an example:

(Focus is on the top of the screen(not shown))

(Focus is now on the bottom left image, note that the top image is now blank for an unknown reason)

And this happens no matter how many pictures I add to the tumbnail gallery.

Now here is my code, (a part of it concerning the drawing of the thumbnails)

public ProductImage(String productName){
    super(VERTICAL_SCROLL|VERTICAL_SCROLLBAR);

    currentProduct = productName;

    createGUI(); 
}
public void createGUI(){
    deleteAll();
    try{
        Storage.loadPicture();
    }catch(NullPointerException e){
        e.printStackTrace();
    }
    this.setTitle(new LabelField(_resources.getString(PRODUCT_IMAGE), Field.FIELD_HCENTER));
    if(ToolbarManager.isToolbarSupported())
    {
        Toolbar tb = new Toolbar();
        setToolbar(tb.createToolBar());
    }
    else{
        Toolbar tb = new Toolbar();
        add(tb.createNavBar());
    }

    picVector = Storage.getPicture(currentProduct);

    EncodedImage enc = EncodedImage.getEncodedImageResource("camera.png");
    EncodedImage sizeEnc = ImageResizer.sizeImage(enc, Display.getHeight(), Display.getHeight());

    takenPicture = new BitmapField(enc.getBitmap());

    vfMain = new VerticalFieldManager();
    vfMain.add(logo);
    vfMain.add(new SeparatorField());
    add(vfMain);
    prepareBmpFields();
}   

 private void prepareBmpFields() {

        System.out.println("This is the vector size: " + picVector.getPicVector().size());

        LayoutManager manager = new LayoutManager();


        FieldChangeListener itemListener = new ButtonListener(); 


        mBmpFields = new ImageButtonField[picVector.getPicVector().size()];

        for (int i = 0; i < picVector.getPicVector().size(); i++) {
                /*EncodedImage image = EncodedImage
                                .getEncodedImageResource((String)imageVector.elementAt(i));*/
            byte[] data = getData((String)picVector.getPicVector().elementAt(i));
            //Encode and Resize image 
            EncodedImage  eImage = EncodedImage.createEncodedImage(data,0,data.length);

             eImage = ImageResizer.resizeImage(eImage, mImgWidth, mImgHeight);
             ImageButtonField currentImage = new ImageButtonField(eImage.getBitmap());
             currentImage.setAssociatedPath((String)picVector.getPicVector().elementAt(i));
             mBmpFields[i] = currentImage;
             mBmpFields[i].setChangeListener(itemListener);
             manager.add(mBmpFields[i]);

        }
        vfMain.add(manager);
    }

    private class LayoutManager extends VerticalFieldManager {
        public LayoutManager() {
            super(VERTICAL_SCROLL | VERTICAL_SCROLLBAR);
        }

        protected void sublayout(int width, int height) {
            int columns = mScrWidth / (mImgWidth + 2 * mImgMargin);

            int scrWidth = Display.getWidth();

              int rows = mBmpFields.length / columns
                + (mBmpFields.length % columns > 0 ? 1 : 0);
              int counter = 0;
              for (int i = 0; i < rows; i++) {
               for (int j = 0; j < columns; j++) {
                int posX = j * (mImgWidth + 2 * mImgMargin) + mImgMargin;
                int posY = i * (mImgHeight + 2 * mImgMargin) + mImgMargin;

                if(mBmpFields.length > counter){
                    Field field = mBmpFields[counter];
                    layoutChild(field, mImgWidth, mImgHeight);
                    setPositionChild(field, posX, posY);
                    counter++;
                };
               }  
             }
              if(Display.getWidth() < Display.getHeight()){
                setExtent(mScrWidth, (int)(mScrHeight*1.25));
                }
              else{
                  setExtent(mScrWidth, (int)(mScrHeight*2)); 
              }
        }


        public int getPreferredWidth() {
            return mScrWidth;
        }
        public int getPreferredHeight() {
            return mScrHeight;
        }
    }
}

I have removed many non relevant parts of the code, but the needed code is there.

Does anyone know what could be causing this problem? Thanks for your help!

Edit: as requested, here is my implementation of ImageButtonField class:

import net.rim.device.api.system.Bitmap;
import net.rim.device.api.system.Characters;
import net.rim.device.api.ui.Graphics;
import net.rim.device.api.ui.component.BitmapField;

public class ImageButtonField extends BitmapField{

String associatedPath ="";
BitmapField image2;

public ImageButtonField(Bitmap image) {
    super(image);
}
public void setAssociatedPath(String path){
    associatedPath = path;
}
public String getAssociatedPath(){
    return associatedPath;
}
public boolean isFocusable() {
    return true;
}
protected void applyTheme(Graphics arg0, boolean arg1) {
}

protected void drawFocus(Graphics graphics, boolean on) {
}
protected void onFocus(int direction) {
      // only change appearance if this button is enabled (aka editable)
      if (isEditable()) {
         invalidate();  // repaint
      } 
      super.onFocus(direction);
   }

   public void onUnfocus() {
      invalidate();  // repaint
      super.onUnfocus();
   }
protected boolean navigationClick(int status, int time) {
    fieldChangeNotify(0);
    return true;
}

protected boolean trackwheelClick(int status, int time) {
    fieldChangeNotify(0);
    return true;
}

protected void paint(Graphics graphics) {
    super.paint(graphics);
    if (isFocus()) {
        graphics.setGlobalAlpha(128);
        graphics.setColor(0x888888);
        graphics.fillRect(0, 0, getWidth(), getHeight());
    }else{
        graphics.setGlobalAlpha(0);
        graphics.setColor(0x000000);
        graphics.fillRect(0, 0, getWidth(), getHeight());
        //graphics.drawBitmap(0, 0, getWidth(), getHeight(), image2.getB, 0, 0);
    }
}

protected boolean keyChar(char character, int status, int time) {
    if(Characters.ENTER == character || Characters.SPACE == character) {
        fieldChangeNotify(0);
        return true;
    }
    return super.keyChar(character, status, time);
}

}

Answer 1

Ok, so you can disregard my first answer, but since I didn't have your ImageButtonField code at the time, I don't want to throw it out ... maybe someone else will find it useful.

In the end, I didn't need to make any changes to ImageButtonField, but I did change your LayoutManager class. The way I figured out that it was the problem was I just started replacing your custom UI classes with built-in ones. I replaced ImageButtonField with BitmapField. That didn't fix it. Then, I replaced LayoutManager with FlowFieldManager and that fixed it. So, I knew where the problem was.

My solution:

private class LayoutManager extends Manager {
  public LayoutManager() {
     super(VERTICAL_SCROLL | VERTICAL_SCROLLBAR);
  }

  protected void sublayout(int width, int height) {
     setExtent(width, height);
     // TODO: maybe always set the same virtual extent?
     if (Display.getWidth() < Display.getHeight()) {
        setVirtualExtent(mScrWidth, (int) (mScrHeight * 1.25));
     } else {
        setVirtualExtent(mScrWidth, (int) (mScrHeight * 2));
     }

     int columns = mScrWidth / (mImgWidth + 2 * mImgMargin);
     // int scrWidth = Display.getWidth();

     int rows = mBmpFields.length / columns + (mBmpFields.length % columns > 0 ? 1 : 0);
     int counter = 0;
     for (int i = 0; i < rows; i++) {
        for (int j = 0; j < columns; j++) {
           int posX = j * (mImgWidth + 2 * mImgMargin) + mImgMargin;
           int posY = i * (mImgHeight + 2 * mImgMargin) + mImgMargin;

           if (mBmpFields.length > counter) {
              Field field = mBmpFields[counter];
              layoutChild(field, mImgWidth, mImgHeight);
              setPositionChild(field, posX, posY);
              counter++;
           }
        }
     }
  }

  public int getPreferredWidth() {
     return mScrWidth;
  }

  public int getPreferredHeight() {
     return mScrHeight;
  }
}

I can't say for sure that I understand why your original code wasn't working, but I can say that I wouldn't have done a few of the things in the original code:

1. The original code was extending VerticalFieldManager but was doing all the work itself, in sublayout(). So, I don't think there was any point extending VerticalFieldManager. I changed it to just extend Manager.

2. The original code was calling setExtent() with different sizes. I don't think that's what you wanted. Extent is the actual size of the Field. Virtual extent is the virtual size, which is what you want to set larger than the actual extent, in order to enable scrolling. You don't need to dynamically calculate different extents for portrait vs. landscape because the width and height parameters passed to sublayout() will already reflect that. I'm not sure you really even need to be setting different virtual extents either. I think you should probably always set the virtual extent height to the number of rows times picture height, accounting for margins.

3. You had an unused variable scrWidth in your original code. I commented it out above.

Answer 2

You also posted this question recently, right? Am I correct in assuming that the ImageButtonField you refer to here is the same one you were working on in the other question?

I can't see your full implementation of ImageButtonField, which you should probably post here, too. However, looking at the answers to your other question, I have a feeling that you're doing some custom focus handling in ImageButtonField, and maybe it's not being done quite right. In any case, that class may be where the problem is.

I have a similar Field subclass of my own, and here are the focus handling methods I define:

public class CustomButtonField extends Field {

   private Bitmap _button;    // the currently displayed button image
   private Bitmap _on;        // image for 'on' state (aka in-focus)
   private Bitmap _off;       // image for 'off' state (aka out-of-focus)

   protected void onFocus(int direction) {
      // only change appearance if this button is enabled (aka editable)
      if (isEditable()) {
         _button = _on;
         invalidate();  // repaint
      } 
      super.onFocus(direction);
   }

   protected void onUnfocus() {
      _button = _off;
      invalidate();  // repaint
      super.onUnfocus();
   }

   protected void drawFocus(Graphics graphics, boolean on) {
      // override superclass implementation and do nothing
   }

   public boolean isFocusable() {
      return true;
   }

I also have a custom implementation of paint(). I won't show it all here, because a lot of the code probably has nothing to do with your problem, but my paint() does include this call:

graphics.drawBitmap(_padding, _padding, _fieldWidth, _fieldHeight, _button, 0, 0);

You might not care about the fact that I have separate images for focused, and unfocused states ... maybe you show the same image at all times.

But, probably the thing to check is your onFocus() and onUnfocus() methods. You may need to add a call to invalidate() as I have.

Looking at Rupak's answer to your other question, it would also be good to check your ImageButtonField.paint() method, and make sure you aren't neglecting to do important drawing steps if the field is not in focus.