Port Sky widgets demo to Dart

sky/examples/widgets/widget-root.sky

+<!--
+// 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 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" />
+<import src="/sky/framework/sky-input.sky" />
+<import src="/sky/framework/sky-radio.sky" />
+<import src="/sky/framework/sky-scrollable.sky" />
+<sky-element>
+<template>
+  <style>
+  div {
+    display: flex;
+    align-items: center;
+  }
+  sky-checkbox {
+    margin: 5px;
+  }
+  .output {
+    margin-left: 48px;
+  }
+  sky-scrollable {
+    height: -webkit-fill-available;
+  }
+  </style>
+  <sky-scrollable>
+    <sky-box title='Text'>
+      <sky-input id="text" value="{{ inputValue }}" />
+      <div>value = {{ inputValue }}</div>
+    </sky-box>
+  
+    <sky-box title='Buttons'>
+      <sky-button id='button'>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>
+  </sky-scrollable>
+</template>
+<script>
+import "dart:sky";
+
+@Tagname('widget-root')
+class WidgetRoot extends SkyElement {
+  Element _button;
+  Element _checkbox;
+  Element _text;
+  int _clickCount = 0;
+  String _inputValue = "Ready";
+  bool _checked = false;
+
+  void shadowRootReady() {
+    _button = this.shadowRoot.getElementById('button');
+    _checkbox = this.shadowRoot.getElementById('checkbox');
+    _text = this.shadowRoot.getElementById('text');
+
+    _button.addEventListener('click', _handleClick);
+  }
+
+  void _handleClick(_) {
+    _clickCount++;
+    _checked = !_checked;
+    _inputValue = "Moar clicking ${_clickCount}";
+  }
+}
+
+_init(script) => register(script, WidgetRoot);
+</script>
+</sky-element>