Port sky-scrollable to Dart

This CL ports sky-scrollable to the new sky-element.

R=esprehn@chromium.org

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

examples/data/cities.sky

@@ -4,7 +4,7 @@
 // found in the LICENSE file.
 -->
 <script>
-module.exports = [
+final List<Map> kData = [
   {"name":"New York","state":"New York","population":8363710},
   {"name":"Los Angeles","state":"California","population":3833995},
   {"name":"Chicago","state":"Illinois","population":2853114},

examples/example-scrollable.sky

@@ -1,43 +0,0 @@
-#!mojo mojo:sky_viewer
-<!--
-// 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-element/sky-element.sky" as="SkyElement" />
-<import src="/sky/framework/sky-scrollable.sky" />
-<import src="data/cities.sky" as="cities" />
-
-<sky-element name="example-scrollable">
-<template>
-  <style>
-  sky-scrollable {
-    margin: 20px;
-    height: 400px;
-    border: 2px solid blue;
-  }
-  b {
-    display: inline;
-    font-weight: bold;
-  }
-  </style>
-  <sky-scrollable>
-    <template repeat="{{ cities }}">
-      <template>
-        <div>{{ name }}</div>
-      </template>
-    </template>
-  </sky-scrollable>
-</template>
-<script>
-module.exports = class extends SkyElement {
-  created() {
-    this.cities = cities.slice(0, 300);
-  }
-}.register();
-</script>
-</sky-element>
-
-<example-scrollable />
-</sky>

examples/example-scrollable/example-scrollable.sky

@@ -0,0 +1,38 @@
+<!--
+// 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-element.sky" />
+<import src="/sky/framework/sky-scrollable.sky" />
+<import src="../data/cities.sky" as="cities" />
+
+<sky-element name="example-scrollable">
+<template>
+  <style>
+  sky-scrollable {
+    margin: 20px;
+    height: 400px;
+    border: 2px solid blue;
+  }
+  </style>
+  <sky-scrollable />
+</template>
+<script>
+import "dart:sky";
+
+@Tagname('example-scrollable')
+class ExampleScrollable extends SkyElement {
+  void shadowRootReady() {
+    Element parent = shadowRoot.querySelector('sky-scrollable');
+    for (Map city in cities.kData.getRange(0, 300)) {
+      Element div = document.createElement('div');
+      div.setChild(new Text(city['name']));
+      parent.appendChild(div);
+    }
+  }
+}
+
+_init(script) => register(script, ExampleScrollable);
+</script>
+</sky-element>

examples/example-scrollable/index.sky

@@ -0,0 +1,10 @@
+#!mojo mojo:sky_viewer
+<!--
+// 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="example-scrollable.sky" />
+  <example-scrollable />
+</sky>