JSON Schema is a specification for a JSON-based format for defining the structure of JSON data. JSON Schema provides a contract for what JSON data is required for a given application and how it can be modified, much like what XML Schema provides for XML. JSON Schema is intended to provide validation, documentation, and interaction control of JSON data.

There are numerous similarities between inputEx and JSON Schema. If you are not convinced, here is an example of a JSON schema:

{"description":"A person",
"type":"object",

"properties": {
"name": {"type":"string"},
"born" : {

"type":["integer","string"],
"minimum":1900,
"maximum":2010,


"format":"date-time",
"optional":true
},
"gender" : {"type":"string",
"options":[

{"value:"male","label":"Guy"},

{"value":"female","label":"Gal"}]},
"address" : {"type":"object",
"properties":{

"street":{"type":"string"},
"city":{"type":"string"},
"state":{"type":"string"}
}
}


}
}

inputEx users should be comfortable writing a form for this schema :

{

type: “group”,

fields: [

{type: "string", inputParams: {name: "name", required: true}},

{type: "date", inputParams: {name: "born"} },

{type: "select", inputParams: {name: "gender", selectOptions:["Guy", "Gal"], selectValues: ["male", "female"]}},

{type: “group”, inputParams: {

name:”address”,

fields: [

{type: "string", inputParams: {name: "street"}},

{type: "string", inputParams: {name: "city"}},

{type: "string", inputParams: {name: "state"}}

]    }  }  ] }

The main difference is that the JSON schema ontology is data-centric, wheras the inputEx JSON schema ontology is form-centric, but as you can see, they are very similar.

Another similarity is the self-descriptive ability of JSON Schema and inputEx. JSON Schema has its own schema, a schema for itself. inputEx has the same kind of self reference: the TypeField contains forms to describe the options of each field (you can see this at the end of TypeField.js). This self-referencing property has very nice implications: it gives the opportunity to create a form to build forms, and that’s exactly what the inputEx Builder is: a form which outputs inputEx JSON.

inputEx implementation of JSON Schema

In version 0.2.0, I added a (very) light implementation of a JSON Schema to inputEx JSON. Hopefully, Brad Clements saw the advantages of having automatic form generation from JSON schemas and took the prototype one (big) step forward by implementing JSON referencing. We are now able to create atomic schemas and combine them in nested schemas.

At the current state, inputEx doesn’t implement all the validation that can be described in JSON Schema, but we are on the way. On the other hand, inputEx has many options concerning the form interface, that are not necessary in JSON Schema, which focuses on data validation. Brad suggested an extension to JSON Schema by adding an “_inputex” property to type definition. It allows to set the additionnal interface options for inputEx within the schema.

Both of these features are demonstrated in this example which is built from this schema (JSON schema with inputEx extension).

The last feature that we’re missing is the extending capability (“extends”:{“$ref”:”person”}), but the implementation should be pretty straightforward.

Round-trip: defining JSON-Schema through forms, and Persevere backend

Up to now, we focused on converting JSON schemas to inputEx forms, but the other way is perfectly conceivable ! Leveraging the inputEx Builder, we would have a nice interface to build JSON schemas and associated forms at the same time. Combined with the Persevere framework backend, we could provide a very nice administration interface, that let you edit models through the inputEx Builder, then edit the data through the generated inputEx forms. You could argue that some fields should not be visible in forms, but if you take a closer look at inputEx fields, two of them are perfect for this case: the HiddenField, which is not visible at all, or the UneditableField which lets you use a custom rendering method for an uneditable field.

I think this might end up in a more effective interface than the current Persevere database explorer because it creates the form interfaces at the same time, and make them reusable within your application.

A last idea, we could provide json-schemas for defining method parameters. inputEx could then automatically generate forms to call these methods (through JSON-RPC or locally).

Of course, if you’re interested in the following developments, we urge you to contact us through the forum.

Have fun !

I just finished the first public version of inputEx. I had this project in my bag since summer 2007.

Visit the website at http://javascript.neyric.com/inputex . Here is a short introduction from the documentation :

Introduction

inputEx is a javascript library to build fields and forms.
It can also be considered as an interface framework, since it provides a good structure to create you own fields.

It is built on top of the YUI library, and we tried to be as close as possible to the YUI philosophy.

It is of course fully skinable using CSS and currently supports Firefox 1.5+, Safari 2.0+, IE 7.0 and Opera 9+.

A unique field library

With so many form libraries out there, why would we create another one ?

• HTML fields/forms are very limited
• no existing good input library for YUI (let me know if I’m wrong !), except YUI widgets
• it’s not all about validation !

Here are the features we implemented that makes inputEx unique :

• json configuration for each field
• complex data structures (list/objects/tree/list of urls/objects of objects etc…)
• composition between the fields (for “meta”-fields such as InPlaceEdit,List,Tree,Pair,…)
• javascript object mapping for greater interactivity
• a common “updated” event to handle different browsers and different field interactions

No HTML ?

InputEx uses no html (it is the opposite of unobtrusive librairies): all the fields and forms are configured using json, then rendered by manipulating the DOM.
It is therefore a library to create javascript web applications, not webpages.

This approach has a great advantage: adding/modifying a field is made in one place only. Combined with
the json configuration that can be stored server-side, it makes customization of your web application very easy.

Help Us

It is very easy to help us improving the library :

• Extend the library: send your custom fields to the wiki, it might help others !
• Give your feedback on the forum
• Report any bug

Other resources

If you didn’t find what you were looking for, please visit these websites :

• Examples – many examples for each field
• Forum – discussions about inputEx
• Blog – inputEx news
• Wiki – community ressources
• Contact the author: inputex@neyric.com

Here are the changes:

• new Layer.getWiring function to save the state of the wiring. It
  can be customized by overriding Container.getConfig
• jsBox updated to use the Layer.getWiring function
• no default width for containers so they can auto-adjust to the
  content
• Layer.addContainer and Layer.addWire now returns the created
  instance
• Added the method Container.redrawAllWires and
  Terminal.redrawAllWires
• Added Layer.removeAllContainers
• adds a “body” div to the container
• CSS updates on Containers and Layers
• adds a focus CSS class on the last mousedown-ed container in the
  layer
• bugfixes (events “addWire” and “removeWire” added to WireIt.Layer,
  offset in the connections)

I just released the new 0.2.0 version. You can download it here.

Here are the main changes:

• 2 new classes were added: WireIt.Container and WireIt.Layer
  Every project you might start using WireIt needs a widget that could contain Terminals, and that could be moved around. This is the goal of WireIt.Container.
  The Layer class creates a DIV element that can contain multiple containers and wires. It will be useful to save the state of the containers and connections between the terminals. (It also provide an extensible frame with scrollbars.)
• Custom events added to create richer interactions when editing the wires.
• A minified version built with YUI Compressor.
  This javascript minifier is almost perfect: I just wish you could have multiple input files…
  The result file is just below 20k.
• jsBox: This is a sample application using WireIt.
  Create boxes containing javascript functions, connect them together, and run your program !
• Many new configuration options, configurable CSS class names, and some new methods in the Wire and Terminals classes.

Don’t forget to give your feedback in the forum !

Have fun !

WireIt is a javascript library that allows you to create cool wires like Yahoo Pipes. It is built upon:

• the CANVAS tag to render the wires
• the YUI Library v2.3.1
• excanvas for IE support

It comes with some examples (see the home page) and an application example, the Planar Game.

Why would you make such a library ? After playing a lot with Yahoo! Pipes, I realized how powerful it was to create mashups. I was already used to visual programming Languages like PureData or Mac OS Automator, but they’re definitly not able to do mashups.

However, Yahoo Pipes has this big inconvenient to run your pipes on their web servers. It has at least two disadvantages. First, it means we will always be restricted to the modules and types they implemented. You could always create a restful webservice and wrap it into a pipe, but the execution time blows up. Second disadvantage, you have to be careful with your data privacy. Indeed, I would like to create some Mashups that could mix with my private data in a more secure way.

That’s how I started to develop a Yahoo pipes-like application, and how I ran into this stumble block: “How the hell did they do those pipes ?”.

Waiting for your feedback,
Eric

Since version 0.4.1, it provides a way to store data on the client side trough dojo.storage.

It can use multiple ways to store those data, especially flash (which is present on 97% of the computers ).

Check out the Moxie demo application that combines the dojo rich text editor and the dojo.storage method.

1. Use good code conventions
2. Check your code: JSLint (javascript tools bundle for textmate make it automatic)
3. Minification of your code: JSMin
4. GZIP the code, don’t obfuscate: Minification v. Obfuscation

You will effectively reduce errors and debugging time by following those advices.

var singleton = function() {

  /* Private variables */

  var privateVariable;

  /* Private methods */

  function privateFunction(x) {
    // do something here...
  }

  return {

    /* Public variables */

    publicVariable = 15,

    /* Public methods */

    getVariable: function() {
      return privateVariable;
    },

    setVariable: function() {
      privateVariable = 18;
      privateFunction();
    }
  };

}();

The magic of this pattern lies in the instanciation of the singleton:

the main function is called directly due to the ‘()’ at the end.

Scriptaculous offers a nice autocompletion component that integrates quite well with Ruby on Rails.Here is a link that shows different ways to plug it in your rails application:

http://www.slash7.com/articles/2005/08/13/ajaxariffic-au…

I found YUI very helpful for my applications. It’s not the most complete framework that exists (look at BackBase for example) but it is very promising. You can make new Components easily ( with YAHOO.util.Dom, YAHOO.util.Event ), ajaxified behaviour (with YAHOO.util.Connect.asyncRequest ) etc…
I recommand two web sites :

• YUI Home Page (examples, good documentation and downloads)
  
• Jack Slocum’s Blog (Using the YUI library – Beyond the Examples)

For WordPress users, you can even use YUI to for the comments system.