Is it possible to serialize/deserialize dojo widget objects?

Question

Does anybody know if it is possible to serialize/deserialize dojo widget (dijit) objects to a string or some representation that can be persisted across browser sessions?

My scenario: I have a webpage with various dijits that I would like to be able to take a "snapshot" of and restore in a new browser session so that everything is brought back up in the exact same state. In order to do this I believe I need to serialize/restore the DOM tree of the page as well as the dijit objects. I've been able to serialize the DOM tree and am currently restoring it by replacing the contents of the HTML node of the page. When the page's DOM is restored, none of the dijits work - they are rendered correctly but you can't click any of them. I believe this is because the dojo parser has already run through the DOM when the page first loaded, and replacing the entire HTML DOM element destroys all the dijits in the dijit registry for that page.. which means the dijit classes have to be re-instantiated.

Ideally what I would like to be able to do is when I take a "snapshot", to serialize every dijit object that is contained in the dijit.registry for the page to a file, and when the session is restored, to re-construct those dijit objects and add them back to the dijit registry.

Something like: dijit.registry.forEach(function(widget){ // Save the widget object so that it can be restored in a new browser instance? });

Has anybody tried this or know if it's possible without writing a custom serializer?

Answer 1

I am not sure that I agree with the technique you are using. A better scenario would be to simply serialize the state of the data for each dijit. I know that this would be more work but you are trying to preserve the state of the data, bringing the UI along for the ride seems to be preserving unnecessary information.

That being said, the dojo parser can be called independently of page load. What you are looking for is

dojo.parser.parse();

Running that after you repopulate the innerHTML should re-parse and recreate the dijits See this page for the full reference: http://docs.dojocampus.org/dojo/parser

Answer 2

Any javascript object (including dojo widgets) can be serialised into JSON using dojo.toJson(), e.g:

var deserialisedValue = dojo.toJson(myObject);

Answer 3

My guess is that, we can serialize and deserialize dojo widgets, but the stores (and also the type of store) on which these widgets were built, should also be serialized and deserialized. This may involve usage of eval statements, which is considered evil. Also i think the event handlers, topics to which these widgets subscribed may not be serialized and deserialized.

Answer 4

If the recipient page (where the dijits will be deserialized) has the same number of widgets, the simplest solution would be to wrap everything up inside a dijit/form/Form and call valueJSON = form.get('value') to serialise and form.set('value', valueJSON) to deserialise.

For widgets inside of forms like dgrid and charts, it gets trickier. You would have to take a widget specific approach. Eg: you can easily serialise a dgrid whose values have changed, by calling a grid.save() and then a JSON.stringify (grid.get('store')).

Incase the deserialisation page can have arbitrary number of widgets, I agree with @treaint You could go about getting the type of widget via widget.get('declaredClass') \\Returns TextBox etc.

We had a similar problem, but we solved it quite easily with the form's get/set value! Its quite ingenious, it iterates over all its children, calling child.get('value') on every one of them and mixining it with it's own value.