DART / SVG Quick UI Development Widgets

NOTE: this project has been superseded by a newer Polymer.dar version of these widgets (as of January 2014). See my Polymer / DART / SVG UI Widgets and Controls Github page for source code and links to examples and documentation. That project includes improvements to code that have not been back-ported to this project.

dart-squid is an open-source Dart / Svg Quick UI Development framework and components / widget set for browser-based applications. SVG (Scalable Vector Graphics) is used for the UI rendering. CSS is (indirectly) used for styling of SVG Widgets.

The longer-term objectives are to develop both a RAD component set and an IDE that will make creating web-applications very similar to writing Delphi desktop applications. In fact, if you are familiar with Delphi (VCL), the component structure, hierarchy, and implementation paradigm should be somewhat familiar and the Dart language provides very similar programming capabilities.

NOTE: superseded by Polymer.dart version as noted above. Project is currently in the alpha stage of development, but quite functional and rather well documented. Currently, these widgets only work well within Dartium (DART) or Chrome (JS via dart2js) browsers. Other browsers are not a current priority, and may never be.

These components currently serve as a proof-of-concept that explores the viability of relying on SVG for a visual widget set. Due to outstanding issues with browser bugs (like proper SVG region-repaints in Webkit), there are limitations with what is possible.

See Documentation links below for more. Dartdocs (API) are rather complete, and more detail is available in PDF documentation.

Quick Overview:

• Nesting of widgets (visual and true object-hierarchical); rather like Delphi panels and controls.
• Base Widget implements borders, positioning, sizing, and alignment (relative to other Widget parts, parent/container-widgets, or browser-window bounds).
• Borders Sub-Components include margin, outer, frame, inner, and padding (from outermost to innermost).
• Movable/Sizable (including sizing, moving, and position rules/constraints); alignment preserved during move/size operations where it makes sense.
• Multi-Select (for Moves) — depress SHIFT key while left-clicking.
• CSS used to Style parts, including pre-defined border-styles (raised, grooved, flat, etc). Effects via SVG-Filters are possible.)
• Application object exists to manage widget interactions and enable true software application (ultimately).

• Source Code is commented in some detail
• Source Code has markup to create the dartdocs describing methods, properties, etc.
• Wiki Documentation

MIT License (for freeware). See LICENSE file for project licensing information.

Mike

Blog: http://suretalent.blogspot.com