Using Raphael.js to draw ui elements

Question

Know of any examples of using raphaeljs extensively to make ui elements for a web app.  Form containers/windows, tabbed controls, etc.  Any suggestions when doing so(like caching the generated svg/rvml for reuse?)?

Answer 1

I'm working on something along these lines for a business intelligence application. I have a controller/factory class that caches generated svg/vml on a per-dashboard level, rather than at a widget level. There's no magic to it, really, just raiseDash/lowerDash methods that check to see if the specified dashboard exists, create it if it doesn't, and hide the previous one.

If you even think that you may want to logically group together some elements, make a set for them. I was afraid of a performance hit at first, but if you look at the g.raphael source, even the raphael developer uses a lot of them.

Each gauge I create has a background set and a foreground set (which consists of the dial, the indicators, and the text), both of which get incorporated into the foreground set of their parent widget, which in turn is incorporated into the foreground set of the entire dashboard. That way I can hide an entire dashboard and display another one with two method calls, while still retaining fine-grained control within the dashboard objects. A tabbed interface would work much the same way.

Answer 2

A simple example is using icons generated by Raphael.

Take a look at these 130 icons created by "Mr. Raphael" himself. They provide very nice scaling, as would all other UI widgets done with SVG.

One of the most important methods to use would be .node(), so you can attach handlers to the associated elements. With .node() it'd be easy to get Raphael to interact with some other libraries that are more UI geared.

Raphael even has a few built in event handlers now.