Use dart idioms

The tutorial should use dart idioms

Author: vicb

Chapter_04/lib/tooltip/tooltip_directive.dart

@@ -21,58 +21,54 @@ class Tooltip {
 
   dom.Element tooltipElem;
 
-  Tooltip(dom.Element this.element, dom.Node this.node,
-      Scope this.scope) {
-
-    element.onMouseEnter.listen((event) {
-      _createTemplate();
-    });
-
-    element.onMouseLeave.listen((event) {
-      _destroyTemplate();
-    });
+  Tooltip(this.element, this.node, this.scope) {
+    element
+      ..onMouseEnter.listen((_) => _createTemplate())
+      ..onMouseLeave.listen((_) => _destroyTemplate());
   }
 
   _createTemplate() {
     assert(displayModel != null);
 
     tooltipElem = new dom.DivElement();
 
-    dom.ImageElement imgElem = new dom.ImageElement();
-    imgElem.width = displayModel.imgWidth;
-    imgElem.src = displayModel.imgUrl;
+    dom.ImageElement imgElem = new dom.ImageElement()
+      ..width = displayModel.imgWidth
+      ..src = displayModel.imgUrl;
     tooltipElem.append(imgElem);
 
     if (displayModel.text != null) {
-      dom.DivElement textSpan = new dom.DivElement();
-      textSpan.appendText(displayModel.text);
-      textSpan.style.color = "white";
-      textSpan.style.fontSize = "smaller";
-      textSpan.style.paddingBottom = "5px";
+      dom.DivElement textSpan = new dom.DivElement()
+        ..appendText(displayModel.text)
+        ..style.color = "white"
+        ..style.fontSize = "smaller"
+        ..style.paddingBottom = "5px";
 
       tooltipElem.append(textSpan);
     }
 
-    tooltipElem.style.padding = "5px";
-    tooltipElem.style.paddingBottom = "0px";
-    tooltipElem.style.backgroundColor = "black";
-    tooltipElem.style.borderRadius = "5px";
-    tooltipElem.style.width = "${displayModel.imgWidth.toString()}px";
+    tooltipElem.style
+      ..padding = "5px"
+      ..paddingBottom = "0px"
+      ..backgroundColor = "black"
+      ..borderRadius = "5px"
+      ..width = "${displayModel.imgWidth.toString()}px";
 
     // find the coordinates of the parent DOM element
     Rectangle bounds = element.getBoundingClientRect();
     int left = (bounds.left + dom.window.pageXOffset).toInt();
     int top = (bounds.top + dom.window.pageYOffset).toInt();
-    int width = (bounds.width).toInt();
-    int height = (bounds.height).toInt();
+    int width = bounds.width.toInt();
+    int height = bounds.height.toInt();
 
     // position the tooltip.
     // Figure out where the containing element sits in the window.
     int tooltipLeft = left + width + 10;
     int tooltipTop = top - height;
-    tooltipElem.style.position = "absolute";
-    tooltipElem.style.top = "${tooltipTop}px";
-    tooltipElem.style.left = "${tooltipLeft}px";
+    tooltipElem.style
+      ..position = "absolute"
+      ..top = "${top - height}px"
+      ..left = "${left + width + 10}px";
 
     // Add the tooltip to the document body. We add it here because
     // we need to position it absolutely, without reference to its
@@ -90,6 +86,5 @@ class TooltipModel {
   String text;
   int imgWidth;
 
-  TooltipModel(String this.imgUrl, String this.text,
-      int this.imgWidth);
+  TooltipModel(this.imgUrl, this.text, this.imgWidth);
 }