TinyLine SVG Programming Guide

6 Shapes2 Example

6.1 Overview

The event model, which we saw at its simplest in the preceding example, is quite powerful and flexible. Any number of event listener objects can listen for all kinds of events.

The Shapes2 Example shows how to write your own event listener and how to manipulate SVGNode tree when you have SMIL animations running.

shapes21.jpg shapes22.jpg

View this example as applet (Java-enabled browsers only)

6.2 Custom SVGEvent

First, we define our own SVGEvent code equals 100.

        public static final int USER_EVENT     = 100;

Then, we need to make standard arrangements with the default SVG font and also we need to register the default event listener, which allows running SMIL animations.

        // Load the default SVG font
        SVGDocument doc =  canvas.loadSVG("/tinyline/helvetica.svg");
        SVGFontElem font = SVGDocument.getFont(doc,
                           SVG.VAL_DEFAULT_FONTFAMILY);
        SVGDocument.defaultFont = font;

     	// Add the default events listener
	PlayerListener defaultListener = new PlayerListener(canvas);
	canvas.addEventListener("default", defaultListener, false);

Next, we register our own ShapesListener and start the events dispatching thread.

        // Add the user defined (custom) events listener
	ShapesListener shapesListener = new ShapesListener(canvas);
        canvas.addEventListener("shapes", shapesListener, false);

	// Start the event queue
	canvas.start();
	// Load the SVGT image
        canvas.goURL("/svg/shapes.svg");

UI commands post our custom events into the event queue

    public void commandAction(Command c, Displayable s)
    {
        ///System.out.println("Command " +c);
	SVGEvent event;
        if(c == menuCircle)
        {
           event = new SVGEvent(USER_EVENT,
                       new TinyNumber(SHAPE_CIRCLE ));
           canvas.postEvent(event);
        }
        else if(c == menuRect)
        {
           event = new SVGEvent(USER_EVENT,
                       new TinyNumber(SHAPE_RECT ));
           canvas.postEvent(event);
	}

And, all the logic is done in the ShapesListener.

© 2008 TinyLine. All rights reserved.