Sunday, April 22, 2012

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.

Friday, April 20, 2012

Delphi DBGrids.pas Source-Code mods for Alternating Row Color

Alternating DBGrid Row Colors in Borland / Embarcadero Delphi

As I migrate some existing internal software from Delphi to Dart Language and HTML/SVG/CSS, I figured I would post some of my soon-to-be "legacy" Delphi source code online for anyone that may want to leverage it. In this particular case, I have some code I use to rather automatically determine a reasonable color-coordinated alternating-color scheme for grid rows in a DBGrid, as well as the modifications I made to the DBGrids.pas to makes use of this color-flipping code.

UPDATE (JAN-2017): I used to host my modified Delphi DBGrids.pas source-code on another site, but I have now moved my source code onto this blog under this new entry: DBGrids.pas enhancement for automatic alternating grid row colors / highlights.  Go there for an update to all of this.

With my approach, I can have DBGrids with odd/even (i.e., alternating) rows having slightly different but yet nicely coordinated colors, and show their "selected" row as highlighted too

One approach: modify the DBGrids.pas source-code directly

I chose to modify the DBGrids.pas source code provided with Delphi, since the DBGrid.pas DrawCell (TCustomDBGrid.DrawCell method) provided no easy way to extend the routine to do what I wanted.  Fact is, I tried repeatedly to extend DBGrid via the DrawCell routines and such, but I just could not get the control I wanted.  It was so much easier to just "hack" the DBGrids.pas source code directly.

I went a bit beyond just alternating the grid-row colors, as I am also doing some other things like modifying how bookmarks work and selected-rows work and such.

I hope you can get some use of out this.  Enjoy!


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.

Thursday, April 19, 2012

SQL Server 2012 Free Book Download (PDF, MOBI, EPUB)

Get a Free Microsoft SQL-Server 2012 Book


Lean What's New in SQL-Server 2012

If you are considering migrating from Microsoft SQL-Server 2005, 2008, or 2008r2 to the newly release SQL-Server 2012, you may wish to see what's new in SQL-Server 2012 before making the move. I wrote a summary blog about SQL-Server 2012 New Features of Interest last month to get you started.

In that blog, I provided bullet-points covering a few areas of interest, including: SQL2012 New and Improved Features / Enhancements, SQL 2012 Transact-SQL (T-SQL) improvements / enhancements, and an overview of Obsolete and Deprecated Features. But, perhaps you want a bit more detail...

Microsoft makes PDF / MOBI / EPUB available for Free

Microsoft Press was good enough to provide a downloadable Free ebook: Introducing Microsoft SQL Server 2012 to help you catch up on their SQL-Server product. So, is the book any good?

My Quick "Review" / Thoughts about this book

I gave the Introducing Microsoft SQL Server 2012 book a quick read-through. Perhaps no surprise: a lot of it reads like marketing material, in my opinion. Yes, the book is "OK" for getting an overview of what's new in MS SQL-Server 2012, as it provides a decent level of detail by areas of interest within the product.

Some observations:

  •  I could not help thinking this book could be a LOT shorter and accomplish the same thing or make it more clear.  This is typical of many tech-books that seem to think more pages equals more credibility.  Who has time for this?

    One example can be found on pages 12-15, where the features by edition are being compared.  Great, but why not start with Standard edition features, and then for the Business Intelligence edition and Enterprise Editions say "includes features of Standard, plus the following:" instead of repeating portions of  the list.  In fact, it gets worse... the way they presented this information is horrendous; good luck deciphering what each version of the product has based on this section of the book.  Why?  They repeat some feature enumerations, but not others. E.g., they repeat "reporting" and "analytics" in each edition's bullet-lists, but only show "spatial support" and "filetable" on the Standard Edition (which, clearly Enterprise will include too).  It's a mess!  


  • I wonder how much time the authors spend on the circular pie-with-arrows image on page 12 that is supposed to show some relation between product editions.  And, let me summarize it's value: ZERO.  What in the heck is this showing?  OK, we know the three editions, but what are the arrows?   It would make sense if the arrows went from Standard, to Business Intelligence, to Enterprise and then ended, but what is with the arrow from Enterprise back to Standard?  Bottom line: the graphic adds NOTHING.


  • The authors suffer from plump-it-up wordsmithing all too often.  E.g., ( from p76) "In addition, the following list articulates other new features associated with FILESTREAM:"; wow, what a lengthy way to say "Additional  FILESTREAM  features include:"!  ughhh.  Such verbal embellishment adds nothing of value.  And, such useless wordiness runs rampant in this book.  Too often, this verbosity makes things less clear than more clear; that is a problem.  I could list plenty of examples, but that too would add little value :)


  • Various errata found even during a quick read.  See page 87's table of "possible use cases" for a multipolygon, and the "Ccadastre"; do editors proof-read these days? They spelled it right in the previous example, but got it wrong during a copy/paste to this grid-box.  By the way, how about using the words "survey map" (one case where two words may be better than one since cadastre / cadaster is not a common term).

    While critiquing their spatial-data examples, I also question their "possible use cases" for point and multipoint where they state "Can be used to draw a tree, pole, hydrant, value"; I don't know about you, but I don't draw trees with points.  I think they want to say that a point or multipoint can be used to indicate the location of tree(s), pole(s), etc.


  • Chapter 5 is entitled "Programmability and Beyond-Relational Enhancements", but yet they did not discuss ANY of the changes to Transact-SQL that I enumerated in my previous blog entry (link above in first paragraph: recommended).   I would have expected at least some discussion of the T-SQL enhancements, e.g.,: new builtin functions, windowing functionality in the OVER clause (handy!), OFFSET and FETCH in the ORDER BY clause, and more.  Perhaps neither author writes many stored procedures or hard-core queries, and thus didn't see the value in mentioning these new features?    


In summary:

The book is certainly a nicer way to get familiar with all the changes in SQL-Server 2012 without having to bounce around all the pages within the Books Online, but the book also leaves out important details regarding functionality that is truly new in SQL-Server 2012 (like the Transact-SQL changes).    Once I got past various issues (as mentioned above), I felt the book did an OK job of presenting SQL-Server 2012, especially considering the fact it is being given away for FREE.

Download it for yourself and share your thoughts here if you have a chance.


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.

Saturday, April 14, 2012

Dart Language in; JavaScript and Delphi out.

Dart Language Fills a Void

Dart Language may become my primary development language!

In a previous blog, I mentioned how Google's Dartium browser for Windows — essentially the Chromium "Chrome" browser with a Dart-Language Virtual Machine (VM) buit in — was made available to developers. Since then, I have been using the regularly-updated builds of Dartium to run my native Dart-language applications (HTML and SVG User-Interfaces with Dart for the business-logic), and I must say, I am absolutely thrilled with the productivity improvements I am seeing when developing with Dart (instead of JavaScript)! Words alone can hardly express the potential this language has for improving web-based software application development.

Dart Language: Web Pages are just the Beginning

Did you catch my use of the term "applications" a bit ago. Dynamic Web content (pages) is just the beginning of what I will be using Dart for. Sure, you can replace your JavaScript code with Dart, and realize the benefit of a much nicer OOP (Object-Oriented Programming) approach to web-development, and realize it NOW, but Dart holds more promise.

Dart's True Potential: Business Applications

I have read a quite a few anti-Dart articles recently, mostly from proponents of JavaScript (ranging from JS evangelists to simply average developers that have used JS for a long time). It has been argued that Dart cannot succeed for various reasons: e.g., concerns that Dart will simply not reach more than a certain percentage of users (if other browsers fail to adopt the Dart VM), that the current JS code base is just too big to migrate to Dart, etc. Although these points may have a bit of validity, the arguments make little sense for any business-internal applications where the browser-choice can be 100% guaranteed to include Chrome (if it remains the only browser to include Dart support). And, really, what is the big deal with installing multiple browsers IF it was needed?

There are millions of software applications that run only "internal" to a business, and many of these internal applications are either "browser-based" or are in need of a transition to "browser-based" form. And, if Dart makes developing such applications a more efficient — and perhaps all-importantly: less-costly — endeavor, then the choice to write applications in Dart will be a simple one. It is not like Dart is difficult to learn if you know JavaScript already; in fact, if you have any OOP background along with some JS experience, you are going to take to Dart Language very quickly, and find yourself incredibly productive compared to JS!

I can't emphasize this point enough: true software applications (not simply public customer-facing web pages) are perfect candidates for Dart. The productivity and re-use of object-oriented development, coupled with a Dart's wonderful core libraries (which are getting better all the time), are a huge leap forward for browser-based applications development. And, this is rather platform-agnostic development too — we're still dealing with a browser that will run on quite a few platforms. And, I have not even touched on the server-side potential (e.g., compared to the spaghetti-code mess of Node.js and 10-level-deep nested javascript closures -- eek!)

Dart: included Libraries = Huge Savings

Ah... the simplicity of instantiating a new List<> object to store references to instances of my custom classes and iterate through them! List is just one of the included Collection types. And, these collections include a nice set of methods for working with the items contained therein. The HTML library provides a somewhat nicer way to work with the DOM than standard JS method too. Overall, Dart is making my life so much simpler and more productive thanks to the language features and the libraries included.

Perhaps more important is how simple it is to create your own libraries. And, unlike JS, you should not worry about global-namespace-pollution; that should be a thing of the past. And when you start writing your libraries, you have all the benefits of a modern typed-language with solid OOP features.

Sure, JS has what is called "prototypical inheritance" and you can achieve *some* encapsulation with closures, but the fact is, for someone with C#, Java, Delphi, or C++ experience, Dart offers "real" inheritance and encapsulation in a much simpler way (i.e., REAL way). Did I mention how wonderful it is to be able to quickly test the Type of an object using "is" when I need to (class / interface testing)! And, you have polymorphic method/constructor signatures, optional parameters, etc. I am a long-time Delphi developer, and I am really taking to Dart in a hurry thanks to all these familiar OOP features.

My first Dart Library: Dart-Based SVG Widgets / Components

I had previously attempted to create a robust SVG (Scalable Vector Graphics) component library using JavaScript, and I got rather far along with it before I hit a wall thanks to JavaScript. JS was simply making my intended component-hierarchy nearly impossible to implement — surely impossible to implement as a formal, strongly-typed, class library as I had envisioned. But, using Dart, I have already surpassed (in little time) the functionality of my previous JavaScript-based SVG widgets and have seen my vision become reality. Dart has provided a much better OOP foundation for building a true software component set / library with!

I have written previously about my desire to replace desktop Embarcadero Delphi-based development with HTML5/CSS3, and I had tried to do so using JavaScript as the underlying language, but simply put: JavaScript sucks compared to Delphi (or C#). Now that I have Dart at my disposal, my transition from Delphi to HTML5/CSS3/Dart is well underway. I have that familiar high-productivity I am used to with Delphi (object Pascal), now nicely coupled with to browser UI technologies of choice (HTML5/CSS3/SVG), and I am moving forward quickly.

Stay tuned for some source-code and samples using Dart! I plan to release my Dart-language SVG Components / Widgets as open-source in the not too distant future. 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.  Those should demonstrate quite nicely what productivity can be achieved with regards to developing component sets that will run in a browser. And, perhaps people will find the SVG components useful for something I have not even imagined yet. In the meantime, check out Dartium and Dart: this is a language/framework you do not want to overlook.

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.