Dart Misc: Element Constructors and Method Cascades

‹prev | My Chain | next›

I am fairly pleased with the progress that I have made of late in whipping my various Dart properties into shape. The dart dirty backend datastore could be faster, but it does what it needs to do. The Hipster MVC client-side framework is all up to date for Dart M1 and beyond. I even have a nicely factored Dart web server for Dart Comics. In other words, it is probably time to start winding down my Dart activities *sniff*.

But before I go, I need to work through the Errata for Dart for Hipsters. And, mostly thanks to my Chinese translator Guokai Han, I have no lack for errata. On a side note, I still have not been told how “Hipster” translates into Chinese. Anyhow…

Most of the errata are small things that have changed in the language itself. Hopefully I would have noticed them on my own, but it's nice to have a list. One the errata notes that Element now has subclasses for just about every type of HTML element there is. So, back in Dart Comics, I can change things like:

bg = new Element.tag('div');

To the following instead:

bg = new DivElement();

When I first noticed the incredible list of subclasses for Element, I have to admit that I thought it pretty silly. But, it actually does clear up the code intent.

The other errata that I am going to look at tonight is the suggestion that I touch on method cascades. One of the more interesting implications of cascades and setters is that it is possible to cascade the setting of a bunch of properties—like styles. In the modal dialog that I have in Dart Comics, there is background element that is style like so:

      bg.style.position = 'absolute';
      bg.style.top = '0px';
      bg.style.left = '0px';
 
      bg.style.width = "${doc.offsetWidth}px";
      bg.style.height = "${doc.clientHeight}px";
 
      bg.style.backgroundColor = 'black';
      bg.style.opacity = '0.8';
      bg.style.zIndex = '1000';

I can rewrite the setter methods in a single statement:

      bg.style
        ..position = 'absolute'
        ..top = '0px'
        ..left = '0px'

        ..width = "${doc.offsetWidth}px"
        ..height = "${doc.clientHeight}px"

        ..backgroundColor = 'black'
        ..opacity = '0.8'
        ..zIndex = '1000';

The example from the M1 release notes on cascades mixes setter methods with standard methods, which I find odd looking. I had expected to dislike setter cascades regardless, but now that I see it in action, I must confess that I like it—at least when using nothing but setters.

That will do for a stopping point tonight. Cascades in particular seem a tough topic to broach in the book, especially early on. So I'm off to see how best to incorporate what I have learned.

Day #583