Creating a UI Designer for Quick Development

Alok Pandey CSS & HTML, HTML5, Technology Snapshot 2 Comments

User interface developers often come across situations that involve creating several web interface dashboards with similar architectures but with different UI controls and backend services serving real-time data. Examples of such Dashboards could be real-time stock quotes, or real-time performance of a factory floor.

A common approach that many follow is to create an HTML5/CSS3 web application using a standard design pattern. Every time we have to create a new Dashboard, we try to use reusable components from UI or backend services and develop new controls and Dashboards. This approach is okay, but raises a thought.

It would be so nice to have a UI Designer where we can drag & drop custom HTML5 controls, set properties at design time, and then our Dashboard is ready (with no actual code development needed).

Alright, the above statement looks quite interesting but raises some obvious questions:

  1. How can we generalize custom HTML5 controls that can be used seamlessly across any Dashboard? Some new Dashboard requirements could be quite different and may not be covered with existing Designer.
  2. What about server-side data? How can we generalize it?
  3. UI layout requirements may be very different, so how we can ensure that our designer will meet all those requirements?

In this blog, I want to discuss an approach and some guidelines for developing such a web UI Designer.

Meta Data Definition

Before we start designing our Web UI framework, let’s talk about Meta Data definition.

Look at the following JSON structure:

  "WidgetId": "Widget",
  "id": "xxx",
  "WidgetFileName": "grid.locale-en.js,jquery.jqGrid.min.js,jquery.sparkline.min.js,WebUIGridEx.js,GridWrapperEx.js",
  "WidgetClassName": "ui.jqgrid.css",
  "WidgetName": "WebUIGridEx",
  "top": 25,
  "left": 25,
  "width": 20,
  "height": 20,
  "props": -[
      "id": "grid1",
      "groupid": 1,
      "GroupName": "Field Selection",
      "parentid": -1,
      "DisplayName": "Select Field:",
      "FieldName": "fields",
      "Value": "",
      "Type": "select",
      "ValidationRule": "",
      "DefaultValueKey": "field_name",
      "DefaultValue": null,
      "DataSource": "server_name;8080;GetFields",
      "Attributes": -[
          "FieldName": "field_name",
          "DefaultValueKey": "field_id",
          "Value": "",
          "PrimaryKey": "1"
      "callback": "change"

If you take a closer look into this structure, you will realize that we are defining contents and behavior of an HTML5 control.

For example: what all fields we want to render, what should be the layout of these fields, and how these fields will be populated (defined under DataSource filed in JSON file).

Build Property Tree

Next step would be to develop a JavaScript plugin that renders this JSON file and creates an in-memory property tree.

Note that this JSON file could be very complex with multiple levels of nesting, so our JS plugin has to be very generic and should consider all possible cases. This requires a lot of thought, process, and design skill.

Anyways, I am providing some plugin prototypes from my Property Tree plugin just to give an idea:

  this.PropertyManager.prototype.ProcessProperty = function (callback, key) {

        var subTree = this.propTree.GetSubTree(key).propTree;

    this.PropertyTree = function (source) {
        this.Source = source;

    this.PropertyTree.prototype.BuildTree = function (saved) {

        var thisobj = this;

        var BuildTree = function (data) {

            Array.prototype.insertChildren = function (parentid, childobj) {

                found = false;
                for (var i = 0; i < this.length; i++) {
				//Recursive call to create tree
                return false;

        //organize property tree and top level attributes of each widget in a global hashtable on widgetId
        $.each(this.Source, function () {
                gPropCache.Add(this.value.WidgetId, this.value);

    this.PropertyTree.prototype.GetProperty = function (key) {

        return (prop);

    this.PropertyTree.prototype.Save = function (callback, key) {

    this.PropertyTree.prototype.FindNode = function (id, key) {

        return Traverse(gPropCache.Get(key).propTree);

    this.PropertyTree.prototype.GetSubTree = function (key) {
        //get property tree for this key
        return gPropCache.Get(key);

    this.PropertyTree.prototype.ProcessTree = function (callback, propTree, parentNode) {

        //function to process each property record
                    function (result) {

                        done = true;
                    inputparam, temp[2]);       //parameter for service call
                delete proxy;
            else {
                done = true;

With Meta Data definition and Property Tree plugin, we can now design our HTML5 controls and use reflection to extract all public properties and interfaces, and present that to the user on our Web UI Designer.

The agenda for this post was just to give an introduction of the thought process and open a forum for suggestions and ideas. I haven’t provided the complete code and implementation, but plan to do that in my next blog (to be posted soon). Additional blogs will also show a real example with a step-by-step process to create a plugin and then integrate in the UI Designer. Stay tuned!

– Alok Pandey,

About the Author

Alok Pandey

Alok Pandey is a Software Consultant with Keyhole Software.

Share this Post

Comments 2

  1. Alok Pandey

    Question was asked by @manohart on Twitter: “How is it different from ExtJS MVC?”

    There are many differences, but here are some important ones:

    1) This framework provides APIs to build your custom control, custom control could be a group of native HTML5 controls or something that you draw using Canvas. Once you host this custom control in the framework, framework will read all public interfaces and open property page for you. Property page also allows injecting JavaScript code to alter default behavior.

    2) You can bind data to any custom control you create. With Ext JS you can only bind data to certain controls. For e.g. you can have a control with only one HTML DIV element and you want to bind that DIV with some data source that pushes real time notification using WebSocket.

    3) You can create a template of controls and save it for later use. That template becomes a new custom control and can be used in other dashboards using drag and drop.

  2. Brad Beiermann

    Hi Alok — I love your idea here, but I’m not sure if you are trying to do something here with shorthand notation as the JSON nesting syntax has some issues as it is posted. There are a couple of statements that have -{ and a -[ being used. Are you sure that JSON coding is correct? I cannot get it to do anything.

    I’m thinking full JSON conventional notation like this:
    var myObject = {
    “first”: “Brad”,
    “last”: “Beiermann”,
    “age”: 39,
    “interests”: [ “Keyhole”, “Jazz”, “Hacking” ],
    “favorites”: {
    “color”: “Blue”,
    “sport”: “Squirt Gunning”,
    “food”: “Tree Bark”
    “skills”: [
    “category”: “JavaScript”,
    “tests”: [
    { “name”: “One”, “score”: 90 },
    { “name”: “Two”, “score”: 96 }
    “category”: “CouchDB”,
    “tests”: [
    { “name”: “One”, “score”: 79 },
    { “name”: “Two”, “score”: 84 }
    “category”: “Node.js”,
    “tests”: [
    { “name”: “One”, “score”: 97 },
    { “name”: “Two”, “score”: 93 }

Leave a Reply