Docs improvements
Added list of views incl. those from 3rd parties, linked views tutorial from views docs. Linked the list from the tutorial. Booted (unlinked) pages for Grids tutorial (#397, #398), Timelines tutorial (#224)
This commit is contained in:
7
_includes/views-list.html
Normal file
7
_includes/views-list.html
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
* <a href="{{page.root}}/docs/src/view.grid.html">Grid (simple)</a>
|
||||||
|
* <a href="{{page.root}}/docs/src/view.slickgrid.html">Grid (SlickGrid)</a>
|
||||||
|
* <a href="{{page.root}}/docs/src/view.map.html">Map</a>
|
||||||
|
* <a href="https://github.com/NuCivic/recline.view.choroplethmap.js">Choropleth Map</a>
|
||||||
|
* <a href="{{page.root}}/docs/src/view.graph.html">Graph</a>
|
||||||
|
* <a href="{{page.root}}/docs/src/view.timeline.html">Timeline</a>
|
||||||
|
* <a href="{{page.root}}/docs/src/view.multiview.html">Multiview (combines views)</a>
|
||||||
52
docs/tutorial-grids.markdown
Normal file
52
docs/tutorial-grids.markdown
Normal file
@@ -0,0 +1,52 @@
|
|||||||
|
---
|
||||||
|
layout: container
|
||||||
|
title: Grids - Advanced use of grids in Recline - Tutorial
|
||||||
|
recline-deps: true
|
||||||
|
root: ../
|
||||||
|
---
|
||||||
|
|
||||||
|
<div class="page-header">
|
||||||
|
<h1>
|
||||||
|
Doing More with Grids
|
||||||
|
<br />
|
||||||
|
<small>This tutorial goes beyond the <a href="tutorial-views.html">basic
|
||||||
|
views tutorial</a> and shows you how to do more with grids</small>
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
### How much can I do with a simple grid view
|
||||||
|
|
||||||
|
### Benefits of SlickGrid
|
||||||
|
What does Recline give you out of the box, what does SlickGrid have built in and how to use it (reference to stuff below).
|
||||||
|
|
||||||
|
### Preparing your page
|
||||||
|
|
||||||
|
See the instructions in the [basic views tutorial](tutorial-views.html).
|
||||||
|
|
||||||
|
### Creating a Dataset
|
||||||
|
|
||||||
|
Just like in the main tutorial, here's some example data We are going to work with:
|
||||||
|
|
||||||
|
{% highlight javascript %}
|
||||||
|
{% include data.js %}
|
||||||
|
var dataset = new recline.Model.Dataset({
|
||||||
|
records: data
|
||||||
|
});
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
<script type="text/javascript">
|
||||||
|
{% include data.js %}
|
||||||
|
var dataset = new recline.Model.Dataset({
|
||||||
|
records: data
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
### Accessing SlickGrid features
|
||||||
|
Show how we can customize SlickGrid grid "normally" - i.e. you can get access to underlying grid and tweak it as you want.
|
||||||
|
|
||||||
|
Suggest we demonstrate using this example: https://github.com/mleibman/SlickGrid/blob/gh-pages/examples/example-plugin-headermenu.html
|
||||||
|
|
||||||
|
Idea here is: we don't want to mimic all that slickgrid can do through recline interface - just let people do it directly themselves ...
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
50
docs/tutorial-timelines.markdown
Normal file
50
docs/tutorial-timelines.markdown
Normal file
@@ -0,0 +1,50 @@
|
|||||||
|
---
|
||||||
|
layout: container
|
||||||
|
title: Timelines - Advanced use of timelines in Recline - Tutorial
|
||||||
|
recline-deps: true
|
||||||
|
root: ../
|
||||||
|
---
|
||||||
|
|
||||||
|
<div class="page-header">
|
||||||
|
<h1>
|
||||||
|
Doing More with Timelines
|
||||||
|
<br />
|
||||||
|
<small>This tutorial goes beyond the <a href="tutorial-views.html">basic
|
||||||
|
views tutorial</a> and shows you how to do more with timelines</small>
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
### Preparing your page
|
||||||
|
|
||||||
|
See the instructions in the [basic views tutorial](tutorial-views.html).
|
||||||
|
|
||||||
|
### Creating a Dataset
|
||||||
|
|
||||||
|
Just like in the main tutorial, here's some example data We are going to work with:
|
||||||
|
|
||||||
|
{% highlight javascript %}
|
||||||
|
{% include data.js %}
|
||||||
|
var dataset = new recline.Model.Dataset({
|
||||||
|
records: data
|
||||||
|
});
|
||||||
|
{% endhighlight %}
|
||||||
|
|
||||||
|
<script type="text/javascript">
|
||||||
|
{% include data.js %}
|
||||||
|
var dataset = new recline.Model.Dataset({
|
||||||
|
records: data
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
### Underlying library and Recline extensions
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### Handling dates
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### Customizing the rendering
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@@ -9,10 +9,14 @@ root: ../
|
|||||||
<h1>
|
<h1>
|
||||||
Views Tutorial
|
Views Tutorial
|
||||||
<br />
|
<br />
|
||||||
<small>This step-by-step tutorial will quickly get you started with Recline basics, including creating a dataset from local data and setting up a grid, graph and map to display it.</small>
|
<small>This step-by-step tutorial will quickly get you started with Recline basics, including creating a dataset from local data and setting up a grid, graph, map and timeline to display it.</small>
|
||||||
</h1>
|
</h1>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
### Views
|
||||||
|
|
||||||
|
Views display Recline datasets in different ways. This page covers the interesting built-in views. For a full list of views including extensions outside of the Recline.js core, see the [list of currently available views]({{page.root}}docs/views.html#dataset-views-currently-available).
|
||||||
|
|
||||||
### Preparing your page
|
### Preparing your page
|
||||||
|
|
||||||
Before writing any code with Recline, you need to do the following preparation steps on your page:
|
Before writing any code with Recline, you need to do the following preparation steps on your page:
|
||||||
|
|||||||
@@ -44,14 +44,13 @@ root: ../
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h3>Views – Grids, Maps, Graphs and More!</h3>
|
<h3>Views – visualize data</h3>
|
||||||
<hr />
|
<hr />
|
||||||
|
|
||||||
<div class="tutorials">
|
<div class="tutorials">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="span4">
|
<div class="span4">
|
||||||
<div class="well">
|
<div class="well">
|
||||||
<h4><a href="tutorial-views.html">Views Quickstart - Grids, Graphs and Maps</a></h4>
|
<h4><a href="tutorial-views.html">Views Quickstart - Grids, Graphs, Maps & Timelines</a></h4>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="span4">
|
<div class="span4">
|
||||||
|
|||||||
@@ -16,6 +16,9 @@ views they have a pointer to a model (or a collection) and have an associated
|
|||||||
DOM-style element (usually this element will be bound into the page at some
|
DOM-style element (usually this element will be bound into the page at some
|
||||||
point).
|
point).
|
||||||
|
|
||||||
|
<div class="alert alert-info">Looking for quickstart tutorial rather than reference documentation? See the <a href="tutorial-views.html">Views Tutorial</a>.</div>
|
||||||
|
|
||||||
|
|
||||||
Views provided by core Recline are crudely divided into two types:
|
Views provided by core Recline are crudely divided into two types:
|
||||||
|
|
||||||
* Dataset Views: a View intended for displaying a recline.Model.Dataset in some
|
* Dataset Views: a View intended for displaying a recline.Model.Dataset in some
|
||||||
@@ -25,6 +28,9 @@ Views provided by core Recline are crudely divided into two types:
|
|||||||
which both provide a way for editing (a part of) a `recline.Model.Query`
|
which both provide a way for editing (a part of) a `recline.Model.Query`
|
||||||
associated to a Dataset.
|
associated to a Dataset.
|
||||||
|
|
||||||
|
## Dataset Views currently available
|
||||||
|
{% include views-list.html %}
|
||||||
|
|
||||||
## Dataset View
|
## Dataset View
|
||||||
|
|
||||||
These views are just Backbone views with a few additional conventions:
|
These views are just Backbone views with a few additional conventions:
|
||||||
|
|||||||
Reference in New Issue
Block a user