Google-Dart / SVG Widgets Released on Github as Open-Source

Dart-Squid UI SVG / Dart Components

SVG / Dart GUI Widgets Initial Release

I have written a couple blogs about the potential for Google's Dart language to improve browser-based software applications development. In that previous posting, I also mentioned that I was working on my first open-source software (OSS) Dart language library: a set of Dart / SVG UI Development components, controls, and framework.

2018: UPDATE

I removed the Github Repository where I had this code.

I have not had time to update my SVG/Dart Widgets to make use of the latest Dart features, but perhaps sometime in the future I will do so. 

Introducing: dart-squid

The moniker I arrived at was simply a pseudo-acronym that pulled first letters from Svg, Quick, User Interface, and Development / design: i.e., "SQUID", or as the new github repository is named, "dart-squid". I have now pushed an initial commit of these open-source widgets to my Github dart-squid SVG / Dart UI Components project site under the MIT license (for freeware).

These components work in the Dartium browser (Chromium with Dart VM). To use the normal Chrome browser (JavaScript version), you would have to have the Dart Editor installed, download the widget code from github, and launch as a JavaScript project (the editor uses dart2js compiler to make this possible).

These Google-Dart/SVG UI Widgets are my first solo open-source release to Github. They are not quite as far along as my original JavaScript-based ones, but it sure was a lot easier developing the same functionality in Dart vs. JS! Dart allowed me to completely refactor the hideous JS code (prototype-ridden ugliness, etc.) and write rather decent OO (Object-Oriented) code that looks quite a bit like Delphi (i.e., object-Pascal); always a plus for Delphi aficionados like me. And, the widgets are generally pretty functional for a mid-alpha-stage release.

Dart has been rather stable for me during development, and I have worked to keep up with the latest Dart language and VM changes that emerge as Dart moves toward its "M1" release (milestone 1). E.g., today I quickly fixed a few "breaking changes" that just hit the Dart VM including the movement of the Math.(various routines) into their own dart:math library (previously such routine were in core lib). I also renamed the XMLHttpReq to the new non-XML-prefixed version. Getters are all using the latest adopted syntax (i.e., those without parens). I will try to ensure the existing functionality remains able to execute as the Dart language progresses (with, hopefully no more than a few days delay).

Future Plans for these Dart / SVG UI Widgets

As time permits, I plan to continue work on implementing new functionality and additional widgets (sub-classes). I have yet to port all my original JavaScript widgets (that included fully-native-SVG scrollbars and checkboxes), but those should be coming in the future. I am also working on getting some documentation wrapped up (though comments in the code are somewhat in-depth already).

If you happen to try these widgets out and want to ask questions, feel free to post comments here and I will do my best to answer. And, just to be clear up front: I do not expect everyone will find these components to be of use... especially right now; they are as much of a "proof-of-concept" as anything and a demonstration of what is possible in Dart/SVG. I will try to make them useful to as many people as possible, but only time will tell whether they will ever be a logical part of any real software applications. They require optimization and much more testing for sure, and until certain browser bug(s)/issue(s) are resolved (that impact rendering in some instances), they will definitely not be production-quality. Stay tuned.

Continue to read this Software Development and Technology Blog for computer programming articles (including useful free / OSS source-code and algorithms), software development insights, and technology Techniques, How-To's, Fixes, Reviews, and News — focused on Dart Language, SQL Server, Delphi, Nvidia CUDA, VMware, TypeScript, SVG, other technology tips and how-to's, plus my varied political and economic opinions.

Dart Language: Rank / Popularity Increasing Daily

Dart Language Rankings Rise

Dart Language on GitHub: Climbing Quickly

As I work on getting the first "public" release of my Dart Language SVG UI-Components/Widgets set ready, I have been contemplating whether I will self-host or push the source-code to GitHub or such. And, one thing I have noticed over the past couple weeks is that nearly every day I look at the GitHub Top Languages page for Dart Language, its popularity is increasing.

As of this writing, GitHub shows: "Dart is the #70 most popular language on GitHub".
[UPDATE: as of the "M1" Dart release-date (October, 2012), Dart ranks as #55 most popular language on GitHub; not bad considering my long-time-favorite development language - Delphi - is currently #40 on that same list after many years in the market].

Although this ranking many not sound very impressive, Dart has moved upward in the ranks quickly since its initial public release.  And yes, I understand that this early rank-movement pace is partly due to the fact that the lesser-used languages are going to be easy to overtake. But, for a language that is in "alpha" stage along with "alpha" stage Editor and "developer" stage Dartium (browser), I see this early popularity increase as a good sign for Dart.

More JavaScript being ported to Dart Language

Another thing I have noticed recently is that in the daily Dart news (a la "Abridged summary of misc@dartlang.org") and on GitHub, there are ever more announcements from fellow Dart enthusiasts that are creating ports of popular JavaScript libraries, wrappers, etc in Dart. I have not had the opportunity to check each one out in detail, but there are projects that target JSON stuff, Redis.io, MySQL, and all sorts of other things.

Given my experience with many projects on GitHub, most (regardless of language) will never (statistically) survive to become mature projects, but I expect that with time, some of these Dart projects will become solid enough to use and/or build applications upon — just like some very popular JS code has emerged over time. Hopefully my own Dart/SVG components will prove to be useful enough to survive or become the foundation for something useful — though, I am not kidding myself into thinking what I am building will fit anyone's needs aside from my own. Time will tell I guess.

It will be interesting to see if Dart can keep up its programming language rank rise in the coming months and years. I sure hope so, as I detest JavaScript for any "real" applications I need to develop. Now, back to programming...

Continue to read this Software Development and Technology Blog for computer programming articles (including useful free / OSS source-code and algorithms), software development insights, and technology Techniques, How-To's, Fixes, Reviews, and News — focused on Dart Language, SQL Server, Delphi, Nvidia CUDA, VMware, TypeScript, SVG, other technology tips and how-to's, plus my varied political and economic opinions.

Dart Language for Interactive SVG Documents

Dynamic SVG Documents using Dart
(Scalable Vector Graphics files)

I am deep in the midst of migrating a Javascript and SVG UI-Components/Widgets set to Dart Language SVG / CSS. As I prepare to publish my rather experimental Dart/SVG widgets source code and examples, I figured I would start with a super-simple example of how to replace JavaScript with Dart (as used in SVG).
UPDATE: I have pushed an initial release of my Dart/SVG GUI Components to github — see my newer blog post about "Introducing dart-squid: Dart/SVG UI Controls" for details — the source-code there will much better demonstrate the potential of Dart / SVG.

Note: the easiest way to run any Dart code, from my experience, is to download the latest Dart-enabled Chromium Browser build — Dartium (from its continuous-build directory) — I use the Dartium-Win version and it is amazingly stable for this early in a development cycle.

A Simple SVG document with Dart-Language

This example is going to be perhaps way too unsophisticated to cause much excitement, but the idea is simply to get you to consider trying Dart Language (instead of JavaScript), as I believe Dart Language has fantastic potential for browser-based business applications among other things. 

Coming from a Delphi, C#, and JS development background, I find Dart to be much closer to Delphi for development productivity than JavaScript.  I.e., I can write much more functionality in the same time using Dart than I could ever do with JavaScript; and, the code quality is immensely improved, more maintainable, extensible, and polished.

Step 1: create a .SVG file — name it whatever you want... perhaps SVG-using-external-Dart.svg or something similar. Copy and paste the following into that file and save it.

<svg    xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        id="testContainer"
        width="1000"
        height="800"
        xml:space="preserve">
    <script type="application/dart" xlink:href="external-code.dart"/>
    <svg id="testSVGCanvas">
        <rect   id="MySVGRectID" x='10' y='10' width='300' height='150'
                fill='tan' fill-opacity='1' stroke='black' stroke-width='3'/>
        <text stroke='black' x='100' y='100' >Click on Rectangle</text>
    </svg>
</svg>

Step 2: create a .dart file in the same directory — name it to match the xlink:href value we specified in our SVG file — in this case, external-code.dart. Copy and paste the following dart code into that file and save it.

#library("Test");
#import('dart:html');
void setSVGAttributes(SVGElement svgEl, var attributesPairs) {
    attributesPairs.forEach((attr, value){
        svgEl.attributes[attr] = value;
    });
}


//***********************************************************
//********** MAIN FUNCTION CALLED FROM SVG ONLOAD ***********
//***********************************************************
main() {
    SVGElement rectReference = null;
    void MouseDown(Event e) {
        setSVGAttributes(rectReference, {
            'fill': 'purple',
            'opacity': '0.6'
        });
    }
    void MouseUp(Event e) {
        setSVGAttributes(rectReference, {
            'fill': 'tan',
            'opacity': '1'
        });
    }
    print("main loaded");
    
    rectReference = document.query('#MySVGRectID');
    rectReference.on.mouseDown.add(MouseDown);
    rectReference.on.mouseUp.add(MouseUp);
}

Now, you should be able to open that .SVG file using the Dartium browser and you will see a very simple demonstration of using Dart to manipulate the SVG DOM at runtime for some simple interactivity.

In this example, a rectangle will change from tan to purple (while the mouse button is depressed).  You can get a taste for how the dart:html library exposes element events and such here at least (I suggest looking at the APIs on the dart language site; even that base dart:core library is enough to get exited about with real, and quite handy and functional, built-in collections for starters).

Notice that the code I provided here is just one approach, and ridiculously simplified.  Here is another very simple variation on that code, placing the event callbacks within main() if we want.

#library("Test");
#import('dart:html');


void setSVGAttributes(SVGElement svgEl, var attributesPairs) {
    attributesPairs.forEach((attr, value){
        svgEl.attributes[attr] = value;
    });
}


//***********************************************************
//********** MAIN FUNCTION CALLED FROM SVG ONLOAD ***********
//***********************************************************
main() {
    SVGElement rectReference = null;


    void MouseDown(Event e) {
        setSVGAttributes(rectReference, {
            'fill': 'purple',
            'opacity': '0.6'
        });
    }


    void MouseUp(Event e) {
        setSVGAttributes(rectReference, {
            'fill': 'tan',
            'opacity': '1'
        });
    }


    print("main loaded");
    
    rectReference = document.query('#MySVGRectID');
    rectReference.on.mouseDown.add(MouseDown);
    rectReference.on.mouseUp.add(MouseUp);
}

Although I am not demonstrating Dart's full potential here, keep in mind that Dart is a fully object-oriented class-based development language with a very useful optional typing system that make RAD (Rapid Application Development) possible unlike anything you'll experience with JavaScript.  Try it, you may like it!

This super-basic example demonstrates how a dart application can be built within an SVG document. And, trust me, the component set I am programming goes well beyond such simplicity. Stay tuned for more about that...

Continue to read this Software Development and Technology Blog for computer programming articles (including useful free / OSS source-code and algorithms), software development insights, and technology Techniques, How-To's, Fixes, Reviews, and News — focused on Dart Language, SQL Server, Delphi, Nvidia CUDA, VMware, TypeScript, SVG, other technology tips and how-to's, plus my varied political and economic opinions.

SVG onload event not firing : Firefox bug / feature with Shortcuts

FireFox not firing SVG onload event

(Windows) Shortcut handling to blame...

I do a fair amount of work with SVG (Scalable Vector Graphics) images / files that contain embedded JavaScript for various event-driven interactive-SVG components. The onload() event, within SVG files, is something I regularly use too. Today I ran into a strange "feature" or "bug" that shows up in Firefox but not in the Google Chrome / Chromium browser — related to this onload event in an SVG document.

I use Chrome as my default browser, especially because I like the included Developer tools a lot, so most initial testing of my web-page HTML, SVG, and JScript code takes place in Chrome before I move onto testing in other browsers (like FireFox). I have been working on my custom SVG RAD Components (tis' what I currently call them), and because I use one particular .SVG file for the main "test rig", I kept a Windows Shortcut on my Windows 7 desktop for a quick reference to that .SVG file.  I just click the shortcut to launch my SVG "application" (in Chrome) or drag the shortcut into a Chrome tab, and that works just fine.  Ah, but not in FF!

FireFox apparently does not resolve shortcut properly if dragged into browser

Being a creature of habit, when I was ready to test my latest SVG file and Javascript code within Firefox (using version 7 currently), I dragged my Windows shortcut (to my SVG file) onto the FF browser and poof... it seemed to load the SVG file, but my onload() event code simply failed to run.  I would have sworn I did this exact same drag-to-load (my SVG) with prior versions of Firefox successfully, but either way, it is not working now.

So, I loaded the page again via drag-and-drop of my Windows-shortcut to my SVG file, but this time with Firebug running (debugger / developer tool).  I quickly see that an error is being generated whereby the event-code referenced in the onload() event was shown as "myOnloadFx is not defined" within the onSVGLoad() code in FireFox (evt=SVGLoad). Clearly something strange was going on here, as this code "works" and has worked in Firefox before.

I played around with the code inside the SVG file a bit, and moved the onload() code from the opening SVG tag's onload="myOnloadFx()" to an inline-script (using <script> tags) just before the SVG's closing tag... and, the problem persisted.  So, what the heck?  After wasting more time on this than I ever should have, I then decided to go to the directory in which the SVG file really existed (vs. using the Windows shortcut to open it), and I dragged the .SVG file onto the Firefox window where it opened fine and ran the onload() event code just as Chrome did.  So, the shortcut-dereferencing/resolution is apparently to blame.

FireFox : want your SVG Javascript onload to fire? Do not open the SVG by dragging a shortcut onto FF

Now I know.  Note: the code executed in my onload() event was in an external Javascript file that is "included" in the SVG by way of code like this: <script type="text/javascript" xlink:href="myExternalSVGcode.js"/>  

Firefox is not properly converting, storing, and subsequently referencing the proper file-locations for included-code like this, but is instead looking in the directory where the shortcut appears (in my case, the desktop).  I confirmed this to be the problem simply by moving a copy of the Javascript (referenced) file onto the desktop along with the Shortcut (.lnk) and voila!  It "fixed" the issue.  UNREAL. 

I have not tested other types of scenarios where this could be a problem, and it is unlikely most people will ever encounter this unless they do software development (and perhaps even just SVG/Javascript with included external javascript files).  But, just in case, I figured I would post my notes here for anyone else that may encounter this weird onload behavior in Firefox.