Implementation

For information about the design and functionality of the MIDlet, see section Design.

The MIDlet shows a list that can be scrolled up and down. To implement this functionality, simply draw the list to an empty image and show the image. The coordinates of the image are changed when the application gets animation events from the FrameAnimator class. The Gesture API is used to receive drag and swipe events.

For information about the key aspects of implementing the MIDlet, see:

Initializing FrameAnimator

To initialize the FrameAnimator, you need to first create the animator class. Then, register the FrameAnimatorListener for it and provide the maximum FPS (frames per second) and maximum PPS (pixels per second) values. From the following code you can see that this is registered as the listener. This is because the canvas in use also implements FrameAnimatorListener interface.

        animator = new FrameAnimator();
        short fps = 0;
        short pps = 0;
        //when fps and or pps is zero, will use platform default values
        animator.register(x, y, fps, pps, this);

Setting up GestureEvents

To set up GestureEvents:

  1. Define the GestureInteractiveZone where gestures are recognized. If no area is defined in for the GestureInteractiveZone, it uses the whole screen.

  2. Define which types of gesture events are to be received (in the following code, all types of gestures events are received).

  3. Register the canvas to the zone and set the listener. Note that, similarly to FrameAnimator, the Canvas class also implements the GestureListener. This is why the following code contains many this keywords.

        //register for gesturevents
        GestureInteractiveZone giz = new GestureInteractiveZone(GestureInteractiveZone.GESTURE_ALL);
        GestureRegistrationManager.register(this, giz);
        GestureRegistrationManager.setListener(this, this);

Tying the FrameAnimator to GestureEvents

To start the animation:

  1. Call the animator as soon as a gesture event is reached. The gestureAction method of the GestureListener interface is called when a gesture is recognized.

  2. In case of a drag event, the animator is instructed to drag from the current (x,y) coordinates to the new position. This is done by adding the drag distance to the current coordinates of the listimage.

  3. In the event of a flick, which equals a swipe, only the speed of the flick and the direction has to be defined. The free angle parameter tells the animator that the scroll can happen to any direction, but the following code only updates the y-coordinate, resulting in up-and-down scrolling. The friction is defined by using one of the three values in the FrameAnimator class (FRAME_ANIMATOR_LOW, FRAME_ANIMATOR_MEDIUM, FRAME_ANIMATOR_HIGH), which defines how fast the scroll slows down.

    public void gestureAction(Object container, GestureInteractiveZone giz, GestureEvent event) {
        switch(event.getType()) {
            case GestureInteractiveZone.GESTURE_DRAG:
                animator.drag( this.x + event.getDragDistanceX() ,
                        this.y + event.getDragDistanceY() );

                break;
            case GestureInteractiveZone.GESTURE_FLICK:
                animator.kineticScroll(event.getFlickSpeed(), FrameAnimator.FRAME_ANIMATOR_FREE_ANGLE, FrameAnimator.FRAME_ANIMATOR_FRICTION_MEDIUM, event.getFlickDirection());
                break;
        }
    }

Triggering the animation

To trigger the actual animation, simply update the new y-coordinate and then update the view:

    public void animate(FrameAnimator animator, int x, int y, short delta, short deltaX,
                        short deltaY, boolean lastFrame) {
        this.y = y;
        render(g);
        flushGraphics();
    }