Creating a screen transition

You can create a screen transition to apply a visual effect that appears when your application opens or closes a screen on a BlackBerry® device. You can create the following types of screen transitions for your application by using the net.rim.device.api.ui.TransitionContext class.

Transition

Description

TRANSITION_FADE

This transition reveals or removes a screen by fading it in or fading it out. This screen transition creates a fading visual effect by changing the opacity of the screen.

TRANSITION_SLIDE

This transition reveals or removes a screen by sliding it on or sliding it off the display on the device. You can use attributes to specify that both the new screen and the current screen slide, to create an effect where both screens appear to move, or that the new screen slides over the current screen.

TRANSITION_WIPE

This transition reveals or removes a screen by simulating wiping on or wiping off the display on the device.

TRANSITION_ZOOM

This transition reveals or removes a screen by zooming it in or zooming it out of the display on the device.

TRANSITION_NONE

No transition occurs.

Each type of screen transition has attributes that you can use to customize the visual effects of the screen transition. For example, you can customize a sliding effect so that a screen slides from the bottom of the display on the device to the top of the display. If you do not customize the screen transition, the application uses the default attributes. For more information on the default attributes, see the API reference for the BlackBerry® Java® Development Environment.

After you create a screen transition, you must register it within your application by invoking UiEngineInstance.setTransition() and specify the outgoing screen to remove and the incoming screen to reveal, the events that cause the transition to occur, and the transition to display.

To download a sample application that demonstrates how to use screen transitions, visit www.blackberry.com/go/screentransitionssample. For more information about screen transitions, see the API reference for the BlackBerry Java Development Environment.

Note: The theme on the BlackBerry device controls the visual effects that display when a user opens an application. For more information, see the BlackBerry Theme Studio User Guide.

Code sample: Creating a screen transition

The following code sample illustrates a slide transition and a fade transition. When the user opens the application, the first screen appears on the BlackBerry® device and displays a button. When the user clicks the button, a second screen slides onto the display from the right. The second screen automatically fades off of the display after two seconds.

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.*;

public class ScreenTransitionSample extends UiApplication implements FieldChangeListener {
    private Screen _secondaryScreen;
    private Runnable _popRunnable;
    
    public static void main(String[] args) {
        ScreenTransitionSample  theApp = new ScreenTransitionSample ();
        theApp.enterEventDispatcher();
    }

    public ScreenTransitionSample () {        
        _secondaryScreen = new FullScreen();
        _secondaryScreen.setBackground( BackgroundFactory.createSolidBackground(Color.LIGHTBLUE) );
        
        LabelField labelField = new LabelField("The screen closes automatically in two seconds by using a fade transition");
        _secondaryScreen.add(labelField);
        
        TransitionContext transition = new TransitionContext(TransitionContext.TRANSITION_SLIDE);
        transition.setIntAttribute(TransitionContext.ATTR_DURATION, 500);
        transition.setIntAttribute(TransitionContext.ATTR_DIRECTION, TransitionContext.DIRECTION_RIGHT);
        transition.setIntAttribute(TransitionContext.ATTR_STYLE, TransitionContext.STYLE_PUSH);
        
        UiEngineInstance engine = Ui.getUiEngineInstance();
        engine.setTransition(null, _secondaryScreen, UiEngineInstance.TRIGGER_PUSH, transition);

        transition = new TransitionContext(TransitionContext.TRANSITION_FADE);
        transition.setIntAttribute(TransitionContext.ATTR_DURATION, 500);
        transition.setIntAttribute(TransitionContext.ATTR_KIND, TransitionContext.KIND_OUT);
        engine.setTransition(_secondaryScreen, null, UiEngineInstance.TRIGGER_POP, transition); 
        
        MainScreen baseScreen = new MainScreen();
        baseScreen.setTitle("Screen Transition Sample");  
              
        ButtonField buttonField = new ButtonField("View Transition", ButtonField.CONSUME_CLICK) ;
        buttonField.setChangeListener(this);
        baseScreen.add(buttonField);
        
        pushScreen(baseScreen);
        
        _popRunnable = new Runnable() {
            public void run() {
                popScreen(_secondaryScreen);
            }
        };
    }
    
    public void fieldChanged(Field field, int context)
    {
        pushScreen(_secondaryScreen);
        invokeLater(_popRunnable, 2000, false);
    }
}
Previous topic: Manage a drawing area

Was this information helpful? Send us your comments.