Morph "appish" example into a "stocks" app

We'll flesh this example out over time to demo a bunch of our widgets.

TBR=eseidel@chromium.org

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

examples/appish/index.sky

@@ -1,12 +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.
--->
-<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>

examples/stocks/index.sky

@@ -0,0 +1,8 @@
+#!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="stocks.sky" />
+<stocks />

examples/stocks/stock.sky

@@ -0,0 +1,29 @@
+<!--
+// 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" />
+
+<sky-element attributes="ticker:string">
+<template>
+  <style>
+  </style>
+  <div id="ticker" />
+</template>
+<script>
+import "dart:sky";
+
+@Tagname('stock')
+class Stock extends SkyElement {
+  Element _ticker;
+
+  void shadowRootReady() {
+    _ticker = shadowRoot.getElementById('ticker');
+    _ticker.textContent = ticker;
+  }
+}
+
+_init(script) => register(script, Stock);
+</script>
+</sky-element>

examples/stocks/stocks.sky

@@ -6,6 +6,7 @@
 <import src="/sky/framework/sky-drawer.sky" />
 <import src="/sky/framework/sky-element.sky" />
 <import src="/sky/framework/sky-scrollable.sky" />
+<import src="stock.sky" />
 
 <sky-element>
 <template>
@@ -51,21 +52,41 @@
     }
   </style>
   <sky-drawer id="drawer">
-    <content select=".menu"/>
+    I am drawer
   </sky-drawer>
   <sky-toolbar>
     <div id="menu" />
-    <content id="title" select=".title"/>
+    I am a stocks app
   </sky-toolbar>
   <sky-scrollable>
-    <content />
+    <stock ticker="GOOG" />
+    <stock ticker="GOOGL" />
+    <stock ticker="GOOG" />
+    <stock ticker="GOOG" />
+    <stock ticker="GOOG" />
+    <stock ticker="GOOG" />
+    <stock ticker="GOOG" />
+    <stock ticker="GOOG" />
+    <stock ticker="GOOG" />
+    <stock ticker="GOOG" />
+    <stock ticker="GOOG" />
+    <stock ticker="GOOG" />
+    <stock ticker="GOOG" />
+    <stock ticker="GOOG" />
+    <stock ticker="GOOG" />
+    <stock ticker="GOOG" />
+    <stock ticker="GOOG" />
+    <stock ticker="GOOG" />
+    <stock ticker="GOOG" />
+    <stock ticker="GOOG" />
+    <stock ticker="GOOG" />
   </sky-scrollable>
 </template>
 <script>
 import "dart:sky";
 
-@Tagname('example-scaffold')
+@Tagname('stocks')
-class ExampleScaffold extends SkyElement {
+class Stocks extends SkyElement {
   Element _drawer;
 
   void shadowRootReady() {
@@ -79,6 +100,6 @@ class ExampleScaffold extends SkyElement {
   }
 }
 
-_init(script) => register(script, ExampleScaffold);
+_init(script) => register(script, Stocks);
 </script>
 </sky-element>