# HG changeset patch # User Atul Varma # Date 1240258413 25200 # Node ID 36e47760ee5ba48f5ab668e402bf8456957efb2a # Parent 4a90574aa5a23dc6cefc0f3d5b4d47daa1d86dd0 Added a work-in-progress tutorial that auto-generates parts of itself. diff -r 4a90574aa5a2 -r 36e47760ee5b css/tutorial.css --- /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; +} diff -r 4a90574aa5a2 -r 36e47760ee5b js/tutorial.js --- /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 = $('M'); + $(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); + }); diff -r 4a90574aa5a2 -r 36e47760ee5b tutorial.html --- /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 @@ + + + + + + Blog Example + + +
+

Using BrowserCouch

+ +

Suppose we want to add offline support for a blog. To get a +database called blog-posts in BrowserCouch, you can use the +following function:

+ +
+BrowserCouch.get('blog-posts', onRetrieveDb, new FakeStorage()); +
+ +

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 FakeStorage, 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.

+ +

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 onRetrieveDb() function like this:

+ +
+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 + ); +}; +
+ +

Every item we put into our database needs to have an id +attribute, but aside from that, the item can contain any +JSON-encodable data.

+ +

Now it's possible to make a view that organizes all the posts by +author:

+ +
+function onCommitted() { + gBlogPosts.view({ + map: function(doc, emit) { + emit(doc.author, doc); + }, + finished: function(result) { + displayInElement(result, 'author-keyed-view'); + } + }); +} +
+ +

The output placed in the author-keyed-view element is:

+ +
+
+ + + + + +