Vaadin 7 for a page oriented Ajax Web application

[Gabriel11 (Gabriel Gruber)]

Hello Folks,

I am following the news and articles of Vaadin for quite a while and I am seriosly considering it to use it for extending an existing HR application built on various technologies like Hibernate, Spring, Apache Cocoon, Dojo, Jquery an so on. The idea to have a server-driven ajax framework which can be used by only writing java code seems very promising for us.
In our company we constantly stumble over technology pains of our webapp architecture, which includes learning a lot of different programming languages and technology constructs (java, XML, javascript, CSS, … and a lot of different frameworks)…

The issue with our existing application is that it is really huge and we can’t replace the existing UI (Apache Cocoon Forms + Dojo + Jquery + XSLT Transformations with MVP and MVC java constructs) with a completly new UI framework. So the idea is to build newer parts (which clearly are seperate units of UI) of the application using the Vaadin and maybe replacing old code over maintainance in the next years…

I noticed a reaonable change in the UI construct of vaadin. In Vaadin 7 it seems that by extending the UI class you get something similar to a traditional webpage. If you refresh it on the browser, its state is gone and you restart from scratch. (This is different to the behavior I observed on my first sample app with vaadin6). This is exactly the behavior I would expect

So my question is:

• Is it a reasonable strategy to pick different parts of this new application (like forms, views, etc.) and put them into small UIs, which are then embedded into the old application? What am talking about is to have an own servlet (with own context URL) for each part of the new application to be extracted, which then reacts on URL parameters passed (f.i. a Form for editing a person)
• I read in a recent forum thread that embedding vaadin7 in a another webpage by using the div-technique is not yet working. I have not yet tried it, but however: is that going to work again?

Another thing is that our old application is changing pages via Ajax. So it means that after loading the first page, no full page refresh will be done when switching to another webpage inside the application. XHTML snippets are loaded by Ajax and inserted into the DOM by a client side javascript. When I was experimenting with vaadin6.8 I noticed that this technique does not work, when the XHML snippets contains the code to embedd a vaading application. In order to correctly load the embedded vaading application I always had to make a full page refresh.
Is that behavior going to change?

And one last question: If we go the road with embedding “small vaadin apps” into our old application by embedding via the DIV-technique, will it be possible to react on URL-parameters which have been appended to the original webpage (which is part of our old application)?

Thanx in advance for your answers.

Gabriel Gruber
CEO, Workflow EDV GmbH Austria

[Leif (Leif Åstrand)]

@Gabriel Gruber

So my question is:

• Is it a reasonable strategy to pick different parts of this new application (like forms, views, etc.) and put them into small UIs, which are then embedded into the old application? What am talking about is to have an own servlet (with own context URL) for each part of the new application to be extracted, which then reacts on URL parameters passed (f.i. a Form for editing a person)

That should work in general, though the fact that you are changing pages using AJAX might make things slightly complicated. Because it’s a quite heavyweight operation to fully load a new Vaadin UI from scratch, I would instead suggest keeping Vaadin loaded in the browser all the time and just changing changing its contents when navigating to some part implemented using Vaadin and then hiding the div that Vaadin uses when navigating to some legacy part of your app that doesn’t use Vaadin.

• I read in a recent forum thread that embedding vaadin7 in a another webpage by using the div-technique is not yet working. I have not yet tried it, but however: is that going to work again?

Embedding Vaadin 7 into an existing DIV should be functional but I’m not currently aware of any documentation describing how to currently do it.

Another thing is that our old application is changing pages via Ajax. So it means that after loading the first page, no full page refresh will be done when switching to another webpage inside the application. XHTML snippets are loaded by Ajax and inserted into the DOM by a client side javascript. When I was experimenting with vaadin6.8 I noticed that this technique does not work, when the XHML snippets contains the code to embedd a vaading application. In order to correctly load the embedded vaading application I always had to make a full page refresh.
Is that behavior going to change?

Yes, this has been fixed for Vaadin 7.

And one last question: If we go the road with embedding “small vaadin apps” into our old application by embedding via the DIV-technique, will it be possible to react on URL-parameters which have been appended to the original webpage (which is part of our old application)?

The URI of the loaded page (i.e. the contents of the address bar in the browser) is available on the server through Page.getLocation(). Furthermore, the framework provides a way of reacting to changes to the URI fragment (the part after # which doesn’t cause the page to reload) through Page.addFragmentChangedListener.