Move example fn widgets into sky/framework/components

Moving these files into sky/framework will make them easier to use from the
SDK. Also, this CL also splits up the giant "widgets" library into smaller
libraries, one per component.

TBR=eseidel@chromium.org

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

examples/fn/widgets/box.dart

-part of widgets;
-
-class Box extends Component {
-
-  static Style _style = new Style('''
-    display: flex;
-    flex-direction: column;
-    border-radius: 4px;
-    border: 1px solid gray;
-    margin: 10px;'''
-  );
-
-  static Style _titleStyle = new Style('''
-    flex: 1;
-    text-align: center;
-    font-size: 10px;
-    padding: 8px 8px 4px 8px;'''
-  );
-
-  static Style _contentStyle = new Style('''
-    flex: 1;
-    padding: 4px 8px 8px 8px;'''
-  );
-
-  String title;
-  List<Node> children;
-
-  Box({String key, this.title, this.children }) : super(key: key);
-
-  Node build() {
-    return new Container(
-      style: _style,
-      children: [
-        new Container(
-          key: 'Title',
-          style: _titleStyle,
-          children: [new Text(title)]
-        ),
-        new Container(
-          key: 'Content',
-          style: _contentStyle,
-          children: children
-        ),
-      ]
-    );
-  }
-}

examples/fn/widgets/widgets.dart

-library widgets;
-
-import '../../../framework/animation/curves.dart';
-import '../../../framework/animation/fling-curve.dart';
-import '../../../framework/animation/generator.dart';
-import '../../../framework/fn.dart';
-import '../../../framework/theme/colors.dart';
-import '../../../framework/theme/shadows.dart';
-import 'dart:collection';
-import 'dart:async';
-import 'dart:math' as math;
-import 'dart:sky' as sky;
-
-part 'box.dart';
-part 'button.dart';
-part 'buttonbase.dart';
-part 'checkbox.dart';
-part 'drawer.dart';
-part 'drawerheader.dart';
-part 'fixedheightscrollable.dart';
-part 'icon.dart';
-part 'inksplash.dart';
-part 'material.dart';
-part 'menudivider.dart';
-part 'menuitem.dart';
-part 'radio.dart';
-part 'toolbar.dart';
-part 'floating_action_button.dart';
-
-typedef void ValueChanged(value);

examples/stocks-fn/stockrow.dart

 part of stocksapp;
 
-class StockRow extends MaterialComponent {
+class StockRow extends Material {
 
   Stock stock;
 

examples/stocks-fn/stocksapp.dart

 library stocksapp;
 
 import '../../framework/fn.dart';
+import '../../framework/components/drawer.dart';
+import '../../framework/components/drawer_header.dart';
+import '../../framework/components/fixed_height_scrollable.dart';
+import '../../framework/components/floating_action_button.dart';
+import '../../framework/components/icon.dart';
+import '../../framework/components/material.dart';
+import '../../framework/components/menu_divider.dart';
+import '../../framework/components/menu_item.dart';
+import '../../framework/components/toolbar.dart';
 import '../data/stocks.dart';
-import '../fn/widgets/widgets.dart';
 import 'dart:math';
 
 part 'stockarrow.dart';

examples/fn/widgets/button.dart → framework/components/button.dart

-part of widgets;
+// 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.
 
-class Button extends ButtonBase {
+import '../fn.dart';
+import 'button_base.dart';
 
-  static Style _style = new Style('''
+class Button extends ButtonBase {
+  static final Style _style = new Style('''
     transform: translateX(0);
     display: inline-flex;
     border-radius: 4px;
@@ -13,7 +17,7 @@ class Button extends ButtonBase {
     margin: 5px;'''
   );
 
-  static Style _highlightStyle = new Style('''
+  static final Style _highlightStyle = new Style('''
     transform: translateX(0);
     display: inline-flex;
     border-radius: 4px;
@@ -31,8 +35,7 @@ class Button extends ButtonBase {
 
   Node build() {
     return new Container(
-      key: 'Button',
-      style: _highlight ? _highlightStyle : _style,
+      style: highlight ? _highlightStyle : _style,
       children: [super.build(), content]
     );
   }

examples/fn/widgets/buttonbase.dart → framework/components/button_base.dart

-part of widgets;
+// 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.
 
-abstract class ButtonBase extends MaterialComponent {
+import '../fn.dart';
+import 'material.dart';
 
-  bool _highlight = false;
+abstract class ButtonBase extends Material {
+  bool highlight = false;
 
   ButtonBase({ Object key }) : super(key: key) {
     events.listen('pointerdown', _handlePointerDown);
@@ -12,17 +16,17 @@ abstract class ButtonBase extends MaterialComponent {
 
   void _handlePointerDown(_) {
     setState(() {
-      _highlight = true;
+      highlight = true;
     });
   }
   void _handlePointerUp(_) {
     setState(() {
-      _highlight = false;
+      highlight = false;
     });
   }
   void _handlePointerCancel(_) {
     setState(() {
-      _highlight = false;
+      highlight = false;
     });
   }
 }

examples/fn/widgets/checkbox.dart → framework/components/checkbox.dart

-part of widgets;
+// 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.
 
-class Checkbox extends ButtonBase {
+import '../fn.dart';
+import 'button_base.dart';
 
-  bool checked;
-  ValueChanged onChanged;
+typedef void ValueChanged(value);
 
-  static Style _style = new Style('''
+class Checkbox extends ButtonBase {
+  static final Style _style = new Style('''
     transform: translateX(0);
     display: flex;
     justify-content: center;
@@ -16,14 +19,14 @@ class Checkbox extends ButtonBase {
     height: 30px;'''
   );
 
-  static Style _containerStyle = new Style('''
+  static final Style _containerStyle = new Style('''
     border: solid 2px;
     border-color: rgba(90, 90, 90, 0.25);
     width: 10px;
     height: 10px;'''
   );
 
-  static Style _containerHighlightStyle = new Style('''
+  static final Style _containerHighlightStyle = new Style('''
     border: solid 2px;
     border-color: rgba(90, 90, 90, 0.25);
     width: 10px;
@@ -33,12 +36,12 @@ class Checkbox extends ButtonBase {
     border-color: orange;'''
   );
 
-  static Style _uncheckedStyle = new Style('''
+  static final Style _uncheckedStyle = new Style('''
     top: 0px;
     left: 0px;'''
   );
 
-  static Style _checkedStyle = new Style('''
+  static final Style _checkedStyle = new Style('''
     top: 0px;
     left: 0px;
     transform: translate(2px, -15px) rotate(45deg);
@@ -52,7 +55,16 @@ class Checkbox extends ButtonBase {
     border-color: #0f9d58;'''
   );
 
-  Checkbox({ Object key, this.onChanged, this.checked }) : super(key: key);
+  bool checked;
+  ValueChanged onChanged;
+
+  Checkbox({ Object key, this.onChanged, this.checked }) : super(key: key) {
+    events.listen('click', _handleClick);
+  }
+
+  void _handleClick(sky.Event e) {
+    onChanged(!checked);
+  }
 
   Node build() {
     return new Container(
@@ -60,7 +72,7 @@ class Checkbox extends ButtonBase {
       children: [
         super.build(),
         new Container(
-          style: _highlight ? _containerHighlightStyle : _containerStyle,
+          style: highlight ? _containerHighlightStyle : _containerStyle,
           children: [
             new Container(
               style: checked ? _checkedStyle : _uncheckedStyle
@@ -68,10 +80,6 @@ class Checkbox extends ButtonBase {
           ]
         )
       ]
-    )..events.listen('click', _handleClick);
-  }
-
-  void _handleClick(sky.Event e) {
-    onChanged(!checked);
+    )
   }
 }

examples/fn/widgets/drawer.dart → framework/components/drawer.dart

-part of widgets;
+// 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 '../animation/curves.dart';
+import '../animation/generator.dart';
+import '../fn.dart';
+import '../theme/colors.dart';
+import '../theme/shadows.dart';
+import 'dart:async';
+import 'dart:math' as math;
+import 'dart:sky' as sky;
 
 const double _kWidth = 256.0;
 const double _kMinFlingVelocity = 0.4;
@@ -7,7 +18,6 @@ const double _kMaxSettleDurationMS = 600.0;
 const Cubic _kAnimationCurve = easeOut;
 
 class DrawerAnimation extends Animation {
-
   Stream<double> get onPositionChanged => onValueChanged;
 
   bool get _isMostlyClosed => value <= -_kWidth / 2;
@@ -67,8 +77,7 @@ class DrawerAnimation extends Animation {
 }
 
 class Drawer extends Component {
-
-  static Style _style = new Style('''
+  static final Style _style = new Style('''
     position: absolute;
     z-index: 2;
     top: 0;
@@ -78,7 +87,7 @@ class Drawer extends Component {
     box-shadpw: ${Shadow[3]};'''
   );
 
-  static Style _maskStyle = new Style('''
+  static final Style _maskStyle = new Style('''
     background-color: black;
     will-change: opacity;
     position: absolute;
@@ -88,7 +97,7 @@ class Drawer extends Component {
     right: 0;'''
   );
 
-  static Style _contentStyle = new Style('''
+  static final Style _contentStyle = new Style('''
     background-color: ${Grey[50]};
     will-change: transform;
     position: absolute;
@@ -106,7 +115,12 @@ class Drawer extends Component {
     Object key,
     this.animation,
     this.children
-  }) : super(key: key);
+  }) : super(key: key) {
+    events.listen('pointerdown', animation.handlePointerDown);
+    events.listen('pointermove', animation.handlePointerMove);
+    events.listen('pointerup', animation.handlePointerUp);
+    events.listen('pointercancel', animation.handlePointerCancel);
+  }
 
   double _position = -_kWidth;
 
@@ -150,10 +164,6 @@ class Drawer extends Component {
       style: _style,
       inlineStyle: inlineStyle,
       children: [ mask, content ]
-    )..events.listen('pointerdown', animation.handlePointerDown)
-     ..events.listen('pointermove', animation.handlePointerMove)
-     ..events.listen('pointerup', animation.handlePointerUp)
-     ..events.listen('pointercancel', animation.handlePointerCancel);
-
+    );
   }
 }

examples/fn/widgets/drawerheader.dart → framework/components/drawer_header.dart

-part of widgets;
+// 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.
 
-class DrawerHeader extends Component {
+import '../fn.dart';
+import '../theme/colors.dart';
 
-  static Style _style = new Style('''
+class DrawerHeader extends Component {
+  static final Style _style = new Style('''
     display: flex;
     flex-direction: column;
     height: 140px;
@@ -13,11 +17,11 @@ class DrawerHeader extends Component {
     margin-bottom: 8px;'''
   );
 
-  static Style _spacerStyle = new Style('''
+  static final Style _spacerStyle = new Style('''
     flex: 1'''
   );
 
-  static Style _labelStyle = new Style('''
+  static final Style _labelStyle = new Style('''
     padding: 0 16px;
     font-family: 'Roboto Medium', 'Helvetica';
     color: #212121;'''

examples/fn/widgets/fixedheightscrollable.dart → framework/components/fixed_height_scrollable.dart

-part of widgets;
+// 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.
 
-abstract class FixedHeightScrollable extends Component {
+import '../animation/fling-curve.dart';
+import '../fn.dart';
+import 'dart:sky' as sky;
 
+abstract class FixedHeightScrollable extends Component {
   // TODO(rafaelw): This component really shouldn't have an opinion
   // about how it is sized. The owning component should decide whether
   // it's explicitly sized or flexible or whatever...
-  static Style _style = new Style('''
+  static final Style _style = new Style('''
     overflow: hidden;
     position: relative;
     flex: 1;
     will-change: transform;'''
   );
 
-  static Style _scrollAreaStyle = new Style('''
+  static final Style _scrollAreaStyle = new Style('''
     position:relative;
     will-change: transform;'''
   );
@@ -30,7 +35,12 @@ abstract class FixedHeightScrollable extends Component {
     Object key,
     this.minOffset,
     this.maxOffset
-  }) : super(key: key) {}
+  }) : super(key: key) {
+    events.listen('gestureflingstart', _handleFlingStart);
+    events.listen('gestureflingcancel', _handleFlingCancel);
+    events.listen('gesturescrollupdate', _handleScrollUpdate);
+    events.listen('wheel', _handleWheel);
+  }
 
   List<Node> buildItems(int start, int count);
 
@@ -76,11 +86,7 @@ abstract class FixedHeightScrollable extends Component {
           children: buildItems(itemNumber, drawCount)
         )
       ]
-    )
-    ..events.listen('gestureflingstart', _handleFlingStart)
-    ..events.listen('gestureflingcancel', _handleFlingCancel)
-    ..events.listen('gesturescrollupdate', _handleScrollUpdate)
-    ..events.listen('wheel', _handleWheel);
+    );
   }
 
   void didUnmount() {

examples/fn/widgets/floating_action_button.dart → framework/components/floating_action_button.dart

-part of widgets;
+// 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.
 
-class FloatingActionButton extends MaterialComponent {
+import '../fn.dart';
+import 'material.dart';
+import '../theme/colors.dart';
+import '../theme/shadows.dart';
+
+class FloatingActionButton extends Material {
   static final Style _style = new Style('''
     position: absolute;
     bottom: 16px;

examples/fn/widgets/icon.dart → framework/components/icon.dart

-part of widgets;
+// 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 '../fn.dart';
 
 const String kAssetBase = '/sky/assets/material-design-icons';
 
 class Icon extends Component {
-
   Style style;
   int size;
   String type;

examples/fn/widgets/inksplash.dart → framework/components/ink_splash.dart

-part of widgets;
+// 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 '../animation/curves.dart';
+import '../animation/generator.dart';
+import '../fn.dart';
+import 'dart:async';
+import 'dart:sky' as sky;
 
 const double _kSplashSize = 400.0;
 const double _kSplashDuration = 500.0;
@@ -34,10 +42,7 @@ class SplashAnimation {
 }
 
 class InkSplash extends Component {
-
-  Stream<String> onStyleChanged;
-
-  static Style _style = new Style('''
+  static final Style _style = new Style('''
     position: absolute;
     pointer-events: none;
     overflow: hidden;
@@ -47,7 +52,7 @@ class InkSplash extends Component {
     right: 0;
   ''');
 
-  static Style _splashStyle = new Style('''
+  static final Style _splashStyle = new Style('''
     position: absolute;
     background-color: rgba(0, 0, 0, 0.4);
     border-radius: 0;
@@ -57,6 +62,8 @@ class InkSplash extends Component {
     width: 0;
   ''');
 
+  Stream<String> onStyleChanged;
+
   double _offsetX;
   double _offsetY;
   String _inlineStyle;

examples/fn/widgets/material.dart → framework/components/material.dart

-part of widgets;
+// 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.
 
-abstract class MaterialComponent extends Component {
+import '../fn.dart';
+import 'dart:sky' as sky;
+import 'dart:collection';
+import 'ink_splash.dart';
 
+abstract class Material extends Component {
   static const _splashesKey = const Object();
 
-  static Style _style = new Style('''
+  static final Style _style = new Style('''
     transform: translateX(0);
     position: absolute;
     top: 0;
@@ -15,7 +21,11 @@ abstract class MaterialComponent extends Component {
 
   LinkedHashSet<SplashAnimation> _splashes;
 
-  MaterialComponent({ Object key }) : super(key: key);
+  Material({ Object key }) : super(key: key) {
+    events.listen('gesturescrollstart', _cancelSplashes);
+    events.listen('wheel', _cancelSplashes);
+    events.listen('pointerdown', _startSplash);
+  }
 
   Node build() {
     List<Node> children = [];
@@ -28,9 +38,7 @@ abstract class MaterialComponent extends Component {
       style: _style,
       children: children,
       key: _splashesKey
-    )..events.listen('gesturescrollstart', _cancelSplashes)
-     ..events.listen('wheel', _cancelSplashes)
-     ..events.listen('pointerdown', _startSplash);
+    );
   }
 
   sky.ClientRect _getBoundingRect() => (getRoot() as sky.Element).getBoundingClientRect();

examples/fn/widgets/menudivider.dart → framework/components/menu_divider.dart

-part of widgets;
+// 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.
 
-class MenuDivider extends Component {
+import '../fn.dart';
 
-  static Style _style = new Style('''
+class MenuDivider extends Component {
+  static final Style _style = new Style('''
     margin: 8px 0;
     border-bottom: 1px solid rgba(0, 0, 0, 0.12);'''
   );

examples/fn/widgets/menuitem.dart → framework/components/menu_item.dart

-part of widgets;
+// 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.
 
-class MenuItem extends ButtonBase {
+import '../fn.dart';
+import 'button_base.dart';
+import 'icon.dart';
 
-  static Style _style = new Style('''
+class MenuItem extends ButtonBase {
+  static final Style _style = new Style('''
     transform: translateX(0);
     display: flex;
     align-items: center;
@@ -10,7 +15,7 @@ class MenuItem extends ButtonBase {
     -webkit-user-select: none;'''
   );
 
-  static Style _highlightStyle = new Style('''
+  static final Style _highlightStyle = new Style('''
     transform: translateX(0);
     display: flex;
     align-items: center;
@@ -19,11 +24,11 @@ class MenuItem extends ButtonBase {
     -webkit-user-select: none;'''
   );
 
-  static Style _iconStyle = new Style('''
+  static final Style _iconStyle = new Style('''
     padding: 0px 16px;'''
   );
 
-  static Style _labelStyle = new Style('''
+  static final Style _labelStyle = new Style('''
       font-family: 'Roboto Medium', 'Helvetica';
       color: #212121;
       padding: 0px 16px;
@@ -37,7 +42,7 @@ class MenuItem extends ButtonBase {
 
   Node build() {
     return new Container(
-      style: _highlight ? _highlightStyle : _style,
+      style: highlight ? _highlightStyle : _style,
       children: [
         super.build(),
         new Icon(

examples/fn/widgets/radio.dart → framework/components/radio.dart

-part of widgets;
+// 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.
 
-class Radio extends ButtonBase {
+import '../fn.dart';
+import 'button_base.dart';
+
+typedef void ValueChanged(value);
 
+class Radio extends ButtonBase {
   Object value;
   Object groupValue;
   ValueChanged onChanged;
 
-  static Style _style = new Style('''
+  static final Style _style = new Style('''
     transform: translateX(0);
     display: inline-block;
     -webkit-user-select: none;
@@ -17,7 +23,7 @@ class Radio extends ButtonBase {
     margin: 0 5px;'''
   );
 
-  static Style _highlightStyle = new Style('''
+  static final Style _highlightStyle = new Style('''
     transform: translateX(0);
     display: inline-block;
     -webkit-user-select: none;
@@ -29,7 +35,7 @@ class Radio extends ButtonBase {
     background-color: orange;'''
   );
 
-  static Style _dotStyle = new Style('''
+  static final Style _dotStyle = new Style('''
     -webkit-user-select: none;
     width: 10px;
     height: 10px;
@@ -43,14 +49,16 @@ class Radio extends ButtonBase {
     this.onChanged,
     this.value,
     this.groupValue
-  }) : super(key: key);
+  }) : super(key: key) {
+    events.listen('click', _handleClick);
+  }
 
   Node build() {
     return new Container(
-      style: _highlight ? _highlightStyle : _style,
+      style: highlight ? _highlightStyle : _style,
       children: value == groupValue ?
           [super.build(), new Container( style : _dotStyle )] : [super.build()]
-    )..events.listen('click', _handleClick);
+    )
   }
 
   void _handleClick(_) {

examples/fn/widgets/toolbar.dart → framework/components/toolbar.dart

-part of widgets;
+// 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.
 
-class Toolbar extends Component {
+import '../fn.dart';
+import '../theme/colors.dart';
+import '../theme/shadows.dart';
 
+class Toolbar extends Component {
   List<Node> children;
 
   static final Style _style = new Style('''