Mercurial > browser-couch

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/css/tutorial.css	Mon Apr 20 13:13:33 2009 -0700
@@ -0,0 +1,32 @@
+body {
+    font-family: palatino, georgia, verdana, arial, sans-serif;
+    font-size: 10pt;
+    text-align: center;
+}
+
+#content {
+    text-align: left;
+    margin: 2em auto;
+    line-height: 1.4em;
+
+}
+
+h1 {
+    font-weight: normal;
+    line-height: 1.4em;
+}
+
+.example-code {
+    font-family: monaco, andale mono, monospace;
+    font-size: 9pt;
+    white-space: pre;
+    padding-left: 2em;
+}
+
+.example-output {
+    font-family: monaco, andale mono, monospace;
+    font-size: 9pt;
+    white-space: pre-wrap;
+    padding-left: 2em;
+    color: gray;
+}
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/js/tutorial.js	Mon Apr 20 13:13:33 2009 -0700
@@ -0,0 +1,38 @@
+// Helper function that displays a JSON-encodable object in a DOM element.
+function displayInElement(obj, id) {
+  ModuleLoader.require(
+    'JSON',
+    function() {
+      $('#' + id).text(JSON.stringify(obj, null, 2));
+    });
+}
+
+$(window).ready(
+  function() {
+    var CHARS_PER_ROW = 80;
+
+    // Get the width of a single monospaced character of code.
+    var oneCodeCharacter = $('<span class="example-code">M</span>');
+    $(document.body).append(oneCodeCharacter);
+    var charWidth = oneCodeCharacter.width();
+    $(oneCodeCharacter).remove();
+
+    // Set the width of the content to be the maximum number of
+    // characters of code that can fit on a line.
+    $('#content').css({width: charWidth * CHARS_PER_ROW});
+
+    // Iterate through all the code snippets and trim them.
+    var allCode = '';
+    $('.example-code').each(
+      function() {
+        var code = $(this).text();
+        allCode += code;
+        $(this).text(jQuery.trim(code));
+      });
+
+    // Now execute all the code snippets.
+    var dataUri = 'data:text/javascript,' + encodeURI(allCode);
+    var script = document.createElement('script');
+    script.setAttribute('src', dataUri);
+    document.body.appendChild(script);
+  });
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/tutorial.html	Mon Apr 20 13:13:33 2009 -0700
@@ -0,0 +1,77 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
+  <link rel="stylesheet" type="text/css" media="all"
+        href="css/tutorial.css" />
+  <title>Blog Example</title>
+</head>
+<body>
+<div id="content" class="documentation">
+<h1>Using BrowserCouch</h1>
+
+<p>Suppose we want to add offline support for a blog.  To get a
+database called <tt>blog-posts</tt> in BrowserCouch, you can use the
+following function:</p>
+
+<div class="example-code">
+BrowserCouch.get('blog-posts', onRetrieveDb, new FakeStorage());
+</div>
+
+<p>It's clear that the first parameter is the name of the database we
+want; the second parameter is the callback that will be passed the
+database once it's fetched. The third parameter is optional, and
+specifies the engine that will be used to persistently store our
+database. In this case we're using a storage backend
+called <tt>FakeStorage</tt>, which just stores everything
+non-persistently in memory, because this is just a tutorial. We could
+just as easily leave out the third parameter to have BrowserCouch
+figure out the best storage backend based on our browser's
+capabilities.</p>
+
+<p>If the database doesn't already exist, an empty one will be created
+for us. Putting blog posts into the database can be done via
+an <tt>onRetrieveDb()</tt> function like this:</p>
+
+<div class="example-code">
+function onRetrieveDb(db) {
+  gBlogPosts = db;
+  gBlogPosts.put(
+    [{id: 0, author: 'Myk', title: 'Burritos', content: 'Burritos are yum.'},
+     {id: 1, author: 'Thunder', title: 'Bacon', content: 'I like bacon.'}],
+    onCommitted
+  );
+};
+</div>
+
+<p>Every item we put into our database needs to have an <tt>id</tt>
+attribute, but aside from that, the item can contain any
+JSON-encodable data.</p>
+
+<p>Now it's possible to make a view that organizes all the posts by
+author:</p>
+
+<div class="example-code">
+function onCommitted() {
+  gBlogPosts.view({
+    map: function(doc, emit) {
+      emit(doc.author, doc);
+    },
+    finished: function(result) {
+      displayInElement(result, 'author-keyed-view');
+    }
+  });
+}
+</div>
+
+<p>The output placed in the <tt>author-keyed-view</tt> element is:</p>
+
+<div class="example-output" id="author-keyed-view">
+</div>
+
+<script src="js/ext/jquery.js"></script>
+<script src="js/browser-couch.js"></script>
+<script src="js/tutorial.js"></script>
+</body>
+</html>