From e33c3ffadf0ead9176eee9fc857af66e6f14e6ce Mon Sep 17 00:00:00 2001
From: Adam Barth <abarth@chromium.org>
Date: Mon, 23 Feb 2015 08:30:58 -0800
Subject: [PATCH] Port sky-drawer to Dart

Also, port the "appish" example to exercise the drawer.

R=eseidel@chromium.org

Review URL: https://codereview.chromium.org/942413002
---
 engine/src/flutter/examples/appish.sky        | 26 -----------------
 .../{ => appish}/example-scaffold.sky         | 29 +++++++++++--------
 engine/src/flutter/examples/appish/index.sky  | 12 ++++++++
 3 files changed, 29 insertions(+), 38 deletions(-)
 delete mode 100644 engine/src/flutter/examples/appish.sky
 rename engine/src/flutter/examples/{ => appish}/example-scaffold.sky (72%)
 create mode 100644 engine/src/flutter/examples/appish/index.sky

diff --git a/engine/src/flutter/examples/appish.sky b/engine/src/flutter/examples/appish.sky
deleted file mode 100644
index e2c1d77774..0000000000
--- a/engine/src/flutter/examples/appish.sky
+++ /dev/null
@@ -1,26 +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="example-scaffold.sky" />
-
-<sky-element name="example-app">
-<template>
-  <example-scaffold>
-    <div class="title">Awesome app</div>
-    <div class="menu">This is a menu</div>
-    <div class="body">This is an awesome app.</div>
-  </example-scrollable>
-</template>
-<script>
-module.exports = class extends SkyElement {
-}.register();
-</script>
-</sky-element>
-
-<example-app />
-</sky>
diff --git a/engine/src/flutter/examples/example-scaffold.sky b/engine/src/flutter/examples/appish/example-scaffold.sky
similarity index 72%
rename from engine/src/flutter/examples/example-scaffold.sky
rename to engine/src/flutter/examples/appish/example-scaffold.sky
index 553d1c7e01..0d810ccbe2 100644
--- a/engine/src/flutter/examples/example-scaffold.sky
+++ b/engine/src/flutter/examples/appish/example-scaffold.sky
@@ -4,10 +4,10 @@
 // found in the LICENSE file.
 -->
 <import src="/sky/framework/sky-drawer.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" />
 
-<sky-element name="example-scaffold">
+<sky-element>
 <template>
   <style>
     :host {
@@ -54,7 +54,7 @@
     <content select=".menu"/>
   </sky-drawer>
   <sky-toolbar>
-    <div id="menu" on-click="handleMenuClick"/>
+    <div id="menu" />
     <content id="title" select=".title"/>
   </sky-toolbar>
   <sky-scrollable>
@@ -62,18 +62,23 @@
   </sky-scrollable>
 </template>
 <script>
-module.exports = class extends SkyElement {
-  created() {
-    this.toolbar_ = null;
+import "dart:sky";
+
+@Tagname('example-scaffold')
+class ExampleScaffold extends SkyElement {
+  Element _drawer;
+
+  void shadowRootReady() {
+    _drawer = shadowRoot.getElementById('drawer');
+    Element menu = shadowRoot.getElementById('menu');
+    menu.addEventListener('click', _handleMenuClick);
   }
 
-  shadowRootReady() {
-    this.toolbar_ = this.shadowRoot.getElementById('drawer');
+  void _handleMenuClick(_) {
+    _drawer.toggle();
   }
+}
 
-  handleMenuClick() {
-    this.toolbar_.toggle();
-  }
-}.register();
+_init(script) => register(script, ExampleScaffold);
 </script>
 </sky-element>
diff --git a/engine/src/flutter/examples/appish/index.sky b/engine/src/flutter/examples/appish/index.sky
new file mode 100644
index 0000000000..3b241ebedb
--- /dev/null
+++ b/engine/src/flutter/examples/appish/index.sky
@@ -0,0 +1,12 @@
+#!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.
+-->
+<import src="example-scaffold.sky" />
+<example-scaffold>
+  <div class="title">Awesome app</div>
+  <div class="menu">This is a menu</div>
+  <div class="body">This is an awesome app.</div>
+</example-scrollable>