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..b60c170071bda428a65d31d78a0e490a136f56a0 100644
--- a/src/site/index.html
+++ b/src/site/index.html
@@ -140,51 +140,174 @@ 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:math' as math;            // Importing a library.
+
+// Functions and variables can be inside or outside of classes.
+var _shapes = new List();             // A global variable.
+addShape(shape) [[highlight]]=>[[/highlight]] _shapes.add(shape); // Function shorthand syntax: =>
+
+[[highlight]]class[[/highlight]] Ellipse extends Shape {         // Declaring a class.
+  num major = 0;                       // An instance variable (property).
+  num minor = 0;
+  static const _C = math.PI/4;        // A constant.
+  num get area => _C*major*minor;      // A property implemented with a getter.
+
+  Ellipse([[highlight]]this.major, this.minor[[/highlight]]);     // Compact constructor syntax.
+  Ellipse.golden(this.major) {         // A named constructor.
+    minor = major*(1 + math.sqrt(5))/2;
+  }
+}
+
+// Every app has a main() function, where execution starts.
+[[highlight]]main()[[/highlight]] {
+  // The cascade operator (..) saves you from repetitive typing.
+  addShape(new Ellipse.golden(10)[[highlight]]..[[/highlight]]minor *= 2
+                                 [[highlight]]..[[/highlight]]rotation = 20
+                                 [[highlight]]..[[/highlight]]color = 'rgb(0,129,198)');
+}
+{% 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—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>
+
+      <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>
 
-@observable String myString = '';
+    <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>
 
-String get shouted => myString.toUpperCase();
+      <div class="row-fluid">
+        <div class="span10 offset1">
+
+{% prettify dart %}
+import 'dart:io';
+import 'dart:async';
 
-String get palindrome =>
-    myString + myString.split('').reversed.join();
+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="span6" id="html-code">
+    <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>