LWUIT Tutorial

Using Transitions

Many applications use more than one form. For example, a messaging application might use one screen to show incoming messages, one screen for composing messages, and one screen to display an address book.

To show more than one form in LWUIT, simply create Forms and call each show() method when you want to display the corresponding form.

A transition provides a helpful visual cue to the user about the relationship between different forms. LWUIT can slide forms horizontally or vertically. LWUIT also includes a gradual fade from one form to the next. On devices with the JSR 184 Mobile 3D Graphics API, LWUIT can also perform some three dimensional transitions.

If LWUIT's transitions don't meet your needs, you can write your own transition.

CommonTransitions contains static factory methods for creating slide and fade transitions.

  • createSlide() creates a transition that slides a new form onto the screen while sliding the current form off. Sliding can be up, down, left, or right.
  • createFade() makes a transition that smoothly fades from the current from to a new one.

For devices that support the JSR 184 Mobile 3D Graphics API, LWUIT offers static methods in Transition3D for three additional types of transitions.

  • createFlyIn() zooms the new form in from the center to fill the entire screen.
  • createCube() gives the illusion that the current form is the front face of a cube. The cube rotates to show another face which is the new form.
  • createRotation() flips the current form like a playing card. The new form is revealed on the other side.

You can set an incoming and outgoing transition for each form. The incoming transition is used when the form will be displayed. The outgoing transition is used when the form will be replaced by another.

The following example sets up two forms with a single button on each. Press the button to switch between the forms using slide transitions.

The slides transitions are created by specifying whether the slide is horizontal or vertical, a direction (true for forward, false for reverse), and the time in milliseconds.

In the example, the first form's outgoing transition is horizontal, backward (meaning that the form will slide off to the left), and 200 milliseconds long. The second form's outgoing transition is the same, but forward, which means it slides off to the right.

import javax.microedition.midlet.*;

import com.sun.lwuit.*;
import com.sun.lwuit.animations.*;
import com.sun.lwuit.events.*;

public class TransitionMIDlet extends MIDlet implements ActionListener {
    private Form mFirstForm, mSecondForm;
    
    public void startApp() {
      if (mFirstForm == null) {
        Display.init(this);

        mFirstForm = new Form("First Form");
        
        Button button = new Button("Switch");
        mFirstForm.addComponent(button);
        button.addActionListener(this);
        
        mFirstForm.setTransitionOutAnimator(
            CommonTransitions.createSlide(
                CommonTransitions.SLIDE_HORIZONTAL, false, 200));

        mSecondForm = new Form("Second Form");

        Button button2 = new Button("Switch");
        mSecondForm.addComponent(button2);
        button2.addActionListener(this);

        mSecondForm.setTransitionOutAnimator(
            CommonTransitions.createSlide(
                CommonTransitions.SLIDE_HORIZONTAL, true, 200));

        mFirstForm.show();
      }
    }

    public void pauseApp() {}

    public void destroyApp(boolean unconditional) {}

    public void actionPerformed(ActionEvent ae) {
      Form current = Display.getInstance().getCurrent();
      if (current == mFirstForm) {
        mSecondForm.show();
      } else if (current == mSecondForm) {
        mFirstForm.show();
      }
    }
}

Copyright © 2008 Sun Microsystems, Inc.