I see this in the Book of Vaadin:
“XML Is Not Designed for Programming”
But in my opinion using the XML just to define layout and fundamental attributes of components is not a bad idea.
I’m in the process of creating yet another XML layout definition for Vaadin. I don’t know if there is something similar out there right now (gwt UIBinder?) or if anybody has the same thought as I do.
I want to introduce MVP concept in our app so that the UI is very humble and dump. On top of that I think coding the layout in java is not particularly fun thing to do. I didn’t want to do so in Swing, Windows Form and definitely not in Vaadin.
So I am cooking a way to define layout of an app in XML then generate the corresponding java code based on that XML layout. I looked at the Visual Editor comes with Vaadin plugin but it seems to have a lot of limitation at the moment.
I will update with some XML fragment and generated java code, along with how I will use the generated code later.
How does this idea sound to you? Nuts ? Waste of time?
The reason I’m not very much into UIBinder approach is that it doesn’t generate static code. I don’t know how GWT/Vaadin UIBinder tie the XML layout into java code. Doing so seems scary to me. I like the idea of writing layout in XML, have the code generated and be done with it. There should not be any XML reference to your java code whatsoever.
Having to make a living in both Java and .NET world, I really love the idea of code generation/code behind Visual Studio provides. I think generating static code is the best approach any visual editor could provide. With that, I’m very happy to see Vaadin Visual Editor is heading to the right direction. It’s just having so many limitations now. I would love to reconsider with a better editor in the future.
I attached a sample XML layout here along with the generated corresponding java code.
I’m finding ways to make the code generation part of our Maven build process, possibly a plugin. That way, those XMLs can be processed during the compile phase.
Cheers and I’m grateful to have Vaadin in my toolset! 11465.xml (2.4 KB) 11466.java (9.31 KB)
One way of achieving what you want would be to integrate XMLUI add-on to Vaadin Eclipse wysiwyg editor plugin as an additional tab. This would enable you to create UI visually (wysiwyg editor), in Java code or with XML. Round tripping to Java is already there and I think that such integration would be relatively easy to do. Instead of XML it would only save Java code.
One thing I would like to clarify: the XML layout editor in my mind shouldn’t use absolute layout. The Visual Editor (or any kind of VE) would be more appropriate for laying out an absolute structure.
My idea is to have something similar to Adobe’s Flex Builder MXML editor. You code your layout in XML and the Flex compiler compiles those XML layouts/codes into ActionScript. In MXML you can also write inline script as well. I don’t think it’s a good idea to do so though.
What I have done so far:
I have the rough version of the code generation ready. For now it is written in Groovy (bleh!). I also use the GMaven plugin so that Vaadin layout code generation is processed during the build cycle as well.
I create a XML schema so that if you use any decent XML editor (Eclipse!) you will get auto-completion/validation
I hope to show you guys the code generation code in a couple more days. It would be nice if I have time to also include a sample project to prove the concept.
Oh and I would love to have some contribution in the Eclipse plugin process. It’s just that I would need to learn how to create a plugin/VE first -_-
Code generation is always an intriguing topic, whether it’s a the Swing Visual Editor, Flex builder or Vaadin editor. I don’t remember who said this and the exact wording but it comes like this:
World class programmers write programs to generate other programs.
In this application, I use MVP to completely separate the view from presenter logic.
In resources you will find:
tabs.xml : the layout XML file representing the UI of the application
vaadin-builder.xsd : schema file, you could import this into Eclipse to get auto-completion
The model, view and presenter are in corresponding package. With the view, however, I have a class called “SampleViewImpl” which composed of the generated class “GridLayoutView”. The SampleViewImpl class inject behavior/data into the generated UI view. I think it’s cleaner to do it this way since you can have the freedom to modify the UI behaviors without touching the generated code.
There is a groovy folder which you can find the code generation logic. It read the XML layout file defined in the pom.xml
and generate source code. Please look at the tabs.xml XML file for more info.
To run the webapp:
mvn clean package
mvn jetty:run
The project consists of three parts: the visual designer (in the VisualDesigner subdirectory, implemented in Vaadin and often run with an embedded Jetty server), the Eclipse plugin (in the parent project: code generation, general Eclipse integration, …) and the model used to communicate between them (inside VisualDesigner).
? Waste of time?