Cleanup sky/sdk/examples

* Remove all the DOM-based examples except for the old stocks app
* Rename stocks2 to stocks
* Promote hello_widgets.dart to a top-level hello_world example

TBR=ianh@google.com

Review URL: https://codereview.chromium.org/1219493003.

sdk/example/color/color-chooser.sky

@@ -1,96 +0,0 @@
-#!mojo mojo:sky_viewer
-<!--
-// Copyright 2015 The Chromium Authors. All rights reserved.
-// Use of this source code is governed by a BSD-style license that can be
-// found in the LICENSE file.
--->
-<sky>
-  <style>
-    #chooser {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      padding: 5%;
-    }
-    #color-wheel {
-      min-width: 100%;
-      height: auto;
-    }
-    #color-sample {
-      margin: 5%;
-      padding: 10%;
-      text-align: center;
-      border-radius: 10px;
-    }
-  </style>
-  <div id="chooser">
-    <img id="color-wheel" src="color-wheel.png"/>
-    <h1 id="color-sample">Select Color</h1>
-  </div>
-  <script>
-  import 'dart:sky';
-  import 'dart:math';
-
-  class RGB {
-    final int r;
-    final int g;
-    final int b;
-    const RGB(this.r, this.g, this.b);
-    String toString() => "rgb($r, $g, $b)";
-  }
-
-  RGB hsvToRgb(double h, double s, double v) {
-    var i = (h * 6).floor();
-    var f = h * 6 - i;
-    var p = v * (1 - s);
-    var q = v * (1 - f * s);
-    var t = v * (1 - (1 - f) * s);
-    var r, g, b;
-    switch (i % 6) {
-      case 0: r = v; g = t; b = p; break;
-      case 1: r = q; g = v; b = p; break;
-      case 2: r = p; g = v; b = t; break;
-      case 3: r = p; g = q; b = v; break;
-      case 4: r = t; g = p; b = v; break;
-      case 5: r = v; g = p; b = q; break;
-    }
-    return new RGB((r * 255).floor(), (g * 255).floor(), (b * 255).floor());
-  }
-
-  RGB xyToRgb(x, y, radius) {
-    var rx = x - radius;
-    var ry = y - radius;
-    var d = radius * radius;
-    if (rx * rx + ry * ry > d)
-      return null;
-    var h = (atan2(ry, rx) + PI) / (2 * PI);
-    var s = sqrt(d) / radius;
-    return hsvToRgb(h, s, 1.0);
-  }
-
-  elt(String id) => document.getElementById(id);
-
-  void updateColor(event) {
-    var bounds = event.target.getBoundingClientRect();
-    var x = event.x - bounds.left;
-    var y = event.y - bounds.top;
-    var radius = min(bounds.width, bounds.height) / 2.0;
-    var rgb = xyToRgb(x, y, radius);
-    if (rgb != null) {
-      var ccsColor = rgb.toString();
-      elt("color-sample").style["background-color"] = ccsColor;
-    }
-  }
-
-  void selectColor(event) {
-    var ccsColor = elt("color-sample").style["background-color"];
-    print(ccsColor);
-  }
-
-  void main() {
-    elt("color-wheel").addEventListener("pointerdown", updateColor);
-    elt("color-sample").addEventListener("pointerdown", selectColor);
-    elt("color-sample").style["background-color"] = "rgb(0, 209, 255)";
-  }
-  </script>
-</sky>

sdk/example/color/pubspec.yaml

@@ -1,3 +0,0 @@
-name: color
-dependencies:
- sky: any

sdk/example/hello_world/lib/main.dart

@@ -6,7 +6,7 @@ import 'package:sky/widgets/basic.dart';
 
 class HelloWorldApp extends App {
   Widget build() {
-    return new Text('Hello, widgets!');
+    return new Text('Hello, world!');
   }
 }
 

sdk/example/hello_world/main.sky

@@ -1,7 +0,0 @@
-<script>
-import 'hello_world.dart';
-
-void main() {
-  new HelloWorldApp();
-}
-</script>

sdk/example/hello_world/pubspec.yaml

@@ -1,3 +1,7 @@
 name: hello_world
+author: Chromium Authors <sky-dev@googlegroups.com>
+description: Hello, world using Sky
+homepage: https://github.com/domokit/sky_sdk/tree/master/packages/sky/example/hello_world
+version: 0.0.1
 dependencies:
- sky: any
+  sky: '>=0.0.10 <1.0.0'

sdk/example/old/stocks/lib/stock_arrow.dart

@@ -0,0 +1,93 @@
+// Copyright 2015 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'dart:math';
+import 'package:sky/framework/fn.dart';
+import 'package:sky/framework/layout.dart';
+
+class StockArrow extends Component {
+  static final Style _style = new Style('''
+    width: 40px;
+    height: 40px;
+    align-items: center;
+    justify-content: center;
+    border-radius: 40px;
+    margin-right: 16px;
+    border: 1px solid transparent;'''
+  );
+
+  static final Style _upStyle = new Style('''
+    width: 0;
+    height: 0;
+    border-left: 9px solid transparent;
+    border-right: 9px solid transparent;
+    margin-bottom: 3px;
+    border-bottom: 9px solid white;'''
+  );
+
+  static final Style _downStyle = new Style('''
+    width: 0;
+    height: 0;
+    border-left: 9px solid transparent;
+    border-right: 9px solid transparent;
+    margin-top: 3px;
+    border-top: 9px solid white'''
+  );
+
+  double percentChange;
+
+  StockArrow({ Object key, this.percentChange }) : super(key: key);
+
+  // TODO(abarth): These should use sky/framework/theme/colors.dart.
+  final List<String> _kRedColors = [
+    '#E57373',
+    '#EF5350',
+    '#F44336',
+    '#E53935',
+    '#D32F2F',
+    '#C62828',
+    '#B71C1C',
+  ];
+
+  // TODO(abarth): These should use sky/framework/theme/colors.dart.
+  final List<String> _kGreenColors = [
+    '#81C784',
+    '#66BB6A',
+    '#4CAF50',
+    '#43A047',
+    '#388E3C',
+    '#2E7D32',
+    '#1B5E20',
+  ];
+
+  int _colorIndexForPercentChange(double percentChange) {
+    // Currently the max is 10%.
+    double maxPercent = 10.0;
+    return max(0, ((percentChange.abs() / maxPercent) * _kGreenColors.length).floor());
+  }
+
+  String _colorForPercentChange(double percentChange) {
+    if (percentChange > 0)
+      return _kGreenColors[_colorIndexForPercentChange(percentChange)];
+    return _kRedColors[_colorIndexForPercentChange(percentChange)];
+  }
+
+  UINode build() {
+    String border = _colorForPercentChange(percentChange).toString();
+    bool up = percentChange > 0;
+    String type = up ? 'bottom' : 'top';
+
+    return new FlexContainer(
+      inlineStyle: 'border-color: $border',
+      direction: FlexDirection.Row,
+      style: _style,
+      children: [
+        new Container(
+          inlineStyle: 'border-$type-color: $border',
+          style: up ? _upStyle : _downStyle
+        )
+      ]
+    );
+  }
+}

sdk/example/old/stocks/lib/stock_data.dart

@@ -4,7 +4,6 @@
 
 import 'dart:convert';
 import 'dart:math';
-
 import 'package:sky/framework/net/fetch.dart';
 
 // Snapshot from http://www.nasdaq.com/screening/company-list.aspx
@@ -60,7 +59,7 @@ class StockDataFetcher {
   }
 
   void _fetchNextChunk() {
-    fetchBody('../data/stock_data_${_currentChunk++}.json').then((Response response) {
+    fetchBody('data/stock_data_${_currentChunk++}.json').then((Response response) {
       String json = response.bodyAsString();
       JsonDecoder decoder = new JsonDecoder();
 

sdk/example/old/stocks/lib/stock_list.dart

@@ -2,30 +2,22 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import 'package:sky/widgets/fixed_height_scrollable.dart';
-import 'package:sky/widgets/basic.dart';
-
+import 'package:sky/framework/components/fixed_height_scrollable.dart';
+import 'package:sky/framework/fn.dart';
 import 'stock_data.dart';
 import 'stock_row.dart';
 
 class Stocklist extends FixedHeightScrollable {
-
-  Stocklist({
-    String key,
-    this.stocks,
-    this.query
-  }) : super(itemHeight: StockRow.kHeight, key: key);
-
   String query;
   List<Stock> stocks;
 
-  void syncFields(Stocklist source) {
-    query = source.query;
-    stocks = source.stocks;
-    super.syncFields(source);
-  }
+  Stocklist({
+    Object key,
+    this.stocks,
+    this.query
+  }) : super(key: key);
 
-  List<Widget> buildItems(int start, int count) {
+  List<UINode> buildItems(int start, int count) {
     var filteredStocks = stocks.where((stock) {
       return query == null ||
              stock.symbol.contains(new RegExp(query, caseSensitive: false));

sdk/example/old/stocks/lib/stock_menu.dart

@@ -0,0 +1,44 @@
+// Copyright 2015 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'package:sky/framework/fn.dart';
+import 'package:sky/framework/layout.dart';
+import 'package:sky/framework/components/popup_menu.dart';
+import 'package:sky/framework/components/checkbox.dart';
+import 'package:sky/framework/theme/view_configuration.dart';
+
+class StockMenu extends Component {
+  static final Style _style = new Style('''
+    position: absolute;
+    right: 8px;
+    top: ${8 + kStatusBarHeight}px;''');
+
+  PopupMenuController controller;
+
+  StockMenu({Object key, this.controller, this.autorefresh: false, this.onAutorefreshChanged}) : super(key: key);
+
+  final bool autorefresh;
+  final ValueChanged onAutorefreshChanged;
+
+  static FlexBoxParentData _flex1 = new FlexBoxParentData()..flex = 1;
+
+  UINode build() {
+    var checkbox = new Checkbox(
+      checked: this.autorefresh,
+      onChanged: this.onAutorefreshChanged
+    );
+
+    return new StyleNode(
+      new PopupMenu(
+        controller: controller,
+        items: [
+          [new Text('Add stock')],
+          [new Text('Remove stock')],
+          [new ParentDataNode(new Text('Autorefresh'), _flex1), checkbox],
+        ],
+        level: 4),
+        _style
+    );
+  }
+}

sdk/example/old/stocks/lib/stock_row.dart

@@ -0,0 +1,72 @@
+// Copyright 2015 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'package:sky/framework/components/ink_well.dart';
+import 'package:sky/framework/fn.dart';
+import 'package:sky/framework/layout.dart';
+import 'package:sky/framework/theme/typography.dart' as typography;
+import 'stock_arrow.dart';
+import 'stock_data.dart';
+
+class StockRow extends Component {
+  static final Style _style = new Style('''
+    align-items: center;
+    border-bottom: 1px solid #F4F4F4;
+    padding-top: 16px;
+    padding-left: 16px;
+    padding-right: 16px;
+    padding-bottom: 20px;'''
+  );
+
+  static final FlexBoxParentData _tickerFlex = new FlexBoxParentData()..flex = 1;
+
+  static final Style _lastSaleStyle = new Style('''
+    text-align: right;
+    padding-right: 16px;'''
+  );
+
+  static final Style _changeStyle = new Style('''
+    ${typography.black.caption};
+    text-align: right;'''
+  );
+
+  Stock stock;
+
+  StockRow({Stock stock}) : super(key: stock.symbol) {
+    this.stock = stock;
+  }
+
+  UINode build() {
+    String lastSale = "\$${stock.lastSale.toStringAsFixed(2)}";
+
+    String changeInPrice = "${stock.percentChange.toStringAsFixed(2)}%";
+    if (stock.percentChange > 0)
+      changeInPrice = "+" + changeInPrice;
+
+    List<UINode> children = [
+      new StockArrow(
+        percentChange: stock.percentChange
+      ),
+      new ParentDataNode(
+        new Container(
+          key: 'Ticker',
+          children: [new Text(stock.symbol)]
+        ),
+        _tickerFlex
+      ),
+      new Container(
+        key: 'LastSale',
+        style: _lastSaleStyle,
+        children: [new Text(lastSale)]
+      ),
+      new Container(
+        key: 'Change',
+        style: _changeStyle,
+        children: [new Text(changeInPrice)]
+      )
+    ];
+
+    return new StyleNode(new InkWell(children: children), _style);
+  }
+}

sdk/example/old/stocks/pubspec.yaml

@@ -4,4 +4,4 @@ description: A demo application using Sky that shows stock data
 homepage: https://github.com/domokit/sky_sdk/tree/master/sdk/lib/example/stocks
 version: 0.0.1
 dependencies:
-  sky: '>=0.0.10 <1.0.0'
+  sky: '>=0.0.1 <1.0.0'

sdk/example/raw/launcher.dart

@@ -1,57 +0,0 @@
-// Copyright 2015 The Chromium Authors. All rights reserved.
-// Use of this source code is governed by a BSD-style license that can be
-// found in the LICENSE file.
-
-import "dart:math";
-import 'dart:sky';
-
-import 'package:sky/framework/shell.dart' as shell;
-import 'package:mojom/intents/intents.mojom.dart';
-
-Picture draw(int a, int r, int g, int b) {
-  Size size = new Size(view.width, view.height);
-
-  PictureRecorder recorder = new PictureRecorder();
-  Canvas canvas = new Canvas(recorder, size);
-  double radius = size.shortestSide * 0.45;
-
-  Paint paint = new Paint()..color = new Color.fromARGB(a, r, g, b);
-  canvas.drawRect(new Rect.fromSize(size), paint);
-  return recorder.endRecording();
-}
-
-bool handleEvent(Event event) {
-  if (event.type == "pointerdown") {
-    view.picture = draw(255, 0, 0, 255);
-    view.scheduleFrame();
-    return true;
-  }
-
-  if (event.type == "pointerup") {
-    view.picture = draw(255, 255, 255, 0);
-    view.scheduleFrame();
-
-    ActivityManagerProxy activityManager = new ActivityManagerProxy.unbound();
-    Intent intent = new Intent()
-      ..action = 'android.intent.action.VIEW'
-      ..url = 'sky://localhost:9888/sky/sdk/lib/example/raw/hello_world.dart';
-    shell.requestService(null, activityManager);
-    activityManager.ptr.startActivity(intent);
-    return true;
-  }
-
-  if (event.type == "back") {
-    print("Pressed back button.");
-    return true;
-  }
-
-  return false;
-}
-
-void main() {
-  print("Hello, world");
-  view.picture = draw(255, 255, 255, 0);
-  view.scheduleFrame();
-
-  view.setEventCallback(handleEvent);
-}

sdk/example/rendering/interactive_flex.dart

@@ -14,7 +14,7 @@ import 'package:sky/rendering/object.dart';
 import 'package:sky/rendering/paragraph.dart';
 import 'package:sky/rendering/sky_binding.dart';
 
-import '../lib/solid_color_box.dart';
+import 'solid_color_box.dart';
 
 class Touch {
   final double x;

sdk/example/rendering/justify_content.dart

@@ -12,7 +12,7 @@ import 'package:sky/rendering/object.dart';
 import 'package:sky/rendering/paragraph.dart';
 import 'package:sky/rendering/sky_binding.dart';
 
-import '../lib/solid_color_box.dart';
+import 'solid_color_box.dart';
 
 // Attempts to draw
 // http://www.w3.org/TR/2015/WD-css-flexbox-1-20150514/images/flex-pack.svg

sdk/example/rendering/render_paragraph.dart

@@ -11,7 +11,7 @@ import 'package:sky/rendering/object.dart';
 import 'package:sky/rendering/paragraph.dart';
 import 'package:sky/rendering/sky_binding.dart';
 
-import '../lib/solid_color_box.dart';
+import 'solid_color_box.dart';
 
 void main() {
   RenderFlex flexRoot = new RenderFlex(direction: FlexDirection.vertical);

sdk/example/rendering/spinning_flex.dart

@@ -11,7 +11,7 @@ import 'package:sky/rendering/flex.dart';
 import 'package:sky/rendering/sky_binding.dart';
 import 'package:vector_math/vector_math.dart';
 
-import '../lib/solid_color_box.dart';
+import 'solid_color_box.dart';
 
 double timeBase;
 RenderTransform transformBox;

sdk/example/stocks/lib/stock_arrow.dart

@@ -2,92 +2,74 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import 'dart:math';
-import 'package:sky/framework/fn.dart';
-import 'package:sky/framework/layout.dart';
+import 'dart:math' as math;
+import 'dart:sky' as sky;
+
+import 'package:sky/rendering/box.dart';
+import 'package:sky/rendering/object.dart';
+import 'package:sky/theme/colors.dart' as colors;
+import 'package:sky/widgets/basic.dart';
 
 class StockArrow extends Component {
-  static final Style _style = new Style('''
-    width: 40px;
-    height: 40px;
-    align-items: center;
-    justify-content: center;
-    border-radius: 40px;
-    margin-right: 16px;
-    border: 1px solid transparent;'''
-  );
 
-  static final Style _upStyle = new Style('''
-    width: 0;
-    height: 0;
-    border-left: 9px solid transparent;
-    border-right: 9px solid transparent;
-    margin-bottom: 3px;
-    border-bottom: 9px solid white;'''
-  );
+  StockArrow({ String key, this.percentChange }) : super(key: key);
 
-  static final Style _downStyle = new Style('''
-    width: 0;
-    height: 0;
-    border-left: 9px solid transparent;
-    border-right: 9px solid transparent;
-    margin-top: 3px;
-    border-top: 9px solid white'''
-  );
-
-  double percentChange;
-
-  StockArrow({ Object key, this.percentChange }) : super(key: key);
-
-  // TODO(abarth): These should use sky/framework/theme/colors.dart.
-  final List<String> _kRedColors = [
-    '#E57373',
-    '#EF5350',
-    '#F44336',
-    '#E53935',
-    '#D32F2F',
-    '#C62828',
-    '#B71C1C',
-  ];
-
-  // TODO(abarth): These should use sky/framework/theme/colors.dart.
-  final List<String> _kGreenColors = [
-    '#81C784',
-    '#66BB6A',
-    '#4CAF50',
-    '#43A047',
-    '#388E3C',
-    '#2E7D32',
-    '#1B5E20',
-  ];
+  final double percentChange;
 
   int _colorIndexForPercentChange(double percentChange) {
-    // Currently the max is 10%.
     double maxPercent = 10.0;
-    return max(0, ((percentChange.abs() / maxPercent) * _kGreenColors.length).floor());
+    double normalizedPercentChange = math.min(percentChange.abs(), maxPercent) / maxPercent;
+    return 100 + (normalizedPercentChange * 8.0).floor() * 100;
   }
 
-  String _colorForPercentChange(double percentChange) {
+  Color _colorForPercentChange(double percentChange) {
     if (percentChange > 0)
-      return _kGreenColors[_colorIndexForPercentChange(percentChange)];
-    return _kRedColors[_colorIndexForPercentChange(percentChange)];
+      return colors.Green[_colorIndexForPercentChange(percentChange)];
+    return colors.Red[_colorIndexForPercentChange(percentChange)];
   }
 
-  UINode build() {
-    String border = _colorForPercentChange(percentChange).toString();
-    bool up = percentChange > 0;
-    String type = up ? 'bottom' : 'top';
+  Widget build() {
+    // TODO(jackson): This should change colors with the theme
+    Color color = _colorForPercentChange(percentChange);
+    const double kSize = 40.0;
+    var arrow = new CustomPaint(callback: (sky.Canvas canvas, Size size) {
+      Paint paint = new Paint()..color = color;
+      paint.strokeWidth = 1.0;
+      const double padding = 2.0;
+      assert(padding > paint.strokeWidth / 2.0); // make sure the circle remains inside the box
+      double r = (kSize - padding) / 2.0; // radius of the circle
+      double centerX = padding + r;
+      double centerY = padding + r;
 
-    return new FlexContainer(
-      inlineStyle: 'border-color: $border',
-      direction: FlexDirection.Row,
-      style: _style,
-      children: [
-        new Container(
-          inlineStyle: 'border-$type-color: $border',
-          style: up ? _upStyle : _downStyle
-        )
-      ]
+      // Draw the arrow.
+      double w = 8.0;
+      double h = 5.0;
+      double arrowY;
+      if (percentChange < 0.0) {
+        h = -h;
+        arrowY = centerX + 1.0;
+      } else {
+        arrowY = centerX - 1.0;
+      }
+      Path path = new Path();
+      path.moveTo(centerX, arrowY - h); // top of the arrow
+      path.lineTo(centerX + w, arrowY + h);
+      path.lineTo(centerX - w, arrowY + h);
+      path.close();
+      paint.setStyle(sky.PaintingStyle.fill);
+      canvas.drawPath(path, paint);
+
+      // Draw a circle that circumscribes the arrow.
+      paint.setStyle(sky.PaintingStyle.stroke);
+      canvas.drawCircle(new Point(centerX, centerY), r, paint);
+    });
+
+    return new Container(
+      child: arrow,
+      width: kSize,
+      height: kSize,
+      margin: const EdgeDims.symmetric(horizontal: 5.0)
     );
   }
+
 }

sdk/example/stocks/lib/stock_data.dart

@@ -4,6 +4,7 @@
 
 import 'dart:convert';
 import 'dart:math';
+
 import 'package:sky/framework/net/fetch.dart';
 
 // Snapshot from http://www.nasdaq.com/screening/company-list.aspx
@@ -59,7 +60,7 @@ class StockDataFetcher {
   }
 
   void _fetchNextChunk() {
-    fetchBody('data/stock_data_${_currentChunk++}.json').then((Response response) {
+    fetchBody('../data/stock_data_${_currentChunk++}.json').then((Response response) {
       String json = response.bodyAsString();
       JsonDecoder decoder = new JsonDecoder();
 

sdk/example/stocks/lib/stock_list.dart

@@ -2,22 +2,30 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import 'package:sky/framework/components/fixed_height_scrollable.dart';
-import 'package:sky/framework/fn.dart';
+import 'package:sky/widgets/fixed_height_scrollable.dart';
+import 'package:sky/widgets/basic.dart';
+
 import 'stock_data.dart';
 import 'stock_row.dart';
 
 class Stocklist extends FixedHeightScrollable {
+
+  Stocklist({
+    String key,
+    this.stocks,
+    this.query
+  }) : super(itemHeight: StockRow.kHeight, key: key);
+
   String query;
   List<Stock> stocks;
 
-  Stocklist({
-    Object key,
-    this.stocks,
-    this.query
-  }) : super(key: key);
+  void syncFields(Stocklist source) {
+    query = source.query;
+    stocks = source.stocks;
+    super.syncFields(source);
+  }
 
-  List<UINode> buildItems(int start, int count) {
+  List<Widget> buildItems(int start, int count) {
     var filteredStocks = stocks.where((stock) {
       return query == null ||
              stock.symbol.contains(new RegExp(query, caseSensitive: false));

sdk/example/stocks/lib/stock_menu.dart

@@ -2,43 +2,42 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import 'package:sky/framework/fn.dart';
-import 'package:sky/framework/layout.dart';
-import 'package:sky/framework/components/popup_menu.dart';
-import 'package:sky/framework/components/checkbox.dart';
+import 'package:sky/widgets/checkbox.dart';
+import 'package:sky/widgets/popup_menu.dart';
+import 'package:sky/widgets/basic.dart';
 import 'package:sky/framework/theme/view_configuration.dart';
 
 class StockMenu extends Component {
-  static final Style _style = new Style('''
-    position: absolute;
-    right: 8px;
-    top: ${8 + kStatusBarHeight}px;''');
 
-  PopupMenuController controller;
-
-  StockMenu({Object key, this.controller, this.autorefresh: false, this.onAutorefreshChanged}) : super(key: key);
+  StockMenu({
+    String key,
+    this.controller,
+    this.autorefresh: false,
+    this.onAutorefreshChanged
+  }) : super(key: key);
 
+  final PopupMenuController controller;
   final bool autorefresh;
   final ValueChanged onAutorefreshChanged;
 
-  static FlexBoxParentData _flex1 = new FlexBoxParentData()..flex = 1;
-
-  UINode build() {
+  Widget build() {
     var checkbox = new Checkbox(
-      checked: this.autorefresh,
+      value: this.autorefresh,
       onChanged: this.onAutorefreshChanged
     );
 
-    return new StyleNode(
-      new PopupMenu(
+    return new Positioned(
+      child: new PopupMenu(
         controller: controller,
         items: [
-          [new Text('Add stock')],
-          [new Text('Remove stock')],
-          [new ParentDataNode(new Text('Autorefresh'), _flex1), checkbox],
+          new Text('Add stock'),
+          new Text('Remove stock'),
+          new Flex([new Flexible(child: new Text('Autorefresh')), checkbox]),
         ],
-        level: 4),
-        _style
+        level: 4
+      ),
+      right: 8.0,
+      top: 8.0 + kStatusBarHeight
     );
   }
 }

sdk/example/stocks/lib/stock_row.dart

@@ -2,71 +2,62 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import 'package:sky/framework/components/ink_well.dart';
-import 'package:sky/framework/fn.dart';
-import 'package:sky/framework/layout.dart';
-import 'package:sky/framework/theme/typography.dart' as typography;
+import 'package:sky/painting/text_style.dart';
+import 'package:sky/rendering/box.dart';
+import 'package:sky/widgets/ink_well.dart';
+import 'package:sky/widgets/basic.dart';
+import 'package:sky/widgets/theme.dart';
+
 import 'stock_arrow.dart';
 import 'stock_data.dart';
 
 class StockRow extends Component {
-  static final Style _style = new Style('''
-    align-items: center;
-    border-bottom: 1px solid #F4F4F4;
-    padding-top: 16px;
-    padding-left: 16px;
-    padding-right: 16px;
-    padding-bottom: 20px;'''
-  );
 
-  static final FlexBoxParentData _tickerFlex = new FlexBoxParentData()..flex = 1;
+  StockRow({ Stock stock }) : this.stock = stock, super(key: stock.symbol);
 
-  static final Style _lastSaleStyle = new Style('''
-    text-align: right;
-    padding-right: 16px;'''
-  );
+  final Stock stock;
 
-  static final Style _changeStyle = new Style('''
-    ${typography.black.caption};
-    text-align: right;'''
-  );
+  static const double kHeight = 79.0;
 
-  Stock stock;
-
-  StockRow({Stock stock}) : super(key: stock.symbol) {
-    this.stock = stock;
-  }
-
-  UINode build() {
+  Widget build() {
     String lastSale = "\$${stock.lastSale.toStringAsFixed(2)}";
 
     String changeInPrice = "${stock.percentChange.toStringAsFixed(2)}%";
-    if (stock.percentChange > 0)
-      changeInPrice = "+" + changeInPrice;
+    if (stock.percentChange > 0) changeInPrice = "+" + changeInPrice;
 
-    List<UINode> children = [
-      new StockArrow(
-        percentChange: stock.percentChange
-      ),
-      new ParentDataNode(
-        new Container(
-          key: 'Ticker',
-          children: [new Text(stock.symbol)]
-        ),
-        _tickerFlex
-      ),
+    List<Widget> children = [
       new Container(
-        key: 'LastSale',
-        style: _lastSaleStyle,
-        children: [new Text(lastSale)]
+        child: new StockArrow(percentChange: stock.percentChange),
+        margin: const EdgeDims.only(right: 5.0)
       ),
-      new Container(
-        key: 'Change',
-        style: _changeStyle,
-        children: [new Text(changeInPrice)]
+      new Flexible(
+        child: new Text(stock.symbol),
+        flex: 2
+      ),
+      new Flexible(
+        child: new Text(
+          lastSale,
+          style: const TextStyle(textAlign: TextAlign.right)
+        )
+      ),
+      new Flexible(
+        child: new Text(
+          changeInPrice,
+          style: Theme.of(this).text.caption.copyWith(textAlign: TextAlign.right)
+        )
       )
     ];
 
-    return new StyleNode(new InkWell(children: children), _style);
+    // TODO(hansmuller): An explicit |height| shouldn't be needed
+    return new InkWell(
+      child: new Container(
+        padding: const EdgeDims(16.0, 16.0, 20.0, 16.0),
+        height: kHeight,
+        decoration: const BoxDecoration(
+            border: const Border(
+                bottom: const BorderSide(color: const Color(0xFFF4F4F4)))),
+        child: new Flex(children)
+      )
+    );
   }
 }

sdk/example/stocks/lib/stock_types.dart

@@ -2,10 +2,4 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import 'package:sky/framework/fn.dart';
-
-class HelloWorldApp extends App {
-  UINode build() {
-    return new Text('Hello, world!');
-  }
-}
+enum StockMode { optimistic, pessimistic }

sdk/example/stocks/pubspec.yaml

@@ -4,4 +4,4 @@ description: A demo application using Sky that shows stock data
 homepage: https://github.com/domokit/sky_sdk/tree/master/sdk/lib/example/stocks
 version: 0.0.1
 dependencies:
-  sky: '>=0.0.1 <1.0.0'
+  sky: '>=0.0.10 <1.0.0'

sdk/example/stocks2/README.md

@@ -1,4 +0,0 @@
-This is a copy of the stocks app... with everything removed.
-
-The goal is to eventually replace the stocks app with this one, by
-adding it back bit by bit as we port it to RenderNode.

sdk/example/stocks2/lib/stock_arrow.dart

@@ -1,75 +0,0 @@
-// Copyright 2015 The Chromium Authors. All rights reserved.
-// Use of this source code is governed by a BSD-style license that can be
-// found in the LICENSE file.
-
-import 'dart:math' as math;
-import 'dart:sky' as sky;
-
-import 'package:sky/rendering/box.dart';
-import 'package:sky/rendering/object.dart';
-import 'package:sky/theme/colors.dart' as colors;
-import 'package:sky/widgets/basic.dart';
-
-class StockArrow extends Component {
-
-  StockArrow({ String key, this.percentChange }) : super(key: key);
-
-  final double percentChange;
-
-  int _colorIndexForPercentChange(double percentChange) {
-    double maxPercent = 10.0;
-    double normalizedPercentChange = math.min(percentChange.abs(), maxPercent) / maxPercent;
-    return 100 + (normalizedPercentChange * 8.0).floor() * 100;
-  }
-
-  Color _colorForPercentChange(double percentChange) {
-    if (percentChange > 0)
-      return colors.Green[_colorIndexForPercentChange(percentChange)];
-    return colors.Red[_colorIndexForPercentChange(percentChange)];
-  }
-
-  Widget build() {
-    // TODO(jackson): This should change colors with the theme
-    Color color = _colorForPercentChange(percentChange);
-    const double kSize = 40.0;
-    var arrow = new CustomPaint(callback: (sky.Canvas canvas, Size size) {
-      Paint paint = new Paint()..color = color;
-      paint.strokeWidth = 1.0;
-      const double padding = 2.0;
-      assert(padding > paint.strokeWidth / 2.0); // make sure the circle remains inside the box
-      double r = (kSize - padding) / 2.0; // radius of the circle
-      double centerX = padding + r;
-      double centerY = padding + r;
-
-      // Draw the arrow.
-      double w = 8.0;
-      double h = 5.0;
-      double arrowY;
-      if (percentChange < 0.0) {
-        h = -h;
-        arrowY = centerX + 1.0;
-      } else {
-        arrowY = centerX - 1.0;
-      }
-      Path path = new Path();
-      path.moveTo(centerX, arrowY - h); // top of the arrow
-      path.lineTo(centerX + w, arrowY + h);
-      path.lineTo(centerX - w, arrowY + h);
-      path.close();
-      paint.setStyle(sky.PaintingStyle.fill);
-      canvas.drawPath(path, paint);
-
-      // Draw a circle that circumscribes the arrow.
-      paint.setStyle(sky.PaintingStyle.stroke);
-      canvas.drawCircle(new Point(centerX, centerY), r, paint);
-    });
-
-    return new Container(
-      child: arrow,
-      width: kSize,
-      height: kSize,
-      margin: const EdgeDims.symmetric(horizontal: 5.0)
-    );
-  }
-
-}

sdk/example/stocks2/lib/stock_menu.dart

@@ -1,43 +0,0 @@
-// Copyright 2015 The Chromium Authors. All rights reserved.
-// Use of this source code is governed by a BSD-style license that can be
-// found in the LICENSE file.
-
-import 'package:sky/widgets/checkbox.dart';
-import 'package:sky/widgets/popup_menu.dart';
-import 'package:sky/widgets/basic.dart';
-import 'package:sky/framework/theme/view_configuration.dart';
-
-class StockMenu extends Component {
-
-  StockMenu({
-    String key,
-    this.controller,
-    this.autorefresh: false,
-    this.onAutorefreshChanged
-  }) : super(key: key);
-
-  final PopupMenuController controller;
-  final bool autorefresh;
-  final ValueChanged onAutorefreshChanged;
-
-  Widget build() {
-    var checkbox = new Checkbox(
-      value: this.autorefresh,
-      onChanged: this.onAutorefreshChanged
-    );
-
-    return new Positioned(
-      child: new PopupMenu(
-        controller: controller,
-        items: [
-          new Text('Add stock'),
-          new Text('Remove stock'),
-          new Flex([new Flexible(child: new Text('Autorefresh')), checkbox]),
-        ],
-        level: 4
-      ),
-      right: 8.0,
-      top: 8.0 + kStatusBarHeight
-    );
-  }
-}

sdk/example/stocks2/lib/stock_row.dart

@@ -1,63 +0,0 @@
-// Copyright 2015 The Chromium Authors. All rights reserved.
-// Use of this source code is governed by a BSD-style license that can be
-// found in the LICENSE file.
-
-import 'package:sky/painting/text_style.dart';
-import 'package:sky/rendering/box.dart';
-import 'package:sky/widgets/ink_well.dart';
-import 'package:sky/widgets/basic.dart';
-import 'package:sky/widgets/theme.dart';
-
-import 'stock_arrow.dart';
-import 'stock_data.dart';
-
-class StockRow extends Component {
-
-  StockRow({ Stock stock }) : this.stock = stock, super(key: stock.symbol);
-
-  final Stock stock;
-
-  static const double kHeight = 79.0;
-
-  Widget build() {
-    String lastSale = "\$${stock.lastSale.toStringAsFixed(2)}";
-
-    String changeInPrice = "${stock.percentChange.toStringAsFixed(2)}%";
-    if (stock.percentChange > 0) changeInPrice = "+" + changeInPrice;
-
-    List<Widget> children = [
-      new Container(
-        child: new StockArrow(percentChange: stock.percentChange),
-        margin: const EdgeDims.only(right: 5.0)
-      ),
-      new Flexible(
-        child: new Text(stock.symbol),
-        flex: 2
-      ),
-      new Flexible(
-        child: new Text(
-          lastSale,
-          style: const TextStyle(textAlign: TextAlign.right)
-        )
-      ),
-      new Flexible(
-        child: new Text(
-          changeInPrice,
-          style: Theme.of(this).text.caption.copyWith(textAlign: TextAlign.right)
-        )
-      )
-    ];
-
-    // TODO(hansmuller): An explicit |height| shouldn't be needed
-    return new InkWell(
-      child: new Container(
-        padding: const EdgeDims(16.0, 16.0, 20.0, 16.0),
-        height: kHeight,
-        decoration: const BoxDecoration(
-            border: const Border(
-                bottom: const BorderSide(color: const Color(0xFFF4F4F4)))),
-        child: new Flex(children)
-      )
-    );
-  }
-}

sdk/example/stocks2/lib/stock_types.dart

@@ -1 +0,0 @@
-enum StockMode { optimistic, pessimistic }

sdk/example/widgets/spinning_mixed.dart

@@ -13,8 +13,7 @@ import 'package:sky/widgets/raised_button.dart';
 import 'package:sky/widgets/widget.dart';
 import 'package:vector_math/vector_math.dart';
 
-import '../lib/solid_color_box.dart';
-import '../../tests/resources/display_list.dart';
+import '../rendering/solid_color_box.dart';
 
 // Solid colour, RenderObject version
 void addFlexChildSolidColor(RenderFlex parent, sky.Color backgroundColor, { int flex: 0 }) {
@@ -61,8 +60,6 @@ Widget builder() {
 double timeBase;
 RenderTransform transformBox;
 
-final TestRenderView tester = new TestRenderView();
-
 void rotate(double timeStamp) {
   if (timeBase == null)
     timeBase = timeStamp;

sdk/home.dart

@@ -51,18 +51,13 @@ class SkyDemo extends Component {
 class SkyHome extends App {
   Widget build() {
     List<Widget> children = [
-      new SkyDemo('Stocks App', 'example/stocks2/lib/stock_app.dart'),
+      new SkyDemo('Stocks App', 'example/stocks/lib/main.dart'),
       new SkyDemo('Asteroids Game', 'example/game/main.dart'),
       new SkyDemo('Interactive Flex', 'example/rendering/interactive_flex.dart'),
       new SkyDemo('Sector Layout', 'example/widgets/sector.dart'),
       new SkyDemo('Touch Demo', 'example/rendering/touch_demo.dart'),
       new SkyDemo('Minedigger Game', 'example/mine_digger/lib/main.dart'),
 
-      // TODO(eseidel): We could use to separate these groups?
-      new SkyDemo('Old Stocks App', 'example/stocks/main.sky'),
-      new SkyDemo('Old Touch Demo', 'example/raw/touch-demo.sky'),
-      new SkyDemo('Old Spinning Square', 'example/raw/spinning-square.sky'),
-
       new SkyDemo('Licences (Old)', 'LICENSES.sky'),
     ];
 

tests/examples/stocks.dart

@@ -6,7 +6,7 @@ import 'dart:async';
 
 import 'package:sky/widgets/widget.dart';
 
-import '../../sdk/example/stocks2/lib/stock_app.dart';
+import '../../sdk/example/stocks/lib/main.dart';
 import '../resources/display_list.dart';
 
 class TestStocksApp extends StocksApp {

tools/webkitpy/layout_tests/run_webkit_tests.py

@@ -397,7 +397,7 @@ def run_analyzer(port, options, args, logging_stream):
     sky_tools_dir = os.path.dirname(os.path.dirname(test_dir))
     analyzer_path = os.path.join(sky_tools_dir, 'skyanalyzer')
     src_dir = os.path.dirname(os.path.dirname(sky_tools_dir))
-    analyzer_target_path = os.path.join(src_dir, 'sky/sdk/example/stocks2/lib/stock_app.dart')
+    analyzer_target_path = os.path.join(src_dir, 'sky/sdk/example/stocks/lib/main.dart')
     analyzer_args = [
         analyzer_path,
         build_dir,