Implementing the SvgAnimatorMidlet

A MIDlet that will display a rotating text on a changing background. The animated image is already created and the frame rate can be manipulated.

1. Create the SvgAnimatorMidlet class file.

2. Import the required classes and assign this class to the com.nokia.midp.examples.svg package.

   /* Copyright © 2006 Nokia. */
   package com.nokia.midp.examples.svg;
   
   
   import java.io.*;
   
   import javax.microedition.midlet.*;
   import javax.microedition.lcdui.*;
   
   import javax.microedition.m2g.*;
   
   
   

3. Set LoadStaticMidlet to extend midlet and to implement CommandListener

   /**
    * Simple midlet that displays an animation using SVGAnimator,
    * It also demonstrates how SVGEventListener works.
    */
   public class SvgAnimatorMidlet extends MIDlet implements CommandListener {
   
   	

4. Write the below code to construct the MIDlet. Load the external SVG file (from JAR etc.) with the getResourceAsStream method and define the svgImage object with it.

   /**
   * Constructor.
   */
       public SvgAnimatorMidlet() {
   
        // *** load a test svg image
        SVGImage svgImage = null;
       	try {
   	        InputStream svgStream = 
   					getClass().getResourceAsStream("content3.svg");
   	        svgImage = (SVGImage)( SVGImage.createImage( svgStream, null ) );
   		} catch ( Exception e ){
         	    	e.printStackTrace();
   	    }
   
   		

   Use the createAnimator method to set up a new SVGAnimator object for the previously loaded image. Use the setSVGEventListener method next to set up an object of the MySvgEventListener class described below in Step 8. Define a Canvas object with the getTargetComponent method. For more information, see createAnimator, setSVGEventListener and getTargetComponent in the M2G API specification.

   // *** setup the SVGAnimator
           svgAnimator = SVGAnimator.createAnimator( svgImage );
           svgAnimator.setSVGEventListener( new MySvgEventListener() );
           Canvas c = (Canvas)(svgAnimator.getTargetComponent());
           Display.getDisplay(this).setCurrent( c );
           c.setCommandListener(this);
   
           

   Set up the menu that will hold the commands you can manipulate the animation with. The commands will be defined at the end of the code, in Step 7. Their functionality will be set up in Step 6.

   // *** set up the midlet menu
           int hotKey = 0;
   
           cmPlay = new Command("Play", Command.SCREEN, hotKey++);
           c.addCommand(cmPlay);
   
           cmPause = new Command("Pause", Command.SCREEN, hotKey++);
           c.addCommand(cmPause);
   
           cmStop = new Command("Stop", Command.SCREEN, hotKey++);
           c.addCommand(cmStop);
   
           cmIncrease = new Command("Increase Frame Rate", Command.SCREEN, hotKey++);
           c.addCommand(cmIncrease);
   
           cmDecrease = new Command("Decrease Frame Rate", Command.SCREEN, hotKey++);
           c.addCommand(cmDecrease);
   
           cmExit = new Command("Exit", Command.SCREEN, hotKey++);
           c.addCommand(cmExit);
       }
   
   
   	

5. Add the following three required methods.

   	/**
   	* Required midlet method.
   	*/
       public void startApp() {
   		svgAnimator.play();
       }
   
   
   	/**
   	 * Required midlet method.
   	 */
       public void pauseApp() {
       }
   
   
   	/**
   	 * Required midlet method.
   	 */
       public void destroyApp(boolean unconditional) {
       }
   
   
   	

6. Here you set up the functionality for the various commands.

   /**
   	 * Handle the various menu actions.
   	 */
       public void commandAction(Command c, Displayable s) {
           if (c == cmExit) {
               destroyApp(false);
               notifyDestroyed();
           } else if ( c == cmPlay ) {
   				svgAnimator.play();
           } else if ( c == cmPause ) {
   				svgAnimator.pause();
       	} else if ( c == cmStop ) {
       		svgAnimator.stop();
       	} else if ( c == cmIncrease ) {
       		float dt = svgAnimator.getTimeIncrement();
       		dt = dt - 0.01f;
       		if ( dt < 0 )
                         dt = 0f;
       		svgAnimator.setTimeIncrement( dt );
   
       	} else if ( c == cmDecrease ) {
       		float dt = svgAnimator.getTimeIncrement();
       		dt = dt + 0.01f;
       		svgAnimator.setTimeIncrement( dt );
   
           }
       }
   
   
   	

   The play, pause and stop methods control the state of the svgAnimator object. For more information, see play, pause, and stop in the M2G API specification. To control the frame rate, use the setTimeIncrement and getTimeIncrement methods. They control the minimal time that should elapse between frame rendering, measured in seconds. For more information, seesetTimeIncrement and getTimeIncrement in the M2G API specification.

7. Initialize the Commands for the menu functions that are used with this MIDlet.

   /*
   * Private members
   */
   
       private SVGAnimator svgAnimator;
   
       private Command cmPlay;
       private Command cmPause;
       private Command cmStop;
       private Command cmIncrease;
       private Command cmDecrease;
       private Command cmExit;
   
   }
   
   
   

8. Create your own SVGEventListener interface for the purpose of this tutorial.

   /**
    * Simple SVGEventListener with no action taken in event handling methods.
    */
   class MySvgEventListener implements SVGEventListener {
   	public void keyPressed(int keyCode) {
   	}
   
   	public void keyReleased(int keyCode) {
   	}
   
   	public void pointerPressed(int x, int y) {
   	}
   
   	public void pointerReleased(int x, int y) {
   	}
   
   	public void hideNotify() {
   	}
   
   	public void showNotify() {
   	}
   
   	public void sizeChanged(int w, int h) {
   	}
   }