Spark Skinnable SVG GUIs Investigation - Draft



The primary goal of this investigation was to create a Hello World SVG application that could have multiple skins applied to it without requiring any changes to the application SVG or scripts. It was felt that creating an example would be more fruitful than continuing to research the multitude of options available.


The follow stylings are used in an attempt to improve clarity:


Files Used


In the demo provided, the file index.html shows three instantiations of the same application. The same .js files are used for each. A copy of the same app.svg file is in each of the two folders svg and secondskin. The only file that differs is the skin.svg file in each folder. The third application is just a styling of the first application.The version of app.svg in the styledskin folder differs only in that it includes a style sheet.

Use of the class attribute

The class attribute is used in two distinct manners with the usage context differentiating the two cases. First, it's used to indicate the type of a widget (e.g. checkBox) when defining the UI resources. Secondly, it's used to provide the parameter names when describing the components of a given widget (e.g. message).

Use of the id attribute

The id attribute is used to provide unique identifiers for the UI elements. Since we're guaranteed that the id's are unique, they provide the foundation for a naming convention for callbacks. Widget callbacks take the form idfoo(params, ...). The application developer is responsible for implementing these callbacks. For example,

These naming conventions allow for the UI initialization code to be shared amongst applications. The application developer may then author his scripts using the id values much like traditional resource ids.

Key File Details




Areas For Improvement

Non-conforming (or semi-conforming) skins