Friday, October 29, 2010

J2ME Slider – Creating Slider Item Using Custom Item in J2ME


How to use Custom Items in Java ME? Developing Custom Designed Items using Custom Items, Sliders in J2ME, Sliders in Java ME, Designing sliders using Custom Items, How to create a slider item in J2ME?…. If you are searching solutions for such queries then you are on the right page.

Today, most of the mobile applications widely use sliders. But it is really very strange that J2ME or Java ME API provided by SUN Microsystems [now ORACLE] doesn’t have the any item such as SLIDERS.
But again thanks to Java Developers for providing Custom Item.

Instead of writing so much on Custom Item, we’ll straightway start the coding. I have written a generalized Slider Component using Custom Item. This class can be used directly in any java mobile application development as it is. Creating an object is super easy as below

CustomSliderItem  mySlider1  = new CustomSliderItem(1, 10, 1, 300);
CustomSliderItem  mySlider2  = new CustomSliderItem(10, 100, 10, 300);
CustomSliderItem  mySlider3  = new CustomSliderItem(100, 500, 100, 300);

And on testing it on BlackBerry 8520 Curve Smartphone, it looks like as below.



If you like this Slider, you can use it in your code too. I have provided methods to change the Slider color as well as Handle color, so that you can have freedom of using your desired color. I hope you will enjoy using this slider. Below is the code.



import javax.microedition.lcdui.Canvas;
import javax.microedition.lcdui.CustomItem;
import javax.microedition.lcdui.Font;
import javax.microedition.lcdui.Graphics;

/** @author Nikhil Shravane */
public class CustomSliderItem extends CustomItem{
    int sliderH, sliderW;
    int sliderBorderColor_R, sliderBorderColor_G, sliderBorderColor_B;
    int sliderColor_R, sliderColor_G, sliderColor_B;

    int handleH, handleW;
    int handleBorderColor_R, handleBorderColor_G, handleBorderColor_B;
    int handleColor_R, handleColor_G, handleColor_B;

    int lower, higher, incrementOffset;

    int handleValue;
    int blockWidth;

    CustomSliderItem(int lower, int higher, int incrementOffset, int sliderW){
        super(null);
        this.lower = lower;
        this.higher = higher;
        this.incrementOffset = incrementOffset;
        this.sliderW = sliderW;
        this.handleValue = lower;
        initializeSlider();
    }
    protected void initializeSlider(){
        sliderH = getMinContentHeight() - 1;
        //sliderW = getMinContentWidth() - 1;
        handleH = sliderH;
        handleW = sliderW/(higher/incrementOffset);
        blockWidth = sliderW/(((higher-lower)+incrementOffset)/incrementOffset);

        sliderColor_R = 255;
        sliderColor_G = 219;
        sliderColor_B = 51;

        sliderBorderColor_R = 100;
        sliderBorderColor_G = 100;
        sliderBorderColor_B = 100;

        handleColor_R = 80;
        handleColor_G = 198;
        handleColor_B = 51;

        handleBorderColor_R = 100;
        handleBorderColor_G = 100;
        handleBorderColor_B = 100;
    }
    protected int getMinContentHeight() {

        return 20;
    }

    protected int getMinContentWidth() {
        return GUI_n_Screen.SCR_WIDTH;
    }

    protected int getPrefContentHeight(int width) {
        return getMinContentHeight();
    }

    protected int getPrefContentWidth(int height) {
        return getMinContentWidth();
    }
protected void traverseOut()
    {
        slectedColor_R = 230;
        slectedColor_G = 230;
        slectedColor_B = 230;
        repaint();
        System.out.println("traverse out");
    }

    public void setSliderColor(int r, int g, int b){
        this.sliderColor_R = r;
        this.sliderColor_G = g;
        this.sliderColor_B = b;
    }
    public void setSliderBorderColor(int r, int g, int b){
        this.sliderBorderColor_R = r;
        this.sliderBorderColor_G = g;
        this.sliderBorderColor_B = b;
    }
    public void setHandleColor(int r, int g, int b){
        this.handleColor_R = r;
        this.handleColor_G = g;
        this.handleColor_B = b;
    }
    public void setHandleBorderColor(int r, int g, int b){
        this.handleBorderColor_R = r;
        this.handleBorderColor_G = g;
        this.handleBorderColor_B = b;
    }
    public void setHandleValue(int value){
        this.handleValue = value;
    }
    public int getHandleValue(){
        return this.handleValue;
    }

    protected void paint(Graphics g, int w, int h) {
        //Show selection and deselection on travesring
        g.setColor(slectedColor_R, slectedColor_G, slectedColor_B);
        g.drawRect(0,0,sliderW, sliderH);

        //Design Slider
        g.setColor(sliderColor_R, sliderColor_G, sliderColor_B);
        g.fillRect(0,5,sliderW, sliderH-10);
        g.setColor(sliderBorderColor_R,sliderBorderColor_G,sliderBorderColor_B);
        g.drawRect(0,5,sliderW, sliderH-10);

        //Design Handle
        g.setColor(handleColor_R, handleColor_G, handleColor_B);
        g.fillRect(((handleValue/incrementOffset)-1) * handleW,0,handleW, handleH);
        g.setColor(handleBorderColor_R, handleBorderColor_G, handleBorderColor_B);
        g.drawRect(((handleValue/incrementOffset)-1) * handleW,0,handleW, handleH);

        //Show Value
        g.setColor(255,255,255);
        g.setFont(Font.getFont(Font.FACE_PROPORTIONAL, Font.STYLE_PLAIN, Font.SIZE_SMALL));
        int strLength = g.getFont().stringWidth(handleValue+"");
        g.drawString(handleValue+"", (((handleValue/incrementOffset)-1)*handleW) + (handleW/2) - (strLength/2), 1, Graphics.LEFT | Graphics.TOP);
    }

    int slectedColor_R = 230, slectedColor_G = 230, slectedColor_B = 230;
    protected boolean traverse(int dir, int viewportWidth, int viewportHeight,
                               int[] visRect_inout) {
        System.out.println("traverse");

        slectedColor_R = 12;
        slectedColor_G = 202;
        slectedColor_B = 0;

        switch(dir){

            case Canvas.DOWN:
                repaint();
                return false;

            case Canvas.UP:
                repaint();
                return false;

            case Canvas.RIGHT:
                if(handleValue < higher)
                    handleValue = handleValue + incrementOffset;
                repaint();
                return true;

            case Canvas.LEFT:
                if(handleValue > lower)
                    handleValue = handleValue - incrementOffset;
                repaint();
                return true;

            default: return false;
        }
    }

    protected void pointerDragged(int x, int y) {
        int temp = 0;
        handleValue = (int)Math.floor(x/blockWidth)+1;
        if(handleValue <= higher){
            System.out.println("HandleValue: " + handleValue);
            if(temp != handleValue)
                repaint();
            temp = handleValue;
        } else {
            handleValue = higher;
            //System.out.println("HandleValue: " + handleValue);
        }
    }
}



Hey, please don’t forget to drop your comments if you like it and your suggestions if you don’t. Enjoy!