diff --git a/css/site.css b/css/site.css index 63242ea2..c8260d09 100644 --- a/css/site.css +++ b/css/site.css @@ -246,3 +246,24 @@ section.grey:after { .footer a.btn { color:#333333; } + +.library .row .well { + height: 60px; +} + +/** Code / Pre **/ + +.container pre { + padding: 10px 15px; + border: 1px solid #ccc; + background: white; + color: #444; + + box-shadow: 0 0 15px #ddd; + -moz-box-shadow: 0 0 15px #ddd; + -webkit-box-shadow: 0 0 15px #ddd; + -webkit-border-radius: 0; + -moz-border-radius: 0; + border-radius: 0; +} + diff --git a/example-quickstart.markdown b/example-quickstart.markdown new file mode 100644 index 00000000..e87ab283 --- /dev/null +++ b/example-quickstart.markdown @@ -0,0 +1,98 @@ +--- +layout: container +title: Library - Example - Quickstart +recline-deps: true +--- + +
+

+ Recline Quickstart Guide +

+
+ +This step-by-step guide will quickly get you started with Recline basics, including creating a dataset from local data and setting up a data grid to display this data. + +### Preparing your page + +Before writing any code with Recline, you need to do the following preparation steps on your page: + +1. [Download ReclineJS](download.html) and relevant dependencies. +2. Include the relevant CSS in the head section of your document: + {% highlight html %} + + + + {% endhighlight %} + +3. Include the relevant Javascript files somewhere on the page (preferably before body close tag): + {% highlight html %} + + + + + + + + +{% endhighlight %} + +4. Create a div to hold the Recline view(s): + {% highlight html %} +
{% endhighlight %} + +You're now ready to start working with Recline. + +### Creating a Dataset + +We are going to be working with the following set of data: + +{% highlight javascript %} +var data = [ + {id: 0, x: 1, y: 2, z: 3, country: 'UK', label: 'first'}, + {id: 1, x: 2, y: 4, z: 6, country: 'UK', label: 'second'}, + {id: 2, x: 3, y: 6, z: 9, country: 'US', label: 'third'} + ]; +{% endhighlight %} + +Here we have 3 documents / rows each of which is a javascript object containing keys and values (note that all values here are 'simple' but there is no reason you cannot have full objects as values. + +We can now create a recline Dataset object (and memory backend) from this raw data: + +{% highlight javascript %} +var dataset = recline.Backend.createDataset(data); +{% endhighlight %} + +Note that behind the scenes Recline will create a Memory backend for this dataset as in Recline every dataset object must have a backend from which it can push and pull data. In the case of in-memory data this is a little artificial since all the data is available locally but this makes more sense for situations where one is connecting to a remote data source (and one which may contain a lot of data). + + +### Setting up the Grid + +Let's create a data grid view to display the dataset we have just created, binding the view to the `
` we created earlier: + +{% highlight javascript %} +var grid = new recline.View.Grid({ + model: dataset, + el: $('#recline-grid') +}); +grid.render(); +{% endhighlight %} + +And hey presto: + +
 
+ + + diff --git a/library.html b/library.html index e771e7ab..7165f566 100644 --- a/library.html +++ b/library.html @@ -3,76 +3,66 @@ layout: default title: Library - Home --- -
+

- The Data Library + Recline Library and Data Components

-
-
-

Examples

- -

Note: A quick read through of the Concepts section will - likely be useful in understanding the details of the examples.

- -

Note: for all the following examples you should have - included relevant Recline dependencies.

- -

Simple in-memory dataset.

- 
-        // Some data you have
-        // Your data must be in the form of list of documents / rows
-        // Each document/row is an Object with keys and values
-        var data = [
-            {id: 0, x: 1, y: 2, z: 3, country: 'UK', label: 'first'}
-            , {id: 1, x: 2, y: 4, z: 6, country: 'UK', label: 'second'}
-            , {id: 2, x: 3, y: 6, z: 9, country: 'US', label: 'third'}
-          ];
-        
-        // Create a Dataset object from local in-memory data
-        // Dataset object is a Backbone model - more info on attributes in model docs below
-        var dataset = recline.Backend.createDataset(data);
-        
-        // Now create the main explorer view (it will create other views as needed)
-        // DataExplorer is a Backbone View
-        var explorer = recline.View.DataExplorer({
-          model: dataset,
-          // you can specify any element to bind to in the dom
-          el: $('.data-explorer-here')
-        });
-        // Start Backbone routing (if you want routing support)
-        Backbone.history.start();
-
- -

Creating a Dataset Explicitly with a Backend

- 
-        // Connect to ElasticSearch index/type as our data source
-        // There are many other backends you can use (and you can write your own)
-        var backend = new recline.Backend.ElasticSearch();
-        
-        // Dataset is a Backbone model so the first hash become model attributes
-        var dataset = recline.Model.Dataset({
-            id: 'my-id',
-            // url for source of this dataset - will be used by backend
-            url: 'http://localhost:9200/my-index/my-type',
-            // any other metadata e.g.
-            title: 'My Dataset Title'
-          },
-          backend
-        );
-
-
+ +

Building on Backbone, Recline + supplies components and structure to data-heavy applications by providing a + set of models (Dataset, Document/Row, Field) and views (Grid, Map, Graph + etc).

+ +

Examples

+
Note: A quick read through of the Concepts section will + likely be useful in understanding the details of the examples.
+ +
+
+

Recline Quickstart Guide

+
+

Loading from difference sources: Google Docs, Local CSV, DataHub

+
+
+

Twitter Example

+
+
+
+
+

Customing Display and Import using Fields

+
+
+

Listening to events

+
+
+

Setting and Getting State

+
+
+ +

Extending Recline

+
+
+

Create a new View

+
+
+

Create a new Backend

+
+
+

Create a Custom Document Object

+
+
+
-

Concepts and Structure

+

Concepts and Structure

-

Recline has a simple structure layered on top of the basic Model/View distinction inherent in Backbone.