Move example fn widgets into sky/framework/components

sky/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.
+
+import '../fn.dart';
+import 'button_base.dart';
+
+typedef void ValueChanged(value);
 
 class Checkbox extends ButtonBase {
-
-  bool checked;
-  ValueChanged onChanged;
-
-  static Style _style = new Style('''
+  static final Style _style = new Style('''
     transform: translateX(0);
     display: flex;
     justify-content: center;
     align-items: center;
     -webkit-user-select: none;
     cursor: pointer;
     width: 30px;
     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;
     height: 10px;
     border-radius: 10px;
     background-color: orange;
     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);
     width: 10px;
     height: 20px;
     border-style: solid;
     border-top: none;
     border-left: none;
     border-right-width: 2px;
     border-bottom-width: 2px;
     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(
       style: _style,
       children: [
         super.build(),
         new Container(
-          style: _highlight ? _containerHighlightStyle : _containerStyle,
+          style: highlight ? _containerHighlightStyle : _containerStyle,
           children: [
             new Container(
               style: checked ? _checkedStyle : _uncheckedStyle
             )
           ]
         )
       ]
-    )..events.listen('click', _handleClick);
-  }
-
-  void _handleClick(sky.Event e) {
-    onChanged(!checked);
+    )
   }
 }