SVG Programmers Application Resource Kit

The SVG Programmers Application Resource Kit (SPARK) is an open source project to create an SVG component framework for Web applications. Its goals, designs, examples and resources will be presented. Specific emphasis will be given to the design decisions that have been made (and those that have yet to be made) about the framework, and how these lead to interoperability.

Goals

The main goal of the SVG Programmers Application Resource Kit is to create a framework for reusable, SVG-based GUI components. These components would be similar to JavaBeans or ActiveX controls, but made using SVG and associated standards such as EMCAScript, CSS and XSLT. Generally, component reuse depends on standardizing APIs and conventions through which a component communicates with an application. The SPARK framework is a set of APIs and conventions through which an SVG component communicates with an SVG application.

Another goal of the SPARK project is to create a Model-View-Controller architecture within each component. The Model is analogous to an XForms or XUL description, the view is the GUI “skin”, and the controller is the logic that handles events and acts on the DOM tree. Each of these can be altered separately – for example re-skinning an application should be essentially just a change of a style sheet.

Design

The current SPARK design has attempted to tackle separation of application from component at the same time as it deals with Model-View-Controller separation. Separation was generally achieved by putting the resources in separate files. Also, component resources are designed to be completely independent of application resources, and the model and controller resources are designed to be completely independent of view resources. Because of this independence, a Web application developer can do modifications to the application or its skin without needing to know more than the interface to each component, and without worrying about adverse, unknown side effects.

The technologies used are as follows: Models of components are SVG without any styling applied. They are referenced from the application SVG using the class attribute, and multiple instances in an application are uniquely identified with the id attribute. Application and component controllers are standalone ECMAScript files. Views are achieved with SVG paint server files that define geometry like pattern fills, combined with CSS files that apply properties and patterns. The applicaton SVG includes information about the class and position of its components, initial values for each component's "property sheet", and the skin that is being applied. XSLT is used to assemble models and SVG paint server definitions on the fly, since the two must be co-resident for CSS styling to work properly.

Examples

Simple examples using the SPARK design will be presented. The examples feature multiple controls used in one application, multiple instances of a single control within the application, and multiple skins applied to that application, causing a uniform change in the appearance of all controls. The benefit of these examples is to show that the widgets can be customized very easily yet lose no functionality. They also serve to demonstrate the simplicity of creating such a UI with predefined widgets.

Resources

The CGUI library, created by Mr. Christopher Lewis, is a great resource for the SPARK project. The code from this library shall be rewritten to fulfill the design specifications of the SPARK project. There are currently two applications that use the CGUI library: the Genome Browser (created by Mr. Lewis) and an SVG Editor (created by Mr. Chris Peto). Both code bases will be rewritten in order for them to fit the framework, but they are a good start as examples of SVG-based applications.

The SPARK Web site is located at http://www.schemasoft.org.

Mr. Alastair Fettes
Faculty of Engineering
University of Victoria
PO Box 3055, EOW 248
Victoria, British Columbia
Canada V8W 3P6
email: afettes@engr.uvic.ca
tel:   250-480-8424
Dr. Philip A. Mansfield
SchemaSoft
#350 - 1190 Homer Street
Vancouver, BC  V6B 2X6
Canada
email: philipm@schemasoft.com
tel:   604-682-3404 x142
       
Mr. Christopher T. Lewis
University of Saskatchewan
107 Science Place
Saskatoon Research Centre
Saskatoon, SK  S7L 7H7
Canada
email: lewisct@agr.gc.ca
tel:   306-956-7693
Mr. Glenn MacDonald
SchemaSoft
#350 - 1190 Homer Street
Vancouver, BC  V6B 2X6
Canada
email: glennm@schemasoft.com
tel:   604-682-3404 x108