Button Image Problem

Question

hallo. I want to ask something to you here. I know this may be easy for you, but this may be difficult for me. I learn new J2ME. I want to know the basics of the programing languages this. I have a case like this:

class DrawImageCanvas extends Canvas {

    static Image image;
    static Image image2;
    static Image image3;
    static Image image4;
    static Image image5;
    static Image image6;
    static String string; 

    int count;

    public void paint(Graphics g) {
        int width = getWidth();
        int height = getHeight();

        // Fill the background using black
        g.setColor(0xefffff);
        g.fillRect(0, 0, width, height);

        // Load an image from the MIDlet resources
        if (image == null && image2 == null && image3 == null && image4 == null && image5 == null && image6 == null) {
            try {
                image = Image.createImage("/http.png");
                image2 = Image.createImage("/Back.png");
                image3 = Image.createImage("/next.png");
                image4 = Image.createImage("/refresh.png");
                image5 = Image.createImage("/stop.png");
                image6 = Image.createImage("/Bookmark.png");
                string = new String("Disini tempat halaman web ditampilkan");
            } catch (IOException ex) {
                g.setColor(0xffffff);
                g.drawString("Failed to load image!", 0, 0, Graphics.TOP | Graphics.LEFT);
                return;
            }
        }


         g.drawImage(image, 5, 5, Graphics.TOP | Graphics.LEFT);    
         g.drawImage(image2, 90, 5, Graphics.TOP | Graphics.LEFT);
         g.drawImage(image3, 120, 5, Graphics.TOP | Graphics.LEFT);
         g.drawImage(image4, 150, 5, Graphics.TOP | Graphics.LEFT);
         g.drawImage(image5, 180, 5, Graphics.TOP | Graphics.LEFT);
         g.drawImage(image6, 210, 5, Graphics.TOP | Graphics.LEFT);
         g.drawString(string, 5, 36, Graphics.TOP | Graphics.LEFT);
    }
}

I want to know how do I change the image to be a image button (key function). please help

---

i have tried to add code with key press event but it make me confused

then i try add GRAPHIC but.. i think it only used at canvas

this is my new code, this is simmilar result as last result

public void startApp() {
    display = Display.getDisplay(this);
    exit = new Command("Exit", Command.EXIT, 1);
    form = new Form("");    
    form.addCommand(exit);
    form.setCommandListener(this);   
    try { 
      Image image = Image.createImage("/http.png");
      Image image2 = Image.createImage("/Back.png");
      Image image3 = Image.createImage("/next.png");
      Image image4 = Image.createImage("/refresh.png");
      Image image5 = Image.createImage("/stop.png");
      Image image6 = Image.createImage("/Bookmark.png");
      form.append(new ImageItem(null, image, ImageItem.LAYOUT_LEFT | ImageItem.LAYOUT_LEFT | ImageItem.LAYOUT_LEFT, null));
      form.append(new ImageItem(null, image2, ImageItem.LAYOUT_LEFT | ImageItem.LAYOUT_LEFT | ImageItem.LAYOUT_LEFT, null));
      form.append(new ImageItem(null, image3, ImageItem.LAYOUT_LEFT | ImageItem.LAYOUT_LEFT | ImageItem.LAYOUT_LEFT, null));
      form.append(new ImageItem(null, image4, ImageItem.LAYOUT_LEFT | ImageItem.LAYOUT_LEFT | ImageItem.LAYOUT_LEFT, null));
      form.append(new ImageItem(null, image5, ImageItem.LAYOUT_LEFT | ImageItem.LAYOUT_LEFT | ImageItem.LAYOUT_LEFT, null)); 
      form.append(new ImageItem(null, image6, ImageItem.LAYOUT_LEFT | ImageItem.LAYOUT_LEFT | ImageItem.LAYOUT_NEWLINE_AFTER, null));   

      display.setCurrent(form);
    }catch (java.io.IOException e){
      System.err.println(e);
    }
    display.setCurrent(form);
  }

but the problem is.. i dont know how to make image as button. i am newbie in J2me please help

Answer 1

You could keep some sort of data structure of your buttons indicating a traversal order. You could then listen for the key pressed events on your canvas and based on which key was pressed (e.g. left, right, up, down, select etc) you could update which of the buttons is now in focus (using a simple index into your data structure). Your paint method could be extended to draw a border of some sort around the image that has the focus.

Now when you listen for the select key press you will know which button has the focus and therefore which action to perform.

More advanced issues here would be refreshing (repainting the screen) after each key press to update the image etc to show which has focus. You wouldn't want to redraw the entire screen, instead you can define areas of the screen to repaint based on which buttons will have changed (i.e. the button that previously had focus and the button that now has focus).

Another alternative would be to not use the low level canvas class but instead look at using a framework like LWUIT which provides buttons etc. and layout managers, much like Swing. This might be a lot easier than trying to draw (a browser by the looks of it) using the low level API.

Answer 2

You can't create a button on a Canvas in J2ME but there are alternatives:

• Use a javax.microedition.lcdui.Form, add a ImageItem with appearance BUTTON to it, add a Command to the ImageItem.

• Use key and/or pointer events on your DrawImageCanvas by overiding Canvas.keyPressed(), Canvas.keyreleased(), Canvas.pointerPressed() and/or Canvas.pointerReleased(). You can even add a border to the image so it looks more like a button.

• You might want to experiment with a javax.microedition.lcdui.CustomItem inside a Form as an intermediary solution.

There is decent documentation for all these classes and methods in the MIDP specification:

http://www.jcp.org/en/jsr/detail?id=118

You might also want to look at the documentation of LWUIT. It is an open source graphical library published by Sun.

Answer 3

Try setting the appearance mode of the ImageItem object to Item.BUTTON, e.g.

ImageItem item = new ImageItem(null, image, ImageItem.LAYOUT_LEFT, null, Item.BUTTON);

Also try adding a command to the ImageItem.

item.setDefaultCommand(new Command("Back", Command.ITEM, 1); 

Then finally define the CommandListener:

item.setItemCommandListener(/* itemCommandListener */);