DART / SVG Quick UI Development Widgets
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.
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.
Online dart-squid Samples : I will try to keep this sample up-to-date as any substantial changes to the features/functionality change.
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
- Single-File PDF: dart-squid SVG UI Widgets Introduction, Discussion, TODO Items, Bug Reports, and related documentation.
- [API Reference (aka dartdocs)] (http://mv4t.com/dart-squid/docs/dart_squid.html)
- Wiki Documentation
MIT License (for freeware). See LICENSE file for project licensing information.
Mike