Start an AddressBook example (to test text fields)

Also fixed a bug in tool_bar where not supplying a
center caused right not to be on the right.

R=abarth@chromium.org, abarth@google.com

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

sdk/example/address_book/lib/main.dart

@@ -0,0 +1,101 @@
+// 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/theme/colors.dart' as colors;
+import 'package:sky/theme/typography.dart' as typography;
+import 'package:sky/widgets/basic.dart';
+import 'package:sky/widgets/default_text_style.dart';
+import 'package:sky/widgets/navigator.dart';
+import 'package:sky/widgets/theme.dart';
+import 'package:sky/widgets/widget.dart';
+import 'package:sky/widgets/task_description.dart';
+import 'package:sky/widgets/scaffold.dart';
+import 'package:sky/widgets/tool_bar.dart';
+import 'package:sky/widgets/icon_button.dart';
+import 'package:sky/widgets/floating_action_button.dart';
+import 'package:sky/widgets/icon.dart';
+import 'package:sky/widgets/material.dart';
+import 'package:sky/editing/input.dart';
+
+class Field extends Container {
+  Field({this.icon: null, this.placeholder: null});
+
+  String icon;
+  String placeholder;
+
+  Widget build() {
+    return new Flex([
+        new Padding(
+          padding: const EdgeDims.symmetric(horizontal: 16.0),
+          child: new Icon(type:icon, size:24)
+        ),
+        new Flexible(child:new Input(placeholder:placeholder))
+      ],
+      direction: FlexDirection.horizontal
+    );
+  }
+}
+
+
+class AddressBookApp extends App {
+
+  Widget buildToolBar() {
+    return new ToolBar(
+        left: new IconButton(icon: "navigation/arrow_back"),
+        right: [new IconButton(icon: "navigation/check")]
+      );
+  }
+
+  Widget buildFloatingActionButton() {
+    return new FloatingActionButton(
+      child: new Icon(type: 'image/photo_camera', size: 24),
+      backgroundColor: Theme.of(this).accentColor
+    );
+  }
+
+  Widget buildBody() {
+    return new Material(
+      child:new Block([
+        new Field(icon:"social/person", placeholder:"Name"),
+        new Field(icon: "communication/phone", placeholder:"Phone"),
+        new Field(icon: "communication/email", placeholder:"Email"),
+        new Field(icon: "maps/place", placeholder:"Address"),
+        new Field(icon: "av/volume_up", placeholder:"Ringtone"),
+        new Field(icon: "content/add", placeholder:"Add note"),
+      ])
+    );
+  }
+
+  Widget buildMain() {
+    return new Scaffold(
+      toolbar: buildToolBar(),
+      body: buildBody(),
+      floatingActionButton: buildFloatingActionButton()
+    );
+  }
+
+  Widget build() {
+
+    ThemeData theme = new ThemeData(
+      brightness: ThemeBrightness.light,
+      primarySwatch: colors.Teal,
+      accentColor: colors.PinkAccent[100]
+    );
+
+    return new Theme(
+      data: theme,
+        child: new DefaultTextStyle(
+          style: typography.error, // if you see this, you've forgotten to correctly configure the text style!
+          child: new TaskDescription(
+            label: 'Address Book',
+            child: buildMain()
+          )
+        )
+     );
+   }
+}
+
+void main() {
+  runApp(new AddressBookApp());
+}

sdk/lib/editing/input.dart

@@ -11,11 +11,20 @@ import 'package:sky/widgets/theme.dart';
 
 typedef void ValueChanged(value);
 
-const double _kHintOpacity = 0.26;
+// TODO(eseidel): This isn't right, it's 16px on the bottom:
+// http://www.google.com/design/spec/components/text-fields.html#text-fields-single-line-text-field
 const EdgeDims _kTextfieldPadding = const EdgeDims.symmetric(vertical: 8.0);
 
 class Input extends StatefulComponent {
 
+  // Current thinking is that Widget will have an optional globalKey
+  // or heroKey and it will ask Focus.from(this).isFocused which will
+  // check using its globalKey.
+  // Only one element can use a globalKey at a time and its' up to
+  // Widget.sync to maintain the mapping.
+  // Never makes sense to have both a localKey and a globalKey.
+  // Possibly a class HeroKey who functions as a UUID.
+
   Input({String key,
          this.placeholder,
          this.onChanged,
@@ -54,29 +63,30 @@ class Input extends StatefulComponent {
   }
 
   Widget build() {
+    ThemeData themeData = Theme.of(this);
+
     if (focused && !_isAttachedToKeyboard) {
       keyboard.show(_editableValue.stub);
       _isAttachedToKeyboard = true;
     }
 
-    TextStyle textStyle = Theme.of(this).text.subhead;
+    TextStyle textStyle = themeData.text.subhead;
     List<Widget> textChildren = <Widget>[];
 
     if (placeholder != null && _value.isEmpty) {
       Widget child = new Opacity(
         key: "placeholder",
         child: new Text(placeholder, style: textStyle),
-        opacity: _kHintOpacity
+        opacity: themeData.hintOpacity
       );
       textChildren.add(child);
     }
 
-    ThemeData themeData = Theme.of(this);
     Color focusHighlightColor = themeData.accentColor;
     Color cursorColor = themeData.accentColor;
     if (themeData.primarySwatch != null) {
-      cursorColor = Theme.of(this).primarySwatch[200];
-      focusHighlightColor = focused ? themeData.primarySwatch[400] : themeData.primarySwatch[200];
+      cursorColor = themeData.primarySwatch[200];
+      focusHighlightColor = focused ? themeData.primarySwatch[400] : themeData.hintColor;
     }
 
     textChildren.add(new EditableText(

sdk/lib/theme/theme_data.dart

@@ -23,6 +23,9 @@ class ThemeData {
       canvasColor = brightness == ThemeBrightness.dark ? colors.Grey[850] : colors.Grey[50],
       cardColor = brightness == ThemeBrightness.dark ? colors.Grey[800] : colors.White,
       dividerColor = brightness == ThemeBrightness.dark ? const Color(0x1FFFFFFF) : const Color(0x1F000000),
+      // Some users want the pre-multiplied color, others just want the opacity.
+      hintColor = brightness == ThemeBrightness.dark ? const Color(0x42FFFFFF) : const Color(0x4C000000),
+      hintOpacity = brightness == ThemeBrightness.dark ? 0.26 : 0.30,
       text = brightness == ThemeBrightness.dark ? typography.white : typography.black {
     assert(brightness != null);
 
@@ -52,6 +55,8 @@ class ThemeData {
   final Color canvasColor;
   final Color cardColor;
   final Color dividerColor;
+  final Color hintColor;
+  final double hintOpacity;
   final typography.TextTheme text;
 
   Color _primaryColor;

sdk/lib/widgets/tool_bar.dart

@@ -47,16 +47,14 @@ class ToolBar extends Component {
     if (left != null)
       children.add(left);
 
-    if (center != null) {
-      children.add(
-        new Flexible(
-          child: new Padding(
-            child: center,
-            padding: new EdgeDims.only(left: 24.0)
-          )
+    children.add(
+      new Flexible(
+        child: new Padding(
+          child: center,
+          padding: new EdgeDims.only(left: 24.0)
         )
-      );
-    }
+      )
+    );
 
     if (right != null)
       children.addAll(right);