Working with Data: JSON and Forms

Last change 02/03/2013

When creating applications on the web (I am not talking about simple consumer web-pages!) many frameworks try to merge UI (HTML) and Data (Java)... but to be honest: you do not need a huge framework (like GWT) for that. 

Divide and Conquer

Every time I have to create some kind of UI - the first thing that comes is: "Create a Web Based UI so we can use it anywhere...."After a pause it continues with catchwords like "cross-browser", "HTML5", "responsive" and often ends in questions about frameworks like "GWT".

But in the end, everything is just data. And when people talk about "their" data they quickly fall into an area where they only talk about "objects".

On the back-end you have a conversion from a "user table" to a "user object". And with current technology most programmers don't see a problem there. With Object-Relational-Mappers (like MyBatis or Hibernate) or NoSQL Databases, for a programmer there is almost no difference between the data stored in the persistent storage and the use within the program.

Everything is clean and easy to work with.

As soon as it comes to the UI things start getting messy. And this is not because programmers are naturally bad in creating cool designs (taking myself as an example).

The problem is, that creating the UI brings most programmers out of their comfort zone. When working with data, everything is simple, but when a User starts clicking like mad on everything that looks like its clickable, it gets hard to manage.

A simple solution to create quick and dirty UIs - which are still usable and manageable, has been developed thanks to the markup power of HTML with a touch of Ajax to get rid of that ugly server-side rendering business.

The only problem is: how do you get the data from you beautiful backend to the html?

This is answered today: "just use JSON". Because of this almost every object oriented programming language has some kind of JSON library to serialize an object to json - or a json back to an object.

With the use of jQuery (or some other js library that takes that allows cross browser access to ajax) that json object can be put into the context of the html page.

But when it comes to actually manipulating this data things get messy again. Suddenly everyone wants controls that do everything for them... People use grids or huge frameworks to do simple things like update a field in an object instead of binding a field to a html control...

And this is what JsForm is for.

In practice: the JsForm

With the above in mind, the goal of JsForm is pretty easy to make out:

"Create a mapping between HTML tags (forms) and Objects"

A Form-Object-Mapper library that maps form fields to fields in an object - the same way MyBatis allows to map a field in an object to a column in a database.

With a few basic HTML tags and a few lines of javascript code (get an object form the server, pass it back) and the JsForm library, you can quickly create rich internet applications that are easy to design, use almost no code adn easy to understand.

If you want to check it out check the code at

Site created with Corinis CCM