2

I've recently had cause to back off from a couple of unrelated frameworks and start from scratch. In the one case, Javascript driven form UI and in the other the same for Java Swing. I realized I can make a simple JSON object defining my UI elements from fields to event bindings.

Before I go too terribly far down the rabbit hole, I started wondering: is there an emerging or existing standard anyone has seen for this sort of thing?

Below is one flavor of what I was kicking around. I'm playing with using a JSON object to define a Swing UI layout as well as (separately) web facing JavaScript generated web forms.

The two variable stem from my build up which was initially a simple grid control where I needed fields before I thought it would be good to have a form too. It could be folded into one JSON structure, of course.

var app = {
        forms: form1,
        bindings: [],
        layout:[{
            width: 400,
            height: 300,
            bgcolor: '#fefefe',
            color: 'black'
        }]
    }


    var form1 = {
        "formfield1": {
            itype: "text",
            tag: "input",
            iclass: "frminput",
            defaultval: "text input",
            label: "Text Value 1",
            validation: '/[a-z][A-Z][0-9]/',
            error: "No special characters allowed - only numbers or letters for this input",
            bindings: [{
                ievent: 'click',
                fx: function(){
                    validateTest(this);
                }
            },{
                ievent: 'blur',
                fx: function(){
                    blurTest(this);
                }
            }]
        },

        "formfield2": {
            itype: "select",
            tag: "select",
            iclass: "frminput",
            defaultval: "apples",
            label: "Test Select",
            options: [["apples","Apples"], ["oranges","Oranges"], ["peaches","Peaches"]]
        },

        "formfield3": {
            itype: "date",
            tag: "input",
            iclass: "date",
            label: "Test Date",
            defaultval: new Date()
        },

        "formfield4": {
            itype: "text",
            tag: "input",
            iclass: "frminput",
            label: "Text field 2",
            defaultval: "text input other"
        },

        "objectproperty": {
            itype: "button",
            tag: "button",
            iclass: "btn btn-small",
            label: "test magnitude button",
            defaultval: "",
            bindings: [{
                ievent: 'click',
                fx: function(){
                    buttonAction(this);
                }
            }]
        }
    };

What I would most like to find is that someone else has put more thought into this already.

Second best result of this post would be some suggestions for what would be a best practice.

The goal is to have a fairly agnostic implementation that is portable to other platforms in the future or provides easy integration of disparate systems.

Update: Good discussion in this question: Standard JSON API response format? regarding emerging and suggested standards for various JSON based objects and implementations. Most of this focuses on AJAX usage however. Still a good cross-reference from this question.

Community
  • 1
  • 1
J E Carter II
  • 1,436
  • 1
  • 22
  • 39
  • Are you asking best practice to formatting JSON – meda Apr 18 '14 at 18:16
  • Yes, but specific to form and field relationships - or expanded to application ui definition. Looking for any emerging specification surrounding this specific niche. – J E Carter II Apr 18 '14 at 18:18
  • @Hans Z - why did you remove the javascript tag? The notation above is in Javascript and the goal is an object specification that is supported in Javascript and can be used with Java swing as well. – J E Carter II Apr 21 '14 at 17:05
  • You're not using javascript. You're using JSON. You can use json without using javascript. – Hans Z Apr 21 '14 at 17:10
  • True enough, but Javascript is a stated target implementation for this question. Other people using JSON with Javascript may have crossed this bridge before. I'm not strictly using java or swing either, but they are desired target implementations. – J E Carter II Apr 21 '14 at 17:11

2 Answers2

1

Angular Formly is one such effort.

0

I am continuing to research this question, but found at least one answer.

GNome suggests Clutterscript as a solution using JSON to define the user interface. https://developer.gnome.org/clutter-cookbook/stable/script-ui.html

I'll add any similar things I find to this answer. The clutterscript solution is not optimal as it has some framework specific items and markup in the JSON notation. My view is that the JSON notation should be somewhat abstract from the implementer. The implementer should decide what to do with the UI descriptions contained in the JSON object.

J E Carter II
  • 1,436
  • 1
  • 22
  • 39