Dynamic UI from JSON/XML

[starpeople]

Hi - I have been lurking on these forums to see if the following is possible - creation of dynamic UI elements from JSON at run time.

I require a drag and drop functionality (nodes) in my application. Each node has some UI properties which would be driven using JSON or xml. Since the nodes can be added dynamically giving a URL path, I am looking for population of UI elements (combo boxes, drop down, boolean, text, date picker etc.) dynamically from the remote URL.

The result should also be stored in a JSON or xml format which would then be communicated back to the server once the user hits save option.

Can this be done?

Thank you.

[evant]

Definitely: http://extjs.com/forum/showthread.php?t=52258

[starpeople]

Thanks for your reply.

I was looking at RUN TIME generation of the UI and not statically.

[evant]

That is generating at runtime, the tool is built with Ext!

[Animal]

JSON is just javascript, so of course its possible, just type



new Ext.Window({
title: "Hello",
width: 200,
height: 100
}).show();


Into the Firebug console. That's "dynamic" creation of the UI.

That's just how Ext works. It's "dynamic". It creates the UI from javascript configuration objects.

[starpeople]

I see. So everything is possible from remote side. Thanks.

I am looking for server to return the UI components. I think this should help http://extjs.com/forum/showthread.php?t=18023

I love the demo http://demo.matikom.de/ext/remotecomponent/Ext.ux.Plugin.RemoteComponent.html

Next, how do I save the user entered data from the form which was brought in remotely? Can I get the entire UI along with data in JSON to save remotely and show it back to user? I need to save the entire state into another javascript object in a node property and show this entire thing back when the node is clicked.

I am sorry if I am sounding stupid ! a nOOb.

[Animal]

Yes, many people are now loading Ext configuration objects remotely, and not transporting HTML at all. This is how our app works. The server side generates pure JSON which is added to the UI by our script.

When you say "save"...

You mean submit the form's input field values?

That's just a form submit operation. It submits exactly the same data as a normal HTML submit, so it's what you and your developers are used to receiving.

[starpeople]

animal - thanks for fast response.

I am trying to provide drag and drop functionality. When a node is dragged, UI is determined from remote JSON. When the user has entered the required values in the form, the node is created in a graph. The JSON of the remote form along with the user related information is stored as an object in the node element as it has to be constructed back when the user clicks on the node.

Thats why, I was trying to enquire if the form (items) and the data can be saved.

Thanks much.

[Animal]

What node?

[starpeople]

animal - I am using a different javascript library for show graphs. It has a node object which can store some custom objects. Hope it makes sense.