Transitions and playing videos

Certify and Increase Opportunity.
Be
Govt. Certified Blackberry Apps Developer

Screen transitions

You can create a transition to apply a visual effect that appears when an application opens or closes a screen on a BlackBerry device. Creating transitions between screens helps users understand the structure of your application. Try to provide consistent transitions as users navigate the application. Consider the following guidelines when implementing screen transitions:

Transition	When to use	Details
Fade	The content is the same but users change their view of the content (for example, switching between day and week view in a calendar or switching between viewing a list of images and viewing the thumbnails of the same images).	Set the duration of the fade to 150 milliseconds.
Slide	Users move to an item at the same level in the navigation hierarchy (for example, from one message, photo, song, or contact to another).	When users move to the next item, slide the item in from the right to the left. When users move to the previous item, slide the item in from the left to the right.
Zoom	Users move to an item at a different level in the navigation hierarchy (for example, from a parent item to a child item or a child item to a parent item).Users create a new item, send an item, or save an item. The zoom transition is the most common type of transition between screens.	Zoom in when moving from a parent item to a child item. Zoom out when moving from a child item to a parent item.When users open the application from the Home screen, zoom in from the center of the screen. Set the scale of the zoom to 110 percent.

Transition

When to use

Details

Fade

The content is the same but users change their view of the content (for example, switching between day and week view in a calendar or switching between viewing a list of images and viewing the thumbnails of the same images).

Set the duration of the fade to 150 milliseconds.

Slide

Users move to an item at the same level in the navigation hierarchy (for example, from one message, photo, song, or contact to another).

When users move to the next item, slide the item in from the right to the left. When users move to the previous item, slide the item in from the left to the right.

Zoom

Users move to an item at a different level in the navigation hierarchy (for example, from a parent item to a child item or a child item to a parent item).Users create a new item, send an item, or save an item.

The zoom transition is the most common type of transition between screens.

Zoom in when moving from a parent item to a child item. Zoom out when moving from a child item to a parent item.When users open the application from the Home screen, zoom in from the center of the screen.

Set the scale of the zoom to 110 percent.

BlackBerry Screen Transition Sample Code

SCREEN TRANSITION SAMPLE

The code that I’m about the share and go through illustrates a slide 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.

First, let’s add the imports:

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

Now, let’s continue with the application:

public class ScreenTransitionSample extends UiApplication implements FieldChangeListener {

private Screen secondaryScreen;

private Runnable popRunnable;

As you can see, we initialized two local variables. As the official documentation says, you must explicitly initialize local variables in a method. We’ve initialized the secondaryScreen variable, because Screen is the base class for all screens and popRunnable. The Runnable interface should be implemented by any class whose instances are intended to be executed by a thread. The class must define a method of no arguments called run. We’ll implement run later in the code.

Any BlackBerry application that provides a user interface must extend the UiApplication class. Our class also implements FieldChangeListener. This is because Classes that want to handle change events should implement this interface.

public static void main(String[] args) {

ScreenTransitionSample theApp = new ScreenTransitionSample ();

theApp.enterEventDispatcher();

}

Class ScreenTransitionSample must have one method: main(String[] args) which is the entry point into our application. We need to create an instance of our application and start it by getting it on the event thread. Next, we will create the secondary screen:

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);

and create the transition object:

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);

which helps us create the animation. Next, we create an engine object:

1	`UiEngineInstance engine = Ui.getUiEngineInstance();`

As the official documentation says, a UI engine maintains a stack of Screen objects. As it pushes screens onto the stack, it draws them on top of any other screens already on the stack. When the application pops a screen off the stack, it redraws the underlying screens as necessary. Only the screen on the top of the stack receives input events.

Now, apply the transition, create a new one and apply that too onto the secondary screen:

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);

Now, create the base screen and attach a button:

MainScreen baseScreen = new MainScreen();

baseScreen.setTitle("Screen Transition Sample");

ButtonField buttonField = new ButtonField("View Transition", ButtonField.CONSUME_CLICK) ;

buttonField.setChangeListener(this);

baseScreen.add(buttonField);

Push the screen onto the stack and paint it:

1	`pushScreen(baseScreen);`

then continue with the run method that we discussed about at the beggining and the rest of the code:

popRunnable = new Runnable() {

public void run() {

popScreen(secondaryScreen);

here we remove the base screen from the display stack, and updates the secondary screen.

}

};

}

public void fieldChanged(Field field, int context) {

pushScreen(secondaryScreen);

invokeLater(popRunnable, 2000, false);

}

We added a listener onto the button and now we took care of the action that needs to be taken on it.

Playing video

You can play video in your application on a BlackBerry® device by using the
javax.microedition.media.Player

class.

The
Player

class lets you open a file that is stored on the BlackBerry device’s built-in media storage or media card storage, by specifying a URL, or by specifying a location in your .cod file using the format:
cod:///path

.
Player

can retrieve the associated
Control

classes that you can use to control various aspects of playback (for example, the volume of the audio track).

To create a UI component that displays the video playback, you can invoke
VideoControl.initDisplay()

to retrieve a
Field

object that is added to your UI.