Building a J2ME sliding menu with text and images

This example will show, how to create an image icon to perform the next action or next image from the list every time it's been clicked. So if you want to go from one icon to another icon by the nice sliding effect, you have to run the given example. For developing this application we have inherit canvass class and implement Runnable Interface. The Runnable interface is called from java.lang package and this interface has only one methods which is called: run() method. The function to run the application is as follows which is used in this application:

 

Use SlideMenuRunnable as following code:

display.setCurrent(new SlideMenuRunnable(Main Midlet Class Reference));

 

SlideMenuRunnable Class

/*
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */
package the.contact.space;

import javax.microedition.lcdui.Canvas;
import javax.microedition.lcdui.Command;
import javax.microedition.lcdui.CommandListener;
import javax.microedition.lcdui.Displayable;
import javax.microedition.lcdui.Graphics;
import javax.microedition.lcdui.Image;

/**
 *
 * @author User
 */
public class SlideMenuRunnable extends Canvas implements Runnable,CommandListener {
    SlideMenu menu = null;
    private Command cmdBack;
    private Home midlet;
    
    public SlideMenuRunnable(Home midlet){
        this.midlet = midlet;
        cmdBack = new Command("Back", Command.BACK, 1);
        addCommand(cmdBack);
        setCommandListener(this);
        Image[] image = new Image[3]; 
        try{
            image[0] = Image.createImage("/hk1.jpg");
            image[1] = Image.createImage("/hk2.jpg");
            image[2] = Image.createImage("/hk3.jpg");

            menu = new SlideMenu(new String[]{"1", "2", "3"},  
                image,  getWidth(),  getHeight());
            new Thread(this).start();
        }catch(Exception e){
            e.printStackTrace();
        }
    }
    
    protected void paint(Graphics g) {
        menu.paint(g);
    }
    
    public void keyPressed(int key){
        int gameKey = getGameAction(key);
        if(gameKey == Canvas.RIGHT){
            menu.slideItem(1);
        }else if(gameKey == Canvas.LEFT){
            menu.slideItem(- 1);
        }
    }

    public void run() {
        try{
            while(true){
                repaint();
                synchronized(this){
                    wait(100L);
                }
            }
        }catch(Exception e){
            e.printStackTrace();
        }
    }    

    public void commandAction(Command c, Displayable d) {
        if (c == cmdBack) {
            /* back code here */
        }
    }
}

SlideMenu Class

/*
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */

package the.contact.space;

import javax.microedition.lcdui.Graphics;
import javax.microedition.lcdui.Image;

/**
 *
 * @author User
 */
public class SlideMenu {
    public int select_index, back_index, width, height;
    public Image r_arrow, l_arrow;
    String[] labels = null;
    Image[] icons = null;
    public int duration = 500;
    long time = 0;
    
    public SlideMenu(String[] labels, Image[] icons, int width, int height) throws Exception{
        try{
            r_arrow = Image.createImage("/right_arrow.png");
            l_arrow = Image.createImage("/left_arrow.png");
        }catch(Exception e){
            e.printStackTrace();
        }
        this.width = width;
        this.height = height;  
        this.labels = labels;
        this.icons = icons;  
    }
    
    public void slideItem(int next){
        if(!isImage() && select_index + next >= 0 && select_index + next < labels.length){
            back_index = select_index;  
            select_index += next;  
            time = System.currentTimeMillis();
        }
    }

    public boolean isImage(){
      return back_index != select_index;
    }

    public void paint(Graphics g){  
        g.setColor(255, 0, 0);
        g.fillRect(0, 0, width, height);  
        g.setColor(0, 0, 255);
  
        if(select_index > 0){
            g.drawImage(l_arrow, 2, height / 2, 
            Graphics.LEFT | Graphics.VCENTER);
        }

        if(select_index < icons.length - 1){
            g.drawImage(r_arrow, width - 2, height / 2, 
            Graphics.RIGHT | Graphics.VCENTER);
        }

        g.drawString(labels[select_index], width / 2, 
        height - 2, Graphics.BOTTOM | Graphics.HCENTER);  

        g.setClip(l_arrow.getWidth(), 0, width - 2 * 
        l_arrow.getWidth(), height);

        if(select_index != back_index) {
            int difference = (int)(System.currentTimeMillis() - time);  
            if(difference > duration){
                difference = duration;
            }

            int image_present = select_index > back_index ? 1 : - 1;
            int current_image = width / 2 - image_present * 
            difference * width / duration;

            int next_image = current_image + width * image_present;

            g.drawImage(icons[back_index], current_image, height / 2, 
            Graphics.VCENTER | Graphics.HCENTER);  

            g.drawImage(icons[select_index], next_image, height / 2, 
            Graphics.VCENTER | Graphics.HCENTER);

            if(difference >= duration){
                back_index = select_index;
            }
        } else {
            g.drawImage(icons[select_index], width / 2, height / 2, 
            Graphics.VCENTER | Graphics.HCENTER);
        }
    }
} 

http://www.roseindia.net/j2me/slide-image.shtml