update examples on homepage

src/site/index.html

 ---
 layout: homepage
 googleapi: true
 js:
 - url: /js/display-news.js
 - url: /js/os-switcher.js
   defer: true
 - url: /js/editor-downloads-analytics.js
   defer: true
 - url: /js/editor-version.js
@@ skipping 122 matching lines @@
         <div id="feed-posts">
         </div>
       </div>
     </div>
   </div>
 </section>
 
 <section id="code">
   <h1> Code </h1>
 
-  <p>
-    Experiment with Dart right in your browser:
-    <a href="http://try.dartlang.org">try.dartlang.org</a>
+   <p> 
+    You can find code examples in Dart Editor,

[sethladd, 2013/08/08 19:00:32]

maybe say "dart editor welcome page" ? How would I find them?

[Kathy Walrath, 2013/08/08 23:16:59]

Done.

+    in the <a href="/samples/">Samples page</a>,
+    and below.
+    You can also experiment with Dart right in your browser:
+    <a href="http://try.dartlang.org" target="_blank">try.dartlang.org</a>
   </p>
 
-  <p>
-    Here's some code from a Dart web app that uses Web UI.
-    To learn about web programming with Dart, try our
-    <a href="/docs/tutorials/">Dart tutorials</a>.
-  </p>
+<div class="tabbable">
+  <ul class="nav nav-tabs">
+    <li class="active"><a href="#language" data-toggle="tab">Syntax</a></li>
+    <li><a                href="#types"    data-toggle="tab">Optional types</a></li>
+    <li><a                href="#futures"  data-toggle="tab">Futures</a></li>
+    <li><a                href="#webui"    data-toggle="tab">Web UI</a></li>
+  </ul>
 
-  <div class="row-fluid">
-    <div class="span6" id="dart-code">
+  <div class="tab-content">
+    <div class="tab-pane active" id="language">
+      <p>
+        Dart aims to be unsurprising,
+        but it does add a few language features
+        to keep your code succinct yet understandable.
+        Read all about Dart syntax in the
+        <a href="/docs/dart-up-and-running/contents/ch02.html">Dart language tour</a>.
+      </p>
+
+      <div class="row-fluid">
+        <div class="span10 offset1">
+{% prettify dart %}
+[[highlight]]import[[/highlight]] 'dart:html';                      // Dart supports libraries.
+
+// Define functions either inside or outside of classes.
+startOrEndTest() {
+  // ...
+}
+
+[[highlight]]class[[/highlight]] Rectangle implements Shape {    // Declaring a class...
+  final num height, width;            // ...with properties.
+  num [[highlight]]get[[/highlight]] area [[highlight]]=>[[/highlight]] height * width;     // A property implemented with a getter.
+                                       // Also: function shorthand syntax (=>).
+  Rectangle([[highlight]]this.height, this.width[[/highlight]]); // Compact constructor syntax.
+}
+
+// Every app has a main() function, where execution starts.
+[[highlight]]main()[[/highlight]] {
+  // The cascade operator (..) saves you from repetitive typing.
+  query("#button")
+    [[highlight]]..[[/highlight]]text = "Run test"
+    [[highlight]]..[[/highlight]]onClick.listen(startOrEndTest);
+}
+{% endprettify %}
+        </div>
+      </div>
+    </div>
+
+    <div class="tab-pane" id="types">
+      <p>
+      Declaring types is optional in Dart.
+      These types don't affect the runtime behavior,
+      but you can use them to clarify APIs
+      and get better help from tools.

[sethladd, 2013/08/08 19:00:32]

Can we add how you get better help? e.g. "e.g. with better code completion,
refactorings, and warnings"

[Kathy Walrath, 2013/08/08 23:16:59]

Done.

+      For details, see
+      <a href="/articles/optional-types/">Optional Types in Dart</a>.
+      </p>
+
+      <div class="row-fluid">
+        <div class="span6" id="without-types">
+{% prettify dart %}
+// Without types.
+recalculate(origin, offset, estimate) {
+  // ...
+}
+{% endprettify %}
+        </div>
+        <div class="span6" id="with-types">
+{% prettify dart %}
+// With types (and an optional parameter).
+[[highlight]]num[[/highlight]] recalculate([[highlight]]Point[[/highlight]] origin,
+                [[highlight]]num[[/highlight]] offset,
+                {[[highlight]]bool[[/highlight]] estimate:false}) {
+  // ...
+}
+{% endprettify %}
+        </div>
+      </div>
+    </div>
+
+    <div class="tab-pane" id="futures">
+      <p>
+        Functions that do potentially expensive work return Futures.
+        To specify what happens when the function's work is done,
+        invoke <code>then()</code> on the Future.
+        To handle errors, invoke <code>catchError()</code>.
+        Learn more by reading
+        <a href="/articles/using-future-based-apis/">Using Future Based APIs</a>.
+      </p>
+
+      <div class="row-fluid">
+        <div class="span10 offset1">
+
+{% prettify dart %}
+import 'dart:io';
+import 'dart:async';
+
+void printDailyNewsDigest() {
+  File file = new File("dailyNewsDigest.txt");
+  [[highlight]]file.readAsString()[[/highlight]]   // readAsString() returns a Future.
+      [[highlight]].then[[/highlight]]((content) { // Specifies what to do if the Future completes successfully.

[sethladd, 2013/08/08 19:00:32]

how about .then((content) => print(content)) here?

[Kathy Walrath, 2013/08/08 23:16:59]

Done.

+        print(content); // Executes when the file has been successfully read.
+      })
+      [[highlight]].catchError((error)[[/highlight]] { // Specifies error handling code.
+        print("Sorry, no news today. Here's why:\n");
+        print('$error');

[sethladd, 2013/08/08 19:00:32]

can you move this $error up to the first print? You already have a \n there. It
eliminates the second print

[Kathy Walrath, 2013/08/08 23:16:59]

Done.

+      });
+}
+{% endprettify %}
+        </div>
+      </div>
+    </div>
+    <div class="tab-pane" id="webui">
+      <p>
+        Here's an example of implementing a web app using the Web UI package.
+        To learn about web programming with Dart, try our
+        <a href="/docs/tutorials/">Dart tutorials</a>.
+      </p>
+
+      <div class="row-fluid">
+        <div class="span6" id="dart-code">
 {% prettify dart %}
 // Dart code:
 import 'package:web_ui/web_ui.dart';
 
-@observable String myString = '';
+@observable
+Shout [[highlight]]shout[[/highlight]] = new Shout();
 
-String get shouted => myString.toUpperCase();
+@observable 
+class Shout {
+  String [[highlight]]myString[[/highlight]] = '';
+  
+  String get [[highlight]]shouted[[/highlight]] => myString.toUpperCase();
 
-String get palindrome =>
-    myString + myString.split('').reversed.join();
+  String get [[highlight]]palindrome[[/highlight]] =>
+      myString + myString.split('').reversed.join();
+}
 {% endprettify %}
-    </div>
-  <div class="span6" id="html-code">
+        </div>
+      <div class="span6" id="html-code">
 {% prettify html %}
 <!-- HTML code: -->

[sethladd, 2013/08/08 19:00:32]

What about showing a snippet from a real tutorial, and then adding a link to the
full tutorial to learn more? That way, it's more of a funnel, and if they have
further questions about how this all works, they know where to go.

[Kathy Walrath, 2013/08/08 23:16:59]

I don't think there are any real Web UI tutorials that use templates and objects
in this way. This started out being a simplified version of shout, but we've
made it more polymer-like. Once we have Polymer, we can revisit this sample.

-<input type="text" bind-value="myString"
-       placeholder="Type here">
-  
-<div> Shouted: {{'{{'}}shouted}} </div>
-<div> Palindromic: {{'{{'}}palindrome}} </div>
+...
+<template id="stringManipulation"
+          instantiate="if [[highlight]]shout[[/highlight]] != null">

[sethladd, 2013/08/08 19:00:32]

s/instantiate/if

so, if="{{shout}}" should work (at least, it does in polymer)

[Kathy Walrath, 2013/08/08 23:16:59]

I think "if" is a polymer-ism. At least, I couldn't make it work.
Maybe that would work if shout were a boolean? Anyway, it doesn't work in Web UI
right now (even with instantiate).

+  <input type="text"
+         bind-value="shout.[[highlight]]myString[[/highlight]]"
+         placeholder="Type here">
     
-<script type="application/dart" src="little.dart"></script>
+  <div>     Shouted: {{'{{'}}shout.[[highlight]]shouted[[/highlight]]}} </div>
+  <div> Palindromic: {{'{{'}}shout.[[highlight]]palindrome[[/highlight]]}} </div>
+</template>
+    
+<script type="application/dart" src="webui.dart"></script>
 <script src="packages/browser/dart.js"></script>

[sethladd, 2013/08/08 19:00:32]

we can probably drop these two scripts, yes?

[Kathy Walrath, 2013/08/08 23:16:59]

Done.

+...
 {% endprettify %}
       {% comment %}
       Beginning double curlies are processed by liquid,
       so you have to surround them in single quotes,
       surrounded by double curlies. Yup.
       {% endcomment %}
-      </div>
-    </div> <!-- code -->
-
+        </div>
+      </div> <!-- code -->
+    </div>
+  </div>
+</div>
 </section>
 
 
 <section id="get-started">
 
 <h1> Get started </h1>
 
 <p>
   Getting started with Dart is easy.
   Just download Dart,
@@ skipping 70 matching lines @@
   You can write Dart apps using any recent version of
   {% include os-choices.html %}
   The Dart development tools <b>do not&nbsp;support Windows XP</b>.
   Dart Editor requires Java version 6 or higher.
 </aside>
 
 </section>
 
 </article> <!-- /.homepage -->