Port Sky widgets demo to Dart

sky/examples/widgets/index.sky

Index: sky/examples/widgets/index.sky
diff --git a/sky/examples/widgets/index.sky b/sky/examples/widgets/index.sky
index f83dc19329f86cb7d526a5edfb26156a12878d8b..7d758ee561244cda7f8ca5b82b20cfce35f37a7f 100644
--- a/sky/examples/widgets/index.sky
+++ b/sky/examples/widgets/index.sky
@@ -1,88 +1,8 @@
 #!mojo mojo:sky_viewer
 <!--
-// Copyright 2014 The Chromium Authors. All rights reserved.
+// 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>
-<import src="/sky/framework/sky-box.sky"/>
-<import src="/sky/framework/sky-button.sky"/>
-<import src="/sky/framework/sky-checkbox.sky"/>
-<import src="/sky/framework/sky-element/sky-element.sky" as="SkyElement"/>
-<import src="/sky/framework/sky-input.sky"/>
-<import src="/sky/framework/sky-radio.sky"/>
-<sky-element name="widget-root">
-<template>
-  <style>
-  div {
-    display: flex;
-    align-items: center;
-  }
-  sky-checkbox {
-    margin: 5px;
-  }
-  .output {
-    margin-left: 48px;
-  }
-  </style>
-
-  <sky-box title='Text'>
-    <sky-input id="text" value="{{ inputValue }}" />
-    <div>value = {{ inputValue }}</div>
-  </sky-box>
-
-  <sky-box title='Buttons'>
-    <sky-button id='button' on-click='handleClick'>Button</sky-button>
-    <div>highlight: {{ myButton.highlight }}</div>
-    <div>clickCount: {{ clickCount }}</div>
-  </sky-box>
-
-  <sky-box title='Checkboxes'>
-    <div><sky-checkbox id='checkbox' checked='{{ checked }}'/>Checkbox</div>
-    <div class="output">highlight: {{ myCheckbox.highlight }}</div>
-    <div class="output">checked: {{ myCheckbox.checked }}</div>
-    <div><sky-checkbox id='checkbox' checked="true"/>Checkbox, default checked.</div>
-    <div class="output">checked: {{ checked }}</div>
-  </sky-box>
-
-  <sky-box title='Radios'>
-    <sky-box title='Group One'>
-      <div><sky-radio group='foo'/>one</div>
-      <div><sky-radio group='foo' selected='true' />two</div>
-      <div><sky-radio group='foo'/>three</div>
-    </sky-box>
-    <sky-box title='Group Two'>
-      <div><sky-radio group='bar'/>A</div>
-      <div><sky-radio group='bar'/>B</div>
-      <div><sky-radio group='bar' selected='true' />C</div>
-    </sky-box>
-  </sky-box>
-
-</template>
-<script>
-module.exports = class extends SkyElement {
-  created() {
-    this.myButton = null;
-    this.myCheckbox = null;
-    this.myText = null;
-    this.clickCount = 0;
-    this.inputValue = "Ready";
-    this.checked = false;
-  }
-  attached() {
-    this.myButton = this.shadowRoot.getElementById('button');
-    this.myCheckbox = this.shadowRoot.getElementById('checkbox');
-    this.myText = this.shadowRoot.getElementById('text');
-    this.clickCount = 0;
-  }
-  handleClick(event) {
-    this.clickCount++;
-    this.checked = !this.checked;
-    this.inputValue = "Moar clicking " + this.clickCount;
-  }
-}.register();
-</script>
-</sky-element>
-
+<import src="widget-root.sky"/>
 <widget-root />
-</sky>