7

Embed Daybed forms

 2 years ago
source link: https://blog.mathieu-leplatre.info/embed-daybed-forms.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

Embed Daybed forms

Embed Daybed forms

Tue 23 July 2013

A brief article to introduce backbone-daybed, a few helpers to render Web forms for Daybed models.

Antikes Sofa Diwan furniert Laden daybed

Daybed, lay down and REST

Daybed is a data validation and storage API, written in Python, using Pyramid and the fantastic Cornice addon.

It's a minimalist Web API where you :

  • define models (schemas)
  • validate data and store data
  • retrieve and update records

Key features are:

  • CORS built-in support
  • pluggable datastore engines (default is CouchDB)
  • Geometry fields (maps!)
  • Spore
  • Access Control (under development)

It's a side-project we've been hacking on for a while, and we envision many applications ! One of them is, since the beginning, a Web forms service !

Models are yours

In order to create your own models, you can either use the crude GUI of daybed-maps or post a JSON manually on the Daybed instance we run for you.

In both cases you will reference your model definition using the ìd you chose.

Below, we define demo-poll-conf using cUrl in the command-line.

The model will be a stupid poll to ask how many conferences you attended in the past year.

# in a terminal...
definition='{
"title": "Conferences Poll",
"description": "How many conferences attended last year ?",
"fields": [
  {
    "name": "total",
    "type": "int",
    "description": "How many times ?"
  }, {
    "name": "category",
    "type": "enum",
    "choices": ["Web", "Strategy", "Technology"],
    "description": "Mostly in..."
  }
]}'

curl -XPUT http://daybed.lolnet.org/definitions/demo-poll-conf -d "${definition}"

backbone-daybed, simple and stupid

Backbone.js is not the next big thing :) #ooold, it's sooo 2011 !

But frankly, it has remained simple, very easy to learn and yet quite efficient! That's why I chose it to demo the power of having storage-as-a-service with Daybed. Plus, backbone-forms provided the right level of abstraction I needed !

For example, here we embed a form in the page for the model we just created, and start polling the audience !

The few lines of Javascript below render the form and reacts on submission !

<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.2/underscore-min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.0/mustache.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/backbone-forms/0.12.0/backbone-forms.min.js"></script>
<script type="text/javascript" src="https://rawgithub.com/spiral-project/backbone-daybed/1e410a85/backbone-daybed.js"></script>
<script type="text/javascript">

    var form = Daybed.renderForm('#demo-form-container', {id: 'demo-poll-conf'});

    form.on('created', function (record) {
        // plot chart !
    })
</script>

The helper downloads the definition JSON, renders fields within an HTML form with backbone-forms. And in this example specifically, on submission, we fetch all the records, compute average values by category in order to plot some naive chart using Chart.js.

You can also have a look at the very few lines of the backbone-daybed demo, it's dead easy ! It features a CRUD application : Create, edit and delete records for the model of your choice ! http://spiral-project.github.io/backbone-daybed/#demo-poll-conf (See URL hash)

Shortly

  • Daybed is a generic backend where you define models, validate and post data ;
  • There are already various working applications built with this storage-as-a-service ;
  • Most Javascript frameworks will play well natively with Daybed REST API ;
  • backbone-daybed is just a helper to render Daybed models as forms, .... and a little bit more !

So far, Daybed data is not protected (like a wiki), but access control is currently being implemented :)

Stay tuned !

#daybed, #javascript, #backbone - Posted in the Dev category

© Copyright 2020 by Mathieu Leplatre. mnmlist Theme

Content licensed under the Creative Commons attribution-noncommercial-sharealike License.


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK