Getting serious about design in open source (and SVG!)
I took a barely affordable detour tonight and crafted a good start at an XBL implementation of JJG's visual vocabulary for Mozilla in SVG.Here's a screenshot of the supported types so far: page, pagestack, file, filestack:
This effort was kickstarted by a call for using the visual vocabulary to spec workflows during design. I've also been itching to return to SVG given the new top level commitment to it at Mozilla.org. I had been using Moz SVG extensively back in 2002 but switched to Flash for visualizations when it seemed mozsvg would never reach maturity. I'm happy to say that conclusion was wrong!
The code, demoable in an svg build of Mozilla here (src, MPL'ed). Here's what the xhtml looks like:
<svg:file size="20"
top="20" left="350" />
<svg:file
size="50" top="60" left="350" />
<svg:file size="100" top="140" left="350"
/> Take a look at the XBL which generates file and filestack. The transform protocol is largely undocumented, I figured it out from other source code and left a few notes behind.
Transforms are used to scale and position the elements, and the file XBL is re-used to create filestack.
At the Hypertext conference this fall, a serious compsci guy said "there's no way to get separate scopes for js code in Mozilla" -- not true, XBL does that. Even better, we can now use standard DOM operations like createElement("pagestack"). The prospect of building connectors is a bit more daunting. I'm imagining this as follows:
<link from="someID"
to="someOtherId" type="oneWay">
Things will get interesting in implementing areas, for
secure/iterative/conditional. The DOM/CSS approach will allow a
bounding element to easily size itself to the contents. In the end,
one might edit a flow diagram in straight XML or in a graphic editor.
Inserting labels into the elements will also be a nice challenge -- if
all else fails, the computedStyle can be accessed to see if the
boundaries of the container are being exceeded. The point is that open source needs to own it's design tools in the same way it owns the development toolset.
|||
Posted at 21:53, Published in: Mozilla Code UI
