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 → examples/example-scrollable/example-scrollable.sky

-#!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-element.sky" />
 <import src="/sky/framework/sky-scrollable.sky" />
-<import src="data/cities.sky" as="cities" />
+<import src="../data/cities.sky" as="cities" />
 
 <sky-element name="example-scrollable">
 <template>
@@ -17,27 +15,24 @@
     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>
+  <sky-scrollable />
 </template>
 <script>
-module.exports = class extends SkyElement {
-  created() {
-    this.cities = cities.slice(0, 300);
+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);
+    }
   }
-}.register();
+}
+
+_init(script) => register(script, ExampleScrollable);
 </script>
 </sky-element>
-
-<example-scrollable />
-</sky>

examples/example-scrollable/index.sky

+#!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>