TinyLine SVG Programming Guide

5 TinyLine Example

5.1 Overview

The TinyLine Example is a SVG Dynamic Player. Here "dynamic" means that it supports user interaction, SMIL animations and hyper linking.

player.jpg

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

The TinyLine Example consist of the com.tinyline.app classes.

Some of the classes are more platform oriented, so we leave them alone and discuss the core classes that are more interesting:

Java:
com.tinyline.app.PPSVGCanvas
com.tinyline.app.PlayerListener
com.tinyline.app.SVGEvent
com.tinyline.app.SVGEventQueue
com.tinyline.app.TinyLine

Android:
com.tinyline.app.SVGSurfaceView
com.tinyline.app.PlayerListener
com.tinyline.app.SVGEvent
com.tinyline.app.SVGEventQueue
com.tinyline.app.TinyLine

In the Viewer Example we have a very simple flow. All actions are initiated by the user. In the case of dynamic SVG content we have a difficult situation. The user can pan and zoom SVG content, he can also press links or wants to stop or resume animations. Animations can trigger other animations or start or stop themselves depending on time.

5.2 Reactor framework

To solve these difficulties we use the Reactor framework. In our context, the Reactor framework is responsible for

  • Detecting the occurrence of events from various event sources
  • Demultiplexing the events to their preregistered event listeners
  • Dispatching events to the listeners to process the events in an application-defined manner

The event objects (SVGEvent) are placed onto a single event queue (SVGEventQueue) ordered by their entry time. While that happens, a separate thread, called the event-dispatch thread (thread is a member of SVGCanvas), regularly checks the event queue's state. As long as the event queue is not empty, the event-dispatch thread takes event objects from the queue one by one and sends them to the interested parties (PlayerListener). Finally, the interested parties react to the event notification by processing logic such as event handling.

Since the event-dispatch thread executes all event-processing logic sequentially, it avoids undesirable situations such as simultaneously changing the same SVGNode property.

reactor.png

© 2012 TinyLine. All rights reserved.