LittleCub Forms

Setting up dependencies

First, let us add two required libraries to our web page

• Underscore for utility functions
• Handlebars JS for templating

<script type="text/javascript" src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars.runtime-v1.2.0.js"></script>
<script type="text/javascript" src="http://underscorejs.org/underscore-min.js"></script>

Selecting theme

After the two dependency libraries, add one of the following LittleCub theme libraries depending on which UI framework we decide to choose in addition to the required libraries and stylesheets for our selected framework.

<!-- Basic Theme with no fancy stuff -->
<script src="http://drq.github.io/littlecub/releases/trunk/littlecub.min.js" type="text/javascript"></script>

<!-- Twitter Bootstrap 3.x -->
<script src="http://drq.github.io/littlecub/releases/trunk/littlecub-bootstrap.min.js" type="text/javascript"></script>

<!-- Twitter Bootstrap 2.x -->
<script src="http://drq.github.io/littlecub/releases/trunk/littlecub-bootstrap2.min.js" type="text/javascript"></script>

<!-- jQuery Mobile Foundation -->
<script src="http://drq.github.io/littlecub/releases/trunk/littlecub-jquerymobile.min.js" type="text/javascript"></script>

<!-- jQuery UI -->
<script src="http://drq.github.io/littlecub/releases/trunk/littlecub-jqueryui.min.js" type="text/javascript"></script>

<!-- Zurb Foundation -->
<script src="http://drq.github.io/littlecub/releases/trunk/littlecub-foundation.min.js" type="text/javascript"></script>

Using Native API

In general, LittleCub takes a combination of a JSON data document, a JSON Schema document and a configuration JSON document to produce an HTML form within the container DOM element that your provide.

The JSON data document provides the initial values of the generated form controls, the JSON schema document describes the underlying data format while the configuration JSON document contains all form control specific settings such as label, help text, size of text field etc.

Let us take a look at an example that renders an array control with a dynamic list of text controls.

var arrayControl1 = LittleCub(["Sample1","S",""], {
    "type" : "array",
    "items" : {
        "type" : "text",
        "label": "Sample",
        "placeholder" : "Enter some text"
    }
}, {
    "type" : "array",
    "items" : {
        "type" : "string",
        "minLength" : 4
    }
},document.getElementById('array-control-1'));

// Validate the new array control and its children
arrayControl1.validate(true);

Using jQuery API

LittleCub also provides API that works with jQuery.

    
// Renders the same array control with a dynamic list of text controls using jQuery.
$('#array-control-2').lc(["Sample1","S",""], {
    "type" : "array",
    "items" : {
        "type" : "text",
        "label": "Sample",
        "placeholder" : "Enter some text"
    }
}, {
    "type" : "array",
    "items" : {
        "type" : "string",
        "minLength" : 4
    }
}).validate(true);