From 3f622d8b09b4d6f436e311c3fa981f901d96a864 Mon Sep 17 00:00:00 2001 From: Adam Barth Date: Thu, 24 Sep 2015 15:31:06 -0700 Subject: [PATCH] Port some more examples to fn3 --- examples/widgets/drag_and_drop.dart | 29 +++++++++----- examples/widgets/horizontal_scrolling.dart | 16 +++----- examples/widgets/navigation.dart | 23 +++++++---- examples/widgets/pageable_list.dart | 38 ++++++++++--------- examples/widgets/piano.dart | 20 +++++----- examples/widgets/progress_indicator.dart | 24 ++++++------ examples/widgets/scale.dart | 19 ++++++---- .../sky/lib/src/fn3/gesture_detector.dart | 4 +- 8 files changed, 97 insertions(+), 76 deletions(-) diff --git a/examples/widgets/drag_and_drop.dart b/examples/widgets/drag_and_drop.dart index 3529f7eebbe..cd328887951 100644 --- a/examples/widgets/drag_and_drop.dart +++ b/examples/widgets/drag_and_drop.dart @@ -5,7 +5,7 @@ import 'dart:sky' as sky; import 'package:sky/material.dart'; -import 'package:sky/widgets.dart'; +import 'package:sky/src/fn3.dart'; final double kTop = 10.0 + sky.view.paddingTop; final double kLeft = 10.0; @@ -17,10 +17,13 @@ class DragData { } class ExampleDragTarget extends StatefulComponent { - String _text = 'ready'; + ExampleDragTargetState createState() => new ExampleDragTargetState(this); +} - void syncConstructorArguments(ExampleDragTarget source) { - } +class ExampleDragTargetState extends ComponentState { + ExampleDragTargetState(ExampleDragTarget config) : super(config); + + String _text = 'ready'; void _handleAccept(DragData data) { setState(() { @@ -28,10 +31,10 @@ class ExampleDragTarget extends StatefulComponent { }); } - Widget build() { + Widget build(BuildContext context) { return new DragTarget( onAccept: _handleAccept, - builder: (List data, _) { + builder: (BuildContext context, List data, _) { return new Container( width: 100.0, height: 100.0, @@ -52,8 +55,8 @@ class ExampleDragTarget extends StatefulComponent { } } -class Dot extends Component { - Widget build() { +class Dot extends StatelessComponent { + Widget build(BuildContext context) { return new Container( width: 50.0, height: 50.0, @@ -64,7 +67,13 @@ class Dot extends Component { } } -class DragAndDropApp extends App { +class DragAndDropApp extends StatefulComponent { + DragAndDropAppState createState() => new DragAndDropAppState(this); +} + +class DragAndDropAppState extends ComponentState { + DragAndDropAppState(DragAndDropApp config) : super(config); + DragController _dragController; Offset _displacement = Offset.zero; @@ -99,7 +108,7 @@ class DragAndDropApp extends App { }); } - Widget build() { + Widget build(BuildContext context) { List layers = [ new Row([ new ExampleDragTarget(), diff --git a/examples/widgets/horizontal_scrolling.dart b/examples/widgets/horizontal_scrolling.dart index 123b2fab261..06a580a3e71 100644 --- a/examples/widgets/horizontal_scrolling.dart +++ b/examples/widgets/horizontal_scrolling.dart @@ -2,14 +2,14 @@ // Use of this source code is governed by a BSD-style license that can be // found in the LICENSE file. -import 'package:sky/widgets.dart'; +import 'package:sky/src/fn3.dart'; -class Circle extends Component { +class Circle extends StatelessComponent { Circle({ this.margin: EdgeDims.zero }); final EdgeDims margin; - Widget build() { + Widget build(BuildContext context) { return new Container( width: 50.0, margin: margin + new EdgeDims.symmetric(horizontal: 2.0), @@ -21,8 +21,8 @@ class Circle extends Component { } } -class HorizontalScrollingApp extends App { - Widget build() { +class HorizontalScrollingApp extends StatelessComponent { + Widget build(BuildContext context) { List circles = [ new Circle(margin: new EdgeDims.only(left: 10.0)), new Circle(), @@ -41,11 +41,7 @@ class HorizontalScrollingApp extends App { return new Center( child: new Container( height: 50.0, - child: new Row([ - new Block(circles, scrollDirection: ScrollDirection.horizontal) - ], - justifyContent: FlexJustifyContent.end - ) + child: new Block(circles, scrollDirection: ScrollDirection.horizontal) ) ); } diff --git a/examples/widgets/navigation.dart b/examples/widgets/navigation.dart index d51035da36a..4261eff996e 100644 --- a/examples/widgets/navigation.dart +++ b/examples/widgets/navigation.dart @@ -2,7 +2,7 @@ // Use of this source code is governed by a BSD-style license that can be // found in the LICENSE file. -import 'package:sky/widgets.dart'; +import 'package:sky/src/fn3.dart'; List routes = [ new Route( @@ -60,21 +60,28 @@ List routes = [ ) ]; -class NavigationExampleApp extends App { - NavigationState _navState = new NavigationState(routes); +class NavigationExampleApp extends StatefulComponent { + NavigationExampleAppState createState() => new NavigationExampleAppState(this); +} + +class NavigationExampleAppState extends ComponentState { + NavigationExampleAppState(NavigationExampleApp config) : super(config); + + NavigatorHistory _history = new NavigatorHistory(routes); void onBack() { - if (_navState.hasPrevious()) { + if (_history.hasPrevious()) { setState(() { - _navState.pop(); + _history.pop(); }); } else { - super.onBack(); + // TODO(abarth): Integrate with the system navigator. + // super.onBack(); } } - Widget build() { - return new Row([new Navigator(_navState)]); + Widget build(BuildContext context) { + return new Row([new Navigator(_history)]); } } diff --git a/examples/widgets/pageable_list.dart b/examples/widgets/pageable_list.dart index 5543f4e00d6..10e46da5447 100644 --- a/examples/widgets/pageable_list.dart +++ b/examples/widgets/pageable_list.dart @@ -4,7 +4,8 @@ import 'package:sky/animation.dart'; import 'package:sky/material.dart'; -import 'package:sky/widgets.dart'; +import 'package:sky/painting.dart'; +import 'package:sky/src/fn3.dart'; class CardModel { CardModel(this.value, this.size, this.color); @@ -15,17 +16,12 @@ class CardModel { Key get key => new ObjectKey(this); } -class PageableListApp extends App { +class PageableListApp extends StatefulComponent { + PageableListAppState createState() => new PageableListAppState(this); +} - static const TextStyle cardLabelStyle = - const TextStyle(color: Colors.white, fontSize: 18.0, fontWeight: bold); - - List cardModels; - Size pageSize = new Size(200.0, 200.0); - ScrollDirection scrollDirection = ScrollDirection.horizontal; - bool itemsWrap = false; - - void initState() { +class PageableListAppState extends ComponentState { + PageableListAppState(PageableListApp config) : super(config) { List cardSizes = [ [100.0, 300.0], [300.0, 100.0], [200.0, 400.0], [400.0, 400.0], [300.0, 400.0] ] @@ -36,17 +32,23 @@ class PageableListApp extends App { Color color = Color.lerp(Colors.red[300], Colors.blue[900], i / cardSizes.length); return new CardModel(i, cardSizes[i], color); }); - - super.initState(); } + static const TextStyle cardLabelStyle = + const TextStyle(color: Colors.white, fontSize: 18.0, fontWeight: bold); + + List cardModels; + Size pageSize = new Size(200.0, 200.0); + ScrollDirection scrollDirection = ScrollDirection.horizontal; + bool itemsWrap = false; + void updatePageSize(Size newSize) { setState(() { pageSize = newSize; }); } - Widget buildCard(CardModel cardModel) { + Widget buildCard(BuildContext context, CardModel cardModel) { Widget card = new Card( color: cardModel.color, child: new Container( @@ -142,7 +144,7 @@ class PageableListApp extends App { ); } - Widget buildBody() { + Widget buildBody(BuildContext context) { Widget list = new PageableList( items: cardModels, itemsWrap: itemsWrap, @@ -156,12 +158,12 @@ class PageableListApp extends App { callback: updatePageSize, child: new Container( child: list, - decoration: new BoxDecoration(backgroundColor: Theme.of(this).primarySwatch[50]) + decoration: new BoxDecoration(backgroundColor: Theme.of(context).primarySwatch[50]) ) ); } - Widget build() { + Widget build(BuildContext context) { return new IconTheme( data: const IconThemeData(color: IconThemeColor.white), child: new Theme( @@ -175,7 +177,7 @@ class PageableListApp extends App { child: new Scaffold( drawer: buildDrawer(), toolbar: buildToolBar(), - body: buildBody() + body: buildBody(context) ) ) ) diff --git a/examples/widgets/piano.dart b/examples/widgets/piano.dart index 20ffc16cc9f..c1d711e54a8 100644 --- a/examples/widgets/piano.dart +++ b/examples/widgets/piano.dart @@ -7,7 +7,7 @@ import 'package:sky_services/media/media.mojom.dart'; import 'package:sky/material.dart'; import 'package:sky/rendering.dart'; import 'package:sky/services.dart'; -import 'package:sky/widgets.dart'; +import 'package:sky/src/fn3.dart'; // All of these sounds are marked as public domain at soundbible. const String chimes = "http://soundbible.com/grab.php?id=2030&type=wav"; @@ -38,7 +38,7 @@ class Key { } } -class PianoApp extends App { +class PianoApp extends StatelessComponent { final List keys = [ new Key(Colors.red[500], chimes), new Key(Colors.orange[500], chainsaw), @@ -68,19 +68,19 @@ class PianoApp extends App { // Are we leaking all the player connections? } - Widget build() { + Widget build(BuildContext context) { List children = []; for (Key key in keys) { children.add( - new Listener( - child: new Flexible( + new Flexible( + child: new Listener( child: new Container( decoration: new BoxDecoration(backgroundColor: key.color) - ) - ), - onPointerCancel: (_) => key.up(), - onPointerDown: (_) => key.down(), - onPointerUp: (_) => key.up() + ), + onPointerCancel: (_) => key.up(), + onPointerDown: (_) => key.down(), + onPointerUp: (_) => key.up() + ) ) ); } diff --git a/examples/widgets/progress_indicator.dart b/examples/widgets/progress_indicator.dart index e455a72b23b..70ff24d9269 100644 --- a/examples/widgets/progress_indicator.dart +++ b/examples/widgets/progress_indicator.dart @@ -4,15 +4,14 @@ import 'package:sky/animation.dart'; import 'package:sky/material.dart'; -import 'package:sky/widgets.dart'; +import 'package:sky/src/fn3.dart'; -class ProgressIndicatorApp extends App { +class ProgressIndicatorApp extends StatefulComponent { + ProgressIndicatorAppState createState() => new ProgressIndicatorAppState(this); +} - ValueAnimation valueAnimation; - Direction valueAnimationDirection = Direction.forward; - - void initState() { - super.initState(); +class ProgressIndicatorAppState extends ComponentState { + ProgressIndicatorAppState(ProgressIndicatorApp config) : super(config) { valueAnimation = new ValueAnimation() ..duration = const Duration(milliseconds: 1500) ..variable = new AnimatedValue( @@ -29,6 +28,9 @@ class ProgressIndicatorApp extends App { valueAnimation.play(valueAnimationDirection); } + ValueAnimation valueAnimation; + Direction valueAnimationDirection = Direction.forward; + void handleTap() { setState(() { // valueAnimation.isAnimating is part of our build state @@ -46,7 +48,7 @@ class ProgressIndicatorApp extends App { valueAnimation.play(valueAnimationDirection); } - Widget buildIndicators() { + Widget buildIndicators(BuildContext context) { List indicators = [ new SizedBox( width: 200.0, @@ -76,12 +78,12 @@ class ProgressIndicatorApp extends App { ); } - Widget build() { + Widget build(BuildContext context) { Widget body = new GestureDetector( onTap: handleTap, child: new Container( padding: const EdgeDims.symmetric(vertical: 12.0, horizontal: 8.0), - decoration: new BoxDecoration(backgroundColor: Theme.of(this).cardColor), + decoration: new BoxDecoration(backgroundColor: Theme.of(context).cardColor), child: new BuilderTransition( variables: [valueAnimation.variable], performance: valueAnimation.view, @@ -103,7 +105,7 @@ class ProgressIndicatorApp extends App { child: new Scaffold( toolbar: new ToolBar(center: new Text('Progress Indicators')), body: new DefaultTextStyle( - style: Theme.of(this).text.title, + style: Theme.of(context).text.title, child: body ) ) diff --git a/examples/widgets/scale.dart b/examples/widgets/scale.dart index 61d8f3660ca..108ffd8d70f 100644 --- a/examples/widgets/scale.dart +++ b/examples/widgets/scale.dart @@ -4,9 +4,17 @@ import 'package:sky/material.dart'; import 'package:sky/rendering.dart'; -import 'package:sky/widgets.dart'; +import 'package:sky/src/fn3.dart'; -class ScaleApp extends App { +class ScaleApp extends StatefulComponent { + ScaleAppState createState() => new ScaleAppState(this); +} + +class ScaleAppState extends ComponentState { + ScaleAppState(ScaleApp config) : super(config) { + _offset = Offset.zero; + _zoom = 1.0; + } Point _startingFocalPoint; @@ -16,11 +24,6 @@ class ScaleApp extends App { double _previousZoom; double _zoom; - void initState() { - _offset = Offset.zero; - _zoom = 1.0; - } - void _handleScaleStart(Point focalPoint) { setState(() { _startingFocalPoint = focalPoint; @@ -48,7 +51,7 @@ class ScaleApp extends App { canvas.drawCircle(center, radius, paint); } - Widget build() { + Widget build(BuildContext context) { return new Theme( data: new ThemeData.dark(), child: new Scaffold( diff --git a/sky/packages/sky/lib/src/fn3/gesture_detector.dart b/sky/packages/sky/lib/src/fn3/gesture_detector.dart index bc00858b023..36a6b3619ed 100644 --- a/sky/packages/sky/lib/src/fn3/gesture_detector.dart +++ b/sky/packages/sky/lib/src/fn3/gesture_detector.dart @@ -55,7 +55,9 @@ class GestureDetector extends StatefulComponent { } class GestureDetectorState extends ComponentState { - GestureDetectorState(GestureDetector config) : super(config); + GestureDetectorState(GestureDetector config) : super(config) { + didUpdateConfig(null); + } final PointerRouter _router = SkyBinding.instance.pointerRouter;