Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Java Development

Reply
Regular Contributor
rampelotti
Posts: 66
Registered: ‎05-26-2010
My Device: 9000 Bold
My Carrier: SAP NetWeaver Mobile Technology Consultant

Re: Components like WES 2010 application

Hello rcmaniac25!

 

Yes,,, i have same opinion,  i made some jokes. But my result did not reach that expected, as I had mentioned, I can change the wallpaper, but slows down if I get rolling several times trackwhell up and down, repeatedly changing the focus from the button, then the application becomes slow.

My question is whether this case the change background bitmap, there is a good practice to manipulate a background of screen, remembering that in my testing, I manipulated the brackground using invokeLater and runnable and where within the method did change the background screen by:

 

 

getMainManager().setBackground(background);
getMainManager().invalidate();	

 It´s make the screen to lock or slow showing the ampulet.

 

Any recomendations in this case?

 

Regards, Rampelotti.

Please use plain text.
Developer
rcmaniac25
Posts: 1,804
Registered: ‎04-28-2009
My Device: Z10 (STL100-4)-10.2.1.3253, Z10 (STL100-3)-10.3.1.634 Dev OS, Z30 (STA100-5)-10.3.1.634 Dev OS, Passport (SQW100-1)-10.3.0.1154, PlayBook (16GB)-2.1.0.1917
My Carrier: Verizon

Re: Components like WES 2010 application

Though I haven't tried anything out yet, remember, "cancel" is your friend.

 

Since you are going for a fading transition you have to start the transition when it gets to the proper element, then if it goes to a different element you need to cancel the previous transition and start on the next one.

 

If you have a single global variable (again with the single listener idea) that defines the "current transition progress" you can then say "OK, new transition. Cancel (stop) the old one, then start the new one at the previous location so it doesn't have to cycle through the entire transition again"

 

Just a theory, I have some GUI ideas for some apps I'm working on, this is one of the ideas so I want to work on I need to get a few other things done first.

 

On your invokeLater code, the problem is that it will always back-up if too many items get queued too fast. It might be better to make a custom Background, do the above mentioned code, and grab the event lock yourself instead of invokeLater just so things speed up and you aren't waiting for the queue to get to your element.

---Spends time in #blackberrydev on freenode (IRC)----
Three simple rules:
1. Please use the search bar before making new posts.
2. "Like" posts that you find helpful.
3. If a solution has been found for your post, mark it as solved.
--I code too much. Well, too bad.
Please use plain text.
Regular Contributor
rampelotti
Posts: 66
Registered: ‎05-26-2010
My Device: 9000 Bold
My Carrier: SAP NetWeaver Mobile Technology Consultant

Re: Components like WES 2010 application

Can you show me a sample?

 

Regards, Rampelotti

Please use plain text.
Developer
rcmaniac25
Posts: 1,804
Registered: ‎04-28-2009
My Device: Z10 (STL100-4)-10.2.1.3253, Z10 (STL100-3)-10.3.1.634 Dev OS, Z30 (STA100-5)-10.3.1.634 Dev OS, Passport (SQW100-1)-10.3.0.1154, PlayBook (16GB)-2.1.0.1917
My Carrier: Verizon

Re: Components like WES 2010 application

You'll have to give me a little bit, busy right now. My last post was (at least to me) scatter brained a little but if you can grasp what I was trying to convey you might be able to figure it out yourself.

---Spends time in #blackberrydev on freenode (IRC)----
Three simple rules:
1. Please use the search bar before making new posts.
2. "Like" posts that you find helpful.
3. If a solution has been found for your post, mark it as solved.
--I code too much. Well, too bad.
Please use plain text.
Developer
peter_strange
Posts: 19,602
Registered: ‎07-14-2008
My Device: Not Specified

Re: Components like WES 2010 application

Here is a bit of code, that demonstrates how I think you can do (b) every fast.  Yes I know the backgrounds are a bit naff, and to be honest, I think you could probably do all the painting in paint, rather than do what I do once onto the Bitmap which would use a lot less memory, but this is the fastest way.

 

You will also note that this processing calls paint directly......

 

Tested in 4.2.1 Pearl 8100 and 4.6.1 Curve 8520.

 

import net.rim.device.api.system.*;
import net.rim.device.api.util.*;
import net.rim.device.api.ui.*;
import net.rim.device.api.ui.component.*;
import net.rim.device.api.ui.container.*;
 
public class TestBitmapScreen extends MainScreen {
 
    private Bitmap [] _backgrounds = new Bitmap [5];
    private int [] _backgroundColors = new int [] {
        0x00FF0000,
        0x00FFFF00,
        0x0000FF00,
        0x0000FFFF,
        0x000000FF
    };
    private String [] _menuItems = new String [] {
        "Agenda",
        "Sessions",
        "Getting Around",
        "Speakers",
        "Sponsors"
    };
    private int _currentBackground = 0;
    private int _unfocusedButtonColor = 0x00808080;
    private int _focusedButoonColor = 0x00FF00FF;

    public TestBitmapScreen() {
        super();
        Graphics g;
        Font boldFont = this.getFont().derive(Font.BOLD);
        int buttonHeight = boldFont.getHeight();
        int buttonWidth = 200;
        int ButtonStartX = Display.getWidth() - buttonWidth;
        for ( int i = 0; i < _backgrounds.length; i++ ) {
            _backgrounds[i] = new Bitmap(Display.getWidth(), Display.getHeight());
            g = new Graphics(_backgrounds[i]);
            g.setColor(_backgroundColors[i]);
            g.fillRect(0, 0, Display.getWidth(), Display.getHeight());
            g.setFont(boldFont);
            for ( int j = 0; j < _backgrounds.length; j++ ) {
                if ( j == i ) {
                    // Focused on this one
                    g.setColor(_focusedButoonColor);
                    g.fillRect(ButtonStartX-20, j * buttonHeight, buttonWidth+20, buttonHeight);
                } else {
                    g.setColor(_unfocusedButtonColor);
                    g.fillRect(ButtonStartX, j * buttonHeight, buttonWidth,  buttonHeight);
                }
                g.setColor(0x00FFFFFF); // White
                g.drawText(_menuItems[j], ButtonStartX+10, j * buttonHeight);
            }
        }
    }

    protected void paint(Graphics graphics) {
        graphics.drawBitmap(0, 0, Display.getWidth(), Display.getHeight(), _backgrounds[_currentBackground], 0, 0);
    }


    protected boolean navigationMovement(int dx, int dy, int status, int time) {
        if ( dy > 0 ) {
            // scroll down
            if ( _currentBackground < _backgrounds.length-1 ) {
                _currentBackground++;
                Graphics g = this.getGraphics();
                this.paint(g);
                // this.invalidate();
            }
        } else
        if ( dy < 0 ) {
            // scroll up
            if ( _currentBackground > 0 ) {
                _currentBackground--;
                Graphics g = this.getGraphics();
                this.paint(g);
                // this.invalidate();
            }
        }
        return true;
    }

}

 

Comments/suggestions welcome.

 

Need to think about (a) now.

Please use plain text.
Regular Contributor
rampelotti
Posts: 66
Registered: ‎05-26-2010
My Device: 9000 Bold
My Carrier: SAP NetWeaver Mobile Technology Consultant

Re: Components like WES 2010 application

Hello peter_strange!

 

It´s wonderfull, i don´t thinked this solution.

 

Wow, I'm trying to understand up this moment how it´s work, because in my humble opinion, i thinking that i paint the background, i was thinking that i needed invalidate every component of screen, i don´t understand how you can paint the bitmap entire screen and did not hide the menu, because the area of bitmap should be painted above the menu, but in this solution yout bitmap is painted under the menu.

 

 

Can you explain to me how it works? And you have any document to explain the GUI comportment?

 

 

Regards, Rampelotti

Please use plain text.
Developer
peter_strange
Posts: 19,602
Registered: ‎07-14-2008
My Device: Not Specified

Re: Components like WES 2010 application

There is no menu.

 

Each bitmap is a complete screen shot, including the 'menu'.  The menu is included in the Bitmap, the entire bitmap is written to the screen.

 

This is the code that updates the 'background' and paints on top of it, the 'menu:

 

           g.setFont(boldFont);
            for ( int j = 0; j < _backgrounds.length; j++ ) {
                if ( j == i ) {
                    // Focused on this one
                    g.setColor(_focusedButoonColor);
                    g.fillRect(ButtonStartX-20, j * buttonHeight, buttonWidth+20, buttonHeight);
                } else {
                    g.setColor(_unfocusedButtonColor);
                    g.fillRect(ButtonStartX, j * buttonHeight, buttonWidth,  buttonHeight);
                }
                g.setColor(0x00FFFFFF); // White
                g.drawText(_menuItems[j], ButtonStartX+10, j * buttonHeight);
            }

Sorry, I have not found a good source for the standard GUI processing, let alone this sort of stuff.  Experience and lots of playing round required. 

 

One other thing, you should really use the commented out invalidate() lines, and remove the lines:

 

                Graphics g = this.getGraphics();
                this.paint(g);

 

These lines may cause you grief later.  Invalidate() should  not.  I doubt you will notice the performance difference. 

 

 

Please use plain text.
Regular Contributor
rampelotti
Posts: 66
Registered: ‎05-26-2010
My Device: 9000 Bold
My Carrier: SAP NetWeaver Mobile Technology Consultant

Re: Components like WES 2010 application

Thanks for reply peter_strange!

 

 

Your explain was great.

 

I has a wrong idea about graphics, i thinking that when i used the graphics to draw anything i needed redraw everything every time...

 

Well i need to change my mind   :smileyhappy:

 

Now we have no idea to item (a)

 

You help me a lot peter!

 

Regards, Rampelotti;

Please use plain text.
Developer
peter_strange
Posts: 19,602
Registered: ‎07-14-2008
My Device: Not Specified

Re: Components like WES 2010 application

Phase 2, fade in and out.

 

Here is bit of grubby code  Very grubby.  Shows you how you can do it.  But really not pretty.  I don't have time to pretty it up. 

 

Play with this and see if you can figure out how it works.  I am not sure the WES app does this, and, in addition, Screen transitions in OS 5.0 might be able to do it anyway.  Not sure, still writing pre OS 5.0 code for the most part. 

 

Have fun.

 

import net.rim.device.api.system.*;
import net.rim.device.api.util.*;
import net.rim.device.api.ui.*;
import net.rim.device.api.ui.component.*;
import net.rim.device.api.ui.container.*;
 
public class TestBitmapScreen extends MainScreen {
 
    private Bitmap _currentScreen = null;
    private Bitmap _oldScreen = null;
    private int [] _coloursToUse = new int [] {
        // 16 colours, used as a 4 x 4 grid
        0x00800000,
        0x00FF0000,
        0x00FF8000,
        0x00FFFF00,
        0x0080FF00,
        0x0000FF00,
        0x0000FF80,
        0x0000FFFF,
        0x000080FF,
        0x000000FF,
        0x00000080,
        0x00800080,
        0x00808080,
        0x0080FF80,
        0x008080FF,
        0x00FF8080
    };
    private int _focusColor = 0x00FFFFFF;

    private int _currentFocus = 0;
    private int _oldFocus = -1;
    protected int _alpha = 255;

    private int _screenWidth;
    private int _screenHeight;
    private int _gridWidth;
    private int _gridHeight;

    private FadeThread _fadeThread;

    public TestBitmapScreen() {
        super();

        _oldScreen = new Bitmap(Display.getWidth(), Display.getHeight());
        _currentScreen = new Bitmap(Display.getWidth(), Display.getHeight());
        _currentFocus = 0;
        _screenWidth = Display.getWidth();
        _screenHeight = Display.getHeight();
        _gridWidth = _screenWidth/4;
        _gridHeight = _screenHeight / 4;
        paintBitmap(_currentScreen, _currentFocus);

    }
    public void paintBitmap(Bitmap paintThis, int focusSquare) {
        Graphics g = new Graphics(paintThis);
        for ( int x = 0; x < 4; x++ ) {
            for ( int y = 0; y < 4; y++ ) {
                // paint one square of our 4 x 4 pattern
                int colourIndex = y * 4 + x;
                if ( focusSquare == colourIndex ) {
                    // We are focused on this square
                    g.setColor(_focusColor);
                } else {
                    g.setColor(_coloursToUse[colourIndex]);
                }
                g.fillRect(x*_gridWidth, y*_gridHeight, _gridWidth, _gridHeight);
            }
        }
    }


    protected void paint(Graphics graphics) {
        graphics.setGlobalAlpha(255);
        graphics.drawBitmap(0, 0, Display.getWidth(), Display.getHeight(), _currentScreen, 0, 0);
        if ( _alpha < 255 ) {
            int oldFocusY = _oldFocus/4;
            int oldFocusX = (_oldFocus - (oldFocusY*4));
            int currentFocusY = _currentFocus/4;
            int currentFocusX = (_currentFocus - (currentFocusY*4));
            graphics.setGlobalAlpha(255-_alpha);
            graphics.drawBitmap(oldFocusX*_gridWidth, oldFocusY*_gridHeight, _gridWidth, _gridHeight, _oldScreen, oldFocusX*_gridWidth, oldFocusY*_gridHeight);
            graphics.drawBitmap(currentFocusX*_gridWidth, currentFocusY*_gridHeight, _gridWidth, _gridHeight, _oldScreen, currentFocusX*_gridWidth, currentFocusY*_gridHeight);
            graphics.setGlobalAlpha(_alpha);
            graphics.drawBitmap(oldFocusX*_gridWidth, oldFocusY*_gridHeight, _gridWidth, _gridHeight, _currentScreen, oldFocusX*_gridWidth, oldFocusY*_gridHeight);
            graphics.drawBitmap(currentFocusX*_gridWidth, currentFocusY*_gridHeight, _gridWidth, _gridHeight, _currentScreen, currentFocusX*_gridWidth, currentFocusY*_gridHeight);
       }
    }


    protected boolean navigationMovement(int dx, int dy, int status, int time) {
        int increment = 0;
        if ( dy > 0 ) {
            // scroll down
            increment = 4;
        } else
        if ( dy < 0 ) {
            // scroll down
            increment = -4;
        } else
        if ( dx > 0 ) {
            // scroll right
            increment = 1;
        } else
        if ( dx < 0 ) {
            // scroll left
            increment = -1;
        }
        if ( increment != 0 ) {
            _oldFocus = _currentFocus;
            _currentFocus = (_currentFocus + increment + _coloursToUse.length) % _coloursToUse.length ;
            // swap screen buffer
            Bitmap tempBitmap = _oldScreen;
            _oldScreen = _currentScreen;
            _currentScreen = tempBitmap;
            paintBitmap(_currentScreen, _currentFocus);
            startNewFadeThread();
        }
        return true;
    }

    private void startNewFadeThread() {
        if ( _fadeThread != null ) {
            _fadeThread.cancel();
        }
        _fadeThread = new FadeThread(this);
        _alpha = 0;
        _fadeThread.start();
    }


    private class FadeThread extends Thread {
        Graphics _gragphics = null;
        TestBitmapScreen _ourScreen;
        int _alpha = 0;
        private volatile boolean _cancelled = false;
        public FadeThread(TestBitmapScreen ourScreen) {
            _ourScreen = ourScreen;
            _gragphics = _ourScreen.getGraphics();
        }
        public void run() {
            long startTime = System.currentTimeMillis();
            long finishTime = startTime + 1023;
            long currentTime = startTime;
            while ( currentTime < finishTime && !_cancelled ) {
                try {
                    Thread.sleep(10);
                } catch (Exception e) {
                }
                if ( !_cancelled ) {
                    currentTime = System.currentTimeMillis();
                    _alpha = (int) ((currentTime - startTime)/4);
                    paintIt();
                }
            }
            if ( !_cancelled ) {
                _alpha = 255;
                paintIt();
            }
        }
        public void cancel() {
            _cancelled = true;
        }
        private void paintIt() {
            _ourScreen._alpha = this._alpha;
            _ourScreen.invalidate();
        }
    }

}

 

Please use plain text.
Regular Contributor
rampelotti
Posts: 66
Registered: ‎05-26-2010
My Device: 9000 Bold
My Carrier: SAP NetWeaver Mobile Technology Consultant

Re: Components like WES 2010 application

Very thanks!

 

It´s a matter of fact the OS 5.0 have more things to increase development and facilities for our lives :smileyhappy:

 

I´ll test and after post here the results....

 

Regards, Rampelotti

Please use plain text.