Early on we realized that we need to design the blueorganizer in such a way that users do not have to reinstall the extension each time when we roll out new functionality. We were inspired by the way that pure web applications work – the new functionality can be rolled out literally overnight to everyone. We needed the same capability for many aspects of the blueorganizer. Essentially we needed a hybrid between a classic desktop application and a dynamic web site. We accomplished this by bringing JavaBeans to JavaScript.

We looked around and found JSON. - a common way for serializing JavaScript objects. JSON is nice and quite popular. It is used for example, by del.icio.us API to stream responses directly to JavaScript clients. But we decided that it would not work for us because it is not easily readable. We wanted a solution where we can describe the configuration of the object using XML file, which would be read in at the run time to construct corresponding JavaScript objects.

Here is the simple example of what we had in mind as an input file:

<!--[if !vml]-->

This should construct JavaScript object of type BasicModel and to set a name property of this object to be 'Books'.

To handle the deserialization we create BeanUtils.js with the following main interface:

<!--[if !vml]-->

That is, the function takes as an input the root element, parent object and the urlBase (we will explain this parameter in a bit) and returns the fully instantiated JavaScript object. Here is the simplified version of our implementation:

<!--[if !vml]-->

This is it in a nutshell, but there is one caveat – in order for eval() to work, the object that is being instantiated needs to be part of the JavaScript files already loaded into the browser. To avoid this limitation, we need to add an instruction to load JavaScript code dynamically. This can be accomplished by using JSAN library, which allows loading a script from a known location.

<!--[if !vml]-->

The import directive implies that specified file needs to be loaded, and so the DynamicValue now can be defined in the DynamicScript.js file. Here is the code that does the import:

 

<!--[if !vml]-->

First, we'd like to have an ability to handle arrays. We can do this in several ways. First, we could require that objects pre-declare all array properties in the constructor like this: myArray = [].

So when the new object is instantiated, the property would set. Then when we are add bean property, we can check and see if it is array and handle it appropriately. Another idea is to specify that a property represents arrays in XML file. This can be accomplished with array=”true” property.

Other things that you might want to add include the handling of maps, ability to define variables and referencing them so that you do not need to create more objects than necessary.