Latest Code - Master

The tutorials on this website will usually be based on the latest (master) codebase. It should also be very stable.

Most Recent Official Release – v0.5

After downloading recline you'll want to use it in your project -- see below or tutorials for details.

Changelog

View Changelog on Github

Dependencies

Recline has dependencies on some third-party libraries. Specifically, recline.dataset.js depends on:

Those backends which utilize jquery’s ajax method depend on jQuery:

All the views require, in addition to those needed for recline.dataset.js:

Individual views have additional dependencies such as:

If you grab the full zipball for Recline this will include all of the relevant dependencies in the vendor directory and you can also find them at in the github repo here.

Example

Here is an example of the page setup for an app using every Recline component:

  <!-- bootstrap -->
  <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
  <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
  <link rel="stylesheet" href="vendor/bootstrap/3.2.0/css/bootstrap.css" />

  <link rel="stylesheet" href="vendor/leaflet/0.7.3/leaflet.css">
  <!--[if lte IE 8]>
  <link rel="stylesheet" href="vendor/leaflet/0.7.3/leaflet.ie.css" />
  <![endif]-->
  <link rel="stylesheet" href="vendor/leaflet.markercluster/MarkerCluster.css">
  <link rel="stylesheet" href="vendor/leaflet.markercluster/MarkerCluster.Default.css">
  <link rel="stylesheet" href="vendor/slickgrid/2.2/slick.grid.css">
  <link rel="stylesheet" href="vendor/timeline/css/timeline.css">

  <!-- Recline CSS components -->
  <link rel="stylesheet" href="css/grid.css">
  <link rel="stylesheet" href="css/slickgrid.css">
  <link rel="stylesheet" href="css/flot.css">
  <link rel="stylesheet" href="css/map.css">
  <link rel="stylesheet" href="css/multiview.css">
  <link rel="stylesheet" href="css/timeline.css">
  <!-- /Recline CSS components -->

  <!-- 3rd party JS libraries -->
  <!--script type="text/javascript" src="vendor/jquery/1.7.1/jquery.js"></script-->
  <script src="vendor/slickgrid/2.2/jquery-1.7.min.js"></script>
  <script type="text/javascript" src="vendor/underscore/1.4.4/underscore.js"></script>
  <script type="text/javascript" src="vendor/backbone/1.0.0/backbone.js"></script>
  <script type="text/javascript" src="vendor/mustache/0.5.0-dev/mustache.js"></script>
  <script type="text/javascript" src="vendor/bootstrap/3.2.0/js/bootstrap.js"></script>
  <!--[if lte IE 8]>
  <script language="javascript" type="text/javascript" src="vendor/flot/excanvas.min.js"></script>
  <![endif]-->
  <script type="text/javascript" src="vendor/flot/jquery.flot.js"></script>
  <script type="text/javascript" src="vendor/flot/jquery.flot.time.js"></script>
  <script type="text/javascript" src="vendor/leaflet/0.7.3/leaflet.js"></script>
  <script type="text/javascript" src="vendor/leaflet.markercluster/leaflet.markercluster.js"></script>
  <script type="text/javascript" src="vendor/slickgrid/2.2/jquery-ui-1.8.16.custom.min.js"></script>
  <script src="vendor/slickgrid/2.2/jquery.event.drag-2.2.js"></script>
  <script src="vendor/slickgrid/2.2/jquery.event.drop-2.2.js"></script>

  <script type="text/javascript" src="vendor/slickgrid/2.2/jquery.event.drag-2.2.js"></script>
  <script type="text/javascript" src="vendor/slickgrid/2.2/slick.core.js"></script>
  <script type="text/javascript" src="vendor/slickgrid/2.2/slick.formatters.js"></script>
  <script type="text/javascript" src="vendor/slickgrid/2.2/slick.editors.js"></script>
  <script type="text/javascript" src="vendor/slickgrid/2.2/slick.grid.js"></script>

  <script type="text/javascript" src="vendor/slickgrid/2.2/plugins/slick.rowselectionmodel.js"></script>
  <script type="text/javascript" src="vendor/slickgrid/2.2/plugins/slick.rowmovemanager.js"></script>


  <script type="text/javascript" src="vendor/moment/2.0.0/moment.js"></script>
  <script type="text/javascript" src="vendor/timeline/js/timeline.js"></script>
  <!--[if lte IE 7]>
  <script language="javascript" type="text/javascript" src="vendor/json/json2.js"></script>
  <![endif]-->

  <!--
    ## Just use the all in one library version rather than individual files

  <script type="text/javascript" src="dist/recline.js"></script>

  -->

  <!-- model and backends -->
  <script type="text/javascript" src="src/ecma-fixes.js"></script>
  <script type="text/javascript" src="src/model.js"></script>
  <script type="text/javascript" src="src/backend.memory.js"></script>
  <script type="text/javascript" src="src/backend.dataproxy.js"></script>
  <script type="text/javascript" src="http://okfnlabs.org/recline.backend.gdocs/backend.gdocs.js"></script>
  <script type="text/javascript" src="http://okfnlabs.org/csv.js/csv.js"></script>

  <!-- views -->
  <script type="text/javascript" src="src/view.grid.js"></script>
  <script type="text/javascript" src="src/view.slickgrid.js"></script>
  <script type="text/javascript" src="src/view.flot.js"></script>
  <script type="text/javascript" src="src/view.graph.js"></script>
  <script type="text/javascript" src="src/view.map.js"></script>
  <script type="text/javascript" src="src/view.timeline.js"></script>
  <script type="text/javascript" src="src/widget.pager.js"></script>
  <script type="text/javascript" src="src/widget.queryeditor.js"></script>
  <script type="text/javascript" src="src/widget.filtereditor.js"></script>
  <script type="text/javascript" src="src/widget.valuefilter.js"></script>
  <script type="text/javascript" src="src/widget.facetviewer.js"></script>
  <script type="text/javascript" src="src/widget.fields.js"></script>
  <script type="text/javascript" src="src/view.multiview.js"></script>