update examples on homepage

src/site/index.html

Index: src/site/index.html
diff --git a/src/site/index.html b/src/site/index.html
index 7455e467fe8783777f0bef85f0ca95a21a79cb88..c7cb3c558b6bd4d85f85717cc56c1fd70e128b53 100644
--- a/src/site/index.html
+++ b/src/site/index.html
@@ -140,51 +140,170 @@ js:
 <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's welcome page,
+    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="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="span6" id="dart-code">
+      <div class="row-fluid">
+        <div class="span10 offset1">
 {% prettify dart %}
-// Dart code:
-import 'package:web_ui/web_ui.dart';
+[[highlight]]import[[/highlight]] 'dart:html';                      // Dart supports libraries.
 
-@observable String myString = '';
+// 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>
 
-String get shouted => myString.toUpperCase();
+    <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—for example,
+      better code completion, easier navigation, and earlier error detection.
+      For details, see
+      <a href="/articles/optional-types/">Optional Types in Dart</a>.
+      </p>
 
-String get palindrome =>
-    myString + myString.split('').reversed.join();
+      <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="span6" id="html-code">
+
+    <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) => print(content)) // Handle successful completion.
+    [[highlight]].catchError[[/highlight]]((error) =>             // Handle failure.
+        print("Sorry, no news today. Here's why:\n$error"));
+}
+{% 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
+var [[highlight]]shout[[/highlight]] = new Shout();
+
+@observable 
+class Shout {
+  String [[highlight]]myString[[/highlight]] = '';
+  String get [[highlight]]shouted[[/highlight]] => myString.toUpperCase();
+  String get [[highlight]]palindrome[[/highlight]] =>
+      myString + myString.split('').reversed.join();
+}
+{% endprettify %}
+        </div>
+      <div class="span6" id="html-code">
 {% prettify html %}
 <!-- HTML code: -->
-<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">
+  <input type="text"
+         bind-value="shout.[[highlight]]myString[[/highlight]]"
+         placeholder="Type here">
     
-<script type="application/dart" src="little.dart"></script>
-<script src="packages/browser/dart.js"></script>
+  <div>     Shouted: {{'{{'}}shout.[[highlight]]shouted[[/highlight]]}} </div>
+  <div> Palindromic: {{'{{'}}shout.[[highlight]]palindrome[[/highlight]]}} </div>
+</template>
 {% 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>