[doc/example-quickstart,doc/library][m]: most of a quickstart example plus refactor library page to reflect this and our plans.
* example covers creating a dataset and displaying a grid * refactor library page to remove examples (will be separate) and list a set of examples we hope to have (most not yet written)
This commit is contained in:
Rufus Pollock
parent
4ca2d9765e
commit
a2df2955f7
21
css/site.css
21
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;
|
||||
}
|
||||
|
||||
|
||||
98
example-quickstart.markdown
Normal file
98
example-quickstart.markdown
Normal file
@ -0,0 +1,98 @@
|
||||
---
|
||||
layout: container
|
||||
title: Library - Example - Quickstart
|
||||
recline-deps: true
|
||||
---
|
||||
|
||||
<div class="page-header">
|
||||
<h1>
|
||||
Recline Quickstart Guide
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
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 %}
|
||||
<!-- you do not have to use bootstrap but we use it by default -->
|
||||
<link rel="stylesheet" href="vendor/bootstrap/2.0.2/css/bootstrap.css">
|
||||
<!-- CSS for relevant view components - here we just have grid -->
|
||||
<link rel="stylesheet" href="css/grid.css" />{% endhighlight %}
|
||||
|
||||
3. Include the relevant Javascript files somewhere on the page (preferably before body close tag):
|
||||
{% highlight html %}
|
||||
<!-- you do not have to use bootstrap but we use it by default -->
|
||||
<link rel="stylesheet" href="vendor/bootstrap/2.0.2/css/bootstrap.css">
|
||||
<!-- 3rd party dependencies -->
|
||||
<script type="text/javascript" src="vendor/jquery/1.7.1/jquery.js"></script>
|
||||
<script type="text/javascript" src="vendor/underscore/1.1.6/underscore.js"></script>
|
||||
<script type="text/javascript" src="vendor/backbone/0.5.1/backbone.js"></script>
|
||||
<script type="text/javascript" src="vendor/jquery.mustache.js"></script>
|
||||
<!-- note that we could include individual components rather than whole of recline -->
|
||||
<script type="text/javascript" src="recline.js"></script>{% endhighlight %}
|
||||
|
||||
4. Create a div to hold the Recline view(s):
|
||||
{% highlight html %}
|
||||
<div id="recline-grid"></div>{% 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 `<div id="recline-grid"></div>` we created earlier:
|
||||
|
||||
{% highlight javascript %}
|
||||
var grid = new recline.View.Grid({
|
||||
model: dataset,
|
||||
el: $('#recline-grid')
|
||||
});
|
||||
grid.render();
|
||||
{% endhighlight %}
|
||||
|
||||
And hey presto:
|
||||
|
||||
<div id="recline-grid" class="recline-read-only"> </div>
|
||||
|
||||
<script type="text/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'}
|
||||
];
|
||||
var dataset = recline.Backend.createDataset(data);
|
||||
var $el = $('#recline-grid');
|
||||
var grid = new recline.View.Grid({
|
||||
model: dataset,
|
||||
});
|
||||
$el.append(grid.el);
|
||||
grid.render();
|
||||
</script>
|
||||
|
||||
106
library.html
106
library.html
@ -3,76 +3,66 @@ layout: default
|
||||
title: Library - Home
|
||||
---
|
||||
|
||||
<div class="container">
|
||||
<div class="container library">
|
||||
|
||||
<div class="page-header">
|
||||
<h1>
|
||||
The Data Library
|
||||
Recline Library and Data Components
|
||||
</h1>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
<h2 id="docs-using">Examples</h2>
|
||||
|
||||
<p><strong>Note:</strong> A quick read through of the Concepts section will
|
||||
likely be useful in understanding the details of the examples.</p>
|
||||
|
||||
<p><strong>Note</strong>: for all the following examples you should have
|
||||
included relevant Recline dependencies.</p>
|
||||
|
||||
<h4>Simple in-memory dataset.</h4>
|
||||
<pre>
|
||||
// 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();
|
||||
</pre>
|
||||
|
||||
<h4>Creating a Dataset Explicitly with a Backend</h4>
|
||||
<pre>
|
||||
// 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
|
||||
);
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
<p>Building on <a href="http://backbonejs.com/">Backbone</a>, 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).</p>
|
||||
|
||||
<h2 id="examples">Examples</h2>
|
||||
<div class="alert alert-success"><strong>Note:</strong> A quick read through of the <a href="#concepts">Concepts section</a> will
|
||||
likely be useful in understanding the details of the examples.</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="span3 well">
|
||||
<h4><a href="example-quickstart.html">Recline Quickstart Guide</a></h4>
|
||||
</div>
|
||||
<div class="span4 well">
|
||||
<h4>Loading from difference sources: Google Docs, Local CSV, DataHub</h4>
|
||||
</div>
|
||||
<div class="span3 well">
|
||||
<h4>Twitter Example</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="span3 well">
|
||||
<h4>Customing Display and Import using Fields</h4>
|
||||
</div>
|
||||
<div class="span4 well">
|
||||
<h4>Listening to events</h4>
|
||||
</div>
|
||||
<div class="span3 well">
|
||||
<h4>Setting and Getting State</h4>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Extending Recline</h3>
|
||||
<div class="row">
|
||||
<div class="span3 well">
|
||||
<h4>Create a new View</h4>
|
||||
</div>
|
||||
<div class="span3 well">
|
||||
<h4>Create a new Backend</h4>
|
||||
</div>
|
||||
<div class="span3 well">
|
||||
<h4>Create a Custom Document Object</h4>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="span12">
|
||||
<h2 id="docs-concepts">Concepts and Structure</h2>
|
||||
<h2 id="concepts">Concepts and Structure</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="span6">
|
||||
|
||||
<p>Recline has a simple structure layered on top of the basic Model/View
|
||||
distinction inherent in Backbone.</p>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user