From a6efbf9da3a0e8d689e9239fb638edcbf7ec0645 Mon Sep 17 00:00:00 2001 From: Matt Fullerton Date: Mon, 3 Nov 2014 10:34:24 +0100 Subject: [PATCH] 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) --- _includes/views-list.html | 7 +++++ docs/tutorial-grids.markdown | 52 ++++++++++++++++++++++++++++++++ docs/tutorial-timelines.markdown | 50 ++++++++++++++++++++++++++++++ docs/tutorial-views.markdown | 6 +++- docs/tutorials.html | 5 ++- docs/views.markdown | 6 ++++ 6 files changed, 122 insertions(+), 4 deletions(-) create mode 100644 _includes/views-list.html create mode 100644 docs/tutorial-grids.markdown create mode 100644 docs/tutorial-timelines.markdown diff --git a/_includes/views-list.html b/_includes/views-list.html new file mode 100644 index 00000000..36bb87ca --- /dev/null +++ b/_includes/views-list.html @@ -0,0 +1,7 @@ +* Grid (simple) +* Grid (SlickGrid) +* Map +* Choropleth Map +* Graph +* Timeline +* Multiview (combines views) \ No newline at end of file diff --git a/docs/tutorial-grids.markdown b/docs/tutorial-grids.markdown new file mode 100644 index 00000000..20632f5f --- /dev/null +++ b/docs/tutorial-grids.markdown @@ -0,0 +1,52 @@ +--- +layout: container +title: Grids - Advanced use of grids in Recline - Tutorial +recline-deps: true +root: ../ +--- + +
+

+ Doing More with Grids +
+ This tutorial goes beyond the basic + views tutorial and shows you how to do more with grids +

+
+ +### 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 %} + + + +### 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 ... + + + diff --git a/docs/tutorial-timelines.markdown b/docs/tutorial-timelines.markdown new file mode 100644 index 00000000..d6222e6c --- /dev/null +++ b/docs/tutorial-timelines.markdown @@ -0,0 +1,50 @@ +--- +layout: container +title: Timelines - Advanced use of timelines in Recline - Tutorial +recline-deps: true +root: ../ +--- + +
+

+ Doing More with Timelines +
+ This tutorial goes beyond the basic + views tutorial and shows you how to do more with timelines +

+
+ +### 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 %} + + + +### Underlying library and Recline extensions + + + +### Handling dates + + + +### Customizing the rendering + + + diff --git a/docs/tutorial-views.markdown b/docs/tutorial-views.markdown index 1fe33e86..2357bc17 100644 --- a/docs/tutorial-views.markdown +++ b/docs/tutorial-views.markdown @@ -9,10 +9,14 @@ root: ../

Views Tutorial
- 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. + 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.

+### 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 Before writing any code with Recline, you need to do the following preparation steps on your page: diff --git a/docs/tutorials.html b/docs/tutorials.html index cdd8f846..8ed90f7f 100644 --- a/docs/tutorials.html +++ b/docs/tutorials.html @@ -44,14 +44,13 @@ root: ../ -

Views – Grids, Maps, Graphs and More!

+

Views – visualize data

-
-

Views Quickstart - Grids, Graphs and Maps

+

Views Quickstart - Grids, Graphs, Maps & Timelines

diff --git a/docs/views.markdown b/docs/views.markdown index 4b41fc92..762de79f 100644 --- a/docs/views.markdown +++ b/docs/views.markdown @@ -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 point). +
Looking for quickstart tutorial rather than reference documentation? See the Views Tutorial.
+ + Views provided by core Recline are crudely divided into two types: * 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` associated to a Dataset. +## Dataset Views currently available +{% include views-list.html %} + ## Dataset View These views are just Backbone views with a few additional conventions: