Blackberry - Small Up Down Arrow Button

i want to create 2 buttons for blackberry which look like this...alt text http://img260.imageshack.us/img260/3285/button2.jpg

and the second one inverted of the above

i wanted to do this without using images (for efficiency) and the buttons should appear only when there is focus on them and dis sapper when focu开发者_JAVA百科s goes off..

---

ArrowButtonField as a Field extention:

class ArrowButtonField extends Field {
    public static final int TYPE_UP = 0;
    public static final int TYPE_DOWN = 1;

    private int mBackgroundColor = Color.WHITE;
    private int mFillColor = Color.CRIMSON;
    private int mWidth = 20;
    private int mHeight = 12;
    private int mArrowType = TYPE_UP;

    public ArrowButtonField(int bgColor, int fillColor, int arrowType) {
        super(FOCUSABLE);
        setMargin(0, 0, 0, 0);
        setPadding(0, 0, 0, 0);
        mArrowType = arrowType;
        mBackgroundColor = bgColor;
        mFillColor = fillColor;
    }

    // cancel theme border and background style
    protected void applyTheme(Graphics arg0, boolean arg1) {
    }

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

    protected void onUnfocus() {
        invalidate();
        super.onUnfocus();
    }

    protected void paint(Graphics graphics) {
        graphics.clear();
        graphics.setColor(mBackgroundColor);
        graphics.fillRect(0, 0, mWidth, mHeight);
        if (isFocus()) {
            graphics.setColor(mFillColor);
            int xc = 10;
            int y1 = 0, y2 = 0, x2 = xc - 9, x1 = xc + 9;

            switch (mArrowType) {
            case TYPE_DOWN:
                y1 = 11;
                y2 = 1;
                break;
            case TYPE_UP:
                y1 = 1;
                y2 = 11;
                break;
            default:
                break;
            }
            int[] xPts = new int[] { x1, x2, xc };
            int[] yPts = new int[] { y1, y1, y2 };
            graphics.drawFilledPath(xPts, yPts, null, null);
        }
    }

    public int getPreferredWidth() {
        return mWidth;
    }

    public int getPreferredHeight() {
        return mHeight;
    }

    protected void layout(int width, int height) {
        setExtent(mWidth, mHeight);
    }
}

Classes for Up and Down Arrow:

class UpArrowButtonField extends ArrowButtonField {
    public UpArrowButtonField(int backgroundColor, int fillColor) {
        super(backgroundColor, fillColor, TYPE_UP);
    }
}

class DownArrowButtonField extends ArrowButtonField {
    public DownArrowButtonField(int backgroundColor, int fillColor) {
        super(backgroundColor, fillColor, TYPE_DOWN);
    }
}

Sample of use:

class Scr extends MainScreen implements FieldChangeListener {
    UpArrowButtonField arrowUp;
    DownArrowButtonField arrowDown;

    public Scr() {
        arrowUp = new UpArrowButtonField(Color.WHITE, Color.RED);
        arrowUp.setChangeListener(this);
        add(arrowUp);
        arrowDown = new DownArrowButtonField(Color.WHITE, Color.RED);
        arrowDown.setChangeListener(this);
        add(arrowDown);
    }

    public void fieldChanged(Field field, int context) {
        if (field == arrowUp) {
            Dialog.inform("UP");
        } else if (field == arrowDown) {
            Dialog.inform("DOWN");
        }
    }
}

---

You can create a custom Field object, then implement a custom paint() method that draws the geometric shapes you require. Take a look at the Graphics class - your field's paint method is passed the Graphics object and you can make use of that to draw filled rectangles, polygons, etc.