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..9364aee03dd29011c00fba4f6489d9e44e10a21b 100644
--- a/src/site/index.html
+++ b/src/site/index.html
@@ -140,41 +140,146 @@ 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,
+    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="span10 offset1">
+{% prettify dart %}
+[[highlight]]import[[/highlight]] 'dart:html';                      // Dart supports libraries...
+
+[[highlight]]class[[/highlight]] Rectangle implements Shape {      // ...and classes.
+  final num height, width; 
+  Rectangle([[highlight]]this.height[[/highlight]], [[highlight]]this.width[[/highlight]]);    // Compact constructor syntax.
+  num perimeter() [[highlight]]=>[[/highlight]] 2*height + 2*width; // Function shorthand syntax.
+}
+
+// You can define functions either inside or outside of classes.
+startOrEndTest() {
+  // ...
+}
+
+// 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.
+      </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,
+        you invoke <code>then()</code> on the Future.
+      </p>
+
+      <div class="row-fluid">
+        <div class="span10 offset1">
 
-  <div class="row-fluid">
-    <div class="span6" id="dart-code">
+{% prettify dart %}
+import 'dart:io';
+import 'dart:async';
+
+void printDailyNewsDigest() {
+  File file = new File("dailyNewsDigest.txt");
+  [[highlight]]Future future = file.readAsString();[[/highlight]] // readAsString() returns a Future.
+  future.then((content) { 
+    [[highlight]]print(content);[[/highlight]]            // Executes when the future's work is 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 = '';
 
-String get shouted => myString.toUpperCase();
+String get [[highlight]]shouted[[/highlight]] => myString.toUpperCase();
 
-String get palindrome =>
+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: -->
 <input type="text" bind-value="myString"
        placeholder="Type here">
   
-<div> Shouted: {{'{{'}}shouted}} </div>
-<div> Palindromic: {{'{{'}}palindrome}} </div>
+<div>     Shouted: {{'{{'}}[[highlight]]shouted[[/highlight]]}} </div>
+<div> Palindromic: {{'{{'}}[[highlight]]palindrome[[/highlight]]}} </div>
     
-<script type="application/dart" src="little.dart"></script>
+<script type="application/dart" src="webui.dart"></script>
 <script src="packages/browser/dart.js"></script>
 {% endprettify %}
       {% comment %}
@@ -182,9 +287,11 @@ String get palindrome =>
       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>