Question

I’m trying to create a custom ButtonField, whose focus (the blue highlight color) would disappear after few seconds of inactivity – like in original music player on BB phones with touchscreen.

I’ve almost succeeded in that with the following example:

Here are the east.png and west.png (courtesy of openclipart.org):

Here is my test code MyFocus.java:

import net.rim.device.api.ui.*;
import net.rim.device.api.ui.component.*;
import net.rim.device.api.ui.container.*;
import net.rim.device.api.ui.decor.*;
import net.rim.device.api.system.*;
import net.rim.device.api.ui.image.*;

public class MyFocus extends UiApplication {
    public static void main(String[] args) {
        MyFocus app = new MyFocus();
        app.enterEventDispatcher();
    }

    public MyFocus() {
        pushScreen(new MyScreen());
    }    
}

class MyScreen extends MainScreen {
    public MyScreen() {       
        setTitle("2nd trackpad click not working");
        getMainManager().setBackground(BackgroundFactory.createLinearGradientBackground(Color.WHITE, Color.GRAY, Color.DARKGRAY, Color.GRAY));

        add(new MyButton(MyButton.EAST));
        add(new MyButton(MyButton.WEST));
        add(NF);
    }

    class MyButton extends ButtonField {
        public final static int EAST  = 0;
        public final static int WEST  = 1;

        public final static int WIDTH  = 100;
        public final static int HEIGHT = 100;

        private final XYEdges EDGES = new XYEdges(0, 0, 0, 0);
        private final Application _app = UiApplication.getUiApplication();
        private final static long FOCUS_DURATION = 3000L;    

        private int _focusTimer = -1;
        private final int _direction;

        public MyButton(int direction) {
            setMargin(EDGES);
            setPadding(EDGES);
            setImageSize(WIDTH, HEIGHT);

            setBorder(VISUAL_STATE_NORMAL, 
BorderFactory.createSimpleBorder(EDGES));
            setBorder(VISUAL_STATE_FOCUS, BorderFactory.createSimpleBorder(EDGES));
            setBorder(VISUAL_STATE_ACTIVE, BorderFactory.createSimpleBorder(EDGES));

            setBackground(VISUAL_STATE_NORMAL, BackgroundFactory.createSolidTransparentBackground(Color.GREEN, 0));
            setBackground(VISUAL_STATE_FOCUS, BackgroundFactory.createSolidTransparentBackground(Color.BLUE, 100));
            setBackground(VISUAL_STATE_ACTIVE, BackgroundFactory.createSolidTransparentBackground(Color.RED, 200));

            _direction = direction;
            switch(_direction) {
                case EAST: 
                    setImage(ImageFactory.createImage("east.png"));
                    break;
                case WEST: 
                    setImage(ImageFactory.createImage("west.png"));
                    break;
            }
        }

        // display red background on long touch and hold            
        protected boolean touchEvent(TouchEvent event) {
            if (event.getEvent() == TouchEvent.CLICK) {
                applyThemeOnStateChange();
                return true;
            }
            return super.touchEvent(event);
        }

        protected void onUnfocus() {
            if (_focusTimer != -1) {
                _app.cancelInvokeLater(_focusTimer);
                _focusTimer = -1;
            }            

            super.onUnfocus();
        }

        protected void onFocus(int direction) {
            if (_focusTimer != -1) {
                _app.cancelInvokeLater(_focusTimer);
                _focusTimer = -1;
            }            

            _focusTimer = _app.invokeLater(new Runnable() {
                public void run() {
                    MyButton.super.onUnfocus();
                    _focusTimer = -1;
                }
            }, FOCUS_DURATION, false);

            super.onFocus(direction);
        }

        public int getPreferredHeight(){
                return HEIGHT;
        }

        public int getPreferredWidth(){
                return WIDTH;
        }

        protected void layout(int width, int height) {
            setExtent(WIDTH, HEIGHT);
        }
    }
}

My problem is visible, when I first select a button and wait few seconds for its focus to disappear. Then I click on the track pad and while the button is pushed (verified that), you don’t see anything at the screen – it doesn’t turn blue or red.

I’ve tried all combinations of navigationClick() and trackwheelUnclick() but can not fix that.

Any help please?
Alex

UPDATE 1:

I’ve tried the following, but it doesn’t work well (focus disappears forever, probably because button thinks it is in the needed visual state already):

    protected void onFocus(int direction) {
        if (_focusTimer != -1) {
            _app.cancelInvokeLater(_focusTimer);
            _focusTimer = -1;
        }            

        _focusTimer = _app.invokeLater(new Runnable() {
            public void run() {
                MyButton.this.setBorder(BorderFactory.createSimpleBorder(EDGES));
                MyButton.this.setBackground(BackgroundFactory.createSolidTransparentBackground(Color.GREEN, 0));
                invalidate();
                _focusTimer = -1;
            }
        }, FOCUS_DURATION, false);

        super.onFocus(direction);
    }

UPDATE 2:

A try with a NullField, still not working properly:

import net.rim.device.api.ui.*;
import net.rim.device.api.ui.component.*;
import net.rim.device.api.ui.container.*;
import net.rim.device.api.ui.decor.*;
import net.rim.device.api.system.*;
import net.rim.device.api.ui.image.*;

public class MyFocus extends UiApplication {
    public static void main(String[] args) {
        MyFocus app = new MyFocus();
        app.enterEventDispatcher();
    }

    public MyFocus() {
        pushScreen(new MyScreen());
    }    
}

class MyScreen extends MainScreen {
    static NullField NF = new NullField();
    HorizontalFieldManager hfm = new HorizontalFieldManager() {
        int lastFocused = -1;

        protected int firstFocus(int direction) {
            lastFocused = super.firstFocus(direction);
            System.out.println("XXX firstFocus: " + lastFocused);
            return lastFocused;
        }

        protected int nextFocus(final int direction, final int axis) {

            if (getFieldWithFocus() == NF) {
                return lastFocused;
            } 

            lastFocused = super.nextFocus(direction, axis);
            System.out.println("XXX nextFocus: " + lastFocused);
            return lastFocused;
        }
    };

    public MyScreen() {       
        setTitle("2nd trackpad click not working");
        getMainManager().setBackground(BackgroundFactory.createLinearGradientBackground(Color.WHITE, Color.GRAY, Color.DARKGRAY, Color.GRAY));

        hfm.add(new MyButton(MyButton.WEST));
        hfm.add(new MyButton(MyButton.EAST));
        hfm.add(new MyButton(MyButton.EAST));
        hfm.add(NF);

        add(hfm);
    }

    class MyButton extends ButtonField {
        public final static int EAST  = 0;
        public final static int WEST  = 1;

        public final static int WIDTH  = 100;
        public final static int HEIGHT = 100;

        private final XYEdges EDGES = new XYEdges(0, 0, 0, 0);
        private final Application _app = UiApplication.getUiApplication();
        private final static long FOCUS_DURATION = 3000L;    

        private int _focusTimer = -1;
        private final int _direction;

        public MyButton(int direction) {
            setMargin(EDGES);
            setPadding(EDGES);
            setImageSize(WIDTH, HEIGHT);

            setBorder(VISUAL_STATE_NORMAL, BorderFactory.createSimpleBorder(EDGES));
            setBorder(VISUAL_STATE_FOCUS, BorderFactory.createSimpleBorder(EDGES));
            setBorder(VISUAL_STATE_ACTIVE, BorderFactory.createSimpleBorder(EDGES));

            setBackground(VISUAL_STATE_NORMAL, BackgroundFactory.createSolidTransparentBackground(Color.GREEN, 0));
            setBackground(VISUAL_STATE_FOCUS, BackgroundFactory.createSolidTransparentBackground(Color.BLUE, 100));
            setBackground(VISUAL_STATE_ACTIVE, BackgroundFactory.createSolidTransparentBackground(Color.RED, 200));

            _direction = direction;
            switch(_direction) {
                case EAST: 
                    setImage(ImageFactory.createImage("east.png"));
                    break;
                case WEST: 
                    setImage(ImageFactory.createImage("west.png"));
                    break;
            }
        }

        protected boolean touchEvent(TouchEvent event) {
            if (event.getEvent() == TouchEvent.CLICK) {
                applyThemeOnStateChange();
                return true;
            }
            return super.touchEvent(event);
        }

        protected void onUnfocus() {
            if (_focusTimer != -1) {
                _app.cancelInvokeLater(_focusTimer);
                _focusTimer = -1;
            }            

            super.onUnfocus();
        }

        protected void onFocus(int direction) {
            if (_focusTimer != -1) {
                _app.cancelInvokeLater(_focusTimer);
                _focusTimer = -1;
            }            

            _focusTimer = _app.invokeLater(new Runnable() {
                public void run() {
                    MyScreen.NF.setFocus();
                    _focusTimer = -1;
                }
            }, FOCUS_DURATION, false);

            super.onFocus(direction);
        }

        public int getPreferredHeight(){
                return HEIGHT;
        }

        public int getPreferredWidth(){
                return WIDTH;
        }

        protected void layout(int width, int height) {
            setExtent(WIDTH, HEIGHT);
        }
    }
}

Answer 1

I would probably ovverride the drawFocus() method to check a flag _showFocus before calling super.drawFocus(), then in onFocus(), set the flag to true and schedule the Runnable to change the _showFocus flag to false and invalidate (also setting it to false in onUnfocus()). Don’t have to worry about canceling timers or anything this way either, as it is just going to change a flag and invalidate, keeping it in the appropriate state.