The
online web demo of the visual designer is very nice. However, there’s no “Save” button… ? (I don’t use Eclipse and therefore can’t use the Eclipse version of Visual Designer).
This got me thinking. Anyone who has done Mac or iPhone programming appreciates how Apple has separated the tools for programming (Xcode) vs. visual design (Interface Builder).
The two are linked via “XIB” files which are XML descriptions of the UI layout. These files are what Interface Builder edits and what your program loads at runtime, where they get converted into the pre-populated and configured UI object tree. Each object has an identifier with which it can be located/identified at runtime.
This separation of UI layout information (XML files) vs. programmatic information (program source files) is important for a number of reasons.
Has any thought been put into taking this approach with Visual Designer? That is, being able to save the layout state as an XML file, which can be loaded in at runtime.
I found
this thread where Joonas describes how he has already implemented the XML (de)serialization part of this… (and added my two cents). So it seems like with the combination of Visual Designer and Joonas’ XML encoder/decoder, this problem is mostly solved already.
The reason there is no “Save” button in the demo is because it is just that, a demo. It has not been intended to be used as a tool as such, it is only there for you to try out the UI with. The part that generates the code is a different part entirely and currently it is dependent on eclipse so we cannot currently add it to the demo either.
The Visual Designer uses a standalone model which represents the component you are editing in the UI. This model can basically be turned into whatever format you prefer, in eclipse the model is turned into source code by eclipse dependent tools, but I’ve also seen a project where the same thing has been done outside of eclipse. So the architecture is there and I do not think it would be a huge endeavor to instead of source code create the model from XML files.
This has been discussed shortly, and opinions are very differing, some would love the idea, other couldn’t stand it, as you probably noticed in Joonas thread. Currently there are no plans to include such a feature, at least in the upcoming releases, instead we are now focusing on stabilizing the codebase and improving the usability.
Currently, the system is reasonably modular, consisting of:
the Visual Designer UI
a model (used for communication between the UI and other modules)
generic parser and code generation base classes using the model
an Eclipse specific Java parsing and generation implementation on top of the generic parts
a prototype of a text-only Java parsing and generation implementation on top of the generic parts (note: currently does not preserve user-written code outside the automatically generated methods)
the Eclipse plugin
Most likely you would use the model in such a XML UI description generation and parsing rather than the code generation and parsing framework, but you might want to use the code generation as a starting point on how to generate and configure Vaadin components at runtime based on the model.
The model is effectively a hierarchy of component representations, and can be represented as maps of strings and other component models.
Feel free to implement such an add-on/tool if you have use for it. The source code for the UI, model and text-only parser and generator (all independent of Eclipse) are available at
http://dev.vaadin.com/svn/wysiwyg/eclipse-plugin/VisualDesigner/ , and its parent directory contains the Eclipse plugin. If you are familiar with XML libraries and satisfied with a more or less one-to-one mapping between the model and the XML syntax, this should be very easy to do.
If you are able to map between the model and your representation, you could perhaps even e.g. convert code generated by the Eclipse plugin to an XML representation and back via the model (auto-generated parts only).