mardi 10 décembre 2019

How to build flexible User Interface by json\xml response from backend?

I would like to build user interface either by json or by xml a response from backend. I've taken as example a json. Backend sends the json as a response, so take a look at the json

{
    name: "top",
    id : 1,

    buttons: {
        2:{
            name: "create",
            id: 2,
            action: create,
            img: /imageCreate.png
        }
    },

    tabs:{
        name: "tab1",
        id:3,

        buttons: {
            4:{
                name: "edit",
                id: 4,
                action: edit,
                img: /imageEdit.png
            },
            5: {
                name: "modify",
                id: 5,
                action: modify,
                img: /imageModify.png
            }
        }
    },

    control: {
        id: 6,
        name "testControl",

        tabs :{
            name: "tabForControl",
            id: "10",
            buttons:{
                7:{
                    name: "editCntr",
                    id: 7,
                    action: editForControl,
                    img: /imageEditForControl.png
                },
            }
        },

        data:{
            8: {name: "objOne_8",
                attributes: [
                    {id: 11, name: "attrOne", value: valueOne_8},
                    {id: 12, name: "attrTwo", value: valueTwo_8}
                    .
                    .
                    etc
                ]
            },
            9: {name: "objTwo_9",
                attributes: [
                    {id: 11 ,name: "attrOne", value: valueOne_9},
                    {id: 12, name: "attrTWo", value: valueTwo_9}
                    .
                    .
                    etc
                ]
            }
        }

    }

}

I've painted an image that i want to get according above json, please check it out:

Final UI based on json above

The json may have various structure, but of cause ui side knows what is "control", "tabs", "buttons" etc in the JSON. Sequence of properties(keys) is important. I may want to place tabs below controls.

I would like to prepare components: control.vue, tab.vue, button.vue (Components of vue.js or Components of angular) and then to call them to build user Interface based on structure and properties of the JSON.

I want it to look like construction toys Lego. I would take necessary components and build final interface of my application. So, I want backend to build a structure of my user interface.

Flexible is most important purpose for me. Also, Of cause, i want it to be expanded easily, i mean, i could add new components easily

I would like to know paradigms or design-patterns or articles for it. I need whatever information.

p.s My backend is java, js framework is vue.js

Aucun commentaire:

Enregistrer un commentaire